一：前言
1：因为本人也是全栈初学者，现在主职是公司前端，鉴于当前行业形式，单单只掌握一门语言已经不再吃香，甚至有点危险，35岁危机极大可能提前。作为00后要始终保持危机意识，不至于在25,26岁时被裁去卖煎饼果子，所以现在决定开始自学后端，争取早日成为一名全栈开发，能独自自主完成单个项目，早日回到老家工作，开始养老人生。
2：请注意：本教程只注重功能实现（增删改查，文件上传等），前端的样式可能
会略显简陋，有强迫症的慎入！！
3：前置知识：前端（前端三件套，vue3）后端（java基础，mysql基础）
4：项目开展前提：
工具：Intellij IDEA 2023.3.4,vscode,mySql,vue3,springboot3,element-plus等
开发插件：
截图工具：pixpin
接口测试工具：postman
vscode：Volar，prettier，auto close tag
Intellij IDEA：chinese language汉化，codeGlance Pro代码地图，MybatisX，ptg
二：创建项目
1：前端项目
1：使用 npm create vue@latest 命令创建一个vue3项目，勾选pinia和router
2：npm install 下载依赖
3：按需引入element-plus，点击此链接跳转官网
4：把main.js中的框架自带样式注释或删除
5：测试一下elementplus是否被正确配置，改造app.vue,并npm run dev运行项目
可以看到，elementplus已被正确配置并成功引入
2：后端项目
1：打开idea，新建项目
新建项目，勾选项目所需依赖，想知道勾选的依赖有什么作用的请自行网上搜索，加深印象。到这里项目就创建成功了。
2：思考后台样式与表设计
三：开始编写代码
1：前端页面
使用elementplus布局容器
app.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<div class="common-layout">
<el-container class="container">
<el-aside class="aside" width="200px">侧边栏</el-aside>
<el-container>
<el-header class="header">头部</el-header>
<el-main class="main">内容</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped lang="less">
.container{
height: 100vh;
.aside{
background-color: aqua;
}
.header{
background-color: chocolate;
}
.main{
background-color: beige;
}
}
</style>
在侧边栏使用menu菜单
app.vue代码
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue'
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
let isCollapse = ref(true)
const handleOpen = (key, keyPath) => {//菜单展开
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {//菜单折叠
console.log(key, keyPath)
}
</script>
<template>
<div class="common-layout">
<el-container class="container">
<el-aside class="aside" :style="{ 'width': !isCollapse ? '200px' : '60px' }">
<el-menu default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
@close="handleClose" router>
<el-menu-item index="/">
<el-icon><icon-menu /></el-icon>
<template #title>首页</template>
</el-menu-item>
<el-sub-menu index="gongsi">
<template #title>
<el-icon>
<location />
</el-icon>
<span>公司信息管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/gongsi/DeptInfo">部门管理</el-menu-item>
<el-menu-item index="/gongsi/EmployeeInformation">员工管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-menu-item index="3">
<el-icon>
<document />
</el-icon>
<template #title>公司图表数据</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon>
<setting />
</el-icon>
<template #title>暂未开发...</template>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header class="header">
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :value="false">展开</el-radio-button>
<el-radio-button :value="true">折叠</el-radio-button>
</el-radio-group>
头部</el-header>
<el-main class="main">
<RouterView />
</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped lang="less">
.container {
height: 100vh;
.aside {
background-color: #fff;
}
.header {
background-color: chocolate;
}
.main {
background-color: beige;
}
}
</style>
编写homeView.vue文件
<script setup>
</script>
<template>
<div>
<h1>首页</h1>
<div style="display: flex;">
<div class="left">
<div>前端技术选型</div>
<ul>
<li>vue3</li>
<li>elementplus</li>
<li>router</li>
<li>pinia</li>
<li>axios</li>
<li>...</li>
</ul>
</div>
<div class="right">
<div>后端技术选型</div>
<ul>
<li>springboot3</li>
<li>maven</li>
<li>lombok</li>
<li>pageHelper</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</template>
运行项目，效果图
2：后端接口开发
1：项目连接数据库
1-1：
1-2：
1-3：1-2用到的sql语句
-- 部门管理
create table dept(
id int unsigned primary key auto_increment comment '主键ID',
name varchar(10) not null unique comment '部门名称',
create_time datetime not null comment '创建时间',
update_time datetime not null comment '修改时间'
) comment '部门表';
-- 部门表测试数据
insert into dept (id, name, create_time, update_time)
values(
1,'学工部',now(),now()),
(2,'教研部',now(),now()),
(3,'咨询部',now(),now()),
(4,'就业部',now(),now()),
(5,'人事部',now(),now()
);
-- 员工管理(带约束)
create table emp (
id int unsigned primary key auto_increment comment 'ID',
username varchar(20) not null unique comment '用户名',
password varchar(32) default '123456' comment '密码',
name varchar(10) not null comment '姓名',
gender tinyint unsigned not null comment '性别, 说明: 1 男, 2 女',
image varchar(300) comment '图像',
job tinyint unsigned comment '职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师',
entrydate date comment '入职时间',
dept_id int unsigned comment '部门ID',
create_time datetime not null comment '创建时间',
update_time datetime not null comment '修改时间'
) comment '员工表';
-- 员工表测试数据
INSERT INTO emp
(id, username, password, name, gender, image, job,
entrydate,dept_id, create_time, update_time) VALUES
(1,'zhangsan','123456','张三',1,'1.jpg',4,'2000-01-01',2,now(),now()),
(2,'liguang','123456','李广',1,'2.jpg',2,'2015-01-01',2,now(),now()),
(3,'xinqiji','123456','辛弃疾',1,'3.jpg',2,'2008-05-01',2,now(),now()),
(4,'libai','123456','李白',1,'4.jpg',2,'2007-01-01',2,now(),now()),
(5,'sushi','123456','苏轼',1,'5.jpg',2,'2012-12-05',2,now(),now()),
(6,'dufu','123456','杜甫',2,'6.jpg',3,'2013-09-05',1,now(),now()),
(7,'dumu','123456','杜牧',2,'7.jpg',1,'2005-08-01',1,now(),now()),
(8,'zhouyu','123456','周瑜',2,'8.jpg',1,'2014-11-09',1,now(),now()),
(9,'zhugeliang','123456','诸葛亮',2,'9.jpg',1,'2011-03-11',1,now(),now()),
(10,'xiahoudun','123456','夏侯惇',2,'10.jpg',1,'2013-09-05',1,now(),now()),
(11,'liqingzhao','123456','李清照',1,'11.jpg',5,'2007-02-01',3,now(),now()),
(12,'taoyuanming','123456','陶渊明',1,'12.jpg',5,'2008-08-18',3,now(),now()),
(13,'wangwei','123456','王伟',1,'13.jpg',5,'2012-11-01',3,now(),now()),
(14,'weiyingwu','123456','韦应物',1,'14.jpg',2,'2002-08-01',2,now(),now()),
(15,'zhanghong','123456','张红',1,'15.jpg',2,'2011-05-01',2,now(),now()),
(16,'heqiao','123456','何桥',1,'16.jpg',2,'2007-01-01',2,now(),now()),
(17,'liyuan','123456','李渊',1,'17.jpg',NULL,'2015-03-21',NULL,now(),now());1-4：
1-5：创建实体类
可以看到两个实体类的get和set方法占据了超多代码量，这时候我们下载的lombok依赖就起作用了，对上面两个实体类稍加改造
代码量得到极大的删减，看着就很舒坦！
根据java项目三层架构原则，创建控制层，业务层（逻辑层，service层），持久层（dao）文件夹
3：编写查询部门接口
3-1：按照图示编写代码
可以看到有很多注解，大大简化了我们的开发效率，因为有很多注解在这里就不一一解释了，用过几次就知道大概是什么意思了，我是个实用主义，不过多的去探究其中底层原理，会拿来用解决项目中的问题就可，想研究底层原理的可自行百度，谢谢
3-2：运行项目
出现这个页面就代表运行成功，接下来使用postman工具来测试接口
3-3：打开postman，测试接口
我们发现测试成功，有数据返回，但是createTime和updateTime字段是null，再看数据表可以看到明明是有值的，这是因为数据表的字段是create_time和update_time字段，一个是驼峰命名，一个是用下划线命名，字段名不一致，而且我们希望测试成功能在控制台打印相关信息，方便查看调试。这两个问题一块解决，如图所示：
修改完成后重启项目，再来测试一下
ok，成功！接下来就要写前端页面了，把返回的数据渲染到页面上
3-4:前端使用axios进行网络请求，并配置跨域
打开前端项目，使用 npm i axios 下载axios依赖
在vite.config.js中配置跨域，因为前后端项目端口不一样，所以即使是同一个电脑，也需要进行跨域配置
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},然后在src文件夹下创建utils文件夹，在utils下创建request.js文件夹，二次封装axios
在deptInfo.vue文件中测试请求
接下来在浏览器打开控制台，查看网络请求
成功拿到数据
3-5：把数据渲染到表格中
DeptInfo.vue文件
<script setup>
import request from '@/utils/request.js'
import { ref,onMounted } from 'vue'
onMounted(()=>{
getAllDept()
})
const getAllDept = () => {
request.get("/api/depts").then(res=>{
tableData.value=res.data
})
}
let tableData = ref([])
</script>
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="序号" width="180" />
<el-table-column prop="name" label="部门名称" width="180" />
<el-table-column prop="updateTime" label="最后操作时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
页面展示
渲染成功
4：编写增加部门接口
4-1：后端接口
重启项目，打开postman测试接口
不确定的可以打开数据表查看
新增部门成功
4-2：前端页面
DeptInfo.vue文件
<script setup>
import request from '@/utils/request.js'
import { ref,onMounted } from 'vue'
import {
Plus
} from '@element-plus/icons-vue'
onMounted(()=>{
getAllDept()
})
let tableData = ref([])
const getAllDept = () => {
request.get("/api/depts").then(res=>{
tableData.value=res.data
})
}
let addDeptButton = ref(false)
let form=ref({
name:''
})
const addDeptPrimary = () => {//点击确定,添加部门
request.post("/api/depts",form.value).then(res=>{
if(res.code==0){
ElMessage({
message: res.msg,
type: 'success',
})
getAllDept()
addDeptButton.value=false
}
})
}
const dialogcancel = () => {//点击取消,重置表单
form.value={
name:''
}
}
</script>
<template>
<div>
<el-button type="primary" size="large" @click="addDeptButton = true"><el-icon>
<Plus />
</el-icon>新增</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="序号" width="180" />
<el-table-column prop="name" label="部门名称" width="180" />
<el-table-column prop="updateTime" label="最后操作时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="addDeptButton" title="新增部门" width="500" draggable @close="dialogcancel">
<el-form :model="form">
<el-form-item label="部门名称" label-width="140px">
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addDeptButton = false">取消</el-button>
<el-button type="primary" @click="addDeptPrimary">
确定
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
页面效果
5：编写删除部门接口
5-1：后端接口
重启项目，打开postman测试
测试成功
5-2：前端页面
页面效果
6：编写修改部门接口
6-1：后端接口
别忘了重启项目，打开postman测试
6-2：前端页面
DeptInfo.vue
<script setup>
import request from '@/utils/request.js'
import { ref,onMounted } from 'vue'
import {
Plus
} from '@element-plus/icons-vue'
import { getRowIdentity } from 'element-plus/es/components/table/src/util';
onMounted(()=>{
getAllDept()
})
let tableData = ref([])
const getAllDept = () => {
request.get("/api/depts").then(res=>{
tableData.value=res.data
})
}
let addDeptButton = ref(false)
let form=ref({
name:''
})
let addOrEdit=ref('')
const addDeptButton1 = () => {
addDeptButton.value=true
addOrEdit.value='add'
}
let deptId=ref(null)
const handleEdit = (index,row) => {
form.value.name=row.name
addDeptButton.value=true
addOrEdit.value='edit'
deptId.value=row.id
}
const addDeptPrimary = () => {//点击确定,添加部门修改部门
addOrEdit.value=='add'&&request.post("/api/depts",form.value).then(res=>{
if(res.code==0){
ElMessage({
message: res.msg,
type: 'success',
})
getAllDept()
addDeptButton.value=false
}
})
addOrEdit.value=='edit'&&request.put("/api/depts",{name:form.value.name,id:deptId.value}).then(res=>{
if(res.code==0){
ElMessage({
message: res.msg,
type: 'success',
})
getAllDept()
addDeptButton.value=false
}
})
}
const dialogcancel = () => {//点击取消,重置表单
form.value={
name:''
}
}
const handleDelete = (index,row) => {
request.delete("/api/depts/"+row.id).then(res=>{
if(res.code==0){
ElMessage({
message: res.msg,
type: 'success',
})
getAllDept()
}
})
}
</script>
<template>
<div>
<el-button type="primary" size="large" @click="addDeptButton1"><el-icon>
<Plus />
</el-icon>新增</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="序号" width="180" />
<el-table-column prop="name" label="部门名称" width="180" />
<el-table-column prop="updateTime" label="最后操作时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="addDeptButton" :title="addOrEdit=='add'?'新增部门':'修改部门'" width="500" draggable @close="dialogcancel">
<el-form :model="form">
<el-form-item label="部门名称" label-width="140px">
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addDeptButton = false">取消</el-button>
<el-button type="primary" @click="addDeptPrimary">
确定
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
效果展示
7：分页及搜索功能实现
7-1：编写员工增删改查功能和上面是大差不差的，现在给员工查询列表加上分页功能
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>在pom.xml文件中添加以上依赖
开始写接口之前还需要写一个实体类，PageBean.java
7-2：后端接口
springboot操作数据库有两种方式，一种是刚才一直在用的注解方式，另一种是xml方式，两种各有优缺点，进行复杂查询时一般使用xml方式，它更灵活，因为查询员工列表，查询参数会有分页参数，还有搜索框参数，参数较多，决定使用xml方式。
在resources文件夹中创建com/hezhanying/mapper目录，目录中创建EmpMapper.xml文件，如图所示
接下来就可以写查询语句了，需要有pageNo（第几页）pageSize（每页多少条数据）name（员工姓名）gender（性别）begin end（入职日期在begin和end之间的）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hezhanying.mapper.EmpMapper">
<!-- 条件分页查询 -->
<select id="getAllEmp" resultType="com.hezhanying.pojo.Emp">
select * from emp
<where>
<if test="name != null and name != ''">
name like concat('%',#{name},'%')
</if>
<if test="gender != null">
and gender = #{gender}
</if>
<if test="begin != null and end != null">
and entrydate between #{begin} and #{end}
</if>
</where>
order by update_time desc
</select>
</mapper>开始写后端逻辑
重启项目，打开postman测试
测试成功
7-3：前端页面
EmployeeInformation.vue
<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'
import {
Plus,
Minus
} from '@element-plus/icons-vue'
let tableData = ref([])
onMounted(() => {
getEmps()
})
const getEmps = (page = 1, pageSize = 5,name='',gender='',entryDateStart='',entryDateEnd='') => {
request.get(`/api/emps?pageNo=${page}&pageSize=${pageSize}&name=${name}&gender=${gender}&begin=${entryDateStart}&end=${entryDateEnd}`).then(res => {
tableData.value = res.data.rows
pageTotal.value = res.data.total
})
}
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
let editOrAdd = ref('')
const handleEdit = (index, row) => {
request.get('/depts').then(res => {
deptList.value = res.data
})
dialogFormVisible.value = true
editOrAdd.value = "edit"
let { id, username, name, gender, image, deptId, job } = row
form.value.id = id
form.value.username = username
form.value.name = name
form.value.gender = gender
// ==1?'男':'女'
form.value.image = image
form.value.deptId = deptId
form.value.job = job
// ==1?'班主任':job==2?'讲师':job==3?'学工主管':job==4?'教研主管':job==5?'咨询师':'null'
console.log(index, row)
}
const handleDelete = (index, row) => {
console.log(index, row)
request.delete('/emps/' + row.id).then(res => {
if (res.code === 0) {
ElMessage({
message: res.msg,
type: 'success',
})
getEmps(currentPage4.value,pageSize4.value,searchForm.value.name,searchForm.value.gender,searchForm.value.entryDateStart,searchForm.value.entryDateEnd)
}
})
}
const dialogFormVisible = ref(false)
const form = ref({
id: '',
username: '',
name: '',
gender: '',
image: '',
deptId: '',
job: ''
})
let deptList = ref([])
let jobList = ref([
{ name: '班主任', id: 1 },
{ name: '讲师', id: 2 },
{ name: '学工主管', id: 3 },
{ name: '教研主管', id: 4 },
{ name: '咨询师', id: 5 },
])
let genderList = ref([
{ name: '男', id: 1 },
{ name: '女', id: 2 },
])
const addEmp = () => {
editOrAdd.value = "add"
dialogFormVisible.value = true
request.get('/depts').then(res => {
deptList.value = res.data
})
}
const primaryAddEmp = () => {
if (editOrAdd.value == "add") {
delete form.value.id
request.post("/emps", form.value).then(res => {
ElMessage({
message: res.msg,
type: 'success',
})
getEmps()
dialogFormVisible.value = false
})
} else if (editOrAdd.value == "edit") {
console.log('form.value :>> ', form.value);
request.put("/emps", form.value).then(res => {
ElMessage({
message: res.msg,
type: 'success',
})
getEmps()
dialogFormVisible.value = false
})
}
}
const closeDialog = (params) => {
form.value = {
id: '',
username: '',
name: '',
gender: '',
image: '',
deptId: '',
job: ''
}
}
let currentPage4 = ref(1)//第几页
let pageSize4 = ref(5)//每页几条数据
let pageTotal = ref()
const handleSizeChange = (val) => {//切换每页显示条数
getEmps(currentPage4.value, val,searchForm.value.name,searchForm.value.gender,searchForm.value.entryDateStart,searchForm.value.entryDateEnd)
pageSize4.value = val
}
const handleCurrentChange = (val) => {//切换页码
getEmps(val, pageSize4.value,searchForm.value.name,searchForm.value.gender,searchForm.value.entryDateStart,searchForm.value.entryDateEnd)
currentPage4.value = val
}
let searchForm = ref({
name: '',
gender: '',
entryDate: [],
entryDateStart: '',
entryDateEnd: '',
})
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: '最近一月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: '最近三月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
function padZeroToMonth(dateStr) {
const [year, month, day] = dateStr.split('-').map(Number)
const paddedMonth = month < 10 ? `0${month}` : month
return `${year}-${paddedMonth}-${day}`
}
const onSearch = () => {
searchForm.value.entryDateStart = searchForm.value.entryDate.length!=0 ? padZeroToMonth(searchForm.value.entryDate[0].toLocaleDateString().replace(/\//g, '-')):''
searchForm.value.entryDateEnd = searchForm.value.entryDate.length!=0 ? padZeroToMonth(searchForm.value.entryDate[1].toLocaleDateString().replace(/\//g, '-')):''
// request.get(`/emps?name=${searchForm.value.name}&gender=${searchForm.value.gender}`).then(res => {
getEmps(currentPage4.value, pageSize4.value,searchForm.value.name,searchForm.value.gender,searchForm.value.entryDateStart,searchForm.value.entryDateEnd)
// })
}
const onReset = (params) => {
searchForm.value = {
name: '',
gender: '',
entryDate: [],
entryDateStart: '',
entryDateEnd: '',
}
currentPage4.value = 1
pageSize4.value = 5
getEmps()
}
</script>
<template>
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchForm.gender" placeholder="请选择性别" clearable>
<el-option v-for="(item, index) in genderList" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="入职日期">
<el-date-picker v-model="searchForm.entryDate" type="daterange" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" size="large" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<el-button type="danger" size="large"><el-icon>
<Minus />
</el-icon>批量删除</el-button>
<el-button type="primary" size="large" @click="addEmp"><el-icon>
<Plus />
</el-icon>新增</el-button>
<el-table ref="multipleTableRef" :data="tableData" style="width: 100%" max-height="500px"
@selection-change="handleSelectionChange">
<el-table-column type="selection" />
<el-table-column property="id" label="序号" sortable />
<el-table-column property="name" label="姓名" />
<el-table-column property="image" label="头像">
<template #default="scope">
<!-- {{ scope.row.date }} -->
<img :src="scope.row.image" />
</template>
</el-table-column>
<el-table-column label="性别">
<template #default="scope">{{ scope.row.gender == 1 ? '男' : '女' }}</template>
</el-table-column>
<el-table-column label="职位">
<template #default="scope">
{{ scope.row.job == 1 ? '班主任' : scope.row.job == 2 ? '讲师' : scope.row.job == 3 ? '学工主管' :
scope.row.job == 4 ? '教研主管' : scope.row.job == 5 ? '咨询师' : '暂无职务' }}
</template>
</el-table-column>
<el-table-column property="entrydate" label="入职日期" sortable/>
<el-table-column property="updateTime" label="最后操作时间" sortable/>
<!-- <template #default="scope">{{ scope.row.updateTime.replace(/\T/g, ' ') }}</template>
</el-table-column> -->
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 20, 30]"
background layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
<el-dialog v-model="dialogFormVisible" :title="editOrAdd == 'edit' ? '修改学员信息' : editOrAdd == 'add' ? '新增学员' : ''"
width="500" @close="closeDialog">
<el-form :model="form">
<el-form-item label="用户名" label-width="140px">
<el-input v-model="form.username" autocomplete="off" />
</el-form-item>
<el-form-item label="姓名" label-width="140px">
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="头像" label-width="140px">
<el-input v-model="form.image" autocomplete="off" />
</el-form-item>
<el-form-item label="性别" label-width="140px">
<el-select v-model="form.gender" placeholder="请选择性别">
<el-option v-for="(item, index) in genderList" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="职位" label-width="140px">
<el-select v-model="form.job" placeholder="请选择职位">
<el-option v-for="(item, index) in jobList" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="部门" label-width="140px">
<el-select v-model="form.deptId" placeholder="请选择部门">
<el-option v-for="(item, index) in deptList" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="primaryAddEmp">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped></style>
<style>
.demo-form-inline .el-input {
--el-input-width: 220px;
}
.demo-form-inline .el-select {
--el-select-width: 220px;
}
</style>页面效果
非常完美！增加，修改和删除功能请参照修改删除部门接口
![[C++]使用纯opencv去部署yolov9的onnx模型](https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8){kind=icon}
