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

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

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

好看的设计,我独自升级系统页面-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字段跟数据库相匹配

相关文章
|
SQL 前端开发 Java
通用分页-后台
通用分页-后台
90 0
|
4月前
|
JSON 前端开发 JavaScript
分页功能制作
分页功能制作
39 1
|
4月前
|
SQL 开发框架 前端开发
在Winform系统开发中,对表格列表中的内容进行分组展示
在Winform系统开发中,对表格列表中的内容进行分组展示
|
5月前
|
SQL 前端开发 Java
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
|
开发框架 前端开发 JavaScript
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(一)
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示
359 6
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(一)
|
开发框架 前端开发 Java
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(二)
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示
196 8
|
资源调度 前端开发
让后台查询+表格这种页面更加快速和简便
让后台查询+表格这种页面更加快速和简便
157 0
|
算法 数据库 内存技术
【视频】自然框架之分页控件的使用方法(一) PostBack方式的一般分页方式
前言:分页控件的优点   1、 按需所取 —— 需要几条记录就从数据库里提取几条记录,不会多取。 2、 使用简单 —— 设置几个属性就可以实现分页的功能。 3、 多种分页算法 —— (即分页用的SQL语句)可以根据不同的需求灵活选择 4、 支持多种数据库 —— 用不同的分页算法对应不同的数据库。
1115 0