复习

  1. 熟悉ElementUI
    1. 前后端通信
    2. formatter 绑定函数
    3. 日期处理
    4. 分页
  2. js发展
    1. 服务端、桌面端、web端、app端
    2. nodejs js运行时环境，脱离web浏览器运行js
    3. js现代工具链
      1. nodejs
      2. npm 包管理器，管理依赖
      3. webpack 打包工具，构建工具
    4. 现代前端技术
      1. pug
      2. sass / less
      3. coffeescript / typescript
  3. npm命令
    1. npm -v
    2. npm init 创建一个node项目
    3. npm install 安装一个依赖 -g 全局安装
    4. npm run 运行指令
  4. package.json文件 类似于maven中的pom.xml
    1. 坐标
    2. 依赖
    3. 脚本命令 serve
  5. vue-cli 脚手架工具
    • vue create / vue ui

解析脚手架项目

node_modules node下载的依赖
public
src 源码

  • assets 图片等资源
  • components 组件
  • router 路由配置
  • views 视图，界面
  • App.vue 应用的容器
  • main.js 整个项目的入口 ```javascript //从vue依赖包当中导入Vue对象 import Vue from ‘vue’ //导入一个组件App import App from ‘./App.vue’ //导入vue-router,路由器 import router from ‘./router’

//关闭生产环境 Vue.config.productionTip = false

//实例化vue new Vue({ router, //引入路由器 render: h => h(App)//渲染App组件 }) .$mount(‘#app’)//挂载到App组件内部id为app的元素上

  1. package.json 项目管理文件
  3. 约定：<br />在文件夹下的index.js, 当引入文件夹时，默认读取index.js
  5. <a name="pAMB6"></a>
  6. ## 包
  7. js内部，封装多个方法或者类的一个工具，类似于java包<br />在包内部，导出数据和方法
  8. ```javascript
  9. function helloPlus(){
  10.     hello();
  11. }
  13. function hello(){
  14.     alert('123');
  15. }
  17. //导出的内容
  18. export default {
  19.     delta : 1.99,
  20.     sayHello: helloPlus
  21. }

需要使用时，引入

  1. import a from './a.js'
  3. a.sayHello();

单文件组件 .vue文件

before : 

  1.  Vue.component('todo-item',{
  2.         template:`<li style="list-style:none">
  3.             <input type="checkbox" name="" v-model="todo.state" id="">
  4.             <span contenteditable @keydown.esc='handleCancel' @focus="save" @blur='handleChange' >{{todo.text}}</span>
  5.             <span style='color:red;cursor:pointer' @click='del(todo)'>x</span>
  6.             </li>`,//html的内容
  7.         props:['todo'],//属性,
  8.         data:function(){
  9.             return {
  10.                 prev:this.todo.text
  11.             }
  12.         },
  13.         methods:{
  14.             del(todo){
  15.                 this.$emit("del",todo);//（1）在组件内触发一个自定义的事件，名为del，事件对象（事件内容）todo
  16.             },
  17.             handleChange(e){
  18.                 console.log("changing:"+this.prev +" canceled:"+this.canceled)
  19.                 this.todo.text=e.target.innerText;
  20.             },
  21.             handleCancel(e){
  22.                 console.log("cancel:"+this.prev)
  23.                 this.todo.text=this.prev;
  24.                 e.target.innerText=this.prev;
  25.                 e.target.blur();
  26.             },
  27.             save(){
  28.                 console.log("saving:"+this.todo.text)
  29.                 this.prev=this.todo.text
  30.             }
  31.         },
  32.         mounted(){
  34.         }
  35.     });

after:
2021年6月25日Vue5 - 图1
现在我们获得：

一个 .vue 文件,就是一个组件

vue-router 路由器

单页面应用 Single Page Application SPA
不切换页面的情况下更新内容，极佳的用户体验，类似于App的使用体验，成为潮流
map.baidu.com
juejin.im
image.png
实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  19.         <!-- 路由出口 -->
  20.         <!-- 路由匹配到的组件将渲染在这里 -->
  21.         <router-view></router-view>
  24.     </div>
  27.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  28.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  29.     <script>
  30.         //1. 定义两个组件
  31.         let index = Vue.component('index',{
  32.             template:'<div><h1>首页</h1></div>'
  33.         });
  34.         let center = Vue.component('center',{
  35.             template:'<div><h1>个人中心</h1></div>'
  36.         });
  38.         //2. 定义路径与组件之间的映射关系
  39.         const routes=[
  40.             {path:'/idx',component:index},
  41.             {path:'/ctr',component:center}
  42.         ]
  44.         //3. 创建路由对象
  45.         const router =  new VueRouter({routes});
  47.         //4.将路由对象设置到Vue实例中，使之生效
  48.         new Vue({
  49.             router
  50.         }).$mount('#app');
  51.     </script>
  52. </body>
  53. </html>

动态路由

根据路径动态匹配组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  18.         <router-link to='/product/bottle'>产品介绍</router-link>
  20.         <!-- 路由出口 -->
  21.         <!-- 路由匹配到的组件将渲染在这里 -->
  22.         <router-view></router-view>
  25.     </div>
  28.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  29.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  30.     <script>
  31.         //1. 定义两个组件
  32.         let index = Vue.component('index',{
  33.             template:'<div><h1>首页</h1></div>'
  34.         });
  35.         let center = Vue.component('center',{
  36.             template:'<div><h1>个人中心</h1></div>'
  37.         });
  38.         let product = Vue.component('product',{
  39.             template:'<div><h1>产品介绍：{{$route.params.productName}}</h1></div>'
  40.         });
  42.         //2. 定义路径与组件之间的映射关系
  43.         const routes=[
  44.             {path:'/idx',component:index},
  45.             {path:'/ctr',component:center},
  46.             {path:'/product/:productName',component:product}
  47.         ]
  49.         //3. 创建路由对象
  50.         const router =  new VueRouter({routes});
  52.         //4.将路由对象设置到Vue实例中，使之生效
  53.         new Vue({
  54.             router
  55.         }).$mount('#app');
  56.     </script>
  57. </body>
  58. </html>

嵌套路由

在组件内部存在路由链接及路由视图
在routes路由表中使用children表示嵌套的路由关系

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  19.         <!-- 路由出口 -->
  20.         <!-- 路由匹配到的组件将渲染在这里 -->
  21.         <router-view></router-view>
  24.     </div>
  27.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  28.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  29.     <script>
  30.         //1. 定义两个组件
  31.         let index = Vue.component('index',{
  32.             template:'<div><h1>首页</h1></div>'
  33.         });
  34.         let center = Vue.component('center',{
  35.             template:`<div>
  36.                 <h1>个人中心</h1>
  37.                 <!-- 嵌套路由的链接 -->
  38.                 <router-link to='/center/intro'>intro</router-link>
  39.                 <router-link to='/center/modify'>modify</router-link>
  40.                 <!-- 嵌套路由的出口 -->
  41.                 <router-view></router-view>
  42.                 </div>`
  43.         });
  45.         //嵌套路由的组件
  46.         let intro = Vue.component('intro',{
  47.             template:`<h2>个人介绍：大帅哥一个</h2>`
  48.         })
  49.         let modify = Vue.component('modify',{
  50.             template:`<h2>修改个人信息</h2>`
  51.         })
  53.         //2. 定义路径与组件之间的映射关系
  54.         const routes=[
  55.             {path:'/idx',component:index},
  56.             {
  57.                 path:'/ctr',
  58.                 component:center,
  59.                 children:[
  60.                     {path:'/center/intro', component: intro},
  61.                     {path:'/center/modify', component: modify}
  62.                 ]
  63.             },
  64.         ]
  66.         //3. 创建路由对象
  67.         const router =  new VueRouter({routes});
  69.         //4.将路由对象设置到Vue实例中，使之生效
  70.         new Vue({
  71.             router
  72.         }).$mount('#app');
  73.     </script>
  74. </body>
  75. </html>

编程式路由导航

调用this.$router.push方法进行跳转

  • 直接传链接

  • 传对象 ```html <!DOCTYPE html> 

    1.   <!-- 使用 router-link 组件来导航. -->
    2.   <!-- 通过传入 `to` 属性指定链接. -->
    3.   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    4.   <router-link to='/login'>登录</router-link>
    5.   <router-link to='/reg'>注册</router-link>
    7.   <!-- 路由出口 -->
    8.   <!-- 路由匹配到的组件将渲染在这里 -->
    9.   <router-view></router-view>
  1. </div>
  4. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  5. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  6. <script>
  7.     //1. 定义两个组件
  8.     let reg = Vue.component('reg',{
  9.         template:`
  10.         <div>
  11.             <h1>注册</h1>
  12.             <input type="text" v-model='regForm.username' id="">
  13.             <input type="password" v-model='regForm.password' id=""> 
  14.             <button @click='doReg'>注册</button>
  15.         </div>`,
  16.         data(){
  17.             return{
  18.                 regForm:{
  19.                     username:'',
  20.                     password:''
  21.                 }
  22.             }
  23.         },
  24.         methods:{
  25.             doReg(){
  26.                 console.log(this.regForm);
  27.                 alert('注册成功');
  29.                 console.log(this.$router);
  30.                 // this.$router.push('/login'); //直接传链接
  31.                 this.$router.push({path:'/login',query:{username:'zhangsan'}});//传对象
  32.             }
  33.         }
  34.     });
  36.     let login = Vue.component('login',{
  37.         template:'<div><h1>登录 {{$route.query.username}}</h1></div>'
  38.     });
  41.     //2. 定义路径与组件之间的映射关系
  42.     const routes=[
  43.         {path:'/login',component:login},
  44.         {path:'/reg',component:reg}
  45.     ]
  47.     //3. 创建路由对象
  48.     const router =  new VueRouter({routes});
  50.     //4.将路由对象设置到Vue实例中，使之生效
  51.     new Vue({
  52.         router
  53.     }).$mount('#app');
  54. </script>

  1. <a name="AvJBr"></a>
  2. ### 路由守卫
  3. 在跳转过程中检查是否有权限跳转到目标链接<br />全局：前置守卫、解析守卫、后置钩子<br />局部：单个路由内部、组件内部<br />完整的导航流程 ： [https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B)
  5. ```javascript
  6.  //添加全局的前置守卫
  7. router.beforeEach((to,from,next)=>{
  8.   if(to.path=='/reg'){
  9.     alert("目前尚未开放注册！")
  10.     return;
  11.   }
  13.   //放行
  14.   next();
  15. });

路由的参数：
每个守卫方法接收三个参数：

  • **to: Route**: 即将要进入的目标 路由对象
  • **from: Route**: 当前导航正要离开的路由
  • **next: Function**: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
    • **next()**: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    • **next(false)**: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • **next('/')** 或者 **next({ path: '/' })**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 [router-link](https://router.vuejs.org/zh/api/#to) 的 [to](https://router.vuejs.org/zh/api/#to) prop 或 [router.push](https://router.vuejs.org/zh/api/#router-push) 中的选项。
    • **next(error)**: (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 [router.onError()](https://router.vuejs.org/zh/api/#router-onerror) 注册过的回调。

代码

main.js

  • 实例化Vue
  • 挂载到App.vue
  • 导入router文件夹 引入了vue-router

App.vue

  • 页面骨架 router-link 、 router-view

router文件夹 index.js

  • 配置路由器，提供了路由表 （路径 和 组件映射）
  • 根据路由表将多个组件组织起来
  • / => Home
    • Home.vue
      • 引入了HelloWorld组件（import Helloworld ； 在 组件的实例中使用 components注册）

image.png

开发一个页面

  1. 编写页面 ```vue 
  2. 2. 在 App.vue增加链接
  3. ```vue
  4.    <router-link to="/">Home</router-link> |
  5.       <router-link to="/about">About</router-link> |
  6.   >>>>>    <router-link to="/center">个人中心</router-link>
  1. 在router/index.js中配置路径映

image.png

使用axios

  1. 在项目根目录（package.json所在目录）下 npm add axios (本质是在package.json中添加axios依赖，并执行install拉取)
  2. 在main.js中引入并绑定到vue上 ```javascript import axios from ‘axios’

//定制axios 具体可以定制的选项，参考https://www.kancloud.cn/yunye/axios/234845 请求配置一节 var instance = axios.create({ baseURL: ‘http://localhost:8000‘, timeout: 1000 }); //将axios绑定到Vue上，全局变量 Vue.prototype.$http=instance;

  2. 3. 在其他组件即可使用
  3. ```json
  4.  this.$http.get("/getPersonInfo",{
  5.             params:{
  6.                 id:1
  7.             }
  8.         }).then(resp=>{
  9.             if(resp.status==200&&resp.data.success){
  10.                 this.person=resp.data.data;
  11.             }
  12.         }).catch(error=>{
  13.             console.error("加载出错",error);
  14.         })

如果报依赖缺失,执行 cnpm install 

  1. These dependencies were not found:
  3. * core-js/modules/es.object.to-string.js in ./src/router/index.js
  4. * core-js/modules/es.string.iterator.js in ./src/router/index.js
  5. * core-js/modules/web.dom-collections.iterator.js in ./src/router/index.js

使用elementUI

  1. 添加依赖 cnpm i element-ui -S
  2. 在main.js中启用element ```javascript //引入element import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

  2. 3. 使用elementUI
  3. ```vue
  4. <template>
  5.   <div class="about">
  6.     <el-container>
  8.         <el-header>
  9.         <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
  10.             <el-menu-item index="1">处理中心</el-menu-item>
  11.             <el-submenu index="2">
  12.                 <template slot="title">我的工作台</template>
  13.                 <el-menu-item index="2-1">选项1</el-menu-item>
  14.                 <el-menu-item index="2-2">选项2</el-menu-item>
  15.                 <el-menu-item index="2-3">选项3</el-menu-item>
  16.                 <el-submenu index="2-4">
  17.                     <template slot="title">选项4</template>
  18.                     <el-menu-item index="2-4-1">选项1</el-menu-item>
  19.                     <el-menu-item index="2-4-2">选项2</el-menu-item>
  20.                     <el-menu-item index="2-4-3">选项3</el-menu-item>
  21.                 </el-submenu>
  22.             </el-submenu>
  23.             <el-menu-item index="3" disabled>消息中心</el-menu-item>
  24.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  25.         </el-menu>
  26.     </el-header>
  27.         <el-main>
  28.             <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  29.                 <el-form-item label="教师姓名">
  30.                     <el-input v-model="searchForm.teacherName" placeholder="教师姓名"></el-input>
  31.                 </el-form-item>
  32.                 <el-form-item label="审核状态">
  33.                     <el-select clearable  v-model="searchForm.state" placeholder="审核状态">
  34.                         <el-option label="待审核" value="wait"></el-option>
  35.                         <el-option label="审核通过" value="normal"></el-option>
  36.                         <el-option label="审核失败" value="fail"></el-option>
  37.                     </el-select>
  38.                 </el-form-item>
  39.                 <el-form-item>
  40.                     <el-button type="primary" @click="search">查询</el-button>
  41.                     <el-button type="success" @click="addTeacherDialogVisible=true" icon="el-icon-plus" circle></el-button>
  43.                 </el-form-item>
  44.             </el-form>
  45.             <el-row>
  46.                 <el-col >
  47.                     <el-table
  48.                     :data="tableData"
  49.                     style="width: 100%">
  50.                         <el-table-column
  51.                             prop="teacherId"
  52.                             label="教师ID"
  53.                             width="180">
  54.                         </el-table-column>
  55.                         <el-table-column
  56.                             prop="teacherName"
  57.                             label="教师姓名"
  58.                             width="180">
  59.                         </el-table-column>
  60.                         <!-- 格式化器 -->
  61.                         <el-table-column
  62.                             prop="state"
  63.                             :formatter="stateFormatter"
  64.                             label="状态">
  65.                         </el-table-column>
  66.                         <el-table-column
  67.                             prop="email"
  68.                             label="邮箱">
  69.                         </el-table-column>
  70.                         <el-table-column
  71.                             label="操作">
  72.                             <template slot-scope='scope'>
  73.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,true)" type="text" size="small">审核通过</el-button>
  74.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,false)" type="text" size="small">审核失败</el-button>
  75.                                 <el-button v-if='scope.row.state=="normal"' @click="fire(scope.row)" type="text" size="small">开除</el-button>
  76.                                 <el-button v-if='scope.row.state=="normal"' @click="modifyTeacher(scope.row)" type="text" size="small">修改</el-button>
  77.                             </template>
  78.                         </el-table-column>
  79.                     </el-table>
  81.                     <el-pagination
  82.                     background
  83.                     layout="prev, pager, next,sizes"
  84.                     :total="page.total"
  85.                     :current-page='page.current'
  86.                     :page-size='page.size'
  87.                     @current-change='search'
  88.                     >
  89.                     </el-pagination>
  91.                 </el-col>
  92.             </el-row>
  93. </el-main>
  94. </el-container>
  95.     <el-dialog title="新增讲师" :visible.sync="addTeacherDialogVisible">
  96.         <el-form :model="addTeacherForm">
  97.             <el-row>
  98.                 <el-col :span='15'>
  99.                     <el-form-item label="讲师姓名" label-width="180px">
  100.                         <el-input v-model="addTeacherForm.teacherName" autocomplete="off"></el-input>
  101.                     </el-form-item>
  102.             </el-col>
  103.             </el-row>  
  104.             <el-row>
  105.             <el-col :span='15'>
  106.                 <el-form-item label="生日" label-width="180px">
  107.                     <el-date-picker
  108.                     v-model="addTeacherForm.birthday"
  109.                     type="date"
  110.                     format="yyyy-MM-dd"
  111.                     value-format="yyyy-MM-dd HH:mm:ss"
  112.                     placeholder="选择生日">
  113.                     </el-date-picker>
  114.                 </el-form-item>
  115.             </el-col>
  116.         </el-row>  
  117.             <el-form-item label="email" label-width="180px">
  118.                 <el-input v-model="addTeacherForm.email" autocomplete="off"></el-input>
  119.             </el-form-item>
  120.             </el-form>
  121.             <div slot="footer" class="dialog-footer">
  122.             <el-button @click="addTeacherDialogVisible = false">取 消</el-button>
  123.             <el-button type="primary" @click="addTeacher">新增</el-button>
  124.             </div>
  125.     </el-dialog>
  127.     <el-dialog title="修改讲师" :visible.sync="modifyTeacherDialogVisible">
  128.         <el-form :model="modifyTeacherForm">
  129.             <el-row>
  130.                 <el-col :span='15'>
  131.                     <el-form-item label="讲师姓名" label-width="180px">
  132.                         <el-input v-model="modifyTeacherForm.teacherName" autocomplete="off"></el-input>
  133.                     </el-form-item>
  134.             </el-col>
  135.             </el-row>  
  136.             <el-row>
  137.             <el-col :span='15'>
  138.                 <el-form-item label="生日" label-width="180px">
  139.                     <el-date-picker
  140.                     v-model="modifyTeacherForm.birthday"
  141.                     type="date"
  142.                     format="yyyy-MM-dd"
  143.                     value-format="yyyy-MM-dd HH:mm:ss"
  144.                     placeholder="选择生日">
  145.                     </el-date-picker>
  146.                 </el-form-item>
  147.             </el-col>
  148.         </el-row>  
  149.             <el-form-item label="email" label-width="180px">
  150.                 <el-input v-model="modifyTeacherForm.email" autocomplete="off"></el-input>
  151.             </el-form-item>
  152.             </el-form>
  153.             <div slot="footer" class="dialog-footer">
  154.             <el-button @click="modifyTeacherDialogVisible = false">取 消</el-button>
  155.             <el-button type="primary">修改</el-button>
  156.             </div>
  157.     </el-dialog>
  158.   </div>
  159. </template>
  161. <script>
  162. export default {
  163.   name:'About',
  164.   data(){return {
  165.                 page:{
  166.                     total:0,
  167.                     current:1,
  168.                     size:10
  169.                 },
  170.                 searchForm:{
  171.                     teacherName:'',
  172.                     state:''
  173.                 },
  174.                 formLabelWidth:"80px",
  175.                 modifyTeacherDialogVisible:false,
  176.                 addTeacherForm: {
  177.                     teacherName: '',
  178.                     email:'',
  179.                     birthday:''
  180.                 },
  181.                 modifyTeacherForm: {
  182.                     teacherId:'',
  183.                     teacherName: '',
  184.                     email:'',
  185.                     birthday:''
  186.                 },
  187.                 addTeacherDialogVisible:false,
  188.                 tableData:[]
  189.                 }
  190.             },
  191.             mounted(){
  192.                 this.search(1);
  193.             },
  194.             methods:{
  195.                 modifyTeacher(row){
  196.                     this.modifyTeacherForm=row;
  197.                     this.modifyTeacherDialogVisible=true;
  198.                 },
  199.                 addTeacher(){
  200.                     console.log(this.addTeacherForm)
  201.                     this.$http.post('/addNewTeacher',this.addTeacherForm)
  202.                     .then(resp=>{
  203.                         this.$message({message:"新增成功",type:"success"});
  204.                         this.search(1);
  205.                         this.addTeacherDialogVisible=false;
  206.                     }).catch(resp=>{
  207.                         this.$message({message:"操作失败",type:"warning"});
  208.                         this.addTeacherDialogVisible=false;
  209.                     })
  210.                 },
  211.                 stateFormatter(row, column, cellValue, index){
  212.                     switch(cellValue){
  213.                         case 'wait': return '待审核';
  214.                         case 'normal': return '审核通过';
  215.                         case 'fail': return '审核失败';
  216.                         default : console.error("错误的状态"+cellValue+"，无法格式化");
  217.                     }
  218.                 },
  219.                 audit(row,pass){
  220.                     console.log(row,pass);
  221.                     this.$http.post('/audit',{"teacherId":row.teacherId,"pass":pass})
  222.                     .then(resp=>{
  223.                         this.$message({message:"审核操作完成",type:"success"});
  224.                         this.search(1);
  225.                     }).catch(resp=>{
  226.                         this.$message({message:"操作失败",type:"warning"});
  227.                     })
  228.                 },
  229.                 fire(row){
  231.                 },
  232.                 handleClick(row){
  233.                     console.log(row);
  234.                     this.dialogFormVisible=true;
  235.                     // this.$message({message:'你查看成功了',type:'warning'});
  236.                 },
  237.                 search(current){
  238.                     //发请求到后端，搜索数据
  239.                     let param = this.searchForm;
  240.                     param.pageIndex=current;
  241.                     param.pageSize=this.page.size;
  243.                     this.$http.get('/queryTeacher',{
  244.                         params:param
  245.                     })
  246.                     .then(resp=>{
  247.                         if(resp.status=200&&resp.data.success){
  248.                             let data = resp.data.data;
  249.                             this.tableData=data.records;
  250.                             //将后端返回的数据绑定到分页条上
  251.                             this.page.total=data.total;
  252.                             this.page.current=data.current;
  253.                             this.page.size=data.size;
  254.                         }else{
  255.                             this.$message({
  256.                                 message:'查询失败，'+resp.data.message,
  257.                                 type:'warning'
  258.                             })
  259.                         }
  260.                     })
  261.                     .catch(error=>{
  262.                         this.$message({
  263.                                 message:'查询失败，'+error.message,
  264.                                 type:'error'
  265.                             })
  266.                     })
  267.                 }
  268.             }
  269. }
  270. </script>

特别说明：
在el-menu上添加router属性，将激活vue-router模式,使用index作为path导航

  1.  <el-menu router default-active="1" class="el-menu-demo" mode="horizontal">
  2.             <el-menu-item index="/">主页</el-menu-item>
  3.             <el-menu-item index="/about">关于</el-menu-item>
  4.             <el-menu-item index="/center">个人中心</el-menu-item>

vue56.zip

作业

  1. 在脚手架项目中编写一个课程搜索功能；用户注册功能； element-ui