🌻🌻 目录
一、前后端数据交互
1.1 修改前端页面 pageOne.vue
1.1.1 修改前端表结构
拷贝 element-ui代码相应代码替换 PageOne.vue,做细微调整代码显示如下所示:
PageOne.vue
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="deptno"
label="部门编号"
width="150">
</el-table-column>
<el-table-column
prop="dname"
label="部门姓名"
width="120">
</el-table-column>
<el-table-column
prop="dloc"
label="部门地址"
width="120">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [{
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}]
}
}
}
</script>
1.1.2 添加分页显示
添加分页代码(注:要添加 div标签 )
<el-pagination
background
layout="prev, pager, next"
:page-size="10"
:total="100">
</el-pagination>
最终显示:
1.1.3 给分页添加一个事件
最终显示
1.2 数据交互分页实现
-
像数据库表 myproject 中添加测试字段,参考如下
-
后台测试分页
3. 前台测试分页
浏览器输入 http://localhost:8080/dept/PageOne
- 前台显示数据库数据
最终显示: http://localhost:8080/dept/PageOne#/PageOne
- 修改后端 DeptController.java
package com.zql.controller;
import com.zql.pojo.Dept;
import com.zql.repository.DeptRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.persistence.criteria.CriteriaBuilder;
import java.util.List;
/**
* @Author:Daniel
* @Version 1.0
*/
@RestController
@RequestMapping("/dept")
public class DeptController {
@Autowired
private DeptRepository deptRepository;
@GetMapping("/findAll/{pageSize}/{size}")
public Page<Dept> findAll(@PathVariable("pageSize") Integer pageSize, @PathVariable("size") Integer size){
PageRequest pageRequest = PageRequest.of(pageSize, size);
return deptRepository.findAll(pageRequest);
}
}
6. 修改前端 PageOne.vue
完整代码:
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="deptno"
label="部门编号"
width="150">
</el-table-column>
<el-table-column
prop="dname"
label="部门姓名"
width="120">
</el-table-column>
<el-table-column
prop="dloc"
label="部门地址"
width="120">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-pagination
background
layout="prev, pager, next"
:page-size=pageSize
:total=total
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
page:function (currentPage) { //currentPage点击得页数
//alert(currentPage)
this.$http.get("http://localhost:8081/dept/findAll/"+(currentPage-1)+"/6").then(resp=>{
console.log(resp)
this.tableData = resp.data.content;
this.pageSize = resp.data.size;
this.total = resp.data.totalElements;
})
}
},
data() {
return {
pageSize:'11',//每页显示条数
total:'22',//总条数
tableData: [{
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}]
}
},
created() {
}
}
</script>
最终显示:
二、部门数据添加
2.1 修改命名导入添加页面
2.1.1 修改命名
2.1.2 导入添加页面
导入到 AddDept.vue显示如下
修改代码:
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="部门名称" prop="dname">
<el-input v-model="ruleForm.dname"></el-input>
</el-form-item>
<el-form-item label="部门地址" prop="dloc">
<el-input v-model="ruleForm.dloc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
dname: '',
dloc: '',
},
rules: {
dname: [
{ required: true, message: '请输入部门名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
dloc: [
{ required: true, message: '请输入部门地址', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//alert('submit!');
console.log(this.ruleForm);
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
2.2 后端开发
- 测试是否存在添加得方法
@Test
void addDept() {
Dept dept = new Dept();
dept.setDname("研发部步");
dept.setDloc("澳门");
Dept save = deptRepository.save(dept);
System.out.println(save);
}
- 报错:
解决(添加注解):
添加成功显示
- 编写后端接口
DeptController.java
@PostMapping("/save")
public String save(@RequestBody Dept dept){
Dept result = deptRepository.save(dept);
if(result != null){
return "sucess";
}else {
return "error";
}
}
前端对接:
element-ui 的弹出界面
this.$http.post("http://localhost:8081/dept/save",this.ruleForm).then(resp=>{
if(resp.data != null){
//alert("添加成功");
this.$alert('添加成功', '消息', {
confirmButtonText: '确定',
callback: action => {
this.$router.push('/DeptManager')
}
});
}else{
alert("添加失败")
}
})
测试得:http://localhost:8080/dept/#/DeptManager
(1)仅弹出
(2)引入了element-ui 的弹出界面
(3)添加成功如下显示
先成功添加到数据库,后同步显示到页面
三、修改部门数据
3.1 修改页面引入
-
将来上述添加页面拷贝一份作为修改页面
-
简单修改 DeptManager.vue(获取部门编号,跳转到修改页)
3.2 前后接口交互
- 后端代码:
@GetMapping("/findById/{deptno}")
public Dept findById(@PathVariable("deptno") Integer deptno){
return deptRepository.findById(deptno).get();
}
@PutMapping("/update")
public String update(@RequestBody Dept dept){
Dept result = deptRepository.save(dept);
if(result != null){
return "sucess";
}else{
return "error";
}
}
- 前端修改
- 前端完整代码 UpdateDept.vue
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="部门编号" prop="deptno" readonly>
<el-input v-model="ruleForm.deptno"></el-input>
</el-form-item>
<el-form-item label="部门名称" prop="dname">
<el-input v-model="ruleForm.dname"></el-input>
</el-form-item>
<el-form-item label="部门地址" prop="dloc">
<el-input v-model="ruleForm.dloc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
deptno:'',
dname: '22',
dloc: '23',
},
rules: {
dname: [
{ required: true, message: '请输入部门名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
dloc: [
{ required: true, message: '请输入部门地址', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//alert('submit!');
//console.log(this.ruleForm);
this.$http.put("http://localhost:8081/dept/update",this.ruleForm).then(resp=>{
if(resp.data != null){
//alert("添加成功");
this.$alert('修改成功', '消息', {
confirmButtonText: '确定',
callback: action => {
this.$router.push('/DeptManager')
}
});
}else{
alert("修改失败")
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
//alert(this.$route.query.deptno);
this.$http.get("http://localhost:8081/dept/findById/"+
this.$route.query.deptno).then(resp=>{
this.ruleForm = resp.data;
})
}
}
</script>
- 最终显示:
http://localhost:8080/dept/
四、删除部门数据
4.1 后端接口
@DeleteMapping("/delete/{deptno}")
public void delete(@PathVariable("deptno") Integer deptno){
deptRepository.deleteById(deptno);
}
4.2 前后端接口对接
完整代码 DeptManager.vue
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="deptno"
label="部门编号"
width="140">
</el-table-column>
<el-table-column
prop="dname"
label="部门姓名"
width="160">
</el-table-column>
<el-table-column
prop="dloc"
label="部门地址"
width="160">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-pagination
background
layout="prev, pager, next"
:page-size=pageSize
:total=total
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
delete1(row){
this.$http.delete("http://localhost:8081/dept/delete/"
+row.deptno).then(resp=>{
this.$alert('删除成功', '消息', {
confirmButtonText: '确定',
callback: action => {
//this.$router.push('/DeptManager')
window.location.reload();
}
});
})
},
edit(row) {
//alert(row.deptno);
this.$router.push({
path:'/update',
query:{
deptno:row.deptno
}
});
},
page:function (currentPage) { //currentPage点击得页数
//alert(currentPage)
this.$http.get("http://localhost:8081/dept/findAll/"+(currentPage-1)+"/6").then(resp=>{
console.log(resp)
this.tableData = resp.data.content;
this.pageSize = resp.data.size;
this.total = resp.data.totalElements;
})
}
},
data() {
return {
pageSize: '11',//每页显示条数
total: '22',//总条数
tableData: [{
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}, {
deptno: '2016-05-02',
dname: '王小虎',
dloc: '上海'
}]
}
},
created() {
}
}
</script>
删除成功显示: