黑马《苍穹外卖》前端Day2——前端Day3

前端Day2

前端基础入门

elementui布局组件

axios前后端交互 异步请求

vuex状态管理 多个组件数据共享

router路由 组件跳转

ts在js基础上扩展类型支持，使代码更严谨规范

依赖安装

启动前端

注意后端地址一致

前端端口

从main.ts开始

找到路由配置文件router.ts

@代表src

找到登录视图 登录按钮

按钮绑定事件调用的方法

找到具体交互方法

then后为成功

进一步交互过程

从此处发送ajax请求

自定义的request

因为增加了拦截器

为了在发送ajax请求前将token加到请求头中

否则每个ajax请求前都要加请求头，冗余代码

员工分页查询

分析

ajax

/ 可省略 @代表src

vue页面效果

转发后端时统一加/admin前缀

params：params key和value一样，简写

页面查询方法

created让它一开始就先调用一次页面查询

cv

展示表格

按需求修改

将1变成启用 0变成禁用

操作按钮

分页条

居中展示

启用禁用员工账号

分析

绑定单击事件

用这个符号，而非单引号，可以动态解析语法，而非普通字符串原样输出

ajax

方法导入

确认框

新增员工

分析

绑定单击事件

router路由（跳转到新增员工页面）

新增页面（Form表单）

cv

校验规则

新增修改共用同一页面

（根据传入参数变换显现的按钮）

optType为add，为新增，则有保存并继续添加员工按钮

点击保存调用方法，第一个参数再次校验规则，第二个参数是否继续在此页面

ajax（调用后端新增员工方法）

body请求体传参，用data

修改员工

分析

json body请求体

根据id查询员工

绑定单击事件

方法跳转

新增修改共用页面

ajax

导入

created（）页面回显

修改员工

ajax

导入

方法

前端Day3

套餐分页查询

分析

页面效果

下拉框

div好处：进行统一控制

下拉框分类数据改为动态

根据类型查询分类

ajax请求

导入

created（）

根据实际修改

套餐分页查询

ajax

created（）

方法

数据显示（Table表格）

分页条

页面效果，绑定事件

方法

起售停售套餐

分析

路径参数传递修改之后的状态值

query参数传递需要修改的套餐id

ajax

导入

方法

确认框

删除套餐

分析

只能删除停售的

ajax

导入

绑定单击事件

一个方法处理两种情况，根据第一个参数区分（批量/单个）

删除单个

批量删除

多选

遍历每一个element的形式

定义模型数据，赋值val，在删除套餐方法中可以拿到模型数据，即val

绑定单击事件

方法

加确认框

新增套餐

分析

具体看视频（比较复杂）

只是跳转，不定义方法，直接箭头函数

新增菜单页面（比较复杂） 疯狂CV