上次我们已经实现了论文管理系登录功能,这次我们要实现登录之后的跳转到首页,并且让首页列表显示出数据库的信息并在Mapper中写入模糊查询功能语句,这次我们不使用MybatisPlus写这个功能,这次使用Mybatis来写,区别就是Plus是继承于<BaseDAO>Mapper,而Mybatis则是我们通过读取Mapper.xml文件中的sql语句,实现效果如下图所示,:

一、后端部分

1.1 实体类

再次强调我们每次传递数据是通过HttpResult 实体类来响应前端的数据

package com.woniu.paper.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class HttpResult {private Object data;private int pageTotle;private int code;//200=成功,500=失败private String msg;//给前端的提示
}

实体类paper

package com.woniu.paper.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.io.Serializable;
import java.time.LocalDateTime;@Data
@AllArgsConstructor
@NoArgsConstructor
public class Paper  {private Long id;private String title;private Long typeId;private String paperSummary;private String paperPath;private String createdBy;private LocalDateTime creationData;private String modifyBy;private LocalDateTime modifyData;private String fileName;private String typeName;}

这里大家发现实体类里面多了一个属性typeName,这是方便我们后面模糊查询,因为paper数据表中的的论文类型是id,不是文本形式,没有办法进行模糊查询,所以我们需要在里面自己加入typeName这个变量

1.2 paperMapper.xml

<?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.woniu.paper.mapper.PaperMapper"><!--    建立数据库t_paper表和实体Paper的映射关系--><resultMap id="paperResult" type="Paper"><result column="id" property="id"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="title" property="title"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="type_id" property="typeId"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="paper_summary" property="paperSummary"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="paper_path" property="paperPath"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="created_by" property="createdBy"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="creation_data" property="creationData"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="modify_by" property="modifyBy"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="modify_data" property="modifyData"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="file_name" property="fileName"/> <!-- column:数据库字段名 property:实体的属(变量)名 --><result column="type_name" property="typeName"/> <!-- column:数据库字段名 property:实体的属(变量)名 --></resultMap><select id="selectPaperListByCondition" resultMap="paperResult">select p.*, t.type_name from t_paper as p LEFT JOIN t_type as t onp.type_id=t.id<where><if test="title!=null and title!=''">and title like '%${title}%'</if><if test="typeName!=null and typeName!=''">and type_name=#{typeName}</if></where>limit #{start},#{size}</select><select id="count" resultType="int">select count(t.type_name) from t_paper as p LEFT JOIN t_type as t onp.type_id=t.id<where><if test="title!=null and title!=''">and title like '%${title}%'</if><if test="typeName!=null and typeName!=''">and type_name=#{typeName}</if></where></select><insert id="insertPaper">insert into t_paper (title,type_id,paper_summary,paper_path,created_by,modify_by,file_name) values (#{title},#{typeId},#{paperSummary},#{paperPath},#{createdBy},#{modifyBy},#{fileName})</insert>
</mapper>

数据库内外链接补充

1.3 PaperMapper类

public interface PaperMapper extends BaseMapper<Paper> {List<Paper> selectPaperListByCondition(String title, String typeName, int start, int size);int count(String title, String typeName);//查询总数,用于列表分页
}

1.4Service层

接口

package com.woniu.paper.service;import com.woniu.paper.entity.HttpResult;
import com.woniu.paper.entity.Paper;
import com.baomidou.mybatisplus.extension.service.IService;/*** <p>*  服务类* </p>** @author zhang* @since 2022-11-18*/
public interface IPaperService  {public HttpResult selectPaperListByCondition(String title, String typeName, int pageIndex, int pageSize);public HttpResult insertPaper(String title,Long typeId,String paperSummary,String paperPath,String createdBy,String modifyBy,String fileName);
}

实现类

package com.woniu.paper.service.impl;import com.woniu.paper.entity.HttpResult;
import com.woniu.paper.entity.Paper;
import com.woniu.paper.mapper.PaperMapper;
import com.woniu.paper.mapper.UserMapper;
import com.woniu.paper.service.IPaperService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;/*** <p>* 服务实现类* </p>** @author zhang* @since 2022-11-18*/
@Service
public class PaperServiceImpl implements IPaperService {@Autowired(required = false)private PaperMapper paperMapper;//实例化DAO对象@Overridepublic HttpResult selectPaperListByCondition(String title, String typeName, int pageIndex, int pageSize) {List<Paper> papers = paperMapper.selectPaperListByCondition(title, typeName, (pageIndex - 1) * pageSize, pageSize);int count = paperMapper.count(title, typeName);HttpResult result=null;if (papers!=null&&papers.size()>0){result= new HttpResult(papers,count,200,null);}else{result= new HttpResult(null,0,500,"没有更多数据");}return result;}}

1.5 Controller层

package com.woniu.paper.controller;import com.woniu.paper.entity.HttpResult;
import com.woniu.paper.service.IPaperService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;/*** <p>*  前端控制器* </p>** @author zhang* @since 2022-11-18*/
@RestController
@RequestMapping("/paper/paper")
public class PaperController {@Autowiredprivate IPaperService paperService;//实例化Service对象/*** 根据分页查询论文列表* @return*/@RequestMapping("/list")@CrossOrigin(origins = "*")public HttpResult selectPaperListByCondition(String title,String typeName,int pageIndex,int pageSize) {return paperService.selectPaperListByCondition(title,typeName,pageIndex,pageSize);}/*** 新增*/}

二、前端部分

效果图

源码如下 :


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>论文管理系统</title><!--    导入bootstrap--><link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><script src="assets/jquery-3.5.1.min.js"></script><script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><!--    导入VUE--><script src="assets/vue.min-v2.5.16.js"></script><script src="assets/axios.min.js"></script><script src="assets/vue-router.min-2.7.0.js"></script>
<body>
<div id="app"><div style="margin-left: auto; margin-right: auto;"><div style="width: 1000px; height: 100px; border: 1px solid black; text-align: center;font-size: 18px; line-height: 100px;">论文管理系统</div><div style="width: 200px; height: 700px; border: 1px solid black; text-align: center; font-size: 18px; line-height: 50px; float: left"><div><button class="btn btn-link" @click="doUserManager">用户管理</button></div><div><button class="btn btn-link" @click="doPaperManager">论文管理</button></div></div><div style="width: 800px; height: 700px; border: 1px solid black; float: left"><div v-if="isShow">论文主题:<input type="text" v-model="title">论文类型:<select v-model="typeName"><option>软件</option><option>财务</option></select><button @click="doQuery">查询</button><!--使用bootstrap的斑马线样式表格--><table class="table table-striped"><caption>论文列表</caption><!--表头--><thead><tr><th>论文主题</th><th>作者</th><th>论文类型</th><th>发表时间</th><th>修改时间</th><th>操作</th></tr></thead><!--表内容--><tbody><!--通过vue的v-for指令循环输出论文信息--><tr v-for="p in papers"><td>{{p.title}}</td><td>{{p.createdBy}}</td><td>{{p.typeName}}</td><td>{{p.creationData}}</td><td>{{p.modifyData}}</td><td><button class="btn btn-link">修改</button><button class="btn btn-link">删除</button></td></tr></tbody></table><!--分页--><ul class="pagination" v-for="p in pageNum"><!-- class=active表示被选中--><li v-if="p == pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li><li v-else="p == pageIndex"><a @click="doGo(p)">{{p}}</a></li></ul></div></div></div>
</div>
<script>new Vue({//将id=app的div的管理权交给vueel:'#app',//需要绑定的数据data:{papers:null,//论文列表isShow:false,//控制列表是否显示//用于条件查询title:null,typeName:null,//用户分页pageIndex:1,//当前页面pageSize:10,//每页显示的条数pageTotle:0,//数据总条数pageNum:0},//需要绑定的函数methods:{//请求论文列表requestPapers(url){axios.get(url).then(respones =>{console.log(respones.data);this.papers =respones.data.data;//给论文列表赋值this.pageTotle = respones.data.pageTotle;//给总条数赋值//Math.ceril函数=>小数去整,向上取整this.pageNum = Math.ceil(this.pageTotle / this.pageSize);//计算页数});},doGo(p){this.pageIndex = p;var url="http://localhost:8080/paper/paper/list?pageIndex="+p+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid");this.requestPapers(url);//调用请求论文列表的函数发送请求},//用户管理doUserManager(){this.isShow = true;//让列表显示},//论文管理doPaperManager(){this.isShow = true;//让列表显示},//点击查询按钮执行doQuery(){var url="http://localhost:8080/paper/paper/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid")+"&title="+this.title+"&typeName="+this.typeName;this.requestPapers(url);//调用请求论文列表的函数发送请求}},//页面加载完成后执行created:function () {//revar url="http://localhost:8080/paper/paper/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid");this.requestPapers(url);//调用请求论文列表的函数发送请求}});</script></body>
</html>

代码讲解

整体思路,我们要先保证能显示列表信息,之后进行跳转和模糊查询等等其他功能

<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><script src="assets/jquery-3.5.1.min.js"></script><script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script src="assets/vue.min-v2.5.16.js"></script><script src="assets/vue-router.min-2.7.0.js"></script><script src="assets/axios.min.js"></script>

这两个按钮是页面左边的菜单栏的选项

分页功能

JS部分都有具体注释,分页功能可参考往期博客

主页面图

模糊查询效果图

论文管理系统(用户列表显示功能)相关推荐

电商后台管理系统用户列表
目录一代码 1 新增 Users.vue 2 修改路由 index.js 3 修改 Home.vue 4 修改全局 global.css 二测试三源码参考一代码 1 新增 Users.v ...
[转载]Asp.Net在线用户列表的開發匯總
这是转载的别人的一篇,解决了困扰我已久的问题,虽然文章里少了两张图,但是不影响阅读. 1.在线用户列表的实现在ASP时代,要实现一个网站的在线用户列表显示功能的惯用做法是修改global.asa文件 ...
前端学习（1890）vue之电商管理系统电商系统之绘获取用户列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1889）vue之电商管理系统电商系统之绘制用户列表组件的基本布局
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1887）vue之电商管理系统电商系统之通过路由的形式显示用户列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
基于javaWeb的毕业生论文管理系统——计算机毕业设计
本系统采用jsp,servlet,java,Myeclipse等开发技术和工具实现了毕业生论文管理系统中的用户管理.论文管理;包括论文的上传和下载;等功能.本系统界面简单直观,易于操作和使用,交互性强 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
讲解后台管理系统之列表设计分享
我们大家都知道,在后台管理系统中列表设计一直是重中之重,因为它承载了用户想看.重要且关键的业务信息,所以设计时要格外注意信息降噪,让用户能够快速找到想看的信息,切勿盲目摆放,这里我也收集了一些注意的点 ...

论文管理系统(用户列表显示功能)