Day2 苍穹外卖前端 前端环境搭建、员工分页查询组件、启用禁用员工账号组件

目录

1.前端环境搭建

1.1 技术选型

1.2 熟悉代码结构

1.3 代码跟踪

2.员工分页查询

2.1 需求分析

2.2 接口设计

2.2 代码开发

2.2.1 制作页面头部效果

2.2.2 实现前后端数据交互

2.2.3 自动发送Ajax请求

2.2.4 使用表格展示分页数据

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

2.3 功能测试

3.启用禁用员工账号

3.1 需求分析

3.2 接口设计

3.2 代码开发

3.3 功能测试

---

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包。

那为什么程序知道依赖哪些JS包？

理由：package.json文件，会记录依赖的信息。

1.3 代码跟踪

具体操作的步骤如下：

① 获得登录页面路由地址

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

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

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

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

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

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

从上面的路由文件可以确定登录视图组件就是src/views/log