html5商城网站源码,微信头像logo在线制作,汕头市专注网站建设,wordpress多站点内容聚合#x1f4e2; 大家好#xff0c;我是 【战神刘玉栋】#xff0c;有10多年的研发经验#xff0c;致力于前后端技术栈的知识沉淀和传播。 #x1f497; #x1f33b; CSDN入驻不久#xff0c;希望大家多多支持#xff0c;后续会继续提升文章质量#xff0c;绝不滥竽充数… 大家好我是 【战神刘玉栋】有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 依赖
fastjson.version2.0.33/fastjson.version!-- JSON处理 --
dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion${fastjson.version}/version
/dependencyStep2、实体类添加注释
JSONField(format yyyy-MM-dd HH:mm)
private java.util.Date createdTime;Step3、前端正常展示
span{{ scope.row.createdTime}}/span效果如下
前端实现效果 使用vue的管道符实现代码如下
span{{ scope.row.createdTime | timeFilter}}/spantimeFilter(time) {// 这边将字符串进行日期转换
}前端代码生成
这里先使用代码生成器生成教师实体对应的前端基础页面和接口不然一个个写是挺耗时的也比较基础。 企业实际开发中这部分代码通常也是代码生成或者CV其他代码再进行调整。 先来一段完整的Vue
templatediv classapp-container!-- 表头 查询与新增 --el-rowel-col :span24div classfilter-containerel-input placeholder关键词过滤 v-modellistQuery.query stylewidth: 200px; classfilter-itemkeyup.enter.nativehandleFilter/el-select v-modellistQuery.validFlag placeholder有效标志 clearable classfilter-item stylewidth: 150pxchangehandleFilterel-option v-for(value, key) in statusOptions :keykey :labelvalue :valuekey//el-selectel-button v-waves classfilter-item typeprimary iconel-icon-search clickhandleFilter搜索/el-buttonel-button classfilter-item stylemargin-left: 10px; typeprimary iconel-icon-circle-plus-outlineclickhandleCreate新增/el-button/div/el-col/el-row!-- 表格list --el-rowel-col :span24 :gutter24el-table:row-class-namerowClassNamev-loadinglistLoading:keytableKey:datalistelement-loading-textLoadingborderfit:heighttableHeightstylewidth: 100%;highlight-current-rowel-table-column aligncenter label序号 width80template slot-scopescope{{ scope.$index }}/template/el-table-columnel-table-column show-overflow-tooltip label教师编号 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaCode }}/template/el-table-columnel-table-column show-overflow-tooltip label教师名称 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaName }}/template/el-table-columnel-table-column show-overflow-tooltip label教师头像 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaImg }}/template/el-table-columnel-table-column show-overflow-tooltip label教师电话 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaPhone }}/template/el-table-columnel-table-column show-overflow-tooltip label教师学科 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.stuItem }}/template/el-table-columnel-table-column show-overflow-tooltip label教师身份 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaType }}/template/el-table-columnel-table-column show-overflow-tooltip label教师配置 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.teaConfig }}/template/el-table-columnel-table-column show-overflow-tooltip label排序号 show-overflow-tooltip min-width10% aligncentertemplate slot-scopescope{{ scope.row.sortNo }}/template/el-table-columnel-table-column show-overflow-tooltip class-namestatus-col label创建时间 min-width20% aligncentertemplate slot-scopescopei classel-icon-time/span{{ scope.row.createdTime }}/span/template/el-table-columnel-table-column show-overflow-tooltip class-namestatus-col label修改时间 min-width20% aligncentertemplate slot-scopescopei classel-icon-time/span{{ scope.row.modifiedTime }}/span/template/el-table-columnel-table-column show-overflow-tooltip class-namestatus-col label有效标志 min-width10% aligncentertemplate slot-scopescopeel-tag :typescope.row.validFlag | statusFilter{{ scope.row.validFlag | validFilter }}/el-tag/template/el-table-columnel-table-column label操作 aligncenter width180 class-namesmall-padding fixed-widthtemplate slot-scopescopeel-button sizemini typeprimary clickhandleUpdate(scope.row)编辑/el-buttonel-button sizemini typedanger clickhandleDelete(scope.row)删除/el-button/template/el-table-column/el-table/el-col/el-row!-- 分页控件 --pagination v-showtotal0 :totaltotal:page.synclistQuery.pageNum:limit.synclistQuery.pageSizelayouttotal, sizes, prev, pager, nextstylefloat:right;paginationfetchData/!-- 编辑弹窗 --el-dialog:close-on-click-modalfalse:titletextMap[dialogStatus]:visible.syncdialogFormVisibleel-formrefdataForm:rulesrules:modeltemplabel-positionrightlabel-width100pxstyleel-row :gutter20el-col :span12el-form-item label教师编号 label-width105px propteaCodeel-input v-modeltemp.teaCode :disableddialogStatus update//el-form-item/el-col/el-rowel-row :gutter20el-col :span12el-form-item label教师名称 label-width105px propteaNameel-input v-modeltemp.teaName//el-form-item/el-colel-col :span12el-form-item label教师头像 label-width105px propteaImgel-input v-modeltemp.teaImg//el-form-item/el-col/el-rowel-row :gutter20el-col :span12el-form-item label教师电话 label-width105px propteaPhoneel-input v-modeltemp.teaPhone//el-form-item/el-colel-col :span12el-form-item label教师学科 label-width105px propstuItemel-input v-modeltemp.stuItem//el-form-item/el-col/el-rowel-row :gutter20el-col :span12el-form-item label教师身份 label-width105px propteaTypeel-input v-modeltemp.teaType//el-form-item/el-colel-col :span12el-form-item label教师配置 label-width105px propteaConfigel-input v-modeltemp.teaConfig//el-form-item/el-col/el-rowel-row :gutter20el-col :span12el-form-item label排序号 label-width105px propsortNoel-input v-model.numbertemp.sortNo//el-form-item/el-colel-col :span12/el-col/el-rowel-row :gutter20el-col :span12/el-colel-col :span12el-form-item label有效标志 label-width105pxel-switchv-modelvalidSwitchactive-color#13ce66inactive-color#ff4949/el-switch/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footerel-button typeprimary clickdialogStatuscreate?createData():updateData()确认/el-buttonel-button clickdialogFormVisible false取消/el-button/div/el-dialog/div
/templatescript
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: {// getterget: function() {return this.temp.validFlag 1},// setterset: function(newValue) {if (newValue) {this.temp.validFlag 1} else {this.temp.validFlag 0}}}},created() {this.fetchData()},methods: {/*** 获取表格数据*/fetchData() {let that thisthis.listLoading truethis.$http.all([ZyTeacherInfoApi.getPage(this.listQuery)]).then(this.$http.spread(function(perms) {that.list perms.rowsthat.total perms.totalthat.listLoading false}))},/*** 新增弹窗*/handleCreate() {this.resetTemp()this.dialogStatus createthis.dialogFormVisible truethis.$nextTick(() {this.$refs[dataForm].clearValidate()})},/*** 清空弹窗内容*/resetTemp() {this.temp {teaCode: ,teaName: ,teaImg: ,teaPhone: ,stuItem: ,teaType: ,teaConfig: ,sortNo: ,createdTime: ,modifiedTime: ,validFlag: 1}},/*** 确定新增*/createData() {let that thisthis.$refs[dataForm].validate((valid) {if (valid) {ZyTeacherInfoApi.insert(this.temp).then(() {this.dialogFormVisible falsethis.$notify({title: 成功,message: 创建成功,type: success,duration: 1000,onClose() {that.fetchData()}})})}})},/*** 编辑弹窗*/handleUpdate(row) {this.temp Object.assign({}, row)this.dialogStatus updatethis.dialogFormVisible truethis.$nextTick(() {this.$refs[dataForm].clearValidate()})},/*** 确认编辑*/updateData() {let that thisthis.$refs[dataForm].validate((valid) {if (valid) {const tempData Object.assign({}, this.temp)ZyTeacherInfoApi.update(tempData).then(() {this.dialogFormVisible falsethis.$notify({title: 成功,message: 更新成功,type: success,duration: 1000,onClose() {that.fetchData()}})})}})},/*** 删除操作*/handleDelete(row) {let that thisZyTeacherInfoApi.remove({ teaCode: row.teaCode }).then(() {this.$notify({title: 成功,message: 删除成功,type: success,duration: 1000,onClose() {that.fetchData()}})})},/*** 搜索过滤*/handleFilter() {this.listQuery.pageNum 1this.fetchData()},rowClassName({ rowIndex }) {return rowIndex % 2 0 ? warning-row : success-row}}
}
/scriptstyle
.el-table .warning-row {background-color: #fff7e6;
}.el-table .success-row {background-color: #f0f9eb;
}
/style
再来一段完整的api
import request from /utils/requestexport 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路由前面可能还没介绍后续专题介绍。 {path: /tea, component: () import(/views/study/ZyTeacherInfoManage), hidden: true
},最后看一下效果有那么回事吧。 操作一下增删改查基本功能都正常你敢相信使用一套合适的代码生成器仅仅几分钟就可以实现一个CURD功能。
代码修修补补
虽然功能全部正常但是要拿去交差还是要完善一些。
【查询页面调整】 首先表格页面代码生成的是全部字段先把不重要的字段去掉效果如下 表单元素太紧凑了加一点间距上一篇文章刚介绍了《企业实战分享 · CodeGeeX 初体验》给它一个机会练练手如下所示 生成很快试试效果如下图 啧啧什么鬼没理解我意图直接用 span 拆开间距了也可能我没说清楚。 那给ChatGpt一个机会 效果如下图好像还不错就这样吧。
【分页查询功能】 代码生成器是没办法那么智能知道你想用哪些字段作为搜索条件当然生成的时候给字段添加一些额外标识就另说但感觉这样效率更低还不如生成之后再来调整。 这边设计代码生成器的时候固定保留了一个模糊搜索框和有效标志下拉框可以覆盖大部分场景的最小需要。 看一下对应前端代码 1、前端定义listQuery对象代表查询入参传递query和validFlag两个属性点击搜索触发handleFilter逻辑。 2、触发的JS逻辑其实就是利用基于axios封装的请求工具异步请求相关接口获取分页数据。 Tips关于前端请求后端的工具封装后续专栏介绍。 el-input placeholder关键词过滤 v-modellistQuery.query classfilter-item input-itemkeyup.enter.nativehandleFilter
/
el-select v-modellistQuery.validFlag placeholder有效标志 clearable classfilter-item select-itemchangehandleFilterel-option v-for(value, key) in statusOptions :keykey :labelvalue :valuekey/
/el-select
el-button v-waves classfilter-item button-item typeprimary iconel-icon-search clickhandleFilter搜索
/el-button/*** 搜索过滤*/
handleFilter() {this.listQuery.pageNum 1this.fetchData()
},/*** 获取表格数据*/
fetchData() {let that thisthis.listLoading truethis.$http.all([ZyTeacherInfoApi.getPage(this.listQuery)]).then(this.$http.spread(function(perms) {that.list perms.rowsthat.total perms.totalthat.listLoading false}))
},再看看后端代码 1、这边是借助PageHelper插件轻松实现分页效果 2、第二段是XML里面的SQL写法参考一下即可根据query模糊搜索根据validFlag是精确查询
Service
public class ZyTeacherInfoService extends CrudServiceZyTeacherInfo, ZyTeacherInfoMapper {/*** 获取用户分页列表** param query 搜索关键词* param pageInfo 分页实体* param zyTeacherInfo 实体入参* return 用户列表*/public PageInfoZyTeacherInfo findListPage(String query, PageInfo pageInfo, ZyTeacherInfo zyTeacherInfo) {PageHelper.startPage(pageInfo);ListZyTeacherInfo zyTeacherInfolist this.dao.findListPage(query, zyTeacherInfo);return new PageInfo(zyTeacherInfolist);}
}Mapper
public interface ZyTeacherInfoMapper extends BaseMapperZyTeacherInfo {/*** 分页获取教师信息表列表** param query 搜索关键词* param zyTeacherInfo 查询实体* return 用户列表*/ListZyTeacherInfo findListPage(Param(query) String query, Param(model) ZyTeacherInfo zyTeacherInfo);
}
!-- 分页查询教师信息表列表 --
select idfindListPage resultTypezyTeacherInfoselectt.*fromzy_teacher_info twhere 11if testquery ! null and query ! AND (INSTR(t.TEA_NAME , #{query})0 OR t.TEA_CODE #{query})/ifif testmodel.validFlag ! null and model.validFlag ! and t.VALID_FLAG #{model.validFlag}/if
/select【关于增删改】 这部分属于基操前面示例都能看懂这边以更新为例简单说明。 前端 1、填写完表单信息触发updateData函数先针对表单信息做一个校验参考ElementUI 2、触发 ZyTeacherInfoApi 接口该接口也是利用 Axios触发 Post 请求调用后端
updateData() {let that thisthis.$refs[dataForm].validate((valid) {if (valid) {const tempData Object.assign({}, this.temp)ZyTeacherInfoApi.update(tempData).then(() {this.dialogFormVisible falsethis.$notify({title: 成功,message: 更新成功,type: success,duration: 1000,onClose() {that.fetchData()}})})}})
},update(params) {return request({url: /zyTeacherInfo/update, method: post, params})
},后端好像没什么特别的就是正常的 MyBatis - Update搞定 前端知识拓展
图形化方式创建 Vue
在这篇博文《程序猿学会 Vue · 基础与实战篇》中介绍创建Vue项目的多种方式漏介绍了一种图形化。 命令行输入vue ui 会自动打开一个图形化页面如下图按步骤傻瓜式操作即可。 Tips好像也没有什么特别的不详细介绍。 TipsSpringBoot也有类似界面总之就是越来越简单了怎么傻瓜怎么来。 整合路由 Vue-Router
【安装使用】 Step1、安装路由 npm install vue-router
Step2、编写路由配置文件/router/index.js
import {createRouter, createWebHashHistory} from vue-router
import HomeView from ../views/Home.vueconst routes [{path: /home, name: home, component: HomeView
}, {path: /about, name: about, component: () import(../views/About.vue)
}]const router createRouter({history: createWebHashHistory(), routes
})export default routerStep3、引入上述 JS在 main.js 操作
// 引入路由
import router from ./router/index.js
app.use(router)Step4、效果使用 App.vue 页面在合适地方添加 地址栏输入/home或/about内容会随之变化。 总结陈词
本系列博文更新到第四篇了基本实现了教师的CURD功能。 接下来几篇博文将针对其中涉及的几个框架封装知识点进行专题说明。 总之目标是帮助初入职场的大家快速适应企业开发多一些机会。 如果觉得内容还可以麻烦点个关注不迷路您的鼓励是我创作的动力。
