一、查询
mapper: 普通查询所有和按条件查询两种方式
public List<Notice> list();
public List<Notice> listByInfo(@Param("title") String title, @Param("author") String author);
NoticeMapper.xml 分别对应两种查询方法
<select id="list" resultType="com.wust.pojo.Notice">
select id,title ,content, author, createTime, click,download
from notice
</select>
<select id="listByInfo" resultType="com.wust.pojo.Notice">
<include refid="commonSelect"></include>
<where>
<if test="title != null and title != ''">
title like concat('%', #{title}, '%')
</if>
<if test="author != null and author != ''">
and author like concat('%', #{author}, '%')
</if>
</where>
</select>service：业务处理层，进行分页操作，分页的普通查询和分页的带条件的查询
public PageBean list(Integer page, Integer pageSize);
public PageBean listByInfo(Integer page, Integer pageSize,String title,String author);@Autowired
private NoticeMapper noticeMapper;
@Override
public PageBean list(Integer page, Integer pageSize) {
PageHelper.startPage(page,pageSize);
List<Notice> noticeList = noticeMapper.list();
System.out.println(noticeList);
PageInfo<Notice> p = new PageInfo<>(noticeList);
PageBean pageBean = new PageBean(p.getTotal(),p.getList());
return pageBean;
}
@Override
public PageBean listByInfo(Integer page, Integer pageSize,String title,String author) {
PageHelper.startPage(page,pageSize);
List<Notice> noticeList = noticeMapper.listByInfo(title,author);
System.out.println(noticeList);
PageInfo<Notice> p = new PageInfo<>(noticeList);
PageBean pageBean = new PageBean(p.getTotal(),p.getList());
return pageBean;
}controller:
@Autowired
private NoticeFenYe noticeFenYe;
// 既能实现分页有能实现按条件查询
@GetMapping("/{page}/{pageSize}")
public Result list(@PathVariable Integer page,
@PathVariable Integer pageSize,
String title,String author ){
log.info("分页查询，参数：{}，{}，{}，{}",page,pageSize,title,author);
PageBean pageBean = noticeFenYe.listByInfo(page,pageSize,title,author);
return Result.success(pageBean);
}前端notice.html （最后会附上完整代码）
删除操作按钮部分
<el-table-column label="操作">
<template slot-scope="scope">
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
实现界面
二、删除
NoticeMapper:
// 删除
public int deleteById(Integer id);
对mapper进行测试，删除id=2的公告信息，成功删除
NoticeFenYe:
NoticeController:
@DeleteMapping("/{id}")
public Result delete(@PathVariable("id") Integer id){
log.info("通过id值删除:",id);
noticeFenYe.delete(id);
return Result.success();
}前端notice.html
handleDelete:function (id) {
var _this = this;
if (window.confirm("确定删除？")){
axios.delete('/notices/'+id).then(function (response){
alert("删除成功！")
_this.allList();
}).catch(function (error){
console.log(error);
});
}
},运行结果：删除序号为14的信息
删除结果 14号信息已被删除
（ 删除操作中遇到的问题：请求方法POST请求被禁止
解决方法：
将删除操作改为发送delete请求，修改之后，能成功删除
三、更新
mapper：
xml 映射文件：
<!--更新操作-->
<select id="selectBId" resultType="com.wust.pojo.Notice">
select * from notice
where id = #{id}
</select>
<update id="update">
update notice
<set>
<if test="content != null">content = #{content},</if>
<if test="title != null">title= #{title},</if>
<if test="author != null">author = #{author},</if>
<if test="createTime != null">createTime = #{createTime},</if>
<if test="click != null">click = #{click},</if>
<if test="download != null">download = #{download},</if>
</set>
where id=#{id}
</update>service接口：
service的实现
Controller：
@GetMapping("/{id}")
public Result updatedNotice(@PathVariable("id") Integer id){
// noticeFenYe.selectBId(id);
return Result.success(noticeFenYe.selectBId(id));
}
@RequestMapping
public Result update(@RequestBody Notice notice){
boolean bool = noticeFenYe.update(notice);
if (bool){
return Result.success();
}else {
return Result.error("更新失败！");
}
}实现编辑的前端html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
<link rel="stylesheet" href="js/element.css">
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1px">
<tr>
<td>序号</td>
<td><input type="text" v-model="this.id"></td>
</tr>
<tr>
<td>标题</td>
<td><input type="text" v-model="notice.title"></td>
</tr>
<tr>
<td>内容</td>
<td><input type="text" v-model="notice.content" ></td>
</tr>
<tr>
<td>作者</td>
<td><input type="text" v-model="notice.author"></td>
</tr>
<tr>
<td>创建时间</td>
<td><input type="text" v-model="notice.createTime"></td>
</tr>
<tr>
<td>点击量</td>
<td><input type="text" v-model="notice.click"></td>
</tr>
<tr>
<td>下载量</td>
<td><input type="text" v-model="notice.download"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" @click="update()" value="更新"></td>
</tr>
</table>
{
{notice}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
id:'',
notice:{}
},
mounted(){
},
methods:{
selectById(){
var url = `notices/${this.id}`
axios.get(url).then(response=>{
var baseResult = response.data
if(baseResult.code == 1){
this.notice = baseResult.data;
}
}).catch( error => {})
},
update(){
var url = 'notices'
axios.put(url,this.notice).then(res =>{
var baseResult = res.data
if (baseResult.code == 1){
location.href = 'notice.html'
}else {
alert(baseResult.message)
}
}).catch(err =>{
console.error(err);
})
}
},
created(){
// 获取参数id的值
this.id = location.href.split("?id=")[1]
// 通过id查询
this.selectById();
}
})
</script>
</html>前端notice.html （最后会附上完整代码）
编辑操作按钮部分
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="edit(scope.row.id)">编辑</el-button>
</template>
</el-table-column>
出现的问题：一直更新失败，控制台也没有指出具体的错误位置，一开始显示sql语句错误，但是写测试了，能正常更新，sql语句检查没有问题
更新测试：
后面发现缺少了通过ID查询的方法，加上之后还是有错误，跳转到编辑页面没有原本的信息显示，只有id号显示了，修改之后能够实现更新编辑。
运行结果：
更新成功
四、添加
mapper 和 对应xml文件（注意xml 中sql 语句的写法）：
<!--新增操作-->
<insert id="insert">
insert into notice
(title,content,author,createTime,click,download)
values
(#{title},#{content},#{author}, #{createTime}, #{click},#{download})
</insert>service 注意在实现接口中不要忘记加注解：
@Override
public boolean insert(Notice notice){
int result = noticeMapper.insert(notice);
return result == 1; // result等于1说明新增成功，返回boolean类型用于controller中的条件判断
}Controller：
@PostMapping
public Result insert(@RequestBody Notice notice){
boolean bool = noticeFenYe.insert(notice); // 返回的 bool 的值，成功或失败
if (bool){
// bool = 1 成功
return Result.success();
}else {
return Result.error("新增失败！");
}
}新增add.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加公告页面</title>
<link rel="stylesheet" href="js/element.css">
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<h1 align="center">新增公告信息</h1>
<table border="1px">
<tr>
<td>标题</td>
<td><input type="text" v-model="notice.title"></td>
</tr>
<tr>
<td>内容</td>
<td><input type="text" v-model="notice.content" ></td>
</tr>
<tr>
<td>作者</td>
<td><input type="text" v-model="notice.author"></td>
</tr>
<tr>
<td>创建时间</td>
<td><input type="text" v-model="notice.createTime"></td>
</tr>
<tr>
<td>点击量</td>
<td><input type="text" v-model="notice.click"></td>
</tr>
<tr>
<td>下载量</td>
<td><input type="text" v-model="notice.download"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" @click="insert()" value="添加"></td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
notice:{
"title":"",
"content":"",
"author": "",
"createTime":"",
"click":"",
"download":""
}
},
mounted(){
},
methods:{
insert(){
var url = 'notices'
axios.post(url,this.notice).then(res =>{
var baseResult = res.data
if (baseResult.code == 1){
location.href="notice.html"
}else {
alert((baseResult.message))
}
}).catch(err=>{
console.error(err);
})
},
},
created(){
}
})
</script>
</html>出现的问题：
1、缺少对id属性的赋值，需要把id属性设置为主键，并且能够自增
2、新增添加前端界面不能正确显示
有两处书写有错误 values里面的赋值
Vue框架中data属性数据的格式错误，需要改成JSON格式
完整的notice.html前端页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公告管理</title>
<link rel="stylesheet" href="js/element.css">
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body >
<div id="app" style="width: 100%;height: 70%" >
<h1 align="center">图书管理公告管理模块</h1>
<p align="center">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="标题">
<el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="formInline.author" placeholder="请输入作者"></el-input>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="onSubmit">查询</el-button>
</el-form-item>
<el-form-item>
<!--这里也可以用之前的链接的形式-->
<el-button type="primary" @click="insert">新增</el-button>
</el-form-item>
</el-form>
</p>
<el-table :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="序号"
prop="id"
style="width: 10%">
</el-table-column>
<el-table-column
label="标题"
prop="title"
style="width: 10%">
</el-table-column>
<el-table-column
label="内容"
prop="content"
style="width:10%">
</el-table-column>
<el-table-column
label="作者"
prop="author"
style="width:10%">
</el-table-column>
<el-table-column
label="发布时间"
prop="createTime"
style="width:10%">
</el-table-column>
<el-table-column
label="点击量"
prop="click"
style="width:10%">
</el-table-column>
<el-table-column
label="下载量"
prop="download"
style="width:10%">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="edit(scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<p>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 3, 5, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
search:'',
currentPage:1,
pageSize:10,
total:null,
tableData: [],
formInline:{
title:'',
author:''
},
},
// mounted(){
// axios.get("noticeList").then(res =>{
// if (res.data){
// this.tableData=res.data
// }
// })
// },
methods:{
edit(id) {
location.href="edit.html?id="+id;
},
handleDelete:function (id) {
var _this = this;
if (window.confirm("确定删除？")){
axios.delete('/notices/'+id).then(function (response){
alert("删除成功！")
_this.allList();
}).catch(function (error){
console.log(error);
});
}
},
handleSizeChange(val){
this.pageSize=val;
this.allList();
console.log(`每页${val}条`);
},
handleCurrentChange(val){
this.currentPage=val;
this.allList();
console.log(`当前页：${val}`);
},
// 点击查询按钮 实现查询
onSubmit() {
var url = `/notices/${this.currentPage}/${this.pageSize}?title=${encodeURIComponent(this.formInline.title)}&author=${encodeURIComponent(this.formInline.author)}`
console.log(this.formInline.title);
console.log(this.formInline.author);
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
allList(){
var url = `/notices/${this.currentPage}/${this.pageSize}`
axios.get(url).then(res =>{
if (res.data.code){
this.tableData = res.data.data.rows;
this.total = res.data.data.total;
console.log(this.tableData);
console.log(this.total);
}
}).catch(error =>{
console.error(error)
})
},
insert(){
location.href="add.html";
}
},
created(){
this.allList();
},
})
</script>
</html>实现结果 添加成功：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
