前后端分離 – 深入淺出Spring Boot + Vue實作員工管理系統 Vue如此簡單~
引言
Hello，我是Bug終結者，一名熱愛后端Java的風趣且幽默的程式員~ 終于等到幸運的你~
快來發現我的宇宙哦~
本周第一篇博文是一個基于Spring Boot+Vue實作員工管理系統的專案
在此之前，我們先看看什么是Vue
Vue詳解
小猿疑問：什么是Vue呢，能干什么，為什么要用呢？
小投訓答說：vue是一個漸進式基于JavaScript的框架，使用它，可大大提高前端的靈活性與擴展性，更加方便的開發前端工程
有點官方了這話，簡單來說
vue就是一個高級的JavaScript，要想使用vue，前提必須掌握三大技術，HTML, CSS, JavaScript
小猿問，哪為什么要使用它呢
因為用的人多，技識訓爆，市場需要，所以使用，
專案簡介
開發一個基于Spring Boot + Vue的前后端分離員工管理系統專案，完成增、刪、改、串列、多條件、分頁的功能
開發環境
后端：Spring Boot + MyBatis + Maven
前端：Vue + ElementUI
工具：前端使用WebStorm，后端使用IDEA
ElementUI為何物？
ElementUI是餓了么出品的一個組件，使用它，可使界面美觀，開發效率提升
elementUI是基于vue實作的一套不依賴業務的UI組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度，
看這么就累了吧，來張圖放松下~
解乏了吧~ 😎
言歸正傳~
廣播站
CSDN博客之星參選博主：Bug終結者.
鏈接：https://blog.csdn.net/weixin_45526437?spm=1001.2101.3001.5343
五星好評，您的每一分對我都貢獻巨大，感謝您投的每一票
再次感謝您的投票，謝謝！
專案風格
請求方式統一為Post請求，目的是保證安全性
規范了介面層統一回傳格式為ResultBean，詳細如：
統一回傳格式風格類，ResultBean
package com.wanshi.bean;
public class ResultBean<C> {
private Integer code;
private String msg;
private C data;
private ResultBean(Integer code, String msg, C data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public static ResultBean create(Integer code, String msg, Object data) {
ResultBean res = new ResultBean(code, msg, data);
return res;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public C getData() {
return data;
}
public void setData(C data) {
this.data = data;
}
}
資料表
t_employee
CREATE TABLE `t_employee` (
`noid` char(32) NOT NULL,
`emp_name` varchar(32) NOT NULL COMMENT '員工姓名',
`emp_age` int DEFAULT NULL COMMENT '員工年齡',
`emp_sex` tinyint DEFAULT NULL COMMENT '員工性別，1：男，2：女',
`emp_salary` decimal(10,2) DEFAULT NULL COMMENT '員工工資',
`emp_address` varchar(32) DEFAULT NULL COMMENT '員工住址',
`join_time` date DEFAULT NULL COMMENT '入職日期',
PRIMARY KEY (`noid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci
效果圖
核心原始碼
前端原始碼
新建EmployeeList.vue檔案
<template>
<div class="box-main2 box-heigt100">
<div class="box-right1 box-heigt100">
<div class="box-right1-in box-heigt100 scrollbar1">
<div class="box-search" v-if="true">
<div class="box-search">
<div style="width:140px;padding-right:10px;">
<el-input @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" clearable
size="mini" v-model="searchInfo.searchKey" placeholder="員工名稱"></el-input>
</div>
<div style="width:60px;">
<el-button size="mini" @click="clkBtnSearch" type="primary">搜索</el-button>
</div>
<div>
<el-button size="mini" type="warning" @click="clkBtnAdd">新增</el-button>
</div>
</div>
</div>
<div class="box-table1 box-heigt100 scrollbar1">
<el-table
:data="tbEmployeePage.list"
border
style="width: 100%; text-align: center">
<el-table-column type="index" label="序號" width="50"></el-table-column>
<el-table-column prop="emp_name" label="姓名" width="170"/>
<el-table-column prop="emp_age" label="年齡" width="120"/>
<el-table-column label="性別" width="120">
<template slot-scope="scope">
//顯示過濾后的性別
{{scope.row.emp_sex|filterSex}}
</template>
</el-table-column>
<el-table-column prop="emp_salary" label="薪資" width="150"/>
<el-table-column prop="emp_address" label="住址" width="150"/>
<el-table-column prop="str_join_time" label="入職日期"/>
<el-table-column
label="操作"
width="200">
<template slot-scope="scope">
<el-button @click="clkBtnEdit(scope.row)" type="warning" size="small">編輯</el-button>
<el-button type="danger" size="small" @click="clkBtnDelete(scope.row)">洗掉</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="box-page1">
<el-pagination background :current-page="tbEmployeePage.pageNum" :page-size="tbEmployeePage.pageSize" :total="tbEmployeePage.total"
layout="total,prev,pager,next"
@current-change="chgPageNum">
</el-pagination>
</div>
</div>
<el-dialog title="保存" class="dialog1"
:show-close="false" :close-on-click-modal="false"
:visible.sync="showAddBuzhiZuoyeDialog">
<div>
<div class="box-content2">
<div class="box-table2" >
<el-form size="mini" ref="student" label-width="120px">
<el-form-item label="員工姓名">
<el-input v-model="employee.emp_name"></el-input>
</el-form-item>
<el-form-item label="員工年齡">
<el-input v-model="employee.emp_age" type="number" min="0"></el-input>
</el-form-item>
<el-form-item label="員工性別">
<el-radio-group v-model="employee.emp_sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="員工薪資">
<el-input v-model="employee.emp_salary"></el-input>
</el-form-item>
<el-form-item label="員工住址">
<el-input v-model="employee.emp_address"></el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="clkBtnSave">確 定</el-button>
<el-button size="mini" @click="showAddBuzhiZuoyeDialog = false">取 消</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import request from '@/common/utils/request';
export default {
computed: {
},
data() {
return {
inited: false,
searchInfo:{searchKey:''},
showAddBuzhiZuoyeDialog: false,
tbEmployeePage: {pageNum: 1, pageSize: 12,list: []},
employee:{}
};
},
watch: {
'$route.path': {
handler: function (newVal) {
if (newVal == '/employee-list') {
this._initData();
}
}, immediate: true
}
},
mounted() {
this._initData();
},
methods: {
_initData() {
if (this.inited) {
return;
}
this.inited = true;
this.getEmployeeList();
},
clkBtnAdd() {
this.employee = {};
this.showAddBuzhiZuoyeDialog = true;
},
clkBtnEdit(row) {
console.log(row);
this.employee = row;
this.showAddBuzhiZuoyeDialog = true;
},
//洗掉記錄
clkBtnDelete(row) {
console.log(row);
this.$confirm("您確信要洗掉此記錄嗎", "提示").then(() => {
let url1 = this.settings.apiUrl + '/employee/delete';
let data = {noid: row.noid};
request.post(url1, data).then((res) => {
if (res.code === 0) {
this.getEmployeeList();
this.$message("洗掉成功~");
}
})
})
},
//保存資訊，將新增和修改合成一個方法進行處理
clkBtnSave() {
let url1 = this.settings.apiUrl + '/employee/save';
let data = this.employee;
request.post(url1, data).then((res) => {
if (res.code === 0) {
this.$message("保存成功~");
this.getEmployeeList();
this.showAddBuzhiZuoyeDialog = false;
}
})
},
//獲取員工集合資訊
getEmployeeList() {
let url1 = this.settings.apiUrl + '/employee/page';
let d1 = {};
d1.pageNum = this.tbEmployeePage.pageNum;
d1.pageSize = this.tbEmployeePage.pageSize;
d1.searchKey = this.searchInfo.searchKey;
request.post(url1, d1).then((d1r) => {
console.log(d1r)
if (d1r.code == 0) {
console.log(d1r.data);
this.tbEmployeePage = d1r.data;
}
})
},
//點擊分頁時重新獲取員工資訊
chgPageNum(currPageNum) {
this.tbEmployeePage.pageNum = currPageNum;
this.getEmployeeList();
},
//搜索時重新呼叫獲取員工資訊
clkBtnSearch() {
this.getEmployeeList();
}
},
//過濾器，將數字轉換為文字
filters:{
filterSex(srcVal){
if(srcVal==1){
return '男';
}
if(srcVal==2){
return '女';
}
return '未知';
}
}
};
</script>
<style lang="scss" scoped="scoped">
.box-page1 {
display: flex;
justify-content: flex-end;
}
.box-main2 {
display: flex;
.box-right1 {
flex: 7;
padding: 10px;
.box-right1-in {
display: flex;
flex-direction: column;
.box-search {
display: flex;
padding: 10px 10px 10px 0;
}
}
}
}
</style>
添加EmployeeList.vue路由與左側串列顯示
添加路由index.js
{
path: '/employee-list',
meta: {pageTitle: '員工串列', leftMenuIndex: 'employee-list'},
component: () => import('@/views/EmployeeList')
},
添加左側選單顯示LeftMenu.vue
<el-menu-item index="employee-list" @click.native="clkItem('/employee-list')">
<i class="menuitem-icon iconfont icon-user-delete"></i>
<span class="menuitem-text" slot="title">員工串列</span>
</el-menu-item>
至此前端頁面完美顯示
后端原始碼
EmployeeController類
package cn.zhongtie.controller;
import cn.zhongtie.bean.ResultBean;
import cn.zhongtie.bean.entity.Employee;
import cn.zhongtie.service.EmployeeService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin
@RequestMapping("/employee")
public class EmployeeController{
@Autowired
private EmployeeService employeeService;
@PostMapping("/page")
public ResultBean<PageInfo<Employee>> page(@RequestBody Employee param){
ResultBean<PageInfo<Employee>> res = employeeService.page(param);
return res;
}
@PostMapping("/save")
public ResultBean<Integer> save(@RequestBody Employee param){
ResultBean<Integer> res = employeeService.save(param);
return res;
}
@PostMapping("/delete")
public ResultBean<Integer> delete(@RequestBody Employee param){
ResultBean<Integer> res = employeeService.delete(param);
return res;
}
}
EmployeeService類
package cn.zhongtie.service;
import cn.zhongtie.bean.ResultBean;
import cn.zhongtie.bean.entity.Employee;
import cn.zhongtie.mapper.EmployeeMapper;
import cn.zhongtie.utils.PbSecretUtils;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
@Service
public class EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
public ResultBean<PageInfo<Employee>> page(Employee param){
if (param.getPageNum() == null) {
param.setPageNum(1);
}
PageHelper.startPage(param.getPageNum(), param.getPageSize());
List<Employee> employeeList = employeeMapper.page(param);
for (Employee employee : employeeList) {
if (employee != null) {
employee.setStr_join_time(sdf.format(employee.getJoin_time()));
}
}
PageInfo<Employee> pageInfo = new PageInfo<>(employeeList);
return ResultBean.create(0, "success", pageInfo);
}
public ResultBean<Integer> save(Employee param){
if (param.getNoid() != null) {
employeeMapper.update(param);
} else {
param.setJoin_time(new Date());
param.setNoid(PbSecretUtils.uuid());
employeeMapper.insert(param);
}
return ResultBean.create(0,"success",null);
}
public ResultBean<Integer> delete(Employee param){
employeeMapper.delete(param);
return ResultBean.create(0,"success",null);
}
}
博主寄語
至此，系統到此完美結束，該案例通俗易懂，詳細一步步帶入，通過本案例，可提高你的學習能力以及訓練自己的邏輯思維能力，認真學習的你很耀眼，相信你的技術一定會有一個質的飛躍，加油，努力練習，祝你成為你想要成為的人！
若在本專案中遇到技術難題，可在下方評論區留言或私信我，授人以魚不如授人以漁
如果你覺得博主寫的不錯的話，不妨給個一鍵三連，點擊下方小拳頭即可一鍵三連，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402757.html
標籤：其他
上一篇：vue專案支付功能