苍穹外卖项目前端DAY02

前段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"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="员工姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="账号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号">
    </el-table-column>
    <el-table-column
      prop="status"
      label="账号状态">
      <template slot-scope="scope">
        {{ scope.row.status === 0 ? '禁用' : '启用' }}
      </template>
    </el-table-column>
    <el-table-column
      prop="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-pagination
      class="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.total
          this.records = res.data.data.records
        }
      }).catch((err) => {
        this.message.console.error('请求出错了：' + err.message);
        
      });
    },
    //pageSize发送变化时触发
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageQuery()
    },
    //page发送变化时触发
    handleCurrentChange(page){
      this.page = page
      this.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"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="员工姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="账号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号">
    </el-table-column>
    <el-table-column
      prop="status"
      label="账号状态">
      <template slot-scope="scope">
        {{ scope.row.status === 0 ? '禁用' : '启用' }}
      </template>
    </el-table-column>
    <el-table-column
      prop="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-pagination
      class="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.total
          this.records = res.data.data.records
        }
      }).catch((err) => {
        this.message.console.error('请求出错了：' + err.message);
        
      });
    },
    //pageSize发送变化时触发
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageQuery()
    },
    //page发送变化时触发
    handleCurrentChange(page){
      this.page = page
      this.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、代码开发

添加员工操作步骤：

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

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

• 提供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、代码开发

修改员工操作步骤：

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

1. 在修改员工页面录入员工相关信息
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、功能测试