黑马《苍穹外卖》前端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