您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

前端环境搭建、员工管理

课程内容

  • 前端环境搭建

  • 员工分页查询

  • 启用禁用员工账号

  • 新增员工

  • 修改员工

1. 前端环境搭建

1.1 技术选型

本项目使用到的前端技术如下:

  • node.js
  • vue
  • ElementUI
  • axios
  • vuex
  • vue-router
  • typescript

1.2 熟悉前端代码结构

直接导入课程资料中提供的苍穹外卖项目前端初始工程,此工程中已经开发了部分功能,后续我们在此基础上开发新功能即可。

导入后的效果如下:

在这里插入图片描述

主要代码在src目录中,src目录结构如下:

在这里插入图片描述

下面重点介绍一下src中的重点文件和目录:

  • api:存放封装了Ajax请求文件的目录
  • components:公共组件存放目录
  • views:存放视图组件的目录
  • App.vue:项目的主组件,页面的入口文件
  • main.ts:整个项目的入口文件
  • router.ts:路由文件

注意:我们上面导入的初始工程中并没有前端项目运行所依赖的JS包,需要在终端通过 npm install 命令进行安装。安装完成后,可以看到生成了node_modules目录,目录中就是安装的JS包,效果如下:

在这里插入图片描述

接下来,我们通过初始工程中已经完成的登录功能来跟踪程序的执行过程,熟悉前端项目的代码结构。

首先需要启动前端项目,命令为:npm run serve,然后访问前端项目,效果如下:

在这里插入图片描述

注意:需要同时启动后端 java 服务,才能进行前后端交互。

具体操作的步骤如下:

① 获得登录页面路由地址

​ 登录页面完整的访问地址为 http://localhost:8888/#/login,其中登录页面的路由地址为 /login,我们需要通过此路由地址找到对应的登录视图组件

② 从main.ts中找到路由文件

​ main.ts是整个前端项目的入口文件,在此文件中会创建Vue实例,在创建Vue实例时需要传入路由对象,所以从此文件中可以找到对应的路由文件位置。如下所示:

在这里插入图片描述

③ 从路由文件中找到登录视图组件

​ 在路由文件中会配置整个项目所有的路由映射规则,我们只需要找到 /login 这个路径对应的实体组件即可。如下所示:

在这里插入图片描述

④ 从登录视图组件中找到登录方法

​ 从上面的路由文件可以确定登录视图组件就是src/views/login/index.vue,此时就可以打开这个文件,然后仔细阅读代码,找到登录方法,如下所示:

在这里插入图片描述

⑤ 跟踪登录方法的执行过程

​ 找到登录方法后,就需要跟踪代码的执行过程,主要就是观察前后端的交互过程。例如前端如何发送的Ajax请求,后端返回的数据格式等等

2. 员工分页查询

2.1 需求分析和接口设计

根据产品原型来了解需求,员工分页查询的产品原型如下:

在这里插入图片描述

业务规则:

  • 根据页码展示员工信息(员工姓名、账号、手机号、账号状态、最后操作时间等)
  • 每页展示10条数据
  • 分页查询时可以根据需要,输入员工姓名进行查询

要展示员工分页数据,就需要前后端进行数据交互,对应的接口如下:

基本信息

Path: /admin/employee/page

Method: GET

请求参数

Query

参数名称是否必须示例备注
name张三员工姓名
page1页码
pageSize10每页记录数

返回数据

名称类型是否必须默认值备注其他信息
codenumber必须
msgnull非必须
dataobject必须
├─ totalnumber必须
├─ recordsobject []必须item 类型: object
├─ idnumber必须
├─ usernamestring必须
├─ namestring必须
├─ passwordstring必须
├─ phonestring必须
├─ sexstring必须
├─ idNumberstring必须
├─ statusnumber必须
├─ createTimestring,null必须
├─ updateTimestring必须
├─ createUsernumber,null必须
├─ updateUsernumber必须

2.2 代码开发

要开发前端代码,首先需要找到对应的组件。从路由文件 router.ts 中找到员工管理页面(组件)。

在这里插入图片描述

可以看到,员工管理页面(组件)的位置为:src/views/employee/index.vue。我们只需要在此文件中开发员工分页查询相关的前端代码即可,整个开发过程大概可以分为以下几个关键步骤:

  1. 根据产品原型,制作页面头部效果(输入框、查询按钮等)
  2. 为查询按钮绑定单击事件,发送Ajax请求,查询员工分页数据,实现前后端交互
  3. 提供 vue 的初始化方法,在页面加载后就查询分页数据
  4. 使用ElementUI提供的表格组件展示分页数据
  5. 使用ElementUI提供的分页条组件实现翻页效果

注意:开发过程中,并不是所有的代码都实现了再测试,而是开发一部分,就需要测试一下,看效果,如果有问题再调整。没有问题,再继续开发、测试。所以,这是一个逐渐完善的过程。下面我们就按照上面的几个关键步骤来开发,每开发完一个关键步骤,就需要测试一下,来验证我们的代码是否正确。

2.2.1 制作页面头部效果

根据产品原型,制作页面头部效果(输入框、查询按钮等)。产品原型中的头部效果如下:

在这里插入图片描述

注意:输入框和按钮都是使用 ElementUI 提供的组件,对于前端的组件只需要参考 ElementUI 提供的文档,进行修改即可。实现代码如下:

<div class="tableBar"> <label style="margin-right: 5px"> 员工姓名: label> <el-input placeholder="请输入员工姓名" style="width: 15%" /> <el-button type="primary" style="margin-left: 20px">查询el-button> <el-button type="primary" style="float: right">+添加员工el-button> div>
  • 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

参数名称参数值是否必须示例备注
Content-Typeapplication/json

路径参数

参数名称示例备注
status1状态,1为启用 0为禁用

Query

参数名称是否必须示例备注
id员工id

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
datastring非必须
msgstring非必须

3.2 代码开发

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

3.3 功能测试

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

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

在这里插入图片描述

4. 新增员工

4.1 需求分析和接口设计

根据产品原型来进行需求分析,产品原型如下:

在这里插入图片描述

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

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

接口设计如下:

基本信息

Path: /admin/employee

Method: POST

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typeapplication/json

Body

名称类型是否必须默认值备注其他信息
idinteger非必须员工idformat: int64
idNumberstring必须身份证
namestring必须姓名
phonestring必须手机号
sexstring必须性别
usernamestring必须用户名

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject非必须
msgstring非必须

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

请求参数

路径参数

参数名称示例备注
id100员工id

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject必须
├─ createTimestring非必须format: date-time
├─ createUserinteger非必须format: int64
├─ idinteger非必须format: int64
├─ idNumberstring非必须
├─ namestring非必须
├─ passwordstring非必须
├─ phonestring非必须
├─ sexstring非必须
├─ statusinteger非必须format: int32
├─ updateTimestring非必须format: date-time
├─ updateUserinteger非必须format: int64
├─ usernamestring非必须
msgstring非必须

(2)根据id修改员工信息 接口

基本信息

Path: /admin/employee

Method: PUT

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typeapplication/json

Body

名称类型是否必须默认值备注其他信息
idinteger必须format: int64
idNumberstring必须
namestring必须
phonestring必须
sexstring必须
usernamestring必须

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
datastring非必须
msgstring非必须

5.2 代码开发

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

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

注意:

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

this.$router.push({path: 路由路径, query:{参数名:参数值}})
  • 1

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

在这里插入图片描述

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

this.$router.query.参数名
  • 1

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

在这里插入图片描述

注意:

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

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

注意:

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

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

在这里插入图片描述

5.3 功能测试

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

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

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索