备案控制台
开发者社区 开发与运维 文章 正文

分页，快捷链接表单，分页表单，常用软件开发之分页，快捷链接分页表单添加显示，可以做的分页统计，一个简单的添加页面，数据条理清晰呈现如何设计，如何修改成自己想要的，要会编写接口文档,一边写接口

2024-07-04 5
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 分页，快捷链接表单，分页表单，常用软件开发之分页，快捷链接分页表单添加显示，可以做的分页统计，一个简单的添加页面，数据条理清晰呈现如何设计，如何修改成自己想要的，要会编写接口文档,一边写接口

搭配我独自升级的界面更好看：

好看的设计，我独自升级系统页面-CSDN博客

一个这样简单的页面如何设计：

点击添加：出现这样一个页面

设计第一点 ！！！形成这样样式的第一步：都要创建数据库，数据库的字段要跟分页表单列表的数据相匹配 ，你的列表数据要跟数据库相匹配

设计要点2，确定好字段，写数据字段就行 3.1 快捷链接的字段有3个，第一个是id（序号），(title)常用网站名称,(link)网页链接

数据库设计第一步：起表名：一个简单的快捷链接表单表明：quicklink

4、字段的名称对应表单的内容

5、之后创建一个合适的表单名

6、之后写一个实体类：

6. 1 Student的实体类

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
import java.util.Date;
 
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("student")
public class Student {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
    private String college;
    private String major;
}

设计第二个要点，修改的地方不多，type的设计，要跟自己数据库的表单相同 6.2 快捷列表的实体类，只要起个实体类名就行，写好实体类就行,修改好quicklink的实体类

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.util.Date;
 
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("quicklink")
public class quicklink {
    @TableId(type = IdType.AUTO)
    private int id;
    private String title;
    private String link;
}

设计第三个要点，一个实体类，一个Mapper ，StudentMapper就用这个mapper,快捷链接就用这个QuicklinkMapper------7、mapper这里继承一下接口

设计第四个要点，QuicklinkMapper这里要更换实体类，换成你写的实体类

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import zero.file.videoProject.bean.util.quicklink;
 
 
public interface QuicklinkMapper extends BaseMapper<quicklink> {
}

8、之后Student写一个Mapper，写一个新的类，就写一个StudentMapper

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.crudserver.entity.Student;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
 
@Mapper
@Repository
public interface StudentMapper extends BaseMapper<Student> {
}

设计第五个要点写好这几个实体类 9、dto封装RequestParam,ResponseDto

设计第六个要点 9.1 RequestParam

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
@Data
@NoArgsConstructor
@AllArgsConstructor
public class RequestParam {
    public Integer pageNum;
    public Integer pageSize;
    public String keyword;
}

设计第七个要点 9.2 ResponseDto

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResponseDto <T>{
    private Boolean success;
    private String message;
    T data;
}

设计第八个要点 10、写一个Controller层的内容：

10.1 Controller层设计，这里的第一个路径要修改成，不同的路径，一个新的controller层就要修改不同的接口，快捷链接的接口：

 
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import zero.file.videoProject.bean.dto.RequestParam;
import org.springframework.web.bind.annotation.*;
import zero.file.videoProject.bean.Student;
import zero.file.videoProject.bean.dto.ResponseDto;
 
import zero.file.videoProject.mappers.StudentMapper;
 
import javax.annotation.Resource;
 
@RestController
@RequestMapping("/crud")
public class IndexController {
    @Resource
    private StudentMapper studentMapper;
 
    @GetMapping("/test")
    public String test(){
        return "hello world";
    }
 
    @PostMapping("/list")
    public ResponseDto<?> list(@RequestBody RequestParam param){
        if(param.pageNum==null || param.pageSize==null){
            return new ResponseDto<>(false,"缺少pageNum或者pageSize字段",null);
        }
        Page<Student> page = new Page<>(param.pageNum,param.pageSize);
        QueryWrapper<Student> queryWrapper = new QueryWrapper<>();
        if(param.keyword!=null)
            queryWrapper.like("name", param.keyword);
        return new ResponseDto<>(true,null, studentMapper.selectPage(page, queryWrapper));
    }
    @PostMapping("/add")
    public ResponseDto<?> add(@RequestBody Student student){
        if(student.getName()==null) return new ResponseDto<>(false,"姓名不能为空！",null);
        studentMapper.insert(student);
        return new ResponseDto<>(true, null, "添加成功！");
    }
 
 
    @PostMapping("/modify")
    public ResponseDto<?> modify(@RequestBody Student student){
        if(student.getId()==null || student.getName()==null) return new ResponseDto<>(false,"学号，姓名不能为空！",null);
        studentMapper.updateById(student);
        return new ResponseDto<>(true, null, "修改成功！");
    }
}

设计第九个要点，写好你快捷链接的controller层，一个新的实体类，一个新的controller层：第一个要修改的地方是，首先要修改的地方是quicklink这个根路径，第二个要修改的地方是添加你定义的Mapper

 
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import zero.file.videoProject.mappers.QuicklinkMapper;
 
import javax.annotation.Resource;
 
@RestController
@RequestMapping("/quicklink")
public class quicklinkController {
    @Resource
    private QuicklinkMapper quicklinkMapper;
   
}

设计第十个要点,把这部分代码复制上，然后将爆红的地方替换成你自己写的实体类：Ctrl + R替换搜索StudentMapper，问题全出在Mapper当中

@PostMapping("/list")
    public ResponseDto<?> list(@RequestBody RequestParam param){
        if(param.pageNum==null || param.pageSize==null){
            return new ResponseDto<>(false,"缺少pageNum或者pageSize字段",null);
        }
        Page<Student> page = new Page<>(param.pageNum,param.pageSize);
        QueryWrapper<Student> queryWrapper = new QueryWrapper<>();
        if(param.keyword!=null)
            queryWrapper.like("name", param.keyword);
        return new ResponseDto<>(true,null, studentMapper.selectPage(page, queryWrapper));
    }
    @PostMapping("/add")
    public ResponseDto<?> add(@RequestBody Student student){
        if(student.getName()==null) return new ResponseDto<>(false,"姓名不能为空！",null);
        studentMapper.insert(student);
        return new ResponseDto<>(true, null, "添加成功！");
    }
 
    @GetMapping("/delete")
    public ResponseDto<?> delete(@org.springframework.web.bind.annotation.RequestParam("id") Long id)
    {
        if(id==null) return new ResponseDto<>(false,"学号参数缺少！",null);
        studentMapper.deleteById(id);
        return new ResponseDto<>(true, null, "删除成功！");
    }
 
    @PostMapping("/modify")
    public ResponseDto<?> modify(@RequestBody Student student){
        if(student.getId()==null || student.getName()==null) return new ResponseDto<>(false,"学号，姓名不能为空！",null);
        studentMapper.updateById(student);
        return new ResponseDto<>(true, null, "修改成功！");
    }

Controller层第一个修改点：将所有mapper，统一ctrl + R ，replace  all 修改quicklinkMapper的内容

Controller层第二个修改点：将所有大写的Student的实体类修改成quicklink

Controller层第三个修改点list方法不用管

Controller层第四个修改点getName要进行更正，这里根据你实体类进行修改，快捷链接是title，因此就是getTitle

Controller层第五个修改点，这里delete方法不用修改

Controller层中第六个修改点，如果遇到了上面的bug:

就修正成：

Integer id = quicklink.getId();

if(id==null || id == 0){

}

Controller层的源码：

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.web.bind.annotation.*;
 
import zero.file.videoProject.bean.dto.RequestParam;
import zero.file.videoProject.bean.dto.ResponseDto;
import zero.file.videoProject.bean.util.Quicklink;
import zero.file.videoProject.mappers.QuicklinkMapper;
 
import javax.annotation.Resource;
 
@RestController
@RequestMapping("/quicklink")
public class quicklinkController {
    @Resource
    private QuicklinkMapper quicklinkMapper;
    @PostMapping("/list")
    public ResponseDto<?> list(@RequestBody RequestParam param){
        if(param.pageNum==null || param.pageSize==null){
            return new ResponseDto<>(false,"缺少pageNum或者pageSize字段",null);
        }
        Page<Quicklink> page = new Page<>(param.pageNum,param.pageSize);
        QueryWrapper<Quicklink> queryWrapper = new QueryWrapper<>();
        if(param.keyword!=null)
            queryWrapper.like("name", param.keyword);
        return new ResponseDto<>(true,null, quicklinkMapper.selectPage(page, queryWrapper));
    }
    @PostMapping("/add")
    public ResponseDto<?> add(@RequestBody Quicklink quicklink){
        if(quicklink.getTitle()==null) return new ResponseDto<>(false,"网页的名称不能为空！",null);
        quicklinkMapper
.insert(quicklink);
        return new ResponseDto<>(true, null, "添加成功！");
    }
 
    @GetMapping("/delete")
    public ResponseDto<?> delete(@org.springframework.web.bind.annotation.RequestParam("id") Long id)
    {
        if(id==null) return new ResponseDto<>(false,"学号参数缺少！",null);
        quicklinkMapper
.deleteById(id);
        return new ResponseDto<>(true, null, "删除成功！");
    }
 
    @PostMapping("/modify")
    public ResponseDto<?> modify(@RequestBody Quicklink quicklink){
        Integer id = quicklink.getId();
        if(id==null || id == 0 || quicklink.getTitle()==null) return new ResponseDto<>(false,"学号，姓名不能为空！",null);
        quicklinkMapper
.updateById(quicklink);
        return new ResponseDto<>(true, null, "修改成功！");
    }
}

前端设计第一步，创建一个Vue页面，不同的页面要形成不同Vue页面，StudentPage形成StudentPage，快捷链接页面就要用quicklinkView

11、前端页面第一步，导入axios

import axios from "axios";

12、最简单的一个页面获取数据的写法：

<template>
      <div id="app">
        <el-table
                >
            <el-table-column
                    label="学号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="生日"
                    prop="birthday">
            </el-table-column>
            <el-table-column
                    label="学院"
                    prop="college">
            </el-table-column>
            <el-table-column
                    label="专业"
                    prop="major">
            </el-table-column>
            <el-table-column
                    align="right">
                <template>
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template>
                    <el-button
                            size="mini"
                            @click="modify(scope.row)"
                           >修改</el-button>
                    <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @confirm="deleteStudent(scope.row.id)"
                    >
                        <el-button size="mini" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        </div>
</template>
 
<script>
import axios from 'axios'
// import axios from "axios";
export default {
    data () {
      return {
            tableData:[],
            search: '',
            url: 'http://localhost:9090/crud',
            pageNum: 1,
            pageSize: 10,
            dialogVisible: false,
            ruleForm: {},
            totalNum: 0
      }
    },
    method:{},
    created(){
        axios.post(this.url+ '/list',{
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }).then(function (res){
            console.log(res)
        }).catch(function (error){
            alert('error!')
            console.log(error)
        })
    }
}
</script>
 
<style>
 
</style>

12.1 获取数据的样式：

设计的第十一点，不同的前端页面定义不同的名字 13、Vue前端代码，不同的添加列表页面：

13、前端Vue页面，要建立跟自己表单相同的内容：

比如有几条搭配几条

设计前端修改第一个注意点，修改label和prop，prop改成自己想要的label，prop改成自己项目中的类

设计前端修改第二个注意点，第二部分修改了，也要修改v-model和label的内容，label写成跟你网站内容相同就行,这里的data要跟你后台的data相同

设计前端修改第三个注意点，修改v-model

设计前端修改第四个注意点，不同的URL路径要修改

与编写的Controller层相同

其他的就不需要修改了

前端代码：

<template>
    <div id="app">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      <el-table :data="tableData">
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column label="常用网站名称" prop="title"> </el-table-column>
        <el-table-column label="网站链接" prop="link">
            <template v-slot="scope">
                <a :href="scope.row.link" target="_blank" class="buttonText" style="text-decoration: none;color:#409eff">{{scope.row.link}}</a>
            </template>
        </el-table-column>
        <el-table-column align="right">
          <template v-slot="scope"
            ><el-button type="primary" @click="modify(scope.row)" plain style="width: 50px; font-size: 13px"
              >修改</el-button
            >
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              @confirm="deleteStudent(scope.row.id)"
              title="这是一段内容确定删除吗？"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @current-change="handleCurrentChange"
          layout="prev,pager,next"
          :total="totalNum"
          @next-click="getList(pageNum+1)"
          @prev-click="getList(pageNum-1)"
          >
      </el-pagination>
      <el-dialog
        title="提示"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
        <el-input type="text" v-model="ruleForm.id" v-show="false"></el-input>
          <el-form-item label="常用网站名称">
            <el-input
              type="text"
              v-model="ruleForm.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="网站链接">
            <el-input
              type="url"
              v-model="ruleForm.link"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              >提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm()" >
              确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  // import axios from "axios";
  export default {
    data() {
      return {
        tableData: [],
        search: "",
        url: "http://localhost:9090/quicklink",
        pageNum: 1,
        pageSize: 10,
        dialogVisible: false,
        ruleForm: {},
        totalNum: 0,
      };
    },
    methods: {
      handleCurrentChange(pageNum){
          this.getList(pageNum)
      },
      deleteStudent(id) {
        let that = this;
        axios
          .get(this.url + "/delete?id=" + id)
          .then(function (res) {
            if (res.data.success) {
              that.$message({
                type: "success",
                message: res.data.data,
              })
              that.getList(that.pageNum);
            } else {
              that.$message({
                type: "error",
                message: res.data.message,
              });
            }
          })
          .catch(function (res) {
            console.log(res);
            
          });
      },
      getList(pageNum) {
        let that = this;
        axios
          .post(this.url + "/list", {
            pageNum: pageNum,
            pageSize: this.pageSize,
          })
          .then(function (res) {
            console.log(res);
            that.tableData = res.data.data.records;
            that.totalNum = res.data.data.total
          })
          .catch(function (error) {
            alert("error!");
            console.log(error);
          });
      },
      modify(student){
          this.ruleForm = student
          this.dialogVisible = true
      }
      ,
      resetForm(){
          this.ruleForm = {}
      },
      submitForm(){
          console.log(this.ruleForm)
          let that = this
          if(!this.ruleForm.id){
          axios.post(this.url + "/add",this.ruleForm)
          .then(function (res) {
            console.log(res);
            if (res.data.success) {
              that.$message({
                type: "success",
                message: res.data.data,
              });
              that.getList(that.pageNum);
              // 跳转成功，弹框失效
              that.ruleForm = {}
              that.dialogVisible = false
            } else {
              that.$message({
                type: "error",
                message: res.data.message,
              });
            }
          })
          .catch(function (error) {
            alert("error!");
            console.log(error);
          });
          } else {
              axios.post(this.url+'/modify',this.ruleForm).then(function (res) {
                          console.log(res)
                          if(res.data.success){
                              that.$message({
                                  type: 'success',
                                  message: res.data.data
                              })
                              that.getList(1)
                              that.ruleForm = {}
                              that.dialogVisible = false
                          }else{
                              that.$message({
                                  type: 'error',
                                  message: res.data.message
                              })
                          }
                      }).catch(function (error) {
                          alert('error！')
                          console.log(error)
                      })
          }
      }
    },
    created() {
      this.getList(1);
    },
  };
  </script>
  
  <style>
  </style>

第一步添加上内容，复制路径，如果想要把Element给添加上：

第二步点击添加上链接：

最好的效果，点击链接直接跳转：

前端修改第一点，是前端修改的内容：这里URL设置成路径要后端项目一致

前端修改第二点，prop这里的字段要跟数据库的字段相匹配

前端修改下面的地方，第三点，添加表单这里，prop这里的id字段跟数据库相匹配

文章标签：
前端开发
数据库
JavaScript
爱你三千遍斯塔克
目录
相关文章
云小君
|
9月前
|
SQL 前端开发 Java
通用分页-后台
通用分页-后台
云小君
74 0
小老头头头头
|
2月前
|
JSON JavaScript 数据格式
分页功能制作
分页功能制作
小老头头头头
10 0
Heartprotection
|
11月前
极简分页功能制作
极简分页功能制作
Heartprotection
32 0
web前端圈
|
2月前
|
前端开发 JavaScript
工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
web前端圈
91 0
颜酱
|
资源调度 前端开发
让后台查询+表格这种页面更加快速和简便
让后台查询+表格这种页面更加快速和简便
颜酱
116 0
把苹果咬哭的测试笔记
|
前端开发 JavaScript Java
【平台开发】— 9.列表分页
【平台开发】— 9.列表分页
把苹果咬哭的测试笔记
110 0
【平台开发】— 9.列表分页
金色海洋
|
算法 数据库 内存技术
【视频】自然框架之分页控件的使用方法（一） PostBack方式的一般分页方式
前言：分页控件的优点   1、 按需所取 —— 需要几条记录就从数据库里提取几条记录，不会多取。 2、 使用简单 —— 设置几个属性就可以实现分页的功能。 3、 多种分页算法 —— （即分页用的SQL语句）可以根据不同的需求灵活选择 4、 支持多种数据库 —— 用不同的分页算法对应不同的数据库。
金色海洋
1095 0
吞吞吐吐的
|
XML Go 数据格式
摆摆控件，就可以实现多功能(提交、修改、浏览)的表单了[原]
吞吞吐吐的
1363 0
唐玄奘
|
Java Go 前端开发
万能分页标签
唐玄奘
946 0
walb呀
|
开发框架 索引
详解在数据查看界面中增加记录导航功能，你应该需要的
walb呀
1086 0