前端环境搭建

技术选型

熟悉前端代码结构

在所提供的前端代码里，没有node_model文件夹，即只有源码，没有运行所用的依赖包，所以需要先下载依赖包，通过npm install 进行安装包 

 后端已经配置代理转发请求到后端的端口号为8080，后端端口号不一致可修改

梳理代码的技巧 ：

        顺藤摸瓜，想要登录，就需要看到登录页面，从登录页面的路由开始；

        所以可以从main.ts文件（项目的入口文件）开始跟：在main中 new vue对象时，ruter已经引入，再从import router 这行代码找到了router文件，在router里面找登录页面对应的路径，顺着这个路径找到对应的组件的页面

        此时我们想通过登录操作梳理代码，所以我们找到登录页面组件中的登录按钮，找到登录按钮对应的事件，在事件中发现先进行了一些校验，校验通过就执行下面的代码，我们可以看到前后端交互的函数很可能是UserModule.Login方法，因为后面的.then是调用函数成功以后的执行的回调方法，所以前后端交互的代码只能是该方法了

        而Login方法是在UserModule里，往上找，发现UserModule原来是import引入的模块，也可以按ctrl点击Login直接进入该文件中

我们可以看到调用的方法应该是在第二个login里面；因为if后面是处理后端返回的数据；而该login是从api中的employee文件中import进来的，我们顺着找过去找到了最根本的发送异步请求的函数

而发送请求又是通过request进行发送的，我们可以顺着去看request

在request里面看到了发送异步请求的操作并将其导出，给其他文件使用

为什么需要使用request封装发送呢:

        因为在request中加了前端的拦截器 ，在任何的axios请求前都会执行下面的代码：在请求头里将token加入进去，如果不用这种方法，就需要每一个axios请求之前都需要添加token 

 

 员工分页查询

需求分析接口设计 

代码开发：

通过点击相应的组件，看地址中的路由进行查找组件文件地址

制作头部效果 

前端代理在转发的时候会在路径上加上admin前缀

params简写：如果params属性和值都是一样的，就可以简写为params,函数接收的形参参数名params可以任意，属性params就不能改变

F12查看交互过程

定义当前页面需要的模型数据 

使用data()方法，在data方法中return，return的内容就是供页面使用的模型数据

.then()请求成功后的调用的函数：

        后端返回的查询数据，装到数组中，进行展示；

        注意res.data代表整个后端返回的json,再.data代表整个json里面的data数据；

        .catch代表调用失败后执行的函数

        通过生命周期creat，当组件加载完以后直接调用分页查询 

<template>标签：

        模板标签 ；通过里面的 slot-scope="scope"可以获取到当前这行遍历出来的数据；

        通过scope.row拿到当前遍历出来的这一行的内容，再.属性名可以拿到对应的属性值

文本按钮：看上去像文字，但是本质上是按钮 

更新查询条数时会传进来新的查询条数，然后我们更新调用函数的参数即可 

启用禁用员工 

需求分析和接口设计 

代码开发 

动态取id，以及status：

        ` ` 这个符号不是单引号，而是tab键上面的键，这个符号可以动态的获取值，解析值

params：代表路径传参，传到后端的json数据参数，下面代码中通过params属性传递给后端，形参params中接收前端中得到的id值 

确认提示框 ：

点击确认以后执行.then()里面的代码，点击取消执行catch里面的方法

管理员账号不能删除 

新增员工 

需求分析与设计 

代码开发 

绑定事件 

路由跳转 

表单校验规则 ：

        prop上的name，对应rules里面的name

        一个属性可以有多个校验规则，即一个[ ] 里面每个{ } 都对应一个校验规则

validator：校验器，接收三个参数：校验规则，前端输入的值，回调函数 

正则表达式中一个' | '代表 或  

表单提交时，再进行校验，如果表单校验有错误就不提交，没错误就提交，不然，表单没校验通过就提交，就没意义了 

ref=“ruleForm”为引用 ，valid为true则代表校验通过

请求体传参：data传 

修改员工 

需求分析与设计 

代码开发 

点击修改按钮跳转新页面，并传递需要查询的id：

        通过this.$router.push()的完整写法；this.$router.push(json)，而在json里面有两个属性：

                path：跳转的路径；query：指定要传递参数，对应的值也是json，json里面的key可以自己起名字，如 id 而具体的值为row.id；通过地址栏传递参数 ；

 this.$router.push()的简写写法：this.$router.push(需要跳转的路径)

区分新增和修改员工 

注意：

        this.$route是专门获取路由对象的，即地址栏上的内容的；this.$route.query代表页面跳转时传递的query对象，是一个json对象，而里面自定义了id，所以获取里面的id值

        this.$router是获取路由器对象的