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