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

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

     

    一、后端部分 

    1.1 实体类

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

    1. package com.woniu.paper.entity;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class HttpResult {
    11.     private Object data;
    12.     private int pageTotle;
    13.     private int code;//200=成功,500=失败
    14.     private String msg;//给前端的提示
    15. }

     实体类paper

    1. package com.woniu.paper.entity;
    2.  
    3. import com.baomidou.mybatisplus.annotation.IdType;
    4. import com.baomidou.mybatisplus.annotation.TableId;
    5. import com.baomidou.mybatisplus.annotation.TableName;
    6. import lombok.AllArgsConstructor;
    7. import lombok.Data;
    8. import lombok.NoArgsConstructor;
    9.  
    10. import java.io.Serializable;
    11. import java.time.LocalDateTime;
    12.  
    13. @Data
    14. @AllArgsConstructor
    15. @NoArgsConstructor
    16. public class Paper  {
    17.     private Long id;
    18.     private String title;
    19.     private Long typeId;
    20.     private String paperSummary;
    21.     private String paperPath;
    22.     private String createdBy;
    23.     private LocalDateTime creationData;
    24.     private String modifyBy;
    25.     private LocalDateTime modifyData;
    26.     private String fileName;
    27.     private String typeName;
    28.  
    29. }

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

    1.2 paperMapper.xml

    1. "1.0" encoding="UTF-8"?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="com.woniu.paper.mapper.PaperMapper">
    4.     
    5.     <resultMap id="paperResult" type="Paper">
    6.         <result column="id" property="id"/> 
    7.         <result column="title" property="title"/> 
    8.         <result column="type_id" property="typeId"/> 
    9.         <result column="paper_summary" property="paperSummary"/> 
    10.         <result column="paper_path" property="paperPath"/> 
    11.         <result column="created_by" property="createdBy"/> 
    12.         <result column="creation_data" property="creationData"/> 
    13.         <result column="modify_by" property="modifyBy"/> 
    14.         <result column="modify_data" property="modifyData"/> 
    15.         <result column="file_name" property="fileName"/> 
    16.         <result column="type_name" property="typeName"/> 
    17.     resultMap>
    18.     <select id="selectPaperListByCondition" resultMap="paperResult">
    19.         select p.*, t.type_name from t_paper as p LEFT JOIN t_type as t on
    20.         p.type_id=t.id
    21.         <where>
    22.             <if test="title!=null and title!=''">
    23.                 and title like '%${title}%'
    24.             if>
    25.             <if test="typeName!=null and typeName!=''">
    26.                 and type_name=#{typeName}
    27.             if>
    28.         where>
    29.         limit #{start},#{size}
    30.     select>
    31.     <select id="count" resultType="int">
    32.         select count(t.type_name) from t_paper as p LEFT JOIN t_type as t on
    33.         p.type_id=t.id
    34.         <where>
    35.             <if test="title!=null and title!=''">
    36.                 and title like '%${title}%'
    37.             if>
    38.             <if test="typeName!=null and typeName!=''">
    39.                 and type_name=#{typeName}
    40.             if>
    41.         where>
    42.     select>
    43.     <insert id="insertPaper">
    44.         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})
    45.     insert>
    46. mapper>

    数据库内外链接补充

     1.3 PaperMapper类

    1. public interface PaperMapper extends BaseMapper {
    2.      List selectPaperListByCondition(String title, String typeName, int start, int size);
    3.      int count(String title, String typeName);//查询总数,用于列表分页
    4. }

     1.4Service层

    接口

    1. package com.woniu.paper.service;
    2.  
    3. import com.woniu.paper.entity.HttpResult;
    4. import com.woniu.paper.entity.Paper;
    5. import com.baomidou.mybatisplus.extension.service.IService;
    6.  
    7. /**
    8.  * 
    9.  *  服务类
    10.  * 
    11.  *
    12.  * @author zhang
    13.  * @since 2022-11-18
    14.  */
    15. public interface IPaperService  {
    16.     public HttpResult selectPaperListByCondition(String title, String typeName, int pageIndex, int pageSize);
    17.     public HttpResult insertPaper(String title,Long typeId,String paperSummary,String paperPath,String createdBy,String modifyBy,String fileName);
    18. }

    实现类

    1. package com.woniu.paper.service.impl;
    2.  
    3. import com.woniu.paper.entity.HttpResult;
    4. import com.woniu.paper.entity.Paper;
    5. import com.woniu.paper.mapper.PaperMapper;
    6. import com.woniu.paper.mapper.UserMapper;
    7. import com.woniu.paper.service.IPaperService;
    8. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Service;
    11.  
    12. import java.util.List;
    13.  
    14. /**
    15.  * 
    16.  * 服务实现类
    17.  * 
    18.  *
    19.  * @author zhang
    20.  * @since 2022-11-18
    21.  */
    22. @Service
    23. public class PaperServiceImpl implements IPaperService {
    24.     @Autowired(required = false)
    25.     private PaperMapper paperMapper;//实例化DAO对象
    26.  
    27.     @Override
    28.     public HttpResult selectPaperListByCondition(String title, String typeName, int pageIndex, int pageSize) {
    29.         List papers = paperMapper.selectPaperListByCondition(title, typeName, (pageIndex - 1) * pageSize, pageSize);
    30.         int count = paperMapper.count(title, typeName);
    31.         HttpResult result=null;
    32.         if (papers!=null&&papers.size()>0){
    33.             result= new HttpResult(papers,count,200,null);
    34.         }else{
    35.             result= new HttpResult(null,0,500,"没有更多数据");
    36.         }
    37.         return result;
    38.     }
    39.  
    40.    
    41.  
    42.  
    43. }

     1.5 Controller层

    1. package com.woniu.paper.controller;
    2.  
    3.  
    4. import com.woniu.paper.entity.HttpResult;
    5. import com.woniu.paper.service.IPaperService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.web.bind.annotation.CrossOrigin;
    8. import org.springframework.web.bind.annotation.RequestMapping;
    9.  
    10. import org.springframework.stereotype.Controller;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. /**
    14.  * 
    15.  *  前端控制器
    16.  * 
    17.  *
    18.  * @author zhang
    19.  * @since 2022-11-18
    20.  */
    21. @RestController
    22. @RequestMapping("/paper/paper")
    23. public class PaperController {
    24.     @Autowired
    25.     private IPaperService paperService;//实例化Service对象
    26.     /**
    27.      * 根据分页查询论文列表
    28.      * @return
    29.      */
    30.     @RequestMapping("/list")
    31.     @CrossOrigin(origins = "*")
    32.     public HttpResult selectPaperListByCondition(String title,String typeName,int pageIndex,int pageSize) {
    33.     return paperService.selectPaperListByCondition(title,typeName,pageIndex,pageSize);
    34.     }
    35.     /**
    36.      * 新增
    37.      */
    38.  
    39. }

     二、前端部分

    效果图

     

    源码如下 :

    1.  
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>论文管理系统title>
    7.     
    8.     <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    9.     <script src="assets/jquery-3.5.1.min.js">script>
    10.     <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
    11.     
    12.     <script src="assets/vue.min-v2.5.16.js">script>
    13.     <script src="assets/axios.min.js">script>
    14.     <script src="assets/vue-router.min-2.7.0.js">script>
    15. <body>
    16. <div id="app">
    17.     <div style="margin-left: auto; margin-right: auto;">
    18.         <div style="width: 1000px; height: 100px; border: 1px solid black; text-align: center;font-size: 18px; line-height: 100px;">
    19.             论文管理系统
    20.         div>
    21.         <div style="width: 200px; height: 700px; border: 1px solid black; text-align: center; font-size: 18px; line-height: 50px; float: left">
    22.             <div>
    23.                 <button class="btn btn-link" @click="doUserManager">用户管理button>
    24.             div>
    25.             <div>
    26.                 <button class="btn btn-link" @click="doPaperManager">论文管理button>
    27.             div>
    28.  
    29.  
    30.         div>
    31.         <div style="width: 800px; height: 700px; border: 1px solid black; float: left">
    32.             <div v-if="isShow">
    33.                 论文主题:
    34.                 <input type="text" v-model="title">
    35.                 论文类型:
    36.                 <select v-model="typeName">
    37.                     <option>软件option>
    38.                     <option>财务option>
    39.                 select>
    40.                 <button @click="doQuery">查询button>
    41.                 
    42.                 <table class="table table-striped">
    43.                     <caption>论文列表caption>
    44.                     
    45.                     <thead>
    46.                     <tr>
    47.                         <th>论文主题th>
    48.                         <th>作者th>
    49.                         <th>论文类型th>
    50.                         <th>发表时间th>
    51.                         <th>修改时间th>
    52.                         <th>操作th>
    53.                     tr>
    54.                     thead>
    55.  
    56.                     
    57.                     <tbody>
    58.                     
    59.                     <tr v-for="p in papers">
    60.                         <td>{{p.title}}td>
    61.                         <td>{{p.createdBy}}td>
    62.                         <td>{{p.typeName}}td>
    63.                         <td>{{p.creationData}}td>
    64.                         <td>{{p.modifyData}}td>
    65.                         <td>
    66.                             <button class="btn btn-link">修改button>
    67.                             <button class="btn btn-link">删除button>
    68.                         td>
    69.                     tr>
    70.                     tbody>
    71.                 table>
    72.                 
    73.                 <ul class="pagination" v-for="p in pageNum">
    74.                     
    75.                     <li v-if="p == pageIndex" class="active">
    76.                         <a @click="doGo(p)">{{p}}a>
    77.                     li>
    78.                     <li v-else="p == pageIndex">
    79.                         <a @click="doGo(p)">{{p}}a>
    80.                     li>
    81.                 ul>
    82.             div>
    83.         div>
    84.     div>
    85. div>
    86. <script>
    87.     new Vue({
    88.         //将id=app的div的管理权交给vue
    89.         el:'#app',
    90.         //需要绑定的数据
    91.         data:{
    92.             papers:null,//论文列表
    93.             isShow:false,//控制列表是否显示
    94.             //用于条件查询
    95.             title:null,
    96.             typeName:null,
    97.             //用户分页
    98.             pageIndex:1,//当前页面
    99.             pageSize:10,//每页显示的条数
    100.             pageTotle:0,//数据总条数
    101.             pageNum:0
    102.  
    103.         },
    104.         //需要绑定的函数
    105.         methods:{
    106.             //请求论文列表
    107.             requestPapers(url){
    108.                 axios.get(url).then(respones =>{
    109.                     console.log(respones.data);
    110.                     this.papers =respones.data.data;//给论文列表赋值
    111.                     this.pageTotle = respones.data.pageTotle;//给总条数赋值
    112.                     //Math.ceril函数=>小数去整,向上取整
    113.                     this.pageNum = Math.ceil(this.pageTotle / this.pageSize);//计算页数
    114.  
    115.                 });
    116.             },
    117.             doGo(p){
    118.                 this.pageIndex = p;
    119.                 var url="http://localhost:8080/paper/paper/list?pageIndex="+p+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid");
    120.                 this.requestPapers(url);//调用请求论文列表的函数发送请求
    121.             },
    122.             //用户管理
    123.             doUserManager(){
    124.                 this.isShow = true;//让列表显示
    125.             },
    126.             //论文管理
    127.             doPaperManager(){
    128.                 this.isShow = true;//让列表显示
    129.             },
    130.             //点击查询按钮执行
    131.             doQuery(){
    132.                 var url="http://localhost:8080/paper/paper/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid")+"&title="+this.title+"&typeName="+this.typeName;
    133.                 this.requestPapers(url);//调用请求论文列表的函数发送请求
    134.             }
    135.         },
    136.         //页面加载完成后执行
    137.         created:function () {
    138.             //re
    139.             var url="http://localhost:8080/paper/paper/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid");
    140.             this.requestPapers(url);//调用请求论文列表的函数发送请求
    141.         }
    142.  
    143.  
    144.     });
    145.  
    146.  
    147.  
    148. script>
    149.  
    150.  
    151. body>
    152. html>

     代码讲解

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

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

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

     

     分页功能

     

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

    主页面图 

     模糊查询效果图

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    Stable Diffusion插件（翻译）
    SpringBoot的初步认识
    VMware17.0.1密匙/下载/安装Ubuntu18.04
    Lambda表达式
    【base-0】如果各个前端框架的父子通信都统一会怎样？
    【uniapp】小程序中input输入框的placeholder-class不生效以及解决办法
    Qt扫描-QMoive 理论总结
    神经网络科普视频下载,神经网络视频教程
    Miko二次元动漫视频网站源码 视频播放带仿哔哩哔哩视频字幕弹幕
    记录：2022-9-28 岛屿的最大面积 字母异位词分组 雪花算法实现 偏向锁 |锁升级 阻塞线程的方式
  • 原文地址：https://blog.csdn.net/magic_818/article/details/127945732