当前位置：首页 > news >正文

苍穹外卖项目前端DAY02

news 2025/8/5 15:13:58

前段DAY02

1、前端环境搭建

1.1、技术选型

node.js
vue
ElementUI
axios
vuex
vue-router
typescript

1.2、熟悉前段代码结构

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

通过登录功能梳理前端代码
1. 获得登录页面路由地址
2. 从main.ts中找到路由文件
3. 从路由文件中找到登录视图组件
4. 从登录视图组件中找到登录方法
5. 跟踪登录方法的执行工程

2、员工分页查询

2.1、需求分析和接口设计

业务规则：

根据页码展示员工信息
每页展示10条数据
分页查询时可以根据需要，输入员工姓名进行查询

接口设计：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2、代码开发

从路由文件router.ts中找到员工管理页面（组件）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

制作页面头部效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    <div class="tableBar"><label style="margin-right: 5px;">员工姓名：</label><el-input placeholeder="请输入员工姓名" style="width: 15%"/><el-button type = "primary" style="margin-left: 20px">查询</el-button><el-button type = "primary" style="float: right;">+ 添加员工</el-button></div>

完整代码

<template><div class="dashboard-container"><div class="container"><div class="tableBar"><label style="margin-right: 5px;">员工姓名：</label><el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%"/><el-button type = "primary" style="margin-left: 20px" @click="pageQuery()">查询</el-button><el-button type = "primary" style="float: right;">+ 添加员工</el-button></div></div> <el-table:data="records"stripestyle="width: 100%"><el-table-columnprop="name"label="员工姓名"width="180"></el-table-column><el-table-columnprop="username"label="账号"width="180"></el-table-column><el-table-columnprop="phone"label="手机号"></el-table-column><el-table-columnprop="status"label="账号状态"><template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template></el-table-column><el-table-columnprop="updateTime"label="最后操作数据"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="text">修改</el-button><el-button type="text">{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button></template></el-table-column></el-table><el-paginationclass="pageList"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[10, 20, 30, 40]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template>
<script lang="ts">
import { getEmployeeList } from "@/api/employee";
export default  {//模型数据data(){return {name: '', //员工姓名，对应上面的输入框 page: 1, //页码pageSize: 10, //每页记录数total: 0, //总记录数records: [] //当前页面要展示的数据集合}},created() {this.pageQuery()},methods: {//分页查询pageQuery(){//准备请求参数const params = {name:this.name,page:this.page,pageSize:this.pageSize}//发送Ajax请求，访问后端服务器，获取分页数据getEmployeeList(params).then((res) => {if (res.data.code === 1) {this.total = res.data.data.totalthis.records = res.data.data.records}}).catch((err) => {this.message.console.error('请求出错了：' + err.message);});},//pageSize发送变化时触发handleSizeChange(pageSize){this.pageSize = pageSizethis.pageQuery()},//page发送变化时触发handleCurrentChange(page){this.page = pagethis.pageQuery()}},
}
</script><style lang="scss" scoped>
.disabled-text {color: #bac0cd !important;
}
</style>

2.3、功能测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3、启用禁用员工账号

3.1、需求分析和接口设计

业务规则：

可以对状态为“启用”的员工账号进行“禁用”操作
可以对状态为”禁用“的员工账号进行”启用“操作
状态为“禁用”的员工账号不能登录系统

接口设计：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2、代码开发

<template><div class="dashboard-container"><div class="container"><div class="tableBar"><label style="margin-right: 5px;">员工姓名：</label><el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%"/><el-button type = "primary" style="margin-left: 20px" @click="pageQuery()">查询</el-button><el-button type = "primary" style="float: right;">+ 添加员工</el-button></div></div> <el-table:data="records"stripestyle="width: 100%"><el-table-columnprop="name"label="员工姓名"width="180"></el-table-column><el-table-columnprop="username"label="账号"width="180"></el-table-column><el-table-columnprop="phone"label="手机号"></el-table-column><el-table-columnprop="status"label="账号状态"><template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template></el-table-column><el-table-columnprop="updateTime"label="最后操作数据"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="text">修改</el-button><el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button></template></el-table-column></el-table><el-paginationclass="pageList"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[10, 20, 30, 40]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template>
<script lang="ts">
import {getEmployeeList,enableOrDisableEmployee} from '@/api/employee'
export default  {//模型数据data(){return {name: '', //员工姓名，对应上面的输入框 page: 1, //页码pageSize: 10, //每页记录数total: 0, //总记录数records: [] //当前页面要展示的数据集合}},created() {this.pageQuery()},methods: {//分页查询pageQuery(){//准备请求参数const params = {name:this.name,page:this.page,pageSize:this.pageSize}//发送Ajax请求，访问后端服务器，获取分页数据getEmployeeList(params).then((res) => {if (res.data.code === 1) {this.total = res.data.data.totalthis.records = res.data.data.records}}).catch((err) => {this.message.console.error('请求出错了：' + err.message);});},//pageSize发送变化时触发handleSizeChange(pageSize){this.pageSize = pageSizethis.pageQuery()},//page发送变化时触发handleCurrentChange(page){this.page = pagethis.pageQuery()},//启用禁用员工账号handleStartOrStop(row){if(row.username === 'admin'){this.$message.error('admin为系统的管理员账号，不能更改账号状态！')return}//alert(`id=${row.id} status=${row.status}`)//弹出确认提示框this.$confirm('确认要修改当前员工账号的状态', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {const p = {id: row.id,status: !row.status ? 1 : 0}enableOrDisableEmployee(p).then(res =>{if(res.data.code === 1){this.$message.success('员工的账号状态修改成功')this.pageQuery()}})})}},
}
</script><style lang="scss" scoped>
.disabled-text {color: #bac0cd !important;
}
</style>

3.3、功能测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4、新增员工

4.1、需求分析和接口设计

产品原型：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

接口设计：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2、代码开发

添加员工操作步骤：

点击“添加员工”按钮，跳转到新增页面
在新增员工页面录入员工相关信息
点击“保存”按钮完成新增操作

为“添加员工”按钮绑定单击事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提供handleAddEmp方法，进行路由跳转

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

完整代码：

<template><div class="addBrand-container"><div class="container"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px"><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="员工姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-radio v-model="ruleForm.sex" label="1">男</el-radio><el-radio v-model="ruleForm.sex" label="2">女</el-radio></el-form-item><el-form-item label="身份证号" prop="idNumber"><el-input v-model="ruleForm.idNumber"></el-input></el-form-item><div class="subBox"><el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button><el-button v-if="this.optType === 'add'" type="primary" @click="submitForm('ruleForm',true)">保存并继续添加员工</el-button><el-button @click="() => this.$router.push('/employee')">返回</el-button></div></el-form></div></div>
</template><script lang="ts">import {addEmployee} from '@/api/employee'export default {data(){return{optType: 'add',ruleForm:{name: '',username: '',sex: '1',phone: '',idNumber: ''},rules:{name:[{required: true,message: '请输入员工姓名',trigger: 'blur'}],username:[{required: true,message: '请输入员工账号',trigger: 'blur'}],phone:[{required: true,trigger: 'blur',validator: (rule,value,callback) => {//通过正则表达式校验手机号if (value === '' || (!/^1(3|4|5|6|7|8)\d{9}$/.test(value))) {callback(new Error('请输入正确的手机号'))}else{callback()}}}],idNumber:[{required: true,trigger: 'blur',validator: (rule,value,callback) => {//通过正则表达式校验手机号if (value === '' || (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(X|x)$)}/.test(value))) {callback(new Error('请输入正确的身份证号'))}else{callback()}}}]}}},methods:{submitForm(formName,isContinue){//进行表单校验this.$refs[formName].validate((valid) => {if(valid){//表单校验通过，发起Ajax请求，将数据提交到后端addEmployee(this.ruleForm).then((res) =>{if(res.data.code === 1){this.$message.success('员工添加成功')if(isContinue){this.ruleForm = {name: '',username: '',sex: '1',phone: '',idNumber: ''}}else{this.$router.push('/employee')}}else{this.$message.console.error(res.data.msg);}})}})}}
}
</script><style lang="scss" scoped>
.addBrand {&-container {margin: 30px;margin-top: 30px;.HeadLable {background-color: transparent;margin-bottom: 0px;padding-left: 0px;}.container {position: relative;z-index: 1;background: #fff;padding: 30px;border-radius: 4px;// min-height: 500px;.subBox {padding-top: 30px;text-align: center;border-top: solid 1px $gray-5;}}.idNumber {margin-bottom: 39px;}.el-form-item {margin-bottom: 29px;}.el-input {width: 293px;}}
}
</style>

 // 新增员工export const addEmployee = (params: any) =>request({'url': '/employee','method': 'post','data': params}) // 根据id查询员工export const queryEmployeeById = (id: number ) =>request({'url': `/employee/${id}`,'method': 'get'})

4.3、功能测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5、修改员工

5.1、需求分析和接口设计

编辑员工功能涉及到两个接口：

根据id查询员工信息
编辑员工信息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.2、代码开发

修改员工操作步骤：

点击“修改”按钮，跳转到修改页面

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在修改员工页面录入员工相关信息
点击“保存”按钮完成修改操作

注意：

由于添加员工和修改员工的表单项非常类似，所以添加和修改页面操作可以共同同一个页面(addEmployee.vue)
- 如果路由中传递了id参数，则当前操作作为修改
- 如果路由中没有传递id参数，则当前操作为新增

在这里插入图片描述

修改员工涉及到原始数据回显，所以需要传递员工id作为参数

完整代码

<template><div class="addBrand-container"><div class="container"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px"><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="员工姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-radio v-model="ruleForm.sex" label="1">男</el-radio><el-radio v-model="ruleForm.sex" label="2">女</el-radio></el-form-item><el-form-item label="身份证号" prop="idNumber"><el-input v-model="ruleForm.idNumber"></el-input></el-form-item><div class="subBox"><el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button><el-button v-if="this.optType === 'add'" type="primary" @click="submitForm('ruleForm',true)">保存并继续添加员工</el-button><el-button @click="() => this.$router.push('/employee')">返回</el-button></div></el-form></div></div>
</template><script lang="ts">import {addEmployee,queryEmployeeById,updateEmployee} from '@/api/employee'
import router from '@/router'
export default {data(){return{optType: '',//判断是新增还是修改ruleForm:{name: '',username: '',sex: '1',phone: '',idNumber: ''},rules:{name:[{required: true,message: '请输入员工姓名',trigger: 'blur'}],username:[{required: true,message: '请输入员工账号',trigger: 'blur'}],phone:[{required: true,trigger: 'blur',validator: (rule,value,callback) => {//通过正则表达式校验手机号if (value === '' || (!/^1(3|4|5|6|7|8)\d{9}$/.test(value))) {callback(new Error('请输入正确的手机号'))}else{callback()}}}],idNumber:[{required: true,trigger: 'blur',validator: (rule,value,callback) => {//通过正则表达式校验手机号if (value === '' || (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(X|x)$)}/.test(value))) {callback(new Error('请输入正确的身份证号'))}else{callback()}}}]}}},created(){//获取路由参数id，如果有则为修改操作，否则为新增操作this.optType = this.$route.query.id? 'update' : 'add'if(this.optType === 'update'){//修改操作，需要根据id查询员工信息用于页面回显queryEmployeeById(this.$route.query.id).then(res => {if(res.data.code ===1){this.ruleForm = res.data.data}})}},methods:{submitForm(formName,isContinue){//进行表单校验this.$refs[formName].validate((valid) => {if(valid){//表单校验通过，发起Ajax请求，将数据提交到后端if(this.optType === 'add'){//新增操作addEmployee(this.ruleForm).then((res) =>{if(res.data.code === 1){this.$message.success('员工添加成功')if(isContinue){this.ruleForm = {name: '',username: '',sex: '1',phone: '',idNumber: ''}}else{this.$router.push('/employee')}}else{this.$message.console.error(res.data.msg);}})}else{//修改操作updateEmployee(this.ruleForm).then(res => {if (res.data.code === 1) {this.$message.success('员工信息修改成功')this.$route.push('/employee')}})}}})}}
}
</script><style lang="scss" scoped>
.addBrand {&-container {margin: 30px;margin-top: 30px;.HeadLable {background-color: transparent;margin-bottom: 0px;padding-left: 0px;}.container {position: relative;z-index: 1;background: #fff;padding: 30px;border-radius: 4px;// min-height: 500px;.subBox {padding-top: 30px;text-align: center;border-top: solid 1px $gray-5;}}.idNumber {margin-bottom: 39px;}.el-form-item {margin-bottom: 29px;}.el-input {width: 293px;}}
}
</style>

   // 修改员工export const updateEmployee = (params: any) =>request({'url': '/employee','method': 'put','data': params})

5.3、功能测试

op: 30px;
.HeadLable {
background-color: transparent;
margin-bottom: 0px;
padding-left: 0px;
}
.container {
position: relative;
z-index: 1;
background: #fff;
padding: 30px;
border-radius: 4px;
// min-height: 500px;
.subBox {
padding-top: 30px;
text-align: center;
border-top: solid 1px $gray-5;
}
}
.idNumber {
margin-bottom: 39px;
}

.el-form-item {margin-bottom: 29px;
}
.el-input {width: 293px;
}

}
}


```ts// 修改员工export const updateEmployee = (params: any) =>request({'url': '/employee','method': 'put','data': params})

5.3、功能测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

查看全文

http://www.mrgr.cn/news/19023.html

老师怎样用微信发布月考成绩？

[CISCN2019 华东南赛区]Web111

数分基础（06）商业分析四种类型简介

chrome插件开发资料

AI制作情侣头像副业项目，每天只需2小时，收入是我工资的三倍（附教程）

一文带你深度了解FreeRTOS——计数型信号量

【系统架构设计师-2021年】综合知识-答案及详解

Anaconda安装教程就看这里

首批国自然博士项目获批名单

亿图图示下载安装教程EdrawMax Pro 13版超详细图文教程

Maven持续集成（Continuous integration,简称CI）版本友好管理

9.3C++

【深入了解常用类】

Java笔试面试题AI答之正则表达式（2）

【iOS】暑期学习总结

Spring 学习笔记

探索 Nuxt Devtools：功能全面指南

Vue3 中的响应式系统：深入理解 Proxy API

LeetCode LCR088.使用最小花费爬楼梯

wget下载速度受到哪些因素影响？

前段DAY02

1、前端环境搭建

1.1、技术选型

1.2、熟悉前段代码结构

2、员工分页查询

2.1、需求分析和接口设计

2.2、代码开发

2.3、功能测试

3、启用禁用员工账号

3.1、需求分析和接口设计

3.2、代码开发

3.3、功能测试

4、新增员工

4.1、需求分析和接口设计

4.2、代码开发

4.3、功能测试

5、修改员工

5.1、需求分析和接口设计

5.2、代码开发

5.3、功能测试

5.3、功能测试

相关文章：