教育平台项目前端：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 的版本：

node -v

NPM

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

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

查看当前 NPM 版本：

npm -v

查看包管理路径

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

npm config ls

设置包管理路径

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

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 包，在开发中通常使用国内镜像，这里使用淘宝镜像

// 安装
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 项目。

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

npm install -g @vue/cli

查看版本：

vue -V

快速构建 Vue 项目

步骤说明

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

vue create my-project

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

导入 Vue 项目到 VS Code

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

|--- 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 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
    // 项目基本信息
    "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 - 打包完成是否自动打开浏览器

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

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

单独的配置文件配置项目

在项目的根目录创建文件 vue.conﬁg.js

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

在 vue.conﬁg.js 文件中进行相关配置：

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 样式

<!--  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

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 下进行切换的

<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，来看一下具体的路由配置

// 引入所需文件
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 首页

<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 组件页面

<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：

<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：

<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：

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

修改 Home.vue：

<Header msg="Testing"/>

Element-UI

Element-UI 介绍

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

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

Element-UI 使用

命令行方式安装

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

npm i element-ui -S

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

// 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);

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

<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>

启动项目 npm run serve 查看页面

Vue-CLI 工程改造

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

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

<style>
</style>

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

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

Vue.use(VueRouter)

  const routes = []

const router = new VueRouter({
  routes
})

export default router

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

安装使用 `axios`

npm 安装：使用 npm 下载 axios 包

npm i axios

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

// 引入axios
import axios from 'axios'

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

用户登录界面制作

Dialog 对话框组件

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

<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` 组件

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

<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>

配置路由

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`

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

<style>
</style>

编写登录功能

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

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

修改登陆触发事件

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

data 中定义数据

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

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

<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 方法

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 步骤：

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

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

登录成功后跳转

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

// 发送请求
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`

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

<script>
export default {

};
</script>

<style scoped>
</style>

配置路由

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

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

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

布局容器

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

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

<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>

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

<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`

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

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

<style scoped>
</style>

配置路由

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

 // 引入课程组件
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 进行路由跳转

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

为 index 属性指定路由

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

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

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

Table 表格组件

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

添加表格组件

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

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

// 视图部分进行页面展示
<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 的示例代码进行改动

<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 部分代码

<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>

跨域问题解决

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

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 文件中引入依赖：

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

在 web.xml 中配置跨域 filter：

<!--配置跨域过滤器-->
<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 输入框通过鼠标或键盘输入字符

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

Course.vue 添加输入框

<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。

<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>

使用分隔栏分隔查询条件

<!-- 条件查询 -->
<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>

添加一个按钮

<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 模型

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

View 视图

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

设置点击事件

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

methods 中添加方法

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("获取数据失败!");
    });
},