苍穹外卖-day14：前端环境搭建、员工管理

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

开发完上面代码后，就可以测试一下，页面效果如下：

2.2.2 实现前后端数据交互

前面我们已经完成了页面头部效果开发，接下来就需要开发前后端数据交互的动态效果。

第一步：为查询按钮绑定单击事件

第二步：在methods中定义 pageQuery 方法，先验证当前方法能否正常执行

注意：按照开发规范，真正发送Ajax请求的代码需要封装到 api目录下的ts文件中（src/api/employee.ts）

第三步：在src/api/employee.ts 中定义 getEmployeeList 方法，实现发送Ajax请求获取分页数据

注意：发送 Ajax 请求的URL地址需要和前面我们设计的分页查询接口对应

第四步：在员工管理组件中导入 employee.ts 中定义的方法，并在data() 方法中定义分页相关的模型数据

注意：需要将name属性和上面的员工姓名输入框进行双向绑定，如下：

第五步：在pageQuery 方法中调用 getEmployeeList 方法

2.2.3 自动发送Ajax请求

前面的代码我们已经实现了前后端数据交互，但是有一个问题，就是只有在点击查询按钮时才会发生Ajax请求，实现分页数据查询。我们通常需要的是在当前页面（组件）加载后，就需要发送Ajax请求，查询第一页的数据。要实现这个效果，我们可以通过vue的生命周期方法，即created方法来做到，代码如下：

2.2.4 使用表格展示分页数据

前面我们已经实现了前后端数据交互，现在就需要将后端返回的数据通过表格展示出来，我们可以使用ElementUI提供的表格组件，具体使用方法可以参照官方提供的示例 https://element.eleme.io/#/zh-CN/component/table

2.2.5 使用分页条实现翻页效果

使用 ElementUI 提供的分页条组件，并绑定事件处理函数，具体使用方法可以参照官方提供的示例 https://element.eleme.io/#/zh-CN/component/pagination

2.3 功能测试

可以通过下面两种方式来测试：

• 直接进行前后端联调，查看页面效果
• 通过浏览器F12查看数据交互过程

3. 启用禁用员工账号

3.1 需求分析和接口设计

根据产品原型来进行需求分析：

可以对状态为“启用” 的员工账号进行“禁用”操作

可以对状态为“禁用”的员工账号进行“启用”操作

状态为“禁用”的员工账号不能登录系统

接口设计如下：

基本信息

Path： /admin/employee/status/{status}

Method： POST

请求参数

Headers

路径参数

Query

返回数据

3.2 代码开发

第一步：为启用、禁用按钮绑定单击事件

第二步：编写对应的处理函数handleStartOrStop

到此可以先测试一下，检查当前方法能否成功执行，页面效果如下：

第三步：在 employee.ts 中封装启用禁用员工账号方法，发送Ajax请求

注意：发送请求的方式和相关参数，必须和前面的接口设计保持一致

第四步：在员工管理组件中引入上面定义的enableOrDisableEmployee方法，并完善 handleStartOrStop 方法

第五步：代码优化，如果是管理员账号则不允许更改账号状态

3.3 功能测试

直接进行前后端联调，查看页面效果

通过浏览器F12查看数据交互过程

4. 新增员工

4.1 需求分析和接口设计

根据产品原型来进行需求分析，产品原型如下：

新增员工时需要录入 账号、员工姓名、手机号、性别、身份证号等信息。其中账号因为是登录凭证，所以必须是唯一的。手机号要求必须是合法的11位手机号码，身份证号为合法的18位身份证号码。

当新员工入职后，可以通过当前的新增员工功能来为新员工开通账号，新员工通过开通的账号来登录商家管理端系统。

接口设计如下：

基本信息

Path： /admin/employee

Method： POST

请求参数

Headers

Body

返回数据

4.2 代码开发

要开发新增员工前端代码，首先需要了解添加员工业务功能的操作步骤：

1. 在员工管理列表页面，点击 “添加员工”按钮，跳转到新增页面
2. 在新增员工页面录入员工相关信息
3. 点击“保存”按钮完成新增操作

接下来我们就可以按照上面的操作步骤来具体开发前端的代码。

第一步：为“添加员工”按钮绑定单击事件

第二步：编写 handleAddEmp 方法，进行路由跳转

注意：在路由文件中已经配置了如下路由规则

第三步：根据产品原型，开发页面元素

第四步：定义模型数据和表单校验规则

第五步：在 employee.ts 中封装新增员工方法，发送Ajax请求，实现前后端交互

注意：

• 发送请求的方式和相关参数，必须和前面的接口设计保持一致
• 使用此方法时，别忘了在组件中通过import导入

第六步：在 methods 中定义提交表单的方法 submitForm

4.3 功能测试

直接进行前后端联调，查看页面效果

通过浏览器F12查看数据交互过程

5. 修改员工

5.1 需求分析和接口设计

根据产品原型来进行需求分析，产品原型如下：

修改员工时需要回显 账号、员工姓名、手机号、性别、身份证号等信息。其中账号因为是登录凭证，所以必须是唯一的。手机号要求必须是合法的11位手机号码，身份证号为合法的18位身份证号码。根据需要对数据进行修改即可。

修改员工功能涉及到2个接口，分别是根据id查询员工信息和根据id修改员工信息。具体接口设计如下：

（1）根据id查询员工 接口

基本信息

Path： /admin/employee/{id}

Method： GET

请求参数

路径参数

返回数据

（2）根据id修改员工信息 接口

基本信息

Path： /admin/employee

Method： PUT

请求参数

Headers

Body

返回数据

5.2 代码开发

要开发修改员工前端代码，首先需要了解修改员工业务功能的操作步骤：

1. 在员工管理列表页面点击 “修改”按钮，跳转到修改页面
2. 在修改员工页面录入员工相关信息
3. 点击“保存”按钮完成修改操作

注意：

• 由于添加员工和修改员工的表单项非常类似，所以添加和修改操作可以共用同一个页面（addEmployee.vue）
• 修改员工涉及到原始数据回显，所以页面跳转时需要传递员工id作为参数

接下来我们就可以按照上面的操作步骤来具体开发前端的代码。

第一步：在员工管理页面中，为“修改”按钮绑定单击事件，用于跳转到修改页面

第二步：在methods中编写 handleUpdateEmp 方法，实现路由跳转

注意：使用路由对象的push方法在进行路由跳转时，可以通过地址栏传递参数，具体语法为：

• 1

第三步：在 addEmployee.vue 组件中定义模型数据optType，用于区分本次操作是新增还是修改

注意：区分当前操作是新增员工还是修改员工，只需要尝试获取路由参数id。如果能获取到则当前操作为修改，否则为新增。具体获取路由参数的语法为：

• 1

第四步：如果是修改操作，需要根据id查询员工原始信息用于页面回显，需要在 employee.ts 中创建queryEmployeeById方法

注意：

• 发送请求的方式和相关参数，必须和前面的接口设计保持一致
• 使用此方法时，别忘了在组件中通过import导入

第五步：在 addEmployee.vue 组件的 created 方法中查询员工原始信息用于页面数据回显

到目前位置已经实现了员工信息的回显，可以进行简单的测试，如果回显没有问题再继续开发后面的代码

第六步：如果是修改操作，“保存并继续添加员工” 按钮则不需要显示，通过 v-if 指令进行判断

第七步：在 employee.ts 中创建方法，用于修改员工，发送Ajax请求

注意：

• 发送请求的方式和相关参数，必须和前面的接口设计保持一致
• 使用此方法时，别忘了在组件中通过import导入

第八步：修改 addEmployee.vue 组件中的 submitForm 方法，需要根据当前操作类型执行新增或者修改操作

5.3 功能测试

直接进行前后端联调，查看页面效果

通过浏览器F12查看数据交互过程