前端Day2
前端基础入门
elementui布局组件
axios前后端交互 异步请求
vuex状态管理 多个组件数据共享
router路由 组件跳转
ts在js基础上扩展类型支持,使代码更严谨规范
依赖安装
启动前端
注意后端地址一致
前端端口
从main.ts开始
找到路由配置文件router.ts
@代表src
找到登录视图 登录按钮
按钮绑定事件调用的方法
找到具体交互方法
then后为成功
进一步交互过程
从此处发送ajax请求
自定义的request
因为增加了拦截器
为了在发送ajax请求前将token加到请求头中
否则每个ajax请求前都要加请求头,冗余代码
员工分页查询
分析
ajax
/ 可省略 @代表src
vue页面效果![](https://i-blog.csdnimg.cn/blog_migrate/c0037f79a02aac9ecc9a4b551001dbf6.png)
转发后端时统一加/admin前缀
params:params key和value一样,简写
页面查询方法
created让它一开始就先调用一次页面查询
cv
展示表格![](https://i-blog.csdnimg.cn/blog_migrate/54c63c9a759a05f0026fdb47b3a8dca5.png)
按需求修改
将1变成启用 0变成禁用
操作按钮
分页条
居中展示
启用禁用员工账号
分析
绑定单击事件
` `用这个符号,而非单引号,可以动态解析语法,而非普通字符串原样输出
ajax![](https://i-blog.csdnimg.cn/blog_migrate/4a021920cecee6131efd46020b96a8ce.png)
方法导入
确认框![](https://i-blog.csdnimg.cn/blog_migrate/2401db09258db877aeb3b13c9fbae6b0.png)
新增员工
分析
绑定单击事件
router路由(跳转到新增员工页面)
新增页面(Form表单)
cv
校验规则
新增修改共用同一页面
(根据传入参数变换显现的按钮)
optType为add,为新增,则有保存并继续添加员工按钮
点击保存调用方法,第一个参数再次校验规则,第二个参数是否继续在此页面
ajax(调用后端新增员工方法)
body请求体传参,用data
修改员工
分析
json body请求体
根据id查询员工
绑定单击事件
方法跳转
新增修改共用页面
ajax![](https://i-blog.csdnimg.cn/blog_migrate/3fd1a63863204f6962a3d6dde3db43a0.png)
导入
created()页面回显![](https://i-blog.csdnimg.cn/blog_migrate/5a1663ecd382b0b6af866a31a27b29f9.png)
修改员工
ajax
导入
方法![](https://i-blog.csdnimg.cn/blog_migrate/d12f5adbe1f4677e91c25f9005aaa800.png)
前端Day3
套餐分页查询
分析
页面效果
下拉框
div好处:进行统一控制
下拉框分类数据改为动态
根据类型查询分类
ajax请求
导入
created()
根据实际修改
套餐分页查询
ajax![](https://i-blog.csdnimg.cn/blog_migrate/3501bc2972cbdfe5329c851c3258485e.png)
created()
方法
数据显示(Table表格)
分页条![](https://i-blog.csdnimg.cn/blog_migrate/0ae13cdbeb062e74459fb53807eb282c.png)
页面效果,绑定事件
方法
起售停售套餐
分析
路径参数传递修改之后的状态值
query参数传递需要修改的套餐id
ajax
导入
方法
确认框![](https://i-blog.csdnimg.cn/blog_migrate/d532fa370113b04e7d7a7edc6adfb7a7.png)
删除套餐
分析
只能删除停售的
ajax![](https://i-blog.csdnimg.cn/blog_migrate/a7f71c3bd021bfed08d3b4cba8e002a1.png)
导入
绑定单击事件
一个方法处理两种情况,根据第一个参数区分(批量/单个)
删除单个![](https://i-blog.csdnimg.cn/blog_migrate/0903033af4b088f48d381c3ee27c695b.png)
批量删除
多选
遍历每一个element的形式
定义模型数据,赋值val,在删除套餐方法中可以拿到模型数据,即val
绑定单击事件![](https://i-blog.csdnimg.cn/blog_migrate/0c8c8a42a0b75bd2c1388429144ef9ea.png)
方法![](https://i-blog.csdnimg.cn/blog_migrate/b053211d752666f671803cbb1f436442.png)
加确认框
新增套餐
分析
具体看视频(比较复杂)
只是跳转,不定义方法,直接箭头函数
新增菜单页面(比较复杂) 疯狂CV