📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗

🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数，欢迎多多交流。👍

文章目录

写在前面的话教师信息管理 CURD前文回顾日期格式化前端代码生成代码修修补补

前端知识拓展图形化方式创建 Vue整合路由 Vue-Router

总结陈词

写在前面的话

本系列博文已连载到第三回，通过前三回博文，我们已完成了前后端基础服务的搭建，也完成后端的完整接口清单，前端还差一些，本篇博文，把前端功能补充完整，让它像那么回事。

本篇博文，还有几个目标要完成：

回顾一下之前三篇文章，将一些知识点补充一下；针对需求内容，把前端服务的CURD功能丰富起来；对部分前端细节不到位的地方进行修复，同时分享相关经验；

加油，程序猿，保持住Tempo，开干，玩的就是真实！

关联文章：

《程序猿入职必会（1） · 搭建拥有数据交互的 SpringBoot 》

《程序猿入职必会（2） · 搭建具备前端展示效果的 Vue》

《程序猿入职必会（3） · SpringBoot 各层功能完善 》

《程序猿入职必会（4） · Vue 完成 CURD 案例 》

《程序猿入职必会（5） · CURD 页面细节规范 》

《程序猿入职必会（6） · 返回结果统一封装》

教师信息管理 CURD

Tips：一直说CURD、CURD的，行业内的默认术语，如果有小伙伴不知道这是什么，那大概是代表创建（Create）、更新（Update）、读取（Read）和删除（Delete）操作的集合，可以指代某个实体表对应的维护页面，也是程序猿最基础的拧螺丝工作。

前文回顾

先回顾一下之前第二篇的结尾，我们引入 ElementUI 后，实现的效果如下。

效果还可以，不过只是功能的冰山一角。

不对，登记时间怎么是这个鬼样子？先给它修正，不然很别扭。

日期格式化

实现日期格式化可以后端来，也可以前端。

后端实现效果

Step1、引入 fastjson 依赖

<code><fastjson.version>2.0.33</fastjson.version>

<!-- JSON处理 -->

<dependency>

<groupId>com.alibaba</groupId>

<artifactId>fastjson</artifactId>

<version>${fastjson.version}</version>

</dependency>

Step2、实体类添加注释

@JSONField(format = "yyyy-MM-dd HH:mm")

private java.util.Date createdTime;

Step3、前端正常展示

<span>{ { scope.row.createdTime}}</span>

效果如下：

前端实现效果

使用vue的管道符实现，代码如下：

<code><span>{ -- -->{ scope.row.createdTime | timeFilter}}</span>

timeFilter(time) {

// 这边将字符串进行日期转换

}

前端代码生成

这里先使用代码生成器生成教师实体对应的前端基础页面和接口，不然一个个写是挺耗时的，也比较基础。

企业实际开发中，这部分代码通常也是代码生成或者CV其他代码，再进行调整。

先来一段完整的Vue：

<template>

<div class="app-container">code>

<!-- 表头 查询与新增 -->

<el-row>

<el-col :span="24">code>

<div class="filter-container">code>

<el-input placeholder="关键词过滤" v-model="listQuery.query" style="width: 200px;" class="filter-item"code>

@keyup.enter.native="handleFilter"code>

/>

<el-select v-model="listQuery.validFlag" placeholder="有效标志" clearable class="filter-item" style="width: 150px"code>

@change="handleFilter"code>

>

<el-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key"/>code>

</el-select>

<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索code>

</el-button>

<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline"code>

@click="handleCreate"code>

>新增

</el-button>

</div>

</el-col>

</el-row>

<!-- 表格list -->

<el-row>

<el-col :span="24" :gutter="24">code>

<el-table

:row-class-name="rowClassName"code>

v-loading="listLoading"code>

:key="tableKey"code>

:data="list"code>

element-loading-text="Loading"code>

border

fit

:height="tableHeight"code>

style="width: 100%;"code>

highlight-current-row

>

<el-table-column align="center" label="序号" width="80">code>

<template slot-scope="scope">code>

{ -- -->{ scope.$index }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师编号" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaCode }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师名称" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaName }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师头像" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaImg }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师电话" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaPhone }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师学科" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.stuItem }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师身份" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaType }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="教师配置" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.teaConfig }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip label="排序号" show-overflow-tooltip min-width="10%" align="center">code>

<template slot-scope="scope">code>

{ -- -->{ scope.row.sortNo }}

</template>

</el-table-column>

<el-table-column show-overflow-tooltip class-name="status-col" label="创建时间" min-width="20%" align="center">code>

<template slot-scope="scope">code>

<i class="el-icon-time"/>code>

<span>{ -- -->{ scope.row.createdTime }}</span>

</template>

</el-table-column>

<el-table-column show-overflow-tooltip class-name="status-col" label="修改时间" min-width="20%" align="center">code>

<template slot-scope="scope">code>

<i class="el-icon-time"/>code>

<span>{ -- -->{ scope.row.modifiedTime }}</span>

</template>

</el-table-column>

<el-table-column show-overflow-tooltip class-name="status-col" label="有效标志" min-width="10%" align="center">code>

<template slot-scope="scope">code>

<el-tag :type="scope.row.validFlag | statusFilter">{ -- -->{ scope.row.validFlag | validFilter }}</el-tag>code>

</template>

</el-table-column>

<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">code>

<template slot-scope="scope">code>

<el-button size="mini" type="primary" @click="handleUpdate(scope.row)">code>

编辑

</el-button>

<el-button size="mini" type="danger" @click="handleDelete(scope.row)">code>

删除

</el-button>

</template>

</el-table-column>

</el-table>

</el-col>

</el-row>

<!-- 分页控件 -->

<pagination v-show="total>0" :total="total"code>

:page.sync="listQuery.pageNum"code>

:limit.sync="listQuery.pageSize"code>

layout="total, sizes, prev, pager, next"code>

style="float:right;"code>

@pagination="fetchData"code>

/>

<!-- 编辑弹窗 -->

<el-dialog

:close-on-click-modal="false"code>

:title="textMap[dialogStatus]"code>

:visible.sync="dialogFormVisible"code>

>

<el-form

ref="dataForm"code>

:rules="rules"code>

:model="temp"code>

label-position="right"code>

label-width="100px"code>

style=""code>

>

<el-row :gutter="20">code>

<el-col :span="12">code>

<el-form-item label="教师编号" label-width="105px" prop="teaCode">code>

<el-input v-model="temp.teaCode" :disabled="dialogStatus === 'update'"/>code>

</el-form-item>

</el-col>

</el-row>

<el-row :gutter="20">code>

<el-col :span="12">code>

<el-form-item label="教师名称" label-width="105px" prop="teaName">code>

<el-input v-model="temp.teaName"/>code>

</el-form-item>

</el-col>

<el-col :span="12">code>

<el-form-item label="教师头像" label-width="105px" prop="teaImg">code>

<el-input v-model="temp.teaImg"/>code>

</el-form-item>

</el-col>

</el-row>

<el-row :gutter="20">code>

<el-col :span="12">code>

<el-form-item label="教师电话" label-width="105px" prop="teaPhone">code>

<el-input v-model="temp.teaPhone"/>code>

</el-form-item>

</el-col>

<el-col :span="12">code>

<el-form-item label="教师学科" label-width="105px" prop="stuItem">code>

<el-input v-model="temp.stuItem"/>code>

</el-form-item>

</el-col>

</el-row>

<el-row :gutter="20">code>

<el-col :span="12">code>

<el-form-item label="教师身份" label-width="105px" prop="teaType">code>

<el-input v-model="temp.teaType"/>code>

</el-form-item>

</el-col>

<el-col :span="12">code>

<el-form-item label="教师配置" label-width="105px" prop="teaConfig">code>

<el-input v-model="temp.teaConfig"/>code>

</el-form-item>

</el-col>

</el-row>

<el-row :gutter="20">code>

<el-col :span="12">code>

<el-form-item label="排序号" label-width="105px" prop="sortNo">code>

<el-input v-model.number="temp.sortNo"/>code>

</el-form-item>

</el-col>

<el-col :span="12">code>

</el-col>

</el-row>

<el-row :gutter="20">code>

<el-col :span="12">code>

</el-col>

<el-col :span="12">code>

<el-form-item label="有效标志" label-width="105px">code>

<el-switch

v-model="validSwitch"code>

active-color="#13ce66"code>

inactive-color="#ff4949"code>

>

</el-switch>

</el-form-item>

</el-col>

</el-row>

</el-form>

<div slot="footer" class="dialog-footer">code>

<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button>code>

<el-button @click="dialogFormVisible = false">取消</el-button>code>

</div>

</el-dialog>

</div>

</template>

<script>

import ZyTeacherInfoApi from '@/api/study/ZyTeacherInfoApi'

import waves from '@/directive/waves' // Waves directive

import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {

directives: { waves },

components: { Pagination },

filters: {

statusFilter(status) {

const statusMap = {

1: 'success',

2: 'blue',

3: 'warning',

4: 'info',

0: 'danger'

}

return statusMap[status]

},

commonFilter(status, data) {

if (status) {

return data[status].text || data[status]

} else {

return ''

}

},

validFilter(status) {

const statusMap = {

1: '有效',

0: '作废'

}

return statusMap[status]

},

timeFilter(time) {

if (time) {

return new Date(time).Format('yyyy-MM-dd hh:mm:ss')

} else {

return ''

}

}

},

data() {

return {

tableKey: 0,//表格key值

list: null, //表格对象

listLoading: true, //表格加载框

total: 0, //分页总数

tableHeight: window.innerHeight - 220, //表格高度

listQuery: { //表格查询对象

pageNum: 1,

pageSize: 10,

query: '',

validFlag: undefined,

teaCode: ''

},

temp: {}, //编辑框临时变量

statusOptions: { //有效无效下拉框

'1': '有效',

'0': '作废'

},

dialogFormVisible: false, //编辑框显示

dialogStatus: '', //编辑框更新插入状态

textMap: { //编辑框标题

update: '编辑',

create: '创建'

},

rules: { //编辑框校验规则

teaCode: [{ required: true, message: '请输入教师编号', trigger: 'change' }],

teaName: [{ required: true, message: '请输入教师名称', trigger: 'change' }],

teaImg: [{ required: true, message: '请输入教师头像', trigger: 'change' }],

teaPhone: [{ required: true, message: '请输入教师电话', trigger: 'change' }],

stuItem: [{ required: true, message: '请输入教师学科', trigger: 'change' }],

teaType: [{ required: true, message: '请输入教师身份', trigger: 'change' }],

teaConfig: [{ required: true, message: '请输入教师配置', trigger: 'change' }],

sortNo: [

{

type: 'number', required: false, message: '排序号必须为整数值', transform(value) {

if (value === '' || value === null) {

return 0

}

if (_.isInteger(value)) {

return value

} else {

return false

}

}

}

],

validFlag: [{ required: true, message: '请输入有效标志', trigger: 'change' }]

}

}

},

computed: {

validSwitch: {

// getter

get: function() {

return this.temp.validFlag === '1'

},

// setter

set: function(newValue) {

if (newValue) {

this.temp.validFlag = '1'

} else {

this.temp.validFlag = '0'

}

}

}

},

created() {

this.fetchData()

},

methods: {

/**

* 获取表格数据

*/

fetchData() {

let that = this

this.listLoading = true

this.$http.all([ZyTeacherInfoApi.getPage(this.listQuery)])

.then(this.$http.spread(function(perms) {

that.list = perms.rows

that.total = perms.total

that.listLoading = false

}))

},

/**

* 新增弹窗

*/

handleCreate() {

this.resetTemp()

this.dialogStatus = 'create'

this.dialogFormVisible = true

this.$nextTick(() => {

this.$refs['dataForm'].clearValidate()

})

},

/**

* 清空弹窗内容

*/

resetTemp() {

this.temp = {

teaCode: '',

teaName: '',

teaImg: '',

teaPhone: '',

stuItem: '',

teaType: '',

teaConfig: '',

sortNo: '',

createdTime: '',

modifiedTime: '',

validFlag: '1'

}

},

/**

* 确定新增

*/

createData() {

let that = this

this.$refs['dataForm'].validate((valid) => {

if (valid) {

ZyTeacherInfoApi.insert(this.temp).then(() => {

this.dialogFormVisible = false

this.$notify({

title: '成功',

message: '创建成功',

type: 'success',

duration: 1000,

onClose() {

that.fetchData()

}

})

})

}

})

},

/**

* 编辑弹窗

*/

handleUpdate(row) {

this.temp = Object.assign({}, row)

this.dialogStatus = 'update'

this.dialogFormVisible = true

this.$nextTick(() => {

this.$refs['dataForm'].clearValidate()

})

},

/**

* 确认编辑

*/

updateData() {

let that = this

this.$refs['dataForm'].validate((valid) => {

if (valid) {

const tempData = Object.assign({}, this.temp)

ZyTeacherInfoApi.update(tempData).then(() => {

this.dialogFormVisible = false

this.$notify({

title: '成功',

message: '更新成功',

type: 'success',

duration: 1000,

onClose() {

that.fetchData()

}

})

})

}

})

},

/**

* 删除操作

*/

handleDelete(row) {

let that = this

ZyTeacherInfoApi.remove({ teaCode: row.teaCode }).then(() => {

this.$notify({

title: '成功',

message: '删除成功',

type: 'success',

duration: 1000,

onClose() {

that.fetchData()

}

})

})

},

/**

* 搜索过滤

*/

handleFilter() {

this.listQuery.pageNum = 1

this.fetchData()

},

rowClassName({ rowIndex }) {

return rowIndex % 2 === 0 ? 'warning-row' : 'success-row'

}

}

}

</script>

<style>

.el-table .warning-row {

background-color: #fff7e6;

}

.el-table .success-row {

background-color: #f0f9eb;

}

</style>

再来一段完整的api：

import request from '@/utils/request'

export default { -- -->

getList(params) {

return request({

url: '/zyTeacherInfo/', method: 'get', params

})

},

get(params) {

return request({

url: '/zyTeacherInfo/' + params.teaCode, method: 'get', params

})

},

getPage(params) {

return request({

url: '/zyTeacherInfo/page', method: 'get', params

})

},

update(params) {

return request({

url: '/zyTeacherInfo/update', method: 'post', params

})

},

insert(params) {

return request({

url: '/zyTeacherInfo/insert', method: 'post', params

})

},

remove(params) {

return request({

url: '/zyTeacherInfo/delete', method: 'post', params

})

}

}

接着配一下路由，router.js

Tips：路由前面可能还没介绍，后续专题介绍。