• 论文管理系统(增删查改功能的实现)

    目录

    一、后端

    1.1实体类

    1.2paperMapper类

    1.3 PaperMapper类 

    1.4Service层 

    1.5 Controller层 

    二、前端

    源代码

     

    我们已经实现列表数据了,接下来我们将实现增删查改功能,新增和修改还能够回显

    一、后端

    1.1实体类

    实体类还是我们上一版的列表功能的实现的paper实体类

     

    代码附在上一版中 

    1.2paperMapper类

    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!='null'">
    23.                 and title like '%${title}%'
    24.             if>
    25.             <if test="typeName!=null and typeName!='null'">
    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.  
    44.     <select id="getPaperByid" resultMap="paperResult">
    45.         select p.*, t.type_name from t_paper as p left join t_type as t on p.type_id=t.id where p.id=#{id}
    46.     select>
    47.     <delete id="deletePaperById">
    48.         delete from t_paper where id=#{id}
    49.     delete>
    50.     <insert id="insertPaper">
    51.         insert into  t_paper (title, type_id,created_by) values ( #{title}, #{typeId}, #{createdBy})
    52.     insert>
    53.     <update id="updatePaperById"> update t_paper set title=#{title}, type_id=#{typeId}, created_by=#{createdBy} where id=#{id} update>
    54. mapper>

    1.3 PaperMapper类 

    1. package com.woniu.paper.mapper;
    2.  
    3. import com.woniu.paper.entity.HttpResult;
    4. import com.woniu.paper.entity.Paper;
    5. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    6.  
    7. import java.net.HttpCookie;
    8. import java.util.List;
    9.  
    10. /**
    11.  * 
    12.  *  Mapper 接口
    13.  * 
    14.  *
    15.  * @author zhang
    16.  * @since 2022-11-18
    17.  */
    18. public interface PaperMapper extends BaseMapper {
    19.      List selectPaperListByCondition(String title, String typeName, int start, int size);
    20.      int count(String title, String typeName);//查询总数,用于列表分页
    21.      //根据id获取论文信息的接口
    22.       Paper getPaperByid(Long id);
    23.      //根据id删除论文的接口
    24.     int deletePaperById(Long id);
    25.      //添加论文
    26.     int insertPaper(Paper paper);
    27.      //根据id修改论文
    28.      int updatePaperById(Paper paper);
    29.  
    30. }

    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.     HttpResult  getPaperByid(Long id);
    19.     HttpResult  deletePaperById(Long id);
    20.     HttpResult insertPaper(Paper paper);
    21.     HttpResult updatePaperById(Paper paper);
    22. }

     

    实现类

     

    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.     @Override
    41.     public HttpResult getPaperByid(Long id) {
    42.         Paper paper = paperMapper.getPaperByid(id);
    43.         HttpResult result=null;
    44.         if (paper!=null){
    45.             result= new HttpResult(paper,0,200,null);
    46.         }else{
    47.             result= new HttpResult(null,0,500,"没有更多数据");
    48.         }
    49.         return result;
    50.     }
    51.  
    52.     @Override
    53.     public HttpResult deletePaperById(Long id) {
    54.         int count = paperMapper.deletePaperById(id);
    55.         HttpResult result=null;
    56.         if (count>0){
    57.             result=new HttpResult(null,0,200,"删除论文成功");
    58.         }else{
    59.             result=new HttpResult(null,0,500,"删除论文失败");
    60.         }
    61.  
    62.         return result;
    63.     }
    64.  
    65.     @Override
    66.     public HttpResult insertPaper(Paper paper) {
    67.         int count = paperMapper.insertPaper(paper);
    68.         HttpResult result=null;
    69.         if (count>0){
    70.             result=new HttpResult(null,0,200,"添加论文成功");
    71.         }else{
    72.             result=new HttpResult(null,0,500,"添加论文失败");
    73.         }
    74.         return result;
    75.     }
    76.  
    77.     @Override
    78.     public HttpResult updatePaperById(Paper paper) {
    79.         int count = paperMapper.updatePaperById(paper);
    80.         HttpResult result = null;
    81.         if(count > 0){
    82.             result = new HttpResult(null, 0, 200, "修改论文成功");
    83.         } else {
    84.             result = new HttpResult(null, 0, 500, "修改论文失败");
    85.         }
    86.         return result;
    87.     }
    88.  
    89.  
    90. }

    1.5 Controller层 

     

     

    1. package com.woniu.paper.controller;
    2.  
    3.  
    4. import com.woniu.paper.entity.HttpResult;
    5. import com.woniu.paper.entity.Paper;
    6. import com.woniu.paper.service.IPaperService;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.boot.origin.Origin;
    9. import org.springframework.web.bind.annotation.CrossOrigin;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11.  
    12. import org.springframework.stereotype.Controller;
    13. import org.springframework.web.bind.annotation.RestController;
    14.  
    15. /**
    16.  * 
    17.  *  前端控制器
    18.  * 
    19.  *
    20.  * @author zhang
    21.  * @since 2022-11-18
    22.  */
    23. @RestController
    24. @RequestMapping("/paper/paper")
    25. public class PaperController {
    26.     @Autowired
    27.     private IPaperService paperService;//实例化Service对象
    28.     /**
    29.      * 根据分页查询论文列表
    30.      * @return
    31.      */
    32.     @RequestMapping("/list")
    33.     @CrossOrigin(origins = "*")
    34.     public HttpResult selectPaperListByCondition(String title,String typeName,int pageIndex,int pageSize) {
    35.     return paperService.selectPaperListByCondition(title,typeName,pageIndex,pageSize);
    36.     }
    37.     /**
    38.      * 根据id查询论文信息
    39.      */
    40.     @RequestMapping("/info")
    41.     @CrossOrigin(origins = "*")
    42.     public HttpResult getPaperByid(Long id){
    43.  
    44.         return paperService.getPaperByid(id);
    45.     }
    46.  
    47.     /**
    48.      * 根据id删除论文
    49.      * @param id
    50.      * @return
    51.      */
    52.     @RequestMapping("/delete")
    53.     @CrossOrigin(origins = "*")
    54.     public HttpResult deletePaperById(Long id){
    55.         return paperService.deletePaperById(id);
    56.     }
    57.  
    58.     /**
    59.      * 增加论文数量
    60.      */
    61.     @RequestMapping("/add")
    62.     @CrossOrigin(origins = "*")
    63.     public HttpResult insertPaper(String title,String createdBy,Long typeId){
    64.         Paper paper = new Paper();
    65.         paper.setTitle(title);
    66.         paper.setCreatedBy(createdBy);
    67.         paper.setTypeId(typeId);
    68.         return paperService.insertPaper(paper);
    69.  
    70.     }
    71.     @RequestMapping("/update")
    72.     @CrossOrigin(origins = "*")
    73.     public HttpResult updatePaperById(Long id,String title,String createdBy,Long typeId){
    74.         Paper paper = new Paper();
    75.         paper.setId(id);
    76.         paper.setTitle(title);
    77.         paper.setCreatedBy(createdBy);
    78.         paper.setTypeId(typeId);
    79.         return paperService.updatePaperById(paper);
    80.     }
    81.  
    82.  
    83. }

     这就是我们增删改查的后端部分,接下来,我们将来写前端部分

    二、前端

    源代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    7.     <script src="assets/jquery-3.5.1.min.js">script>
    8.     <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
    9.     <script src="assets/vue.min-v2.5.16.js">script>
    10.     <script src="assets/vue-router.min-2.7.0.js">script>
    11.     <script src="assets/axios.min.js">script>
    12. head>
    13. <body>
    15. <template id="template_insert_or_update">
    16.     <div style="width: 500px; position: fixed; top: 50px; left: 50px; background-color: white; border: 1px solid black">
    17.         <div class="row">
    18.             <div class="col-md-8 col-md-offset-2">
    19.                 <label>论文主题label>
    20.                 <input type="text" class="form-control" v-model="adTitle">
    21.             div>
    22.         div>
    23.         <div class="row">
    24.             <div class="col-md-8 col-md-offset-2">
    25.                 <label>作者label>
    26.                 <input type="text" class="form-control" v-model="adCreateBy">
    27.             div>
    28.         div>
    29.         <div class="row">
    30.             <div class="col-md-8 col-md-offset-2">
    31.                 <label>论文类型label>
    32.                 <select v-model="adTypeId">
    33.                     <option value="1">软件option>
    34.                     <option value="2">财务option>
    35.                 select>
    36.             div>
    37.         div>
    38.         <div class="row">
    39.             <div class="col-md-8 col-md-offset-2">
    40.                 <button @click="saveOrUpdate">保存button>
    41.             div>
    42.         div>
    43.     div>
    44. template>
    45. <div id="app">
    46.     <router-view v-if="isRouterViewShow">router-view>
    47.     <div style="margin-left: auto; margin-right: auto;">
    48.         <div style="width: 1000px; height: 100px; border: 1px solid black; text-align: center;font-size: 18px; line-height: 100px;">
    49.             论文管理系统
    50.         div>
    51.         <div style="width: 200px; height: 700px; border: 1px solid black; text-align: center; font-size: 18px; line-height: 50px; float: left">
    52.             <div>
    53.                 <button class="btn btn-link" @click="doUserManager">用户管理button>
    54.             div>
    55.             <div>
    56.                 <button class="btn btn-link" @click="doPaperManager">论文管理button>
    57.             div>
    58.  
    59.         div>
    60.         <div style="width: 800px; height: 700px; border: 1px solid black; float: left">
    61.             <div v-if="isShow">
    62.                 论文主题：
    63.                 <input type="text" v-model="title">
    64.                 论文类型：
    65.                 <select v-model="typeName">
    66.                     <option>软件option>
    67.                     <option>财务option>
    68.                 select>
    69.                 <button @click="doQuery">查询button>
    70.                 <button @click="doAddPaper">添加论文button>
    71.                 
    72.                 <table class="table table-striped">
    73.                     <caption>论文列表caption>
    74.                     
    75.                     <thead>
    76.                     <tr>
    77.                         <th>论文主题th>
    78.                         <th>作者th>
    79.                         <th>论文类型th>
    80.                         <th>发表时间th>
    81.                         <th>修改时间th>
    82.                         <th>操作th>
    83.                     tr>
    84.                     thead>
    85.                     
    86.                     <tbody>
    87.                     
    88.                     <tr v-for="p in papers">
    89.                         <td>{{p.title}}td>
    90.                         <td>{{p.createdBy}}td>
    91.                         <td>{{p.typeName}}td>
    92.                         <td>{{p.creationData}}td>
    93.                         <td>{{p.modifyData}}td>
    94.                         <td>
    95.                             <button class="btn btn-link" @click="doUpdate(p.id)">修改button>
    96.                             <button class="btn btn-link" @click="doDelete(p.id)">删除button>
    97.                         td>
    98.                     tr>
    99.                     tbody>
    100.                 table>
    101.                 
    102.                 <ul class="pagination" v-for="p in pageNum">
    103.                     
    104.                     <li v-if="p == pageIndex" class="active">
    105.                         <a @click="doGo(p)">{{p}}a>
    106.                     li>
    107.                     <li v-else="p == pageIndex">
    108.                         <a @click="doGo(p)">{{p}}a>
    109.                     li>
    110.                 ul>
    111.             div>
    112.         div>
    113.     div>
    114. div>
    115. <script>
    116.     var _self = null; //用于等量代换vue对象的this
    117.     //创建添加或删除页面的模板的实例对象
    118.     var myTemplate = {
    119.         template: '#template_insert_or_update',
    120.         //要绑定的数据
    121.         data() {
    122.             return {
    123.                 adTitle: null, //主题，用于添加或修改
    124.                 adCreateBy: null, //作者，用于添加或修改
    125.                 adTypeId: null //类型的ID，用于添加或修改
    126.             }
    127.         },
    128.         //要绑定的函数
    129.         methods: {
    130.             //点击新增页面的保存按钮执行
    131.             saveOrUpdate() {
    132.                 if (_self.isUpdate) { //修改跳转来的
    133.                     //收集表单数据并调用后台修改论文的接口提交到后台
    134.                     var url = "http://localhost:8080/paper/paper/update?title=" + this.adTitle + "&createdBy=" + this.adCreateBy + "&typeId=" + this.adTypeId + "&uid=" + localStorage.getItem("uid") + "&id=" + _self.paperId;
    135.                     axios.get(url).then(response => {
    136.                         console.log(response.data);
    137.                         if (response.data.code == 200) { //修改成功
    138.                             //刷新列表
    139.                             var url = "http://localhost:8080/paper/paper/list?pageIndex=1&pageSize=" + _self.pageSize + "&uid=" + localStorage.getItem("uid");
    140.                             _self.pageIndex = 1;
    141.                             _self.requestPapers(url); //调用请求论文列表的函数发送请求
    142.                         } else { //修改失败
    143.                             alert(response.data.msg);
    144.                         }
    145.                     });
    146.                 } else { //添加按钮跳转来的
    147.                     //收集表单数据并调用后台添加论文的接口提交到后台
    148.                     var url = "http://localhost:8080/paper/paper/add?title=" + this.adTitle + "&createdBy=" + this.adCreateBy + "&typeId=" + this.adTypeId + "&uid=" + localStorage.getItem("uid");
    149.                     axios.get(url).then(response => {
    150.                         console.log(response.data);
    151.                         if (response.data.code == 200) { //添加成功
    152.                             //刷新列表
    153.                             var url = "http://localhost:8080/paper/paper/list?pageIndex=1&pageSize=" + _self.pageSize + "&uid=" + localStorage.getItem("uid");
    154.                             _self.pageIndex = 1;
    155.                             _self.requestPapers(url); //调用请求论文列表的函数发送请求
    156.                         } else { //添加失败
    157.                             alert(response.data.msg);
    158.                         }
    159.                     });
    160.                 }
    161.  
    162.                 //关闭当前页面（让router-view的显示状态为false）
    163.                 _self.isRouterViewShow = false;
    164.             }
    165.         },
    166.         created: function () {
    167.             //判断是否要回显，当通过修改按钮跳转进来时，需要回显
    168.             if (_self.isUpdate) { //说明是通过修改按钮跳转进来的
    169.                 //通过axios发送请求
    170.                 axios.get("http://localhost:8080/paper/paper/info?id=" + _self.paperId + "&uid=" + localStorage.getItem("uid")).then(response => {
    171.                     console.log(response.data.data);
    172.                     this.adTitle = response.data.data.title;
    173.                     this.adCreateBy = response.data.data.createdBy;
    174.                     this.adTypeId = response.data.data.typeId;
    175.                 });
    176.             }
    177.         }
    178.     }
    179.  
    180.     //创建router实力，维护路由（点击不同链接，显示不同的模板）
    181.     var rt = new VueRouter({
    182.         routes: [
    183.             {path: '/add', component: myTemplate}
    184.         ]
    185.     });
    186.  
    187.     //创建vue实例对象
    188.     new Vue({
    189.         //将id=app的div的管理权交给vue
    190.         el: '#app',
    191.         router: rt, //将自定义的路由绑定到vue实例
    192.         //需要绑定的数据
    193.         data: {
    194.             papers: null, //论文列表
    195.             isShow: false, //控制列表是否显示
    196.             isRouterViewShow: false, //控制router-view是否显示
    197.             isUpdate: false, //是否是修改页面
    198.             paperId: null, //论文的id，用于传参
    199.             //用于条件查询
    200.             title: null,
    201.             typeName: null,
    202.             //用于分页
    203.             pageIndex: 1, //当前页面
    204.             pageSize: 10, //每页显示的条数
    205.             pageTotle: 0, //总条数
    206.             pageNum: 0 //页数
    207.         },
    208.         //需要绑定的函数
    209.         methods: {
    210.             //请求论文列表
    211.             requestPapers(url) {
    212.                 //通过axios发送请求get请求，then响应
    213.                 axios.get(url).then(respones => {
    214.                     console.log(respones.data);
    215.                     this.papers = respones.data.data; //给论文列表赋值
    216.                     this.pageTotle = respones.data.pageTotle; //给总条数赋值
    217.                     //Math.ceril函数=》小数取整，向上取整
    218.                     this.pageNum = Math.ceil(this.pageTotle / this.pageSize); //计算页数
    219.                 });
    220.             },
    221.             //分页器跳转
    222.             doGo(p) {
    223.                 this.pageIndex = p;
    224.                 var url = "http://localhost:8080/paper/paper/list?pageIndex=" + p + "&pageSize=" + this.pageSize + "&uid=" + localStorage.getItem("uid");
    225.                 this.requestPapers(url); //调用请求论文列表的函数发送请求
    226.             },
    227.             //用户管理
    228.             doUserManager() {
    229.                 this.isShow = false; //让列表不显示
    230.             },
    231.             //论文管理
    232.             doPaperManager() {
    233.                 this.isShow = true; //让列表显示
    234.             },
    235.             //点击查询按钮执行
    236.             doQuery() {
    237.                 var url = "http://localhost:8080/paper/paper/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize + "&uid=" + localStorage.getItem("uid") + "&title=" + this.title + "&typeName=" + this.typeName;
    238.                 this.requestPapers(url); //调用请求论文列表的函数发送请求
    239.             },
    240.             //添加添加论文按钮时执行
    241.             doAddPaper() {
    242.                 //设置是否为修改页面的变量状态
    243.                 this.isUpdate = false;
    244.                 //让router-view控件显示出来
    245.                 this.isRouterViewShow = true;
    246.                 //通过roter对象的push函数跳转指定的模板
    247.                 this.$router.push("/add");
    248.             },
    249.             //点击表格修改按钮时执行
    250.             doUpdate(id) {
    251.                 //设置是否为修改页面的变量状态
    252.                 this.isUpdate = true;
    253.                 //让router-view控件显示出来
    254.                 this.isRouterViewShow = true;
    255.                 //通过roter对象的push函数跳转指定的模板
    256.                 this.$router.push("/add");
    257.                 this.paperId = id;
    258.             },
    259.             //点击表格修改按钮时执行
    260.             doDelete(id) {
    261.                 //通过axios发送请求
    262.                 axios.get("http://localhost:8080/paper/paper/delete?id=" + id + "&uid=" + localStorage.getItem("uid")).then(response => {
    263.                     console.log(response.data);
    264.                     if (response.data.code == 200) { //删除成功
    265.                         var url = "http://localhost:8080/paper/paper/list?pageIndex=1&pageSize=" + this.pageSize + "&uid=" + localStorage.getItem("uid");
    266.                         this.requestPapers(url); //调用请求论文列表的函数发送请求
    267.                     } else { //删除失败
    268.                         alert(response.data.msg);
    269.                     }
    270.                 });
    271.             }
    272.         },
    273.         //页面加载完成后执行
    274.         created: function () {
    275.             _self = this;
    276.             //通过localStorage的getItem函数获取缓存的uid
    277.             var url = "http://localhost:8080/paper/paper/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize + "&uid=" + localStorage.getItem("uid");
    278.             this.requestPapers(url); //调用请求论文列表的函数发送请求
    279.         }
    280.     });
    281. script>
    282. body>
    283. html>

     

     

     

     

     

     

  • 相关阅读:
    基于Linux上MySQL8.*版本的安装-参考官网
    【JUC】Java并发编程从挖坑到入土全解（3-线程池源码分析）
    数据仓库概念
    流程系统的设计与实现
    网络钓鱼技术
    番外篇 | 利用华为2023最新Gold-YOLO中的Gatherand-Distribute对特征融合模块进行改进
    SpringBoot集成Swagger的方法
    C#/VB.NET 将PDF转为PDF/X-1a:2001
    回归分析:多项式回归与广义线性回归，非线性问题的拟合
    「Dr. Bomkus 的试炼」——最详尽的通关资讯！
  • 原文地址：https://blog.csdn.net/magic_818/article/details/128010084