教育平台项目前端：Vue.js 高级

Vue-cli

What is Vue-cli?

Vue cli 是基于 Vue 的应用开发提供的一个标准的脚手架工具，为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能。

Vue cli 背后集成了现代化开发的诸多功能，通过简单的命令就可以完成"零配置"的项目环境搭建。

安装 Vue-cli 步骤

在安装 vue-cli 前，要确认是否安装了 nodejs 和 npm。

Node.js

node.js：传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8；Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用 javascript 去编写一些服务端的程序，实现了用 javaScript 去开发 Apache PHP 以及 Java Servlet 所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份 js 程序就可以运行在前端和服务端，这样比一个应用使用多种语言在开发效率上要高。node.js 基于事件驱动机制，在特定领域性能出色，比如用 node.js 实现消息推送、状态监控等的业务功能非常合适。

下载安装 node.js：https://nodejs.org/en/download/

显示当前 node.js 的版本：

代码语言：javascript复制

node -v

NPM

npm：全称 Node Package Manager，他是 node 包管理和分发的工具，使用 NPM 可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具 maven 的依赖管理功能差不多，通过 NPM 可以很方便地下载 js 库，打包 js 文件。

安装 NPM：node.js 已经集成了 NPM 工具

查看当前 NPM 版本：

代码语言：javascript复制

npm -v

查看包管理路径

包路径就是 NPM 从远程下载的 js 包所存放的路径。查询NPM管理包路径（NPM 下载的依赖包所存放的路径）：

代码语言：javascript复制

npm config ls

设置包管理路径

为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，设置为自定义的包管理路径：

代码语言：javascript复制

npm config set prefix "E:nodejs_packagenpm_modules"
npm config set cache "E:nodejs_packagenpm_cache"

NPM 环境变量配置

添加新的系统变量: key=NODE_HOME，value=E:nodejs_package

Path 中添加 %NODE_HOME%npm_modules

安装 `cnpm`

NPM 默认会去国外的镜像去下载 js 包，在开发中通常使用国内镜像，这里使用淘宝镜像

代码语言：javascript复制

// 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 查看cnpm 的版本
cnpm -v

安装 Vue-cli

目前主流版本是 2.x 和 3.x 版本，安装 3.x 以上的版本是因为该版本既可以创建 2.x 项目与 3.x 项目。

以管理员身份打开命令行，执行安装命令：

代码语言：javascript复制

npm install -g @vue/cli

查看版本：

代码语言：javascript复制

vue -V

快速构建 Vue 项目

步骤说明

1. 创建一个空的文件夹 vueTest
2. 以管理员身份运行 cmd，进入到 vueTest 文件夹
3. 执行下面的命令（文件名不支持驼峰的大写字母，只能使用短横线方式）

代码语言：javascript复制

vue create my-project

1. 选择自定义安装，点击回车
2. 在列表中选择要安装的组件，使用空格键选择，选好后回车
3. 按回车之后，提示选择什么模式的路由，这里输入 n（表示选择 hash 模式）
4. 选择项目配置文件单独存放
5. 是否保存模板，选择 n 不创建
6. 进入项目目录：cd my-project
7. 启动项目：npm run serve
8. 访问项目: http://localhost:8080/
9. 停止项目：只要关闭命令行窗口就可以

导入 Vue 项目到 VS Code

1. VS Code 中右键选择打开文件夹
2. 选择桌面上的项目
3. 打开项目可以看到如下项目结构

代码语言：javascript复制

|--- my-project 项目名称
    |--- node_modules 存放依赖包的目录
    |--- public       静态资源管理目录
    |--- src          组件源码目录 (我们写的代码)
        |--- assets     存放静态图片资源 (CSS也可以放在这里)
        |--- components 业务上可复用的基础组件 (一个页面可以看做一个组件)
        |--- router     存放了项目路由文件
        |--- views      放置的为公共组件 (主要还是各个主要页面)
        |--- App.vue    可以当做是网站首页，是一个 vue 项目的主组件，页面入口文件
        |--- main.js    打包运行的入口文件，引入了vue 模块和 app.vue 组件以及路由 route
    |--- babel.config.js     Babel 配置文件, 对源代码进行转码 (把 es6 => es5)
    |--- package.json        项目及工具的依赖配置文件
    |--- paxkage-lock.json   依赖配置文件
    |--- README.md           项目说明

Vue 脚手架自定义配置

• package.json 介绍

每个项目的根目录下面都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

代码语言：javascript复制

{
    // 项目基本信息
    "name": "my-project1",
    "version": "0.1.0",
    "private": true,

    // 指定运行脚本命令
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },

    // 生产环境所依赖模块的版本
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0-0",
        "vue-router": "^4.0.0-0"
    },

    // 本地环境开发所依赖的版本
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0-0"
    }

    // 自定义配置
}

• 通过 package.json 配置项目

配置内容采用 JSON 格式，所有的内容都用双引号包裹

该配置设置打包时服务器相关的信息：port - 访问端口， open - 打包完成是否自动打开浏览器

代码语言：javascript复制

// 自定义配置  
"vue": {
    "devServer": {
        "port": "8888",
        "open": true
    }
}

注意：不推荐这种方式，因为 package.json 主要是用来管理包的配置信息。为了方便维护，将 Vue 脚手架相关的配置单独定义到 vue.config.js 配置文件中。

• 单独的配置文件配置项目

在项目的根目录创建文件 vue.config.js

删除掉 package.json 中新添加的配置项

在 vue.config.js 文件中进行相关配置：

代码语言：javascript复制

module.exports = {
   devServer:{
       open:true,
       port:
   }
}

Vue 组件化开发

组件化是 Vue 的精髓，Vue 项目就是由一个一个的组件构成的，我们主要的工作就是开发的组件。

用 vue-cli 脚手架搭建的项目里面有很多如 index.vue 或者 App.vue 这一类的文件。

每一个 .vue 文件都是一个组件 ，是一个自定义的文件类型，比如 App.vue 就是整个项目的根组件。

常见的组件：

• 页面级别的组件：通常是 views 目录下的 .vue 组件，是组成整个项目的各个主要页面 。
• 业务上可复用的基础组件：这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过 import 在各个页面中使用。

组件的组成部分：

• template：组件的 HTML 部分
• script：组件的 JS 脚本（使用 ES6 语法编写）
• style：组件的 CSS 样式

代码语言：javascript复制

<!--  template 代表 html 结构, template中的内容必须有且只有一个根元素编写页面静态部分，就是 view 部分 -->
<template>
<div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<!-- 编写 vue.js 代码 -->
<script>
    // 可以导入其组件
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    // 默认写法, 输出该组件
    export default {
        // 组件名称，用于以后路由跳转
        name: 'Home',
        // 当前组件中需要使用的数据
        data() {
            return {}
        },
        methods: {},
        components: {
            HelloWorld
        }
    }
</script>

<!-- scoped 表示当前的样式只作用与当前组件中的 template 视图 -->
<style scoped>
    /* 页面样式  加上scoped 表示样式就只在当前组件有效*/
</style>

项目运行流程

项目运行会加载入口文件 main.js

代码语言：javascript复制

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 关闭启动提示
Vue.config.productionTip = false

// 创建 Vue 实例：为整个项目添加路由，挂载的是 App.vue 组件中的 id 为 app 的区域
new Vue({
  router,
  // 这是一个函数 ES 6 语法，作用是生成模板：App = App.vue
  render: h => h(App)
}).$mount('#app')

App.vue 是 Vue 项目的主组件，是页面入口文件，所有页面都是在 App.vue 下进行切换的

代码语言：javascript复制

<template>
    <!-- 挂载的 div -->
    <div id="app">
        <div id="nav">
            <!-- 两个路由导航链接 -->
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>
        </div>
        <!-- 根据访问的路径渲染路径匹配到的视图组件 -->
        <router-view/>
    </div>
</template>

<style>
 ...
</style>

找到路由文件 router/index.js，来看一下具体的路由配置

代码语言：javascript复制

// 引入所需文件
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// 创建路由规则
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // 懒加载的方式引入组件
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
]

// 创建路由管理器，管理routes
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 导出模块，router 就代表了整个路由文件
export default router

默认访问的是 Home.vue 首页

代码语言：javascript复制

<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
    // 导入了一个组件 HelloWorld.vue
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'Home',
        components: {
            HelloWorld
        }
    }
</script>

HelloWorld.vue 组件页面

代码语言：javascript复制

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    ...
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 ...
</style>

组件的使用案例

创建 `Header.vue` 组件

在 components 目录下创建 Header.vue

编写 Header.vue：

代码语言：javascript复制

<template>
  <div class="header">{{msg}}</div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      msg: "This is a component named Header",
    };
  },
};
</script>

<style scoped>
.header {
  height: 100px;
  line-height: 100px;
  background-color: #eee;
  text-align: center;
  color: blue;
}
</style>

引入 Header 组件

修改 Home.vue：

代码语言：javascript复制

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Header />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Header from "@/components/Header.vue";

export default {
  name: "Home",
  components: {
    // HelloWorld
    Header,
  },
};
</script>

组件的传参

props：是组件中的属性，表示组件可以接受参数

修改 Header.vue：

代码语言：javascript复制

<script>
export default {
  name: "Header",
  props: {
    msg: String,
  },
};
</script>

修改 Home.vue：

代码语言：javascript复制

<Header msg="Testing"/>

Element-UI

Element-UI 介绍

Element-UI 是基于 Vue.js 的后台组件库，方便程序员进行页面快速布局和构建

Element-UI 官方站点：https://element.eleme.cn/#/zh-CN

Element-UI 使用

命令行方式安装

1. 创建 一个新的项目
2. 当前项目下打开终端，安装依赖包，执行下面的命令

代码语言：javascript复制

npm i element-ui -S

1. 打开 main.js，导入 Element-UI 相关资源。

代码语言：javascript复制

// main.js 是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter 等。

// 导入组件库
import ElementUI from 'element-ui'
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
// 配置 Vue 插件，将 El 安装到 Vue 上
Vue.use(ElementUI);

1. 复制 Element 按钮样式到 App.vue 文件的 template 下

代码语言：javascript复制

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

1. 启动项目 npm run serve 查看页面

Vue-CLI 工程改造

1. 删除 components 目录下的 HelloWord.vue 组件
2. 删除 App.vue 中的部分内容，只保留如下部分

代码语言：javascript复制

<template>
  <div id="app">
  </div>
</template>

<style>
</style>

1. 删除 router 文件下的路由文件 index.js 部分内容，只保留如下部分

代码语言：javascript复制

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = []

const router = new VueRouter({
  routes
})

export default router

1. 删除 views 目录下的 About.vue 与 Home.vue

安装使用 `axios`

npm 安装：使用 npm 下载 axios 包

代码语言：javascript复制

npm i axios

在 main.js 文件中导入 axios 相关资源

代码语言：javascript复制

// 引入axios
import axios from 'axios'

// Vue 对象使用 axios
Vue.prototype.axios = axios

用户登录界面制作

Dialog 对话框组件

从 Element-UI 的官网获取一个 Dialog 组件，用来制作一个登陆弹窗。

代码语言：javascript复制

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

创建 `login.vue` 组件

1. 在 components 下创建 login.vue
2. 将 Dialog 组件的内容，拷贝到 login.vue，进行修改：

代码语言：javascript复制

<template>
  <el-dialog title="登陆" :visible.sync="dialogFormVisible">
    <el-form>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">登 录</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: true,
      formLabelWidth: "120px",
    };
  },
};
</script>

<style scoped>
</style>

配置路由

代码语言：javascript复制

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/components/login.vue"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

修改 `App.vue`

代码语言：javascript复制

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
</style>

编写登录功能

去掉关闭按钮，添加一个属性 :show-close="false"

代码语言：javascript复制

<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">

修改登陆触发事件

代码语言：javascript复制

<el-button type="primary" @click="login">登录</el-button>

data 中定义数据

代码语言：javascript复制

data() {
    return {
        dialogFormVisible: true,
        formLabelWidth: "120px",
        user: {
            username: "",
            password: "",
        },
    };
},

使用 v-model，将视图与模型进行双向数据绑定

代码语言：javascript复制

<el-form>
    <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="user.username"></el-input>
    </el-form-item>
    <el-form-item label="用户密码" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="user.password"></el-input>
    </el-form-item>
</el-form>

在 Login.vue 中编写 login 方法

代码语言：javascript复制

methods: {
    login() {
        // 定义常量保存 url
        const url = "url";

        // 发送请求
        this.axios.get(url, {
            params: {
                username: this.user.username,
                password: this.user.password,
            },
        }).then((res) => {
            console.log(res);
            // 成功则将对话框关闭
            this.dialogFormVisible = false;
        }).catch((error => {
            // 出现错误使用 ElementUI 提供的消息提示
            this.$message.error("Login Error")
        }));
    },
},

Postman 搭建 mock server

Mock server 就是模拟一个服务器，使用 Mock server 可以模拟后台接口对请求进行响应。

在前后端分离的开发中前端利用 Mock server 模拟出对应接口，拿到返回数据来调试，无需等后端开发人员完成工作。

Postman 模拟出一个 server 步骤：

1. 新建选择 Mock Server
2. 填写访问路径，URL 由 Postman 生成；填写响应数据
3. 给 server 起名字

修改 Login.vue 的 login 方法的 URL 为新建服务器的 URL。

登录成功后跳转

在 js 中设置跳转，常用的一种方法是 this.$router.push

代码语言：javascript复制

// 发送请求
this.axios.get(url, {
    params: {
        username: this.user.username,
        password: this.user.password,
    },
}).then((res) => {
    // console.log(res);
    // 成功则将对话框关闭
    this.dialogFormVisible = false;

    // 跳转页面：使用路由，$router 对象中的 push 方法
    this.$router.push('/index');
}).catch((error => {
    // 出现错误使用 ElementUI 提供的消息提示
    this.$message.error("Login Error")
}));

首页布局页面制作

创建 `index.vue`

代码语言：javascript复制

<template>
  <div>
      <el-button type="danger">布局页面</el-button>
  </div>  
</template>

<script>
export default {

};
</script>

<style scoped>
</style>

配置路由

router 目录下的 index.js 路由文件

代码语言：javascript复制

// 导入布局组件
import Index from "@/components/Index.vue"

...
// 布局路由
  {
    path: '/index',
    name: 'index',
    component: Index
  }
...

布局容器

Container 布局容器是用于布局的容器组件，方便快速搭建页面的基本结构。

在官方文档中找到布局的容器代码，复制到 Index.vue

代码语言：javascript复制

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">Aside</el-aside>
        <!-- 主要区域 -->
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.el-container {
  height: 725px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

拷贝布局容器中的导航菜单代码，进行修改，代码如下

代码语言：javascript复制

<template>
  <div>
    <el-container>
      <el-header>后台管理</el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#d3dce6">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航菜单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <i class="el-icon-menu"></i>
                  <span>课程管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主要区域 -->
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.el-container {
  height: 725px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 30px;
}
</style>

课程列表组件制作

当点击导航菜单中的课程管理时要显示课程信息

编写 `Course.vue`

代码语言：javascript复制

<template>
  <el-button type="danger">课程信息</el-button>
</template>

<script>
export default {};
</script>

<style scoped>
</style>

配置路由

在 index.js 路由文件中为 index 路由添加 children 属性表示子路由

代码语言：javascript复制

 // 引入课程组件
import Course from "@/components/Course.vue"

// index 路由
...
  {
    path: "/index",
    name: "index",
    component: Index,
    // 添加子路由
    children: [
      // 课程信息子路由
      {
        path: "/course",
        name: "course",
        component: Course
      }
    ]
  }
...

修改 Index.vue 组件中的导航菜单属性

router 表示是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

代码语言：javascript复制

<!-- 添加一个 router 属性 -->
<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#d3dce6" router >

为 index 属性指定路由

代码语言：javascript复制

<el-menu-item-group>
    <!-- 修改 index的路由地址 -->
    <el-menu-item index="/course">
        <i class="el-icon-menu"></i>课程管理
    </el-menu-item>
</el-menu-item-group>

设置路由的出口，将课程信息展示在 main 范围内

代码语言：javascript复制

<!-- 主要区域 -->
<el-main>
    <router-view></router-view>
</el-main>

Table 表格组件

通过 table 组件来实现一个课程页面展示的功能，通过查看 Element-UI 库，找到 Table 组件，拷贝源代码到 Vue 页面中

添加表格组件

复制表格组件相关的代码到 Course.vue 中

查看一下 Element UI 的表格的代码，分析一下表格数据是如何显示的

代码语言：javascript复制

// 视图部分进行页面展示
<template>
<el-button type="danger">
    // el-table 组件绑定了 tableData 数据
    <el-table :data="tableData" stripe style="width: 100%">
        // el-table-column 表示表格的每列，prop 属性与模型数据中的 key 对应，label 是列名
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    </el-button>
</template>

<script>
    // export default 相当于提供一个接口给外界，让其他文件通过 import 来引入使用。
    export default {
        // data() 函数
        data() {
            return {
                // 数据部分
                tableData: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄",
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄",
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄",
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄",
                    },
                ],
            };
        },
    };
</script>

<style scoped>
</style>

课程内容展示

修改 `Course.vue`

编写 template，复制 Element UI 的示例代码进行改动

代码语言：javascript复制

<template>
  <el-table
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-spinner="el-icon-loading"
    element-loading-text="拼命加载中..."
    :data="courseList"
    stripe
    style="width: 100%"
  >
    <el-table-column fixed="left" prop="id" label="ID"></el-table-column>
    <el-table-column prop="course_name" label="课程名称"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column prop="sort_num" label="排序"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
  </el-table>
</template>

编写 Course.vue 的 View Model 部分代码

代码语言：javascript复制

<script>
export default {
  data() {
    return {
      // 是否弹出加载提示
      loading: false,
      // 定义集合,保存从接口获取的参数
      courseList: [],
    };
  },

  // 钩子函数，在 DOM 页面生成之前执行
  created() {
    // 在页面生成之前, 调用 loadCourse
    this.loadCourse();
  },

  methods: {
    loadCourse() {
      // 开启加载动画
      this.loading = true;

      // 访问后台接口，获取数据并返回
      return this.axios
        .get(
          "http://localhost:8080/lagou_edu_home/course?methodName=findCourseList"
        )
        .then((res) => {
          console.log(res.data);
          // 将获取到的数据赋值给 courseList
          this.courseList = res.data;
          // 取消加载动画
          this.loading = false;
        })
        .catch((error) => {
          // 出现错误使用 ElementUI 提供的消息提示
          this.$message.error("Login Error");
        });
    },
  },
};
</script>

跨域问题解决

在前端项目中，向后端发送请求的获取课程数据的时候，出现了跨域问题：

代码语言：javascript复制

Access to XMLHttpRequest at 'http://localhost:8080/lagou_edu_home/course?
methodName=findCourseList' from origin 'http://localhost:8088' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the 
requested resource.

已拦截跨源请求：同源策略禁止读取位于 http://localhost:/lagou_edu_home/course?methodName=findCourseList 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

跨域是指通过 JS 在不同的域之间进行数据传输或通信，比如用 Ajax 向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域，然后浏览器就不允许跨域请求。

解决跨域问题：跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数，提供跨域访问的允许策略。

设置响应头中的参数来允许跨域域请求：

• Access-Control-Allow-Credentials
• Access-Control-Allow-Origin 标识允许跨域的请求

在 POM 文件中引入依赖：

代码语言：javascript复制

<!-- 解决跨域问题所需依赖 -->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

在 web.xml 中 配置跨域 filter：

代码语言：javascript复制

<!--配置跨域过滤器-->
<filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

再次查询：解决跨域问题之后页面显示数据

条件查询

Element UI 输入框组件

Input 输入框通过鼠标或键盘输入字符

代码语言：javascript复制

<el-input v-model="input" placeholder="请输入内容"></el-input>

Course.vue 添加输入框

代码语言：javascript复制

<template>
  <div>
    <!-- 条件查询 -->
    <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="input" clearable></el-input>
    <!-- 表单显示... -->
  </div>
</template>

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

通过 row 和 col 组件的 span 属性就可以自由地组合布局。

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

代码语言：javascript复制

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

使用分隔栏分隔查询条件

代码语言：javascript复制

<!-- 条件查询 -->
<el-row :gutter="20">
    <el-col :span="6">
        <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="input" clearable></el-input>
    </el-col>
</el-row>

添加一个按钮

代码语言：javascript复制

<el-row :gutter="20">
    <el-col :span="6">
        <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="input" clearable></el-input>
    </el-col>
    <el-col :span="1">
        <el-button type="primary">点击查询</el-button>
    </el-col>
</el-row>

完成根据课程名查询

Model 模型

代码语言：javascript复制

data() {
    return {
        // 是否弹出加载提示
        loading: false,
        // 定义集合,保存从接口获取的参数
        courseList: [],
        // 查询条件
        filter: { course_name: "" },
    };
},

View 视图

代码语言：javascript复制

<el-input
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
          v-model="filter.course_name"
          clearable
          ></el-input>

设置点击事件

代码语言：javascript复制

<el-button type="primary" @click="search">点击查询</el-button>

methods 中添加方法

代码语言：javascript复制

search() {
    // 开启加载提示
    this.loading = true;

    // 发送请求
    return this.axios
        .get("http://localhost:8080/lagou_edu_home/course", {
        // 携带参数
        params: {
            methodName: "findByCourseNameAndStatus",
            course_name: this.filter.course_name,
        },
    })
        .then((res) => {
        console.log(res);
        this.courseList = res.data;
        //关闭加载
        this.loading = false;
    })
        .catch((error) => {
        this.$message.error("获取数据失败!");
    });
},

vue.js elementui node.js npm json

0 人点赞