使用springboot+MybatisPlus+vue实现论文基础管理系统

页面效果如下

分析所需内容

数据库信息如下

t_paper

t_comment

好了 数据库搞定 新建Springboot项目 选择Spring Initializr

pom文件增加引入下面这三个依赖

<!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId> <optional>true</optional>
        </dependency>
        <!-- mysql-connector -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.32</version>
        </dependency>

四层架构 直接新建四个包 controller(控制器) entity(实体类) mapper(映射文件)service(服务层）

在生成的resources中会有application.properties 这边我更加喜欢yml格式 显示的更加的舒服易懂 然后进行配置即可

server:
  port: 8080
spring:
  # 配置数据源信息
  datasource:
    # 配置数据源类型
    type: com.zaxxer.hikari.HikariDataSource
    # 配置连接数据库信息
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/tess01?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=GMT%2B8&allowPublicKeyRetrieval=true
    username: root（您的数据库用户名）
    password: XXXXX（您的数据库密码）
mybatis-plus:
  type-aliases-package: com.lps.entity
  configuration:
    # 配置MyBatis日志，执行sql的时候，将sql打印到控制台
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
#前缀
      table-prefix: t_
#设置id为雪花算法
      id-type: assign_id
  mapper-locations: classpath:mappers/*.xml

好了 开始整理实体类

Paper.java 因为使用的是雪花算法 Long类型从前台传回来可能会存在精度缺失 您请记得id加上这串注解

@JsonSerialize(using = ToStringSerializer.class)

package com.lps.entity;
 
import com.baomidou.mybatisplus.annotation.TableField;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import lombok.Data;
 
@Data
public class Paper {
    @JsonSerialize(using = ToStringSerializer.class)
    private Long id;//编号
    private String title;//主题
    private String author;//作者
    private String paperType;//类型
    private String publishDate;//日期
    private Integer state;//状态
    @TableField(exist = false)
    private Integer cnt;//评论次数
}

HttpResult.java

package com.lps.entity;
 
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
@Data
@AllArgsConstructor
@NoArgsConstructor
public class HttpResult {
    private int code;//返回code
    private String msg;//返回告之情况
    private Object data;//返回数据
    private int total;//行数
}

实体类搞定之后准备开始精进mapper类

PaperMapper.java 接口

package com.lps.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.lps.entity.Paper;
 
import java.util.List;
 
/**
 * @author 阿水
 * @create 2023-03-01 10:19
 */
public interface PaperMapper extends BaseMapper<Paper> {
    List<Paper> findAll(Integer pageIndex ,Integer pageSize,String title,String type);
 
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lps.mapper.PaperMapper">
 
    <select id="findAll" resultType="Paper">
        SELECT
        DISTINCT p.*, (SELECT count(*) FROM t_comment WHERE p_id=c.p_id) AS cnt
        FROM
        t_paper AS p LEFT JOIN t_comment AS c
        ON
        p.id=c.p_id
        <where>
            <if test="title !='null' and title != ''">
                AND title like '%${title}%'
            </if>
            <if test="type !='null' and type != ''">
                AND paper_type=#{type}
            </if>
        </where>
        ORDER BY p.publish_date DESC
        LIMIT #{pageIndex}, #{pageSize}
    </select>
 
</mapper>

映射mapper文件

整理service层面

IPaperService.java 接口

package com.lps.service;
import com.lps.entity.HttpResult;
import com.lps.entity.Paper;
 
/**
 * @author 阿水
 * @create 2023-03-01 10:21
 */
public interface IPaperService {
    HttpResult save(Paper paper);
    HttpResult modify(Paper paper);
    HttpResult remove(Long id );
    HttpResult findAll(Integer pageIndex , Integer pageSize, String title, String type);
 
    HttpResult findById(Long id);
}

PaperServiceImpl.java接口实现类

package com.lps.service.impl;
 
import com.lps.entity.HttpResult;
import com.lps.entity.Paper;
import com.lps.mapper.PaperMapper;
import com.lps.service.IPaperService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.util.List;
 
/**
 * @author 阿水
 * @create 2023-03-01 10:26
 */
@Service
public class PaperServiceImpl implements IPaperService {
    @Autowired(required = false)
    private PaperMapper paperMapper;
 
    @Override
    public HttpResult save(Paper paper) {
        int insert = paperMapper.insert(paper);
        HttpResult httpResult = null;
        if (insert > 0) {
            httpResult = new HttpResult(200, "添加论文成功", null, 0);
        } else {
            httpResult = new HttpResult(500, "添加论文失败", null, 0);
        }
        return httpResult;
    }
 
    @Override
    public HttpResult modify(Paper paper) {
        int insert = paperMapper.updateById(paper);
        HttpResult httpResult = null;
        if (insert > 0) {
            httpResult = new HttpResult(200, "修改论文成功", null, 0);
        } else {
            httpResult = new HttpResult(500, "修改论文失败", null, 0);
        }
        return httpResult;
    }
 
    @Override
    public HttpResult remove(Long id) {
        int insert = paperMapper.deleteById(id);
        HttpResult httpResult = null;
        if (insert > 0) {
            httpResult = new HttpResult(200, "删除论文成功", null, 0);
        } else {
            httpResult = new HttpResult(500, "删除论文失败", null, 0);
        }
        return httpResult;
    }
 
    @Override
    public HttpResult findAll(Integer pageIndex, Integer pageSize, String title, String type) {
        List<Paper> all = paperMapper.findAll((pageIndex - 1) * pageSize, pageSize, title, type);
        HttpResult httpResult = null;
        if (all != null && all.size() > 0) {
            httpResult = new HttpResult(200, "查询论文成功", all, Math.toIntExact(paperMapper.selectCount(null)));
        } else {
            httpResult = new HttpResult(500, "查询论文失败", null, 0);
        }
        return httpResult;
    }
 
    @Override
    public HttpResult findById(Long id) {
        Paper paper = paperMapper.selectById(id);
        HttpResult httpResult = null;
        if (paper != null) {
            httpResult = new HttpResult(200, "查询论文成功", paper, Math.toIntExact(paperMapper.selectCount(null)));
        } else {
            httpResult = new HttpResult(500, "查询论文失败", null, 0);
        }
        return httpResult;
    }
}

最后

控制层PaperController.java

package com.lps.controller;
 
import com.lps.entity.HttpResult;
import com.lps.entity.Paper;
import com.lps.service.IPaperService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
/**
 * @author 阿水
 * @create 2023-03-01 10:45
 */
@RestController//标识controller类
@RequestMapping("/paper")//访问前缀
@CrossOrigin(origins = "*")//允许跨端访问
public class PaperController {
    @Autowired//自动引入service
    private IPaperService paperService;
 
    @PostMapping("/save")
    public HttpResult save(@RequestBody Paper paper){
        SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
        String dateStr = format.format(new Date());
        paper.setPublishDate(dateStr);
        return  paperService.save(paper);
    }
 
    @PostMapping("modify")
    public HttpResult modify(@RequestBody Paper paper){
        return paperService.modify(paper);
 
    }
 
    @GetMapping("remove")
    public HttpResult remove(Long id){
        return paperService.remove(id);
 
    }
 
    @GetMapping("/find_all")//通过 主题、类型 以及分页查询
    public HttpResult findAll(Integer pageIndex ,Integer pageSize,String title,String type){
        return paperService.findAll(pageIndex,pageSize,title,type);
    }
 
    @GetMapping("/find_by_id")//通过id查找
    public HttpResult findById(Long id){
        return paperService.findById(id);
    }
}

到此 后端配置的结束啦

开始配置前台页面

 在此我们需要导入这些js文件

链接: https://pan.baidu.com/s/15j89YFwqp24JZCBWcUuW3Q?pwd=lps6 提取码: lps6 复制这段内容后打开百度网盘手机App，操作更方便哦

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body>
    <iframe name="left_frame" src="left.html" scrolling="no" style="width: 150px; height: 700px;"></iframe>
    <iframe name="right_frame" src="paper_list.html" scrolling="no" style="width: 1050px; height: 700px;"></iframe>
</body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body style="padding: 0px; margin: 0px;">
<div style="width: 150px; height: 800px; background-color: #5bc0de" id="app">
    <ul>
        <br>
        <li><h3>功能列表</h3></li>
        <br>
        <div style="margin-top: 30px">
<!--            距离上面边缘50个像素-->
            <li><a href="user_list.html" target="right_frame">用户管理</a></li>
        </div>
        <br>
        <li><a href="thesis_list.html" target="right_frame">论文管理</a></li>
        <br>
        <li><a href="thesis_list.html" target="right_frame">公共代码</a></li>
        <br>
        <li><a href="login.html" target="right_frame">退出系统</a></li>
    </ul>
</div>
</body>
</html>

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body>
    <iframe name="left_frame" src="left.html" scrolling="no" style="width: 150px; height: 700px;"></iframe>
    <iframe name="right_frame" src="paper_list.html" scrolling="no" style="width: 1050px; height: 700px;"></iframe>
</body>
</html>

paper_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body class="container" style="padding: 0px; margin: 0px; background-color: pink">
<div id="app" style="width: 1050px; height: 700px;">
    <div class="navbar-form">
        主题:
        <input type="text" class="form-control" v-model="paperTitle">
        类型:
        <select v-model="paperType">
            <option value=""></option>
            <option value="应用型">应用型</option>
            <option value="学术型">学术型</option>
        </select>
        <button class="btn btn-link" @click="doSearch()">查询</button>
        <button class="btn btn-link" @click="doAdd()">添加</button>
    </div>
    <table class="table table-striped">
        <thead>
        <caption>论文列表</caption>
        <tr>
            <th>编号</th>
            <th>主题</th>
            <th>作者</th>
            <th>类型</th>
            <th>状态</th>
            <th>发表时间</th>
            <th>评论次数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="t in paperList">
            <td>{{t.id}}</td>
            <td>{{t.title}}</td>
            <td>{{t.author}}</td>
            <td>{{t.paperType}}</td>
            <td>{{t.state == 0 ? '未发布' : '已发布'}}</td>
            <td>{{t.publishDate}}</td>
            <td>{{t.cnt}}</td>
            <td>
                <button class="btn btn-link" @click="doUpdate(t.id)">编辑</button>
                <button class="btn btn-link" @click="doDelete(t.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div style="text-align: center">
        <ul class="pagination" v-for="p in pageNum">
            <li class="active" v-if="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>
            <li v-else="p==pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>
 
        </ul>
    </div>
 
</div>
<script>
    new Vue({
        el: '#app',
        data: {
 
            paperType:null,
 
            paperTitle: null,
            paperList: null,
            pageIndex: 1,//页码
            pageSize: 5,//每页显示的条数
            pageTotal: 0,//总条数
            pageNum: 0//共多少页
 
        },
        methods: {
            requestPaperList(url) {
                axios.get(url).then(res => {
                    console.log(res.data)
                    this.paperList = res.data.data
                    this.pageTotal = res.data.total
                    this.pageNum = Math.ceil(this.pageTotal / this.pageSize);
                })
            },
            doGo(p) {
                this.pageIndex = p;
                url = "http://localhost:8080/paper/find_all?pageIndex=" + p + "&pageSize=" + this.pageSize+"&title="+this.paperTitle+"&type="+this.paperType
                this.requestPaperList(url);
            },
 
            doDelete(id) {
                axios.get("http://localhost:8080/paper/remove?id="+id).then(res => {
                    console.log(res.data)
                    if (res.data.code==200){
                        this.pageIndex=1;
                        url = "http://localhost:8080/paper/find_all?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize+"&title="+this.paperTitle+"&type="+this.paperType
                        this.requestPaperList(url);
                    }else {
                        alert(res.data.msg)
                    }
                })
 
            },
            doSearch(){
                url = "http://localhost:8080/paper/find_all?pageIndex=" + 1 + "&pageSize=" + this.pageSize+"&title="+this.paperTitle+"&type="+this.paperType
                this.requestPaperList(url)
            },
            doAdd(){
                // window.parent.right_frame.location="add.html"
                window.location.href="add.html"
            },
            doUpdate(id) {
                window.location.href="update.html?id="+id
            },
 
        },
        created: function () {
            url = "http://localhost:8080/paper/find_all?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize+"&title="+this.paperTitle+"&type="+this.paperType
            this.requestPaperList(url);
 
        }
    })
</script>
</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body class="container">
<div id="app">
    <h3>修改论文</h3>
    <div class="navbar-form">
        主题：
        <input type="text" class="form-control" v-model="paperTitle">
    </div>
    <div class="navbar-form">
        作者：
        <input type="text" class="form-control" v-model="paperAuthor">
    </div>
    <div class="navbar-form">
        类型：
        <select class="form-control" v-model="paperType">
            <option value=""></option>
            <option value="应用型">应用型</option>
            <option value="学术型">学术型</option>
        </select>
    </div>
    <div class="navbar-form" >
        状态：
        <select class="form-control" v-model="paperState">
            <option value=""></option>
            <option value="0">未发布</option>
            <option value="1">已发布</option>
        </select>
    </div>
    <div class="navbar-form">
        <button class="btn btn-primary" @click="doSave()">修改</button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            id: null,
            paperTitle: null,
            paperAuthor: null,
            paperType: null,
            paperState: null
        },
        methods: {
            doSave() {
                axios.post("http://localhost:8080/paper/modify", {
                    id:this.id,
                    title: this.paperTitle,
                    author: this.paperAuthor,
                    paperType: this.paperType,
                    state: this.paperState
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) {
                        // window.parent.right_frame.location = "paper_list.html"
                        window.location.href = "paper_list.html";
                    } else {
                        alert(res.data.msg);
                    }
                })
            }
        },
        created: function () {
            url = window.location.href;
            this.id = url.substring(url.indexOf("id=") + 3)
      /*      console.log(this.id)
            console.log(url)*/
 
            axios.get("http://localhost:8080/paper/find_by_id?id="+this.id).then(res => {
                this.paperTitle = res.data.data.title
                this.paperAuthor = res.data.data.author
                this.paperType = res.data.data.paperType
                this.paperState = res.data.data.state
                console.log(res.data)
 
            })
        }
    })
</script>
</body>
</html>

好啦 搞定啦

整体包结构 感谢您看完了！！！hh