使用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
