数据库表
News
package com.example.demo3.entity;
public class News {
private String title;
private String date;
private String content;
private int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
NewsMapper
package com.example.demo3.mapper;
import com.example.demo3.entity.News;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
@Mapper
public interface NewsMapper {
List<News> findAll();
void delete(String title);
void update(News news);
int insert(News news);
}
NewMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo3.mapper.NewsMapper">
<select id="findAll" resultType="com.example.demo3.entity.News" >
SELECT id,content,title,date
FROM news
</select>
<delete id="delete" parameterType="String">
delete
from news
where title=#{title}
</delete>
<update id="update" parameterType="com.example.demo3.entity.News">
update news
set title=#{title},content=#{content},date=#{date}
where id=#{id}
</update>
<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>
</mapper>
NewsService
package com.example.demo3.service;
import com.example.demo3.entity.News;
import java.util.List;
public interface NewsService {
List<News> findAll();
void delete(String title);
void update(News news);
int insert(News news);
}
NewsServiceimpl
package com.example.demo3.service.impl;
import com.example.demo3.entity.News;
import com.example.demo3.mapper.NewsMapper;
import com.example.demo3.service.NewsService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class NewsServiceimpl implements NewsService {
@Resource
private NewsMapper newsMapper;
@Override
public List<News> findAll() {
return newsMapper.findAll();
}
@Override
public void delete(String title) {
newsMapper.delete(title);
}
@Override
public void update(News news) {
newsMapper.update(news);
}
@Override
public int insert(News news) {
int bool = 0;
bool = newsMapper.insert(news);
return bool;
}
}
NewsController
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("find")
public List<News> find(){
return newsService.findAll();
}
@RequestMapping("delete")
public void delete(String title){
newsService.delete(title);
}
@RequestMapping("update")
public void update(News news){
newsService.update(news);
}
@RequestMapping("insert")
public int insert(News news){
int bool = 0;
bool = newsService.insert(news);
return bool;
}
}
news.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#top{
/*位置设置 上,id=top */
padding: 10px 20px;
text-align: right;
}
#page_div #left{
/*位置设置 左,id=left */
float: left;
}
#page_div #right{
/*位置设置 右,id=right */
float: right;
}
</style>
<!-- 导入jquery和bootstrap-->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
<!-- 删除的提示框 -->
<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>
<!-- 删除模态框结束 -->
<!-- 修改的提示框 -->
<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>
<!-- 修改模态框结束 -->
<!-- 增加的提示框 -->
<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>
<!-- 增加模态框结束 -->
<div id="container">
<div id="top">
<button type="button" class="btn btn-danger btn-lg" onclick="showAddDialog()">增加</button>
</div>
<div id="bottom">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>标题</td>
<td>内容</td>
<td>日期</td>
</tr>
</thead>
<tbody id="data">
</tbody>
<tfoot>
<tr>
<td colspan="6">
<div id="page_div">
<div id="left">
<span id="pageNum"></span>/<span id="pages"></span>
共<span id="totals"></span>条
</div>
<div id="right">
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</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="#"
onclick="showEditDialog('${u.id}','${u.title}','${u.content}',
'${u.date}')">编辑</a>
</td>
</tr>
`;
}
jQuery("#data").html(trs);
jQuery("#totals").html(rst.length);
})
}
jQuery(function () {
init();
});
</script>
<script>
//删除操作
var title
function showDeleteDialog(title_) {
title = title_;
jQuery("#title").html(title);
jQuery("#delDialog").modal('show');
}
function doDelete() {
jQuery.post("news/delete",{"title":title},function () {
jQuery("#delDialog").modal('hide');
alert("删除成功!");
init();
})
}
</script>
<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');
}
function doEdit()
{
var form=jQuery("#editDialogForm").serialize();
jQuery.post("news/update",form,function () {
alert("修改成功!");
jQuery("#editDialog").modal('hide');
init();
})
}
</script>
<script>
//增加操作
function showAddDialog()
{
jQuery("#addDialog").modal('show');
}
function doAdd()
{
var form=jQuery("#addDialogForm").serialize();
jQuery.post("news/insert",form,function (rst) {
if(rst>0)
{
alert("添加成功!");
jQuery("#addDialog").modal('hide');
init();
}else{
alert("添加失败,数据已存在!");
}
})
}
</script>
</body>
</html>
效果图