后端程序注意两点:
1. controller返回值 —— success() or success(object)
2. 实体类与数据表数据之间的转换与查询操作:
- id: 这里采用别名方式,将p_id视作id (非常非常非常易错还不容易发现)
- gender:后端gender没有进行任何处理,由前端进行操作并显示,因此都为整型
以下是后端程序:
controller
package edu.wust.controller;
import edu.wust.pojo.Poet;
import edu.wust.pojo.Result;
import edu.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
public class PoetController {
@Autowired
private PoetService poetService;
//查询
@GetMapping("/poets")
public Result select(){
return Result.success(poetService.selectData());
}
//新增
@RequestMapping("/poet")
public Result insert(@RequestBody Poet poet){
poetService.insert(poet);
return Result.success();
}
//删除
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable Integer id){
poetService.delete(id);
return Result.success();
}
//修改 先查询,再修改
@RequestMapping("/poets/{id}")
public Result getById(@PathVariable Integer id){
Poet poet = poetService.getById(id);
return Result.success(poet);
}
@PutMapping("/update")
public Result update(@RequestBody Poet poet){
poetService.update(poet);
return Result.success();
}
}
service实现类
package edu.wust.service.serviceImpl;
import edu.wust.mapper.PoetMapper;
import edu.wust.pojo.Poet;
import edu.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PoetService1 implements PoetService {
@Autowired
private PoetMapper poetMapper;
public List<Poet> selectData(){
return poetMapper.selectPoet();
}
public void insert(Poet poet){
poetMapper.insert(poet);
}
public void delete(Integer id){
poetMapper.delete(id);
}
public Poet getById(Integer id){
return poetMapper.getById(id);
}
public void update(Poet poet){
poetMapper.update(poet);
}
}
mapper
package edu.wust.mapper;
import edu.wust.pojo.Poet;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface PoetMapper {
@Select("select p_id as id, name, gender, dynasty, title, style from poet")
List<Poet> selectPoet();
@Insert("insert into poet (name, gender, dynasty, title, style) " +
"values (#{name},#{gender},#{dynasty},#{title},#{style})")
void insert(Poet poet);
@Delete("delete from poet where p_id=#{id}")
void delete(Integer id);
@Select("select p_id as id, name, gender, dynasty, title, style from poet where p_id=#{id}")
Poet getById(Integer id);
@Update("update poet set " +
"name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where p_id=#{id}")
void update(Poet poet);
}
重点是前端程序:
显示页:
增删改查方法均在该页面上
删除操作:
根据id进行删除,删除前会有一个确定框 confirm ,确定后进行删除
新增操作;
添加一个新增按钮,点击后执行新增方法,跳转到一个空数据表单上,点击提交执行后端新增操作
修改操作:
先根据id进行查询,随后执行修改操作
点击修改按钮,跳转到修改数据表单上,表单数据由一个根据id查询方法获取并作为原始数据显示在表单上,点击提交调用修改操作,将修改后的数据上传,并返回原页面
最后有一个挂载方法,用于加载最终数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>诗人信息</title>
</head>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<h1 align="center">诗人信息列表展示</h1>
<div id="app" align="center">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>朝代</th>
<th>头衔</th>
<th>风格</th>
<th>操作
<button type="button" @click="insertPoet()">添加</button>
</th>
</tr>
<tr align="center" v-for="poet in tableData">
<td>{{poet.id}}</td>
<td>{{poet.name}}</td>
<td>{{poet.gender}}</td>
<td>{{poet.dynasty}}</td>
<td>{{poet.title}}</td>
<td>{{poet.style}}</td>
<td class="text-center">
<!-- 删除操作:delete/id
修改操作:poets/id + update -->
<button type="button" @click="editPoet(poet.id)">修改</button>
<button type="button" @click="deletePoet(poet.id)">删除</button>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: []
}
},
methods: {
// 删除操作
deletePoet(id) {
// 弹出确认对话框
if (confirm('确定要删除这个诗人的信息吗?')) {
// 如果用户点击了确定按钮,执行删除操作
axios.delete('delete/' + id).then(res => {
if (res.data.code) {
alert('删除成功');
this.loadData();
} else {
alert('删除失败');
}
});
}
},
// 编辑操作
editPoet(id) {
// 跳转到编辑页面并传递诗人ID
window.location.href = "poetview.html?id=" + id;
},
// 新增操作
insertPoet(){
// 跳转到新增页面上
window.location.href = "poetinsert.html";
},
// 实时数据更新
loadData() {
axios.get('poets').then(res => {
this.tableData = res.data.data;
// 遍历tableData数组,处理性别字段
for (let poet of this.tableData) {
if (poet.gender === 1) {
poet.gender = "男";
} else if (poet.gender === 2) {
poet.gender = "女";
} else {
poet.gender = "不明确";
}
}
});
}
},
mounted() {
this.loadData();
}
});
</script>
</html>
修改表单页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑诗人信息</title>
</head>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<h1 align="center">编辑诗人信息</h1>
<div id="editApp" align="center">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="editForm.name"><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" value="1" v-model="editForm.gender"> 男
<input type="radio" id="female" value="2" v-model="editForm.gender"> 女
<input type="radio" id="unknown" value="3" v-model="editForm.gender"> 不明确
<br><br>
<label for="dynasty">朝代:</label>
<input type="text" id="dynasty" v-model="editForm.dynasty"><br><br>
<label for="title">头衔:</label>
<input type="text" id="title" v-model="editForm.title"><br><br>
<label for="style">风格:</label>
<input type="text" id="style" v-model="editForm.style"><br><br>
<button type="button" @click.prevent="updatePoet">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el: "#editApp",
data() {
return {
editForm: {
id: "",
name: "",
gender: "",
dynasty: "",
title: "",
style: ""
}
}
},
methods: {
updatePoet() {
// 数据上传
axios.put('update', this.editForm).then(res => {
if (res.data.code) {
alert('数据修改成功');
// 修改成功后跳转到诗人信息列表页面
window.location.href = "poet.html";
} else {
alert('修改失败');
}
});
},
// 根据诗人ID获取当前信息
getPoetInfo(id) {
axios.get('poets/' + id).then(res => {
if (res.data.code) {
this.editForm = res.data.data;
} else {
alert('获取诗人信息失败');
}
});
}
},
mounted() {
var poetId = window.location.search.split('=')[1];
this.getPoetInfo(poetId);
},
});
</script>
</html>
新增表单页:
大体和修改表单差不多,这里只给出方法:
methods: {
insertPoet() {
// 数据上传
axios.post('/poet', this.newForm).then(res => {
if (res.data.code) {
alert('数据添加成功');
// 添加成功后跳转到诗人信息列表页面
window.location.href = "poet.html";
} else {
alert('添加失败');
}
});
}
}
运行:
查询:
新增:
修改:
删除:
后端反应:
debug了一天,没想到最后是查询操作没写好,后续命名应尽量采取驼峰命名,如果产生失误可由idea进行自动映射
使用element-ui渲染美化一下: