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_package\npm_modules"npm config set cache "E:\nodejs_package\npm_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 项目

步骤说明

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

vue create my-project

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

导入 Vue 项目到 VS Code

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

|--- 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.config.js 配置文件中。

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

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

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

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

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

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')    }]​// 创建路由管理器，管理routesconst 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 使用

命令行方式安装

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

npm i element-ui -S

3. 打开 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);

4. 复制 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>

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

Vue-CLI 工程改造

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

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

3. 删除 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

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

安装使用 axios

npm 安装：使用 npm 下载 axios 包

npm i axios

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

// 引入axiosimport axios from 'axios'​// Vue 对象使用 axiosVue.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 组件

0. 在 components 下创建 login.vue
1. 将 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 步骤：

0. 新建选择 Mock Server
1. 填写访问路径，URL 由 Postman 生成；填写响应数据
2. 给 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:8080/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("获取数据失败!");    });},

想了解更多，欢迎关注我的微信公众号：Renda_Zhang