前言

五周实训结束了，其中花费时间最多的便是通过springboot搭建一个前后端结合的数据信息管理系统，通过这个系统把爬取到的信息加以展示及可视化分析。运用到的技术有：Springboot，layUI，Mybatis，MySQL，Echarts控件等等。成果展示如下：

同时有修改用户信息，密码加密登录等功能。

代码概述

项目结构

模块结构及流程图

运行流程概述及部分核心代码

前提准备：需要已经获取的信息，本项目提前使用Python获取了某豆瓣网站的电影，音乐，图书信息等并存入MySQL数据库。

基本流程：

1.前端使用LayUI搭建表格等Html框架，通过JS向后端发起请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//这里展示的是用户执行新增电影功能
//通过toolbar接受前端信息
table.on('toolbar(tbResult)', function (evtInfo){
    let checkStatus = table.checkStatus('tbResult');
    if (evtInfo.event == "add") {//若请求为“add”，展开相应表格，接收其中信息。
        let addLayerId = layer.open({
            type:1,
            title:'<i class="layui-icon layui-icon-add-1">新增电影信息</i>',
            skin:'',
            content:$('#divFilmEditContent'),
            success:function (){
                $('#btnEditClose').click(function (event){
                    layer.close(addLayerId);
                });
            },
            end:function (){
                form.val('formFilmEdit',{id:'',title:'',lang: '',score:'',director:'',actor:'',time:'',kind:'',flag:''});
            }
        });
    }

2.由Controller接收用户请求，调用service中的信息同时传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//接受save请求
@RequestMapping("save")
public Message save(Film film){
    Message msg = new Message();
    if(film.getId()!=null){           //判断前端传来的数据是否已有id，若有则执行更新操作，否则执行新增操作。
        if (service.save(film)==1){//调用sevice接口中的save函数。
            msg.setMsg("ok更新");
            msg.setCode("1");
        }
    }else {
        if(service.add(film)==1) {
            msg.setMsg("ok");
            msg.setCode("1");
            msg.setData(film);
        }
    }
    return msg;
}

3.service接收到调用请求，因为是接口类，则再次调用servicempl实现类中的实现方法

1
int save(Film film);

4.servicempl中的方法被调用，将数据进行处理及封装，调用mapper层中的方法。

可以认为service层是controller与mapper的桥梁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Override
public int save(Film film){
    Film newfilm = this.findById(film.getId());//在controller已经判断film.getid()不为空
    Integer fg = film.getFlag();
    if (newfilm!=null) {
        if (fg == 0) {
            newfilm.setFlag(0);      //若已存在的film被逻辑删除，新film依然不改变
        } else {
            newfilm.setTitle(film.getTitle());
            newfilm.setLang(film.getLang());
            newfilm.setScore(film.getScore());
            newfilm.setDirector(film.getDirector());
            newfilm.setActor(film.getActor());
            newfilm.setTime(film.getTime());
            newfilm.setKind(film.getKind());
        }
    }
    return mapper.save(newfilm);//调用mapper进行数据库操作
}

5.mapper层方法收到调用，与数据库进行交互，之后将获取到的反馈信息依次返回到前端。

1
2
3
4
5
6
7
8
9
10
11
12
@Update(
        "UPDATE movies_top250"+
                "   SET title = #{title},"+
                "       lang = #{lang},"+
                "       director = #{director},"+
                "       actor = #{actor},"+
                "       score = #{score},"+
                "       time = #{time},"+
                "       kind = #{kind},"+
                "       flag = #{flag}"+
                " WHERE id = #{id}")
int save(Film film);

至此完成一轮前后端交互的流程

项目源码

点我下载