完成对poet的增删改查:
poetController
package com.itheima.controller;
import com.itheima.pojo.Poet;
import com.itheima.pojo.Result;
import com.itheima.service.PoetService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@Slf4j
@RestController
public class PoetController {
@Autowired
private PoetService poetService;
@GetMapping("/poet1")
public Result list(){
log.info("查询所有诗人信息");
return Result.success(poetService.list());
}
@DeleteMapping("/poet1/{id}")
public Result delete(@PathVariable Integer id){
log.info("删除这条信息id={}",id);
poetService.deleteById(id);
return Result.success();
}
/**
* 新增
*/
@PostMapping("/poet2")
public Result add(@RequestBody Poet poet){
log.info("新增诗人:{}",poet);
//调用service
poetService.add(poet);
return Result.success();
}
/**
* 查询诗人信息
*/
@GetMapping("/poet3/{id}")
public Result getById(@PathVariable Integer id){
log.info("查询员工信息,id={}",id);
Poet poet = poetService.getById(id);
return Result.success(poet);
}
@PutMapping("/poetUpdate")
public Result update(Poet poet){
log.info("修改员工信息",poet);
poetService.update(poet);
return Result.success();
}
}
poetServicej接口
package com.itheima.service;
import com.itheima.pojo.Poet;
import java.util.List;
public interface PoetService {
List<Poet> list();
//根据id删除信息
void deleteById(Integer id);
//新增诗人信息
void add(Poet poet);
//查询员工信息
Poet getById(Integer id);
//修改员工信息
void update(Poet poet);
}
poet Service实体类
package com.itheima.service.impl;
import com.itheima.mapper.PoetMapper;
import com.itheima.pojo.Poet;
import com.itheima.service.PoetService;
import org.springframework.beans.MutablePropertyValues;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PoetServiceImpl implements PoetService {
@Autowired
private PoetMapper poetMapper;
@Override
public List<Poet> list(){
return poetMapper.list();
}
@Override
public void deleteById(Integer id) {
poetMapper.deleteById(id);
}
@Override
public void add(Poet poet) {
poetMapper.insert(poet);
}
@Override
public Poet getById(Integer id) {
return poetMapper.getById(id);
}
@Override
public void update(Poet poet) {
poetMapper.update(poet);
}
}
poetMapper
package com.itheima.mapper;
import com.itheima.pojo.Poet;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface PoetMapper {
@Select("select * from poet")
List<Poet> list();
@Delete("delete from poet where id = #{id}")
void deleteById(Integer id);
@Insert("insert into poet(name, gender, dynasty, title, style) values(#{name},#{gender},#{dynasty},#{title},#{style})")
void insert(Poet poet);
@Select("select * from poet where id = #{id}")
Poet getById(Integer id);
@Update("update poet set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where id=#{id}")
void update(Poet poet);
}
poet.html
采用restful风格
<!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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<h1 align="center">诗人信息列表展示</h1>
<a href="poetInsert.html" align="center">新增</a>
<div id="app">
<el-table :data="tableData" style="width: 100%" stripe border >
<el-table-column prop="id" label="编号" align="center" ></el-table-column>
<el-table-column prop="name" label="姓名" align="center" ></el-table-column>
<el-table-column prop="gender" label="性别" align="center" ></el-table-column>
<el-table-column prop="dynasty" label="朝代" align="center" ></el-table-column>
<el-table-column prop="title" label="头衔" align="center" ></el-table-column>
<el-table-column prop="style" label="风格" align="center" width="400px" ></el-table-column>
<el-table-column label="操作" align="center" width="400px">
<template slot-scope="scope">
<button type="button" @click="deleteById(scope.row.id)">删除</button>
<button>
<a :href="'poetUpdate.html?id=' + scope.row.id" target="_blank">修改</a> <!-- 假设修改页面需要id作为参数 -->
</button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: []
}
},
created() {
// 获得参数id值
// this.id = location.href.split("?id=")[1]
// 通过id查询详情
this.findAll();
},
mounted(){
axios.get('/poet1').then(res=>{
if(res.data.code){
this.tableData = res.data.data;
}
})},
methods: {
findAll() {
var _this = this;
axios.post('/poet1', {})
.then(function (response) {
_this.tableData = response.data.data;//响应数据给tableData赋值
})
.catch(function (error) {
console.log(error);
});
},
deleteById(id) {
if (window.confirm("确定要删除该条数据吗?")) {
axios.delete(`/poet1/${id}`).then(response => {
this.findAll(); // 删除后重新加载数据
alert("删除成功");
}).catch(error => {
console.error(error);
alert("删除失败");
});
}
},
}
})
</script>
</html>
poetInsert.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<div id="app">
<el-form :model="poet" ref="poetForm" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="poet.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="poet.gender">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="朝代">
<el-input v-model="poet.dynasty"></el-input>
</el-form-item>
<el-form-item label="头衔">
<el-input v-model="poet.title"></el-input>
</el-form-item>
<el-form-item label="风格">
<el-input v-model="poet.style"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addPoet">增加</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
poet: {
"name":"",
"gender":"",
"dynasty":"",
"title":"",
"style":""
}
},
methods: {
addPoet() {
var url = 'poet2'
axios.post(url,this.poet)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'poet.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
}
},
})
</script>
</html>
poetUpdate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<div id="app">
<el-form :model="poet" ref="poetForm" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="poet.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="poet.gender">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="朝代">
<el-input v-model="poet.dynasty"></el-input>
</el-form-item>
<el-form-item label="头衔">
<el-input v-model="poet.title"></el-input>
</el-form-item>
<el-form-item label="风格">
<el-input v-model="poet.style"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updatePoet()">确定</el-button>
</el-form-item>
</el-form>
{{poet}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
id: '',
poet: {}, //详情
},
methods: {
selectById() {
//${this.id}
var url = `poet3/${this.id}` //注意这里是反引号
//反引号(backticks,也称为模板字符串或模板字面量)是ES6(ECMAScript 2015)中引入的一种新字符串字面量功能,
// 它允许您在字符串中嵌入表达式。反引号用`(键盘上通常位于Tab键上方)来界定字符串的开始和结束。
axios.get(url)
.then(response => {
var baseResult = response.data
if(baseResult.code == 1) {
this.poet = baseResult.data
}
})
.catch( error => {})
},
updatePoet() {
var url = 'poetUpdate'
axios.put(url,this.peot)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'poet.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
},
},
created() {
// 获得参数id值
this.id = location.href.split("?id=")[1]
// 通过id查询详情
this.selectById()
},
})
</script>
</html>