页面效果如下

分析所需内容

数据库信息如下

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

巴特西

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