Vue-cliWhat is Vue-cli?
Vue cli 是基于 Vue 的运用开拓供应的一个标准的脚手架工具，为运用搭建根本的框架构造，供应插件、开拓做事、Preset、构建打包功能。
Vue cli 背后集成了当代化开拓的诸多功能，通过大略的命令就可以完成"零配置"的项目环境搭建。
在安装 vue-cli 前，要确认是否安装了 nodejs 和 npm。
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 -vNPM
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
安装 cnpmNPM 默认会去国外的镜像去下载 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 CodeVS 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.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，来看一下详细的路由配置
HelloWorld.vue 组件页面 在 components 目录下创建 Header.vue 编写 Header.vue： 修正 Home.vue： props： 是组件中的属性，表示组件可以接管参数 修正 Header.vue： 修正 Home.vue： Element-UI 是基于 Vue.js 的后台组件库，方便程序员进行页面快速布局和构建 Element-UI 官方站点：https://element.eleme.cn/#/zh-CN npm 安装：利用 npm 下载 axios 包 在 main.js 文件中导入 axios 干系资源 从 Element-UI 的官网获取一个 Dialog 组件，用来制作一个上岸弹窗。 去掉关闭按钮，添加一个属性 :show-close="false" 修正上岸触发事宜 data 中定义数据 利用 v-model，将视图与模型进行双向数据绑定 在 Login.vue 中编写 login 方法 Mock server 便是仿照一个做事器，利用 Mock server 可以仿照后台接口对要求进行相应。 在前后端分离的开拓中前端利用 Mock server 仿照出对应接口，拿到返回数据来调试，无需等后端开拓职员完成事情。 Postman 仿照出一个 server 步骤： 修正 Login.vue 的 login 方法的 URL 为新建做事器的 URL。 在 js 中设置跳转，常用的一种方法是 this.$router.push router 目录下的 index.js 路由文件 Container 布局容器是用于布局的容器组件，方便快速搭建页面的基本构造。 在官方文档中找到布局的容器代码，复制到 Index.vue 拷贝布局容器中的导航菜单代码，进行修正，代码如下 当点击导航菜单中的课程管理时要显示课程信息 在 index.js 路由文件中为 index 路由添加 children 属性表示子路由 修正 Index.vue 组件中的导航菜单属性 router 表示是否利用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 为 index 属性指定路由 设置路由的出口，将课程信息展示在 main 范围内 通过 table 组件来实现一个课程页面展示的功能，通过查看 Element-UI 库，找到 Table 组件，拷贝源代码到 Vue 页面中 复制表格组件干系的代码到 Course.vue 中 查看一下 Element UI 的表格的代码，剖析一下表格数据是如何显示的 编写 template，复制 Element UI 的示例代码进行改动 编写 Course.vue 的 View Model 部分代码 在前端项目中，向后端发送要求的获取课程数据的时候，涌现了跨域问题： 跨域是指通过 JS 在不同的域之间进行数据传输或通信，比如用 Ajax 向一个不同的域要求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域，然后浏览器就不许可跨域要求。 办理跨域问题：跨域的许可紧张由做事器端掌握。做事器端通过在相应的 header 中设置 Access-Control-Allow-Origin 及干系一系列参数，供应跨域访问的许可策略。 设置相应头中的参数来许可跨域域要求： 在 POM 文件中引入依赖： 在 web.xml 中 配置跨域 filter： 再次查询：办理跨域问题之后页面显示数据 Input 输入框通过鼠标或键盘输入字符 Course.vue 添加输入框 通过根本的 24 分栏，迅速简便地创建布局。 通过 row 和 col 组件的 span 属性就可以自由地组合布局。 Row 组件 供应 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。 利用分隔栏分隔查询条件 添加一个按钮 Model 模型 View 视图 设置点击事宜 methods 中添加方法 想理解更多，欢迎关注我的微信公众号：Renda_Zhang// 引入所需文件import { createRouter, createWebHashHistory } from 'vue-router'import Home from '../views/Home.vue'// 创建路由规则const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // <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><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 组件<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 组件<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>组件的传参<script>export default { name: "Header", props: { msg: String, },};</script><Header msg="Testing"/>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安装利用 axiosnpm i axios// 引入axiosimport axios from 'axios'// Vue 工具利用 axiosVue.prototype.axios = axios用户登录界面制作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>编写登录功能<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible"><el-button type="primary" @click="login">登录</el-button>data() { return { dialogFormVisible: true, formLabelWidth: "120px", user: { username: "", password: "", }, };},<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>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// 发送要求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>配置路由// 导入布局组件import Index from "@/components/Index.vue"...// 布局路由 { path: '/index', name: 'index', component: Index }...布局容器<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>课程列表组件制作<template> <el-button type="danger">课程信息</el-button></template><script>export default {};</script><style scoped></style>配置路由// 引入课程组件import Course from "@/components/Course.vue"// index 路由... { path: "/index", name: "index", component: Index, // 添加子路由 children: [ // 课程信息子路由 { path: "/course", name: "course", component: Course } ] }...<!-- 添加一个 router 属性 --><el-menu default-active="2" class="el-menu-vertical-demo" background-color="#d3dce6" router ><el-menu-item-group> <!-- 修正 index的路由地址 --> <el-menu-item index="/course"> <i class="el-icon-menu"></i>课程管理 </el-menu-item></el-menu-item-group><!-- 紧张区域 --><el-main> <router-view></router-view></el-main>Table 表格组件// 视图部分进行页面展示<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> <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><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'）。<!-- 办理跨域问题所需依赖 --><dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.5</version></dependency><!--配置跨域过滤器--><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><el-input v-model="input" placeholder="请输入内容"></el-input><template> <div> <!-- 条件查询 --> <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="input" clearable></el-input> <!-- 表单显示... --> </div></template>Layout 布局<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>完成根据课程名查询data() { return { // 是否弹出加载提示 loading: false, // 定义凑集,保存从接口获取的参数 courseList: [], // 查询条件 filter: { course_name: "" }, };},<el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="filter.course_name" clearable ></el-input><el-button type="primary" @click="search">点击查询</el-button>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("获取数据失落败!"); });},
