学习自：【黑马程序员Java项目实战《苍穹外卖》，最适合新手的SpringBoot+SSM的企业级Java项目实战】https://www.bilibili.com/video/BV1TP411v7v6?vd_source=9fed3cefc266aa5b3895aaab6e6214f5

本文是基于上述视频教程和视频配套文档的文字总结。

本篇文章是苍穹外卖前端的学习笔记。

前提条件：后端项目启动完成，后端服务地址为http://localhost:8080。

前端环境搭建

技术选型

node.js > 14.17.0 (typescript 要求 node.js版本大于 14.17.0 以上)
vue 2.6.10
Element UI 2.12.0
axios 0.19.0
vuex 3.1.1
vue-router 3.1.2
typescript 5.x具体不记得了

启动项目

注意到导入的初始工程里面并没有前端项目运行所以来的js包，需要执行npm install 命令来安装。生成的依赖包在node_moudles目录。如下图示。

然后运行npm run serve启动前端项目。

tips:什么时候用dev，什么时候用serve？只需要看package.json里面的script配置，与它保持一致。

前端项目启动如下：

登录的流程

获取登录页面路由地址
从main.ts中找到路由文件（/router/index.ts）
从路由文件中找到登录视图组件
从登录视图组件中找到登录的方法
找到登录方法后，跟踪登录方法的执行流程。具体来说，就是观察前后端的交互过程，例如前端如何发送axios请求，后端返回的数据格式等。

分页查询

员工的分页查询比较简单，这里以套餐的分页查询为例。

需求分析和接口设计

我们自己需要根据产品的原型来进行需求分析，并设计出对应的接口。产品的原型如下：

不难分析，我们的业务规则是：

根据页码展示套餐的信息，例如套餐名称、分类、状态等
每页展示10条数据
分页查询时，可以选择查询的条件

分析完需求后，就要设计对应的接口。要展示出套餐的分页数据，需要两个接口：

分类查询接口（用于套餐分类下拉框中分类数据的展示）
套餐分页查询接口

（1）分类查询接口

基本信息

Path： /admin/category/list

Method： GET

请求参数

Query

参数名称	是否必须	示例	备注
type	否	2	分类类型：1为菜品分类，2为套餐分类

返回数据

名称	类型	是否必须	其他信息
code	integer	必须	format: int32
data	object []	非必须	item 类型: object
├─ createTime	string	非必须	format: date-time
├─ createUser	integer	非必须	format: int64
├─ id	integer	非必须	format: int64
├─ name	string	非必须
├─ sort	integer	非必须	format: int32
├─ status	integer	非必须	format: int32
├─ type	integer	非必须	format: int32
├─ updateTime	string	非必须	format: date-time
├─ updateUser	integer	非必须	format: int64
msg	string	非必须

这个接口用来查询套餐分类下具体的套餐类别，例如KFC套餐、麦当劳套餐等。

（2）套餐分页查询接口

基本信息

Path： /admin/setmeal/page

Method： GET

请求参数

Query

参数名称	是否必须	备注
categoryId	否	分类id
name	否	套餐名称
page	是	页码
pageSize	是	每页记录数
status	否	套餐起售状态

返回数据

名称	类型	是否必须	其他信息
code	number	必须
msg	null	非必须
data	object	非必须
├─ total	number	非必须
├─ records	object []	非必须	item 类型: object
├─ id	number	必须
├─ categoryId	number	必须
├─ name	string	必须
├─ price	number	必须
├─ status	number	必须
├─ description	string	必须
├─ image	string	必须
├─ updateTime	string	必须
├─ categoryName	string	必须

查询参数中，只有page和pageSize是必须的，另外三个都是可选的。

代码开发

要进行套餐管理的代码开发，就要根据路由文件router.ts找到对应的组件。可以看到，套餐管理页面（组件）的位置为：src/view/setmeal/index.vue。我们只需要在此文件中开发套餐分页查询的前端代码即可。而整个前端代码的开发大致分为以下几个关键步骤：

根据产品原型，制作页面的头部效果（包含输入框，下拉框，查询按钮等）
填充套餐分类下拉框中的分类数据
为查询按钮绑定事件，发送axios请求，获得后端返回的数据
提供vue的初始化方法，在页面加载完成后就查询分页数据
使用ElmentUI提供的表格组件展示分页数据
使用ElementUI提供的分页条组件实现翻页的效果

一般来说，我们每开发完成一步，都需要进行测试，然后在继续进行开发

制作页面头部效果

产品原型如下：

参考ElementUI提供的文档，进行修改即可。我们需要在data()方法中绑定响应的模型数据。

动态的填充套餐分类下拉框的数据

这时，前端就需要发起请求，调用后端分类查询的接口，然后将后端返回的数据动态展示到下拉框中。按照项目规范，发起请求的方法代码被定义到src/api/category.ts 文件中。

然后我们将定义好的方法导入当前组件，在生命周期方法created中调用此方法，获取套餐分类数据，动态填充下拉框即可。具体如下：

这个时候我们就要去修改template部分中的代码，将绑定的数据改为catergoryId，将key和label的值修改为后端返回数据中的属性名。具体如下：

此时两个下拉框的测试效果如下：

动态获取分页数据

在这个操作中，我们需要为查询按钮绑定单击事件，在methods中定义分页查询的方法（pageQuery()），在api目录下的ts文件中定义getSetmealPage方法，实现发送axios请求获取分页数据。然后再套餐管理组件中导入定义好的getSetmealPage方法，并再data()方法中定义分页相关的数据模型。再pageQuery方法中调用getSetmealPage方法，实现前后端的数据交互。最后，在created方法中调用分页查询方法，确保每次页面加载完成后就进行分页数据的查询。