一、数据显示功能
二、删除功能
mappe.xml
controller
package com.example.demo3.controller;
import com.example.demo3.entity.News;
import com.example.demo3.service.NewsService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("news")
public class NewsController {
@Resource
private NewsService newsService;
@RequestMapping("index")
public String getnews(String title){
return newsService.get(title);
}
@RequestMapping("find")
public List<News> find(){
return newsService.findAll();
}
@RequestMapping("delete")
public void delete(String title){
newsService.delete(title);
}
}
news.html(无确认框,直接删除)
在第一个功能数据显示的html文件的基础上,添加
①给删除按钮添加点击事件,点击后跳转到②中的函数doDelete()
②添加新的script标签,然后创建函数doDelete(),作用是向controller发送请求执行删除操作。最后使用init()更新数据库数据到页面
<script>
function init() {
jQuery.post("news/find",function (rst) {
var trs='';
for(var i=0;i<rst.length;i++)
{
var u=rst[i];
trs+=`
<tr>
<td>${u.title}</td>
<td>${u.content}</td>
<td>${u.date}</td>
<td>
<a href="#"
onclick="doDelete('${u.title}')">删除</a>
<!-- 添加点击事件-->
<a href="#">编辑</a>
</td>
</tr>
`;
}
jQuery("#data").html(trs);
jQuery("#totals").html(rst.length);
})
}
jQuery(function () {
init();
});
</script>
<!--新的script-->
<script>
function doDelete(title) {
jQuery.post("news/delete",{"title":title},function () {
//更新数据
init();
})
}
</script>
结果:
news.html(有确认框,先确认再删除)
在第一个功能数据显示的html文件的基础上,添加
①给删除按钮添加点击事件,在网页里点击删除后会跳转到②中的showDeleteDialog函数,并将要删除的数据的title传给该函数
②添加新的script标签,设置函数showDeleteDialog(),作用是弹出提示框,并将要删除的值写在确认框上,用于用户确认
③从bootstrap官网中复制提示框的组件代码,在弹出的提示框中点击确定,跳转到④中的doDelete函数
④再在script中添加另一个函数doDelete(),作用:关闭确认框,并向controller发送请求执行删除操作,然后更新数据到页面
<!-- 删除的提示框 -->
<div class="modal fade" id="delDialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">提示</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>您确定要删除【<span id="title"></span>】吗?</p>
<!-- 弹出模态框,确定是否要删除该数据,id为模态框赋值,对应下面的script的jQuery("#title").html(title);-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
onclick="doDelete()">确定</button>
</div>
</div>
</div>
</div>
<!-- 删除模态框结束 -->
位置:
<script>
function init() {
jQuery.post("news/find",function (rst) {
var trs='';
for(var i=0;i<rst.length;i++)
{
var u=rst[i];
trs+=`
<tr>
<td>${u.title}</td>
<td>${u.content}</td>
<td>${u.date}</td>
<td>
<a href="#"
onclick="showDeleteDialog('${u.title}')">删除</a>
<!-- 注意这里也有修改-->
<a href="#">编辑</a>
</td>
</tr>
`;
}
jQuery("#data").html(trs);
jQuery("#totals").html(rst.length);
})
}
jQuery(function () {
init();
});
</script>
<script>
//存放新闻的title,必须要写,
//因为有两个函数都需要title所以要声明一个变量
var title
function showDeleteDialog(title_) {
title = title_;
//给对应上面的模态框模板里的id=title的span赋值
jQuery("#title").html(title);
jQuery("#delDialog").modal('show');
}
function doDelete() {
jQuery.post("news/delete",{"title":title},function () {
jQuery("#delDialog").modal('hide');
alert("删除成功!");
//更新数据
init();
})
}
</script>
效果图:
三、修改功能
存在一个问题,title应该是唯一的,如果数据库中某title已存在,那么修改其他数据时不能将title改成这个某title,但是这里没有考虑,懒得改了,参考下面的增加功能自己琢磨吧
因为update必须有一个属性用来where(看下面的mapper),有一个属性不能显示,也可以新增一个属性id用来查找数据
News
mapper.xml
记得之前的显示数据的mapper要改一下,否则查到的id都是0
controller
news.html
①给编辑按钮添加点击事件,在网页里点击编辑后跳转到②中的showEditDialog函数,并将原数据传给该函数
②添加新的script标签,设置函数showEditDialog(),作用是弹出编辑框,并将原数据传给编辑框,让其显示原数据
③从bootstrap官网中复制编辑框的组件代码,在弹出的编辑框中修改完数据,点击编辑框的确定按钮后跳转到④中的doEdit函数
④再在script中添加另一个函数doEdit(),作用:获取修改后的数据,并向controller发送修改请求和修改后的数据来执行修改操作,然后更新数据到页面
<!-- 修改的提示框 -->
<div class="modal fade" id="editDialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">编辑</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editDialogForm">
<input type="hidden" name="id" id="id">
<!-- 这个是用来where的,不修改,类型设置为隐藏-->
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻标题:</label>
<div class="col-8">
<input type="text" id="title2" name="title"
class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻内容:</label>
<div class="col-8">
<input type="text" id="content" name="content"
class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻日期:</label>
<div class="col-8">
<input type="text" name="date" id="date"
class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
onclick="doEdit()">确定</button>
</div>
</div>
</div>
</div>
<!-- 修改模态框结束 -->
<a href="#"
onclick="showEditDialog('${u.id}','${u.title}','${u.content}',
'${u.date}')">编辑</a>
<script>
//修改操作
function showEditDialog(id,title,content,date)
{
jQuery("#id").val(id);
jQuery("#title2").val(title);
//之前的删除中有一个id为title的了,所以写成title2
jQuery("#content").val(content);
jQuery("#date").val(date);
jQuery("#editDialog").modal('show');
// val() 方法设置被选元素的值,
// 这里获取的是原数据的值,然后将其传输到修改框中
}
function doEdit()
{
//前提:
//1.表单控件必须提供name属性
//2.name属性的值必须与后台dto中的属性同名
var form=jQuery("#editDialogForm").serialize();
jQuery.post("news/update",form,function () {
alert("修改成功!");
jQuery("#editDialog").modal('hide');
init();
})
}
</script>
效果图
四、增加功能(与修改类似)
注:当要插入的数据的title在数据库中存在时插入会失败
NewsMapper
这里的返回值是int,而下面的xml中不用写result...,原因看 JAVA EE项目:(3)Mybatis映射器
NewsMapper.xml
<insert id="insert" parameterType="com.example.demo3.entity.News">
INSERT INTO news (title, content, date)
SELECT #{title},#{content},#{date}
from DUAL
where not exists(select id from news where title=#{title});
</insert>
NewsController
@RequestMapping("insert")
public int insert(News news){
int bool = 0;
bool = newsService.insert(news);
return bool;
}
news.html
①给增加按钮添加点击事件,在网页里点击编辑后跳转到②中的showAddDialog函数
②添加新的script标签,设置函数showAddDialog(),作用是弹出编辑框
③复用了编辑功能的编辑框的组件代码,在弹出的编辑框中填写数据,点击编辑框的确定按钮后跳转到④中的doAdd函数
④再在script中添加另一个函数doAdd(),作用:获取修改后的数据,并向controller发送增加请求来执行插入操作,然后更新数据到页面
<!-- 增加的提示框 -->
<div class="modal fade" id="addDialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">增加</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="addDialogForm">
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻标题:</label>
<div class="col-8">
<input type="text" id="title3" name="title"
class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻内容:</label>
<div class="col-8">
<input type="text" id="content2" name="content"
class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3 text-right">新闻日期:</label>
<div class="col-8">
<input type="text" name="date" id="date2"
class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
onclick="doAdd()">确定</button>
</div>
</div>
</div>
</div>
<!-- 增加模态框结束 -->
<script>
//增加操作
function showAddDialog()
{
jQuery("#addDialog").modal('show');
}
function doAdd()
{
//前提:
//1.表单控件必须提供name属性
//2.name属性的值必须与后台dto中的属性同名
var form=jQuery("#addDialogForm").serialize();
jQuery.post("news/insert",form,function (rst) {
if(rst>0)
{
alert("添加成功!");
jQuery("#addDialog").modal('hide');
init();
}else{
alert("添加失败,数据已存在!");
}
})
}
</script>
效果图