搭配我独自升级的界面更好看:
一个这样简单的页面如何设计:
点击添加:出现这样一个页面
设计第一点 !!!形成这样样式的第一步:都要创建数据库,数据库的字段要跟分页表单列表的数据相匹配 ,你的列表数据要跟数据库相匹配
设计要点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字段跟数据库相匹配