基于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}