基于vue+SpringBoot前后端分离毕设模板（最全的案例--附源码地址）
本模板采用vue+SpringBoot前后端分离技术，并充分发挥模块化开发思想，将通用工具类如前端的axios封装，后端分页插件的封装，后端对返回结果以及http解析等常用内容进行封装，在使用时可直接进行调用。
一、开发框架
前端技术：vue+element UI+axios
后端技术：SpringBoot+mybatis-plus
数据库：MySQL 5.5
二、文件结构
vue：
SpringBoot
三、功能模块
本模板共计五大功能模块，涵盖了毕设中、实际开发中的大部分功能。下面分别对各个模块进行简单介绍
（一）、Word文档导出
1、功能介绍
Word文档导出模块，主要利用element UI中的table组件，将数据库中的数据在页面上进行展示，并且提供了下载按钮，这个下载按钮的功能，是将数据库中的字段进行搜索，并搜索定义好的Word模板物理地址（例如：C：\\code\\word.docx），当搜索到以后，将本条内容写入Word模板并以Word文档的形式导出，此时在页面上便会弹出下载Word文档的框（是否弹出视浏览器而定）。
由于这个模块主要展示的是Word文档导出方法，并没有将增删改查写入其中。
另外为了后续方便，在本模块中将分页功能进行展示。
2、图片展示
3、代码演示
（1）前端代码
（2）后端代码
//controller
@GetMapping("/export")
public void export(HttpServletResponse response, HttpServletRequest request) throws Exception {
wordPageService.export(response,request);
}
//serviceImpl
@Override
public void export(HttpServletResponse response, HttpServletRequest request) throws Exception {
File file = ResourceUtils.getFile ("D:\\code\\wordPage.docx");
String strId = request.getParameter ("id");
Long id = null;
//如果id有值则转换成int类型
if (strId != null && !"".equals (strId)) {
id = new Long (strId);
}
WordPage wordPage = this.baseMapper.getById (id);
}
//mapper
public interface WordPageMapper extends BaseMapper {
@Select ("select * from word_page where id = #{id}")
WordPage getById(Long id);
}
//service
public interface WordPageService extends IService {
void export(HttpServletResponse response, HttpServletRequest request) throws Exception;
} （二）、Excel导入导出
1 功能介绍
Excel导入导出模块，仅有两个按钮，第一个按钮为下载模板，根据后端对于导入导出的封装，此功能按钮仅会导出对应字段的空白Excel表格文件，但字段在表格中以汉字形式呈现。
2 页面展示
3 代码演示
（1）前端
下载模板
点击上传
（2）后端
//controller
@GetMapping("/export")
public void exportTemplate() {
employeeService.exportTemplate();
}
@PostMapping("/import")
public void importExcel(MultipartFile file) {
employeeService.importExcel(file);
}
//serviceImpl
@Override
public void exportTemplate() {
export(Collections.emptyList(),"创建时间", "更新时间");
}
private void export(List list, String... excludeFields) {
ExportParams exportParams = new ExportParams ();
exportParams.setExclusions(excludeFields);
PoiUtil.exportExcelWithStream("公司员工信息导入模板.xls", Employee.class, list, exportParams);
} （三）可视化图表
1 功能介绍
本模块整合和eCharts图表中的饼状图、柱状图、折线图三种基本图示，并根据后端反馈回来的结果进行展示，如果有数据发生变化，那么图表也会随着数据的变化而变化。
2 图片展示
3 代码展示
（1）前端
基础可视化图表示例
const option = {
title: {
text: '折线图示例',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
}
export {
option as lineEChart
}（2）后端
//controller
@GetMapping("/list")
public ResultData list(WorkLoadParam workLoadParam) {
return new SuccessResultData (workLoadService.list(workLoadParam));
}
//serviceImpl
@Override
public List list(WorkLoadParam workLoadParam) {
return this.list ();
} （四）上传图片
1 功能介绍
本模块用于展示如何上传图片，并在表格中进行预览。
2 图片展示
3 代码演示
（1）前端
点击上传
（2）后端
@Override
public Object upload(MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename();
String flag = IdUtil.fastSimpleUUID();
String rootFilePath = fileUploadPath + flag;
FileUtil.writeBytes(file.getBytes(),rootFilePath);
String url = "http://" + serverIp + ":8882/image/download/" + flag;
Image image = new Image ();
image.setName (originalFilename);
image.setUrl (url);
this.baseMapper.insert (image);
return null;
}
@PostMapping("/upload")
public ResultData upload(MultipartFile file) throws IOException {
return new SuccessResultData(imageService.upload(file));
}（五）用户列表
1 功能介绍
本功能模块主要展示多表联查查询方法，并增加了增删改查功能
2 图片展示
3 代码演示
（1）前端
新 增
查 询
（2）后端
@Override
public PageResult page(UserParam userParam) {
QueryWrapper queryWrapper = new QueryWrapper<> ();
if (ObjectUtil.isNotNull(userParam)) {
if (ObjectUtil.isNotEmpty(userParam.getName ())) {
queryWrapper.eq("user.name", userParam.getName());
}
}
return new PageResult<> (this.baseMapper.page(PageFactory.defaultPage(), queryWrapper));
}
@Override
public void add(UserParam userParam) {
User user = new User ();
BeanUtil.copyProperties (userParam,user);
this.save (user);
}
@Override
public void edit(UserParam userParam) {
User user = this.getById(userParam.getId());
BeanUtil.copyProperties (userParam,user);
this.updateById (user);
}
@Override
public void delete(UserParam userParam) {
this.removeById(userParam.getId());
} SELECT `user`.*,dept_table.`name` as department FROM `user` LEFT JOIN dept_table ON `user`.dept_id = dept_table.dept_id ${ew.customSqlSegment}四、代码分享
链接：https://pan.baidu.com/s/1lo_2O7c-ytCBK0PJYXmlPw
提取码：ABCD