自创博客详解全部过程
x详解全过程：
1、首先我们需要在数据库里面创建三个表分别为用户表，文章表，评论表；
1.用户表：
字段：用户uid，账号uasername，密码password
用户id需要被关联这样就可知道登录的这个用户创建了哪些文章和评论
2.文章表：
字段：文章id，用户uid，文章名name，介绍dataied，文章内容introduce。
文章表的用户uid需要向用户表的uid进行外键关联：这样创建出来的文章就可以知道是根据什么用户创建出来的
3.评论表：
字段：评论fid，文章id，评论名name，评论内容comment
评论表的hid需要向文章表中的id进行外键关联评论这样文章下有哪些评论属于文章id下的数据不会成为全部文章的评论
数据库创建好后就是项目项目编码
1、需要先配置好相关的依赖和配置文件
配置文件用于我们链接数据库，从数据库中获取数据，依赖是我们编程中需要用到的方法。。。
创建的项目为Spring boot
后端分别为Entity实体类，Controller控制层，Mapper，Service，ServiceImpl已经存放js，css，和测试类
（一）
在Entity内创建好表的实体类分别创建用户，文章，评论
创建的实体类需要对应上数据库的每个字段 注意：字段的数据类型；
完成get，set，and，toString方法
用户实体类
private Integer uid;
private String username;
private String password;
文章实体类
private Integer id;
private Integer uid;
private String nameessay;
private String detailed;
private String introduce;
评论实体类
private Integer fid;
private Integer hid;
private String name;
private String comment;
然后就是完成需求
登录：
在Mapper中创建一个接口，在里面编写sql语句根据sql语句和配置文件从数据库进行提取数据登录功能需要从数据库提取账密数据进行登录
@Param注解的作用就是给参数命名
写sql语句进行查询数据库
//获取用户账密
@Select("select * from user where username = #{username} and password = #{password}")
Sign_in sign_in(@Param("username")String username, @Param("password") String password);
Service定义接口
Sign_in zm(String username, String password);//获取用户账密信息
ServiceImpl对接口函数进行实现
@Autowired
private Sign_inMapper sign_inMapper;
@Override//获取用户账密信息
public Sign_in zm(String username, String password) {
return sign_inMapper.sign_in(username,password);
}
Controller处理前台发送的请求并实现
定义登录的HTML访问路径也会用于完成功能后进行跳转
//登录
@GetMapping("/signindl")
public String Sign_in() {
return "Sign_in";
}
实现该方法
两个注解定义访问的路径，将java对象转为json格式的数据
在方法里面创建HashMap集合，用于最后返回结果，获取数据库的账密进行判断，判断请求来的数据是否为空不为空向下定义账密为zm去进行判断是否为空
不为空就将获取的账密给到map也就是HashMap结果给到Ajax，获取的数据为空的话就进行false返回账密为空
//获取用户账密登录
@PostMapping("/dl")
@ResponseBody//将java对象转为json格式的数据
public Map<String, Object> dl(HttpServletRequest request) {
HashMap<String, Object> map = new HashMap<>();
String username = HttpServletRequestUtil.getString(request, "username");
String password = HttpServletRequestUtil.getString(request, "password");
if (username != null && password != null) {
Sign_in zm = sign_inService.zm(username, password);
if (zm != null) {
request.getSession().setAttribute("uid",zm.getUid());
map.put("success", true);
map.put("list", zm);
HttpSession session = request.getSession();
session.setAttribute("uid", zm.getUid());
session.setAttribute("username", username);
}
} else {
map.put("success", false);
map.put("err", "账号或密码为空");
}
return map;
}
创建js,在js里编写Ajax
首先就是获取从Controller请求数据路径，并根据登录按钮的id进行创建方法在 $.ajax({是方法含有请求方式请求数据类型。。。和获取的数据进行赋值最后判断
前端网页输入的数据在数据库是否存在或是否有相同的
$(function () {
var bindUrl = '/user/dl';
$('#submit').click(function () {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: bindUrl,
async: false,
cache: false,
type: "post",
dataType: 'json',
data: {
username: username,
password: password
},
success: function (data) {
if (data.success) {
alert("登录成功")
//若用户在前端展示系统页面则自动退回到前端展示系统首页
window.location.href = '/user/getAlTPerson';
}else{
alert("登录失败")
}
}
});
});
});
然后就是进行注册功能
Mapper根据sql语句从数据库进行获取数据
@Insert("insert into user (username,password)values(#{username},#{password})")
boolean insertzc(Sign_in sign_in);
Service定义接口
boolean insertzc(Sign_in sign_in);
ServiceImpl对接口函数进行实现，
@Autowired
private LoginMapper loginMapper;
@Override
public boolean insertzc(Sign_in sign_in) {
return loginMapper.insertzc(sign_in);
}
在Controller进行实现该方
定义注册的HTML访问路径也会用于完成功能后进行跳转
//注册
@GetMapping("/logonzc")
public String register() {
return "Login";
}
定义方法的跳转路径，定义方法JsonResult工具类进行调用一个方法返回的是多种结果
如果try返回的是200为注册成功，4000是用户名被占用，5000是注册时产生的位置异常这些都是通过工具类进行下来的
//注册用户
@PostMapping("/zc")
@ResponseBody
public JsonResult<Object> insertUser(@RequestBody Sign_in sign){
JsonResult<Object> result = new JsonResult<>();
try {
loginService.insertzc(sign);
result.setState(200);
result.setMessage("用户注册成功");
} catch (UsernameDuplicateException e) {
result.setState(4000);
result.setMessage("用户名被占用");
} catch (InsertException e) {
result.setState(5000);
result.setMessage("注册时产生未知的异常");
}
return result;
}
再到Ajax里进行实现
首先#后面时调用到注册按钮的id，在Ajax里根据方法路径获取数据跟数据库进行比较判断注册的用户是否在数据库中存在
$(function () {
$('#register').click(function () {
var username = $('#username').val();
var password = $('#password').val();
let user = {
username: username,
password: password,
};
$.ajax({
url: "/user/zc",
type: "post",
contentType: 'application/json',
data: JSON.stringify(user),
success: function (data) {
console.log(data)
if (data.state===200) {
alert("注册成功")
//若用户在前端展示系统页面则自动退回到前端展示系统首页
location.href="/user/signindl"
}else if(data.state()===4000){
alert("用户名被占用")
}else if(data.state()===5000){
alert("注册时产生未知的异常")
}
}
});
});
});
回显首页需要从文章表获取全部信息
Mapper
@Select("SELECT * FROM head")
List<Head> finByuid();
Service定义接口
List<Head> finByuid();
ServiceImpl进行实现接口
@Autowired
private HeadMapper headMapper;
@Override
public List<Head> finByuid() {
return headMapper.finByuid();
}
再到Controller进行实现功能
跟之前的一样定义他的方法跳转路径并在方法里创建HashMap，返回结果到Ajax，调用ServiceImpl进行实现接口，并把结果返回到Ajax
//首页回显
@GetMapping("/lookover")
@ResponseBody
public Map<String, Object> findBy() {
HashMap<String, Object> map = new HashMap<>();
List<Head> heads = headService.finByuid();
map.put("ListPro", heads);
return map;
}
在Ajax里进行实现该方创建Ajax方法在方法里面进行获取方法路径已经请求方式
再把前端的代码注释掉粘贴到Ajax里进行拼接拼接的地方就是从数据库获取的数据还有跳转路径入点击跳转到另一个页面再进行其他功能
$(function () {
info();
function info() {
$.getJSON('/user/lookover', function (data) {
data.ListPro.map(function (item, index) {
var html = '';
html += '<tr>\n' +
' <td>' + item.id + '</td>\n' +
' <td><a href="/user/Essay?id='+item.id+'">' +item.nameessay + '</a></td>\n' +
' <td>' + item.detailed + '</td>\n' +
' <td><a href="/user/dele?id='+item.id+'">删除</a></td>\n' +
' <td><a href="/user/revisewz?id='+item.id+'">编辑</a></td>\n' +
' </tr>';
$('.today').append(html);
})
});
}
});
添加文章
Mapper需要从数据获取id添加的文章需要注意是从什么用户登录的时候添加的
@Insert("insert into head (nameessay,detailed,introduce,uid)values(#{nameessay},#{detailed},#{introduce},#{uid})")
boolean insertBoke(String nameessay,String detailed,String introduce,Integer uid);
Service定义接口
boolean insertBoke(String nameessay,String detailed,String introduce,Integer uid);
ServiceImpl对接口函数进行实现，
@Autowired
private PublishMapper publishMapper;
@Override
public boolean insertBoke(String nameessay, String detailed, String introduce, Integer uid) {
return publishMapper.insertBoke(nameessay,detailed,introduce,uid);
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
定义HashMap方法进行返回结果，获取他们在前端输入内容的id值
进行获取信息添加到数据库内，再用判断定义一个字数上限
和获取的数据是否为空不为空向下运行，再调用三层的方法进行实现该方法把返回的map值传到Ajax
//添加文章
@PostMapping("/inserttjwz")
@ResponseBody
public Map<Object, Object> insertboke(HttpServletRequest request){
HashMap<Object, Object> map = new HashMap<>();
Integer uid = (Integer) request.getSession().getAttribute("uid");
String bt = HttpServletRequestUtil.getString(request, "bt");
String js = HttpServletRequestUtil.getString(request, "js");
String wznr = HttpServletRequestUtil.getString(request, "wznr");
if (wznr.length()<500){
if (uid != null) {
if (bt!=null&&js!=null&&wznr!=null){
boolean b = publishService.insertBoke(bt, js, wznr, uid);
map.put("success",b);
}else{
map.put("success",false);
}
}
}else{
map.put("success",false);
map.put("errMsg","太多了 吃不下");
}
return map;
}
Ajax
在ajax里定义实现的方法并且把前端传到后端要保存的数据进行赋值
根据后端的方法路径进行实现方法根据请求的方式把赋值的数据根据后端方法添加到数据库
$(function (){
publi();
function publi(){
$('.submit').click(function (){
var bt = $("#bt").val();
var js = $("#js").val();
var wznr = $("#wznr").val();
$.ajax({
url:'/user/inserttjwz',
type: "post",
data:{
"bt":bt,
"js":js,
"wznr":wznr
},
dataType:'json',
success:function (data){
if (data.success){
alert("发布成功");
window.location.href = '/user/headsy';
}else{
alert("超出500限制"+data.errMsg)
}
}
})
});
}
})
回显文章
Mapper需要从文章表内查询所有关于文章的
@Select("SELECT * FROM head WHERE id=#{id}")
List<Head> checkhid(Integer id);
Service定义接口
//查询表id
List<Head> checkhid(Integer id);
ServiceImpl对接口函数进行实现，
@Autowired
private EssayMapper essayMapper;
@Override
public List<Head> checkhid(Integer id) {
return essayMapper.checkhid(id);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
定义HashMap集合把要返回的数据传到Ajax进行交互实现
判断获取的数据不为空向下运行，再调用三层架构的方法进行实现
//回显文章
@GetMapping("/over")
@ResponseBody
public Map<String,Object> find(Integer id) {
HashMap<String, Object> map = new HashMap<>();
if (id != null) {
List<Head> list = essayService.checkhid(id);
map.put("listPos", list);
}
return map;
}
Ajax我们此时需要定义两个变量是指定获取数据库的id值在创建两个方法
实现的是回显的功能所有创建出方法后进行拼接字符串进行数据回显
要实现他们的点击功能就需要把后台的实现方法定义的路径进行指定的找到字段值并赋值进行
实现该功能
$(function () {
let args = getQueryStringArgs();
let id = args["id"];
let hid = args["hid"];
add();
sel();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function add() {
$.getJSON('/user/over?id=' + id, function (data) {
data.listPos.map(function (item, index) {
var html = '';
html += '<div class="wz1-2 zt">\n' +
' <h4>' + item.nameessay + '</h4>\n' +
' <textarea class="zt" id="wznr" style=" width: 1150px; height:500px" ros="25" cols="25">' + item.introduce + '</textarea>\n' +
' <h4><a href="/user/increase?hid='+item.id+'", class="plwz">添加评论</a></h4>\n'+
'</div>';
$('.wz1-2').html(html);
})
});
}
function sel() {
$.getJSON('/user/Queryallpl?hid='+id, function (data) {
data.ListPro.map(function (item, index) {
var html = '';
html += '<a onclick="return confirm(\'是否删除？\')" href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'
$('.wz2-1').append(html);
})
});
}
})
/* html += '<a href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'*/
主页修改文章功能实现
Mapper需要查询到文章表的所有东西这样改哪里就覆盖哪里
@Insert("insert into head (nameessay,detailed,introduce,uid)values(#{nameessay},#{detailed},#{introduce},#{uid})")
boolean insertBoke(String nameessay,String detailed,String introduce,Integer uid);
Service定义接口
boolean insertBoke(String nameessay,String detailed,String introduce,Integer uid);
ServiceImpl对接口函数进行实现，
@Autowired
private PublishMapper publishMapper;
@Override
public boolean insertBoke(String nameessay, String detailed, String introduce, Integer uid) {
return publishMapper.insertBoke(nameessay,detailed,introduce,uid);
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
定义HashMap集合把要返回的数据传到Ajax进行交互实现
判断的数据不为空向下运行调用三层的方法进行实现
最后把数据传入到Ajax
//主页修改文章回显
@GetMapping("/overwz")
@ResponseBody
public Map<String,Object> findwz(Integer hid) {
HashMap<String, Object> map = new HashMap<>();
if (hid != null) {
List<Head> list = essayService.checkhid(hid);
map.put("listPos", list);
}
return map;
}
Ajax
Ajax我们此时需要定义两个变量是指定获取数据库的id值进行指定id
创建方法进行讲数据回显出来后赋值上指定的id它可以根据前端重写输入的内容进行覆盖
再把修改后的数据进行赋值传入到数据库进行保存
$(function () {
let args = getQueryStringArgs();
let id = args["id"];
aa();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function aa() {
$.getJSON('/user/overwz?hid='+id, function (data) {
data.listPos.map(function (item, index) {
var html = '' +
'<div class="wz1-2 zt">\n' +
' <p>标题:</p>\n' +
'<div class="zt1-1">\n' +
' <input type="text" id="timu" style="width: 300px;height:25px;" value="'+item.nameessay+'">\n' +
'</div>\n' +
' <p>介绍:</p>\n' +
'<div class="zt1-1">\n' +
' <input type="text" id="jieshao" style="width: 300px;height:25px;" value="'+item.detailed+'"/>\n' +
'</div>\n' +
' <textarea class="zt" id="wenzhang"style=" width: 1150px; height:500px" ros="25" cols="25">'+item.introduce+'</textarea>\n' +
'<div class="fban1-2">\n' +
' <button class="preserve" id="subu"><a href="#">保存</a></button>\n' +
'</div>\n' +
' </div>';
html += '';
$('.wz1-1').html(html);
$('#subu').click(function (item, index) {
var timu = $("#timu").val();
var jieshao = $("#jieshao").val();
var wenzhang = $("#wenzhang").val();
$.ajax({
url:"/user/editwznr?id="+id,
type:'POST',
data:{
"timu":timu,
"jieshao":jieshao,
"wenzhang":wenzhang
},
dataType:"json",
success:function (data) {
alert("修改成功");
if (data.success){
window.location.href="/user/headsy";
}else {
alert(data.success);
}
}
})
})
})
});
}
})
删除文章
Mapper删除的文章需要根据那个用户创建的文章去删除里面的内容
@Delete("Delete FROM head WHERE id=#{id}")
boolean delete(Integer id);
Service定义接口
boolean delete(Integer id);
ServiceImpl对接口函数进行实现，
@Autowired
private DeleteMapper deleteMapper;
@Override
public boolean delete(Integer id) {
return deleteMapper.delete(id);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
实现三层获取的id进行删除评论
这是一个重定向删除后跳转一个页面
//删除文章
@GetMapping("/dele")
@ResponseBody
public void delete(Integer id, HttpServletResponse response) throws IOException{
boolean b = deleteService.delete(id);
response.sendRedirect("/user/headsy");
System.out.println(b);
}
Ajax首先根据后端的方法路径进行实现Ajax方法
类似于点击事件给他赋值上方法的路径后点击就会触发后台的删除功能
完成最后的实现方法
$(function () {
info();
function info() {
$.getJSON('/user/lookover', function (data) {
data.ListPro.map(function (item, index) {
var html = '';
html += '<tr>\n' +
' <td>' + item.id + '</td>\n' +
' <td><a href="/user/Essay?id='+item.id+'">' +item.nameessay + '</a></td>\n' +
' <td>' + item.detailed + '</td>\n' +
' <td><a href="/user/dele?id='+item.id+'">删除</a></td>\n' +
' <td><a href="/user/revisewz?id='+item.id+'">编辑</a></td>\n' +
' </tr>';
$('.today').append(html);
})
});
}
});
修改文章
Mapper修改文章需要查询文章表的说有内容这样便于修改要修改的东西
@Update("update head set nameessay=#{nameessay},detailed=#{detailed},introduce=#{introduce} where id=#{id}")
boolean update( String nameessay, String detailed, String introduce, Integer id);
Service定义接口
boolean update(String nameessay,String detailed,String introduce,Integer id);
ServiceImpl对接口函数进行实现，
@Autowired
private ReviseMapper reviseMapper;
@Override
public boolean update(String nameessay, String detailed, String introduce, Integer id) {
return reviseMapper.update(nameessay,detailed,introduce,id);
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
在该方法下定义定义HashMap集合把要返回的数据传到Ajax进行交互实现
获取文章的实体类这样能能够根据实体类到达数据库进行修改数据
根据前端更改的标签的id进行赋值到后台进行覆盖，覆盖前还需要获取到数据库的id值去进行对应的更改信息
在这之前还需要判断他是否为空
最后根据三层的方法实现该功能把最后的结果传入ajax进行交互修改
//修改
@PostMapping("/editwznr")
@ResponseBody
public Map<Object, Object> Revise(Integer id,HttpServletRequest request){
HashMap<Object, Object> map = new HashMap<>();
Head head = new Head();
String timu = HttpServletRequestUtil.getString(request, "timu");
String jieshao = HttpServletRequestUtil.getString(request, "jieshao");
String wenzhang = HttpServletRequestUtil.getString(request, "wenzhang");
head.setId(id);
head.setNameessay(timu);
head.setDetailed(jieshao);
head.setIntroduce(wenzhang);
if (id !=null){
boolean b = reviseService.update(timu, jieshao, wenzhang, id);
map.put("success",b);
}else {
map.put("success",false);
}
return map;
}
Ajax
Ajax我们此时需要定义两个变量是指定获取数据库的id值在创建两个方法
实现的是回显的功能所有创建出方法后进行拼接字符串进行数据回显
要实现他们的点击功能就需要把后台的实现方法定义的路径进行指定的找到字段值并赋值进行
因此我们还需要根据前端标签的字段id值进行对应的修改最后判断是否能讲数据库的信息进行覆盖
实现
$(function () {
let args = getQueryStringArgs();
let id = args["id"];
aa();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function aa() {
$.getJSON('/user/overwz?hid='+id, function (data) {
data.listPos.map(function (item, index) {
var html = '' +
'<div class="wz1-2 zt">\n' +
' <p>标题:</p>\n' +
'<div class="zt1-1">\n' +
' <input type="text" id="timu" style="width: 300px;height:25px;" value="'+item.nameessay+'">\n' +
'</div>\n' +
' <p>介绍:</p>\n' +
'<div class="zt1-1">\n' +
' <input type="text" id="jieshao" style="width: 300px;height:25px;" value="'+item.detailed+'"/>\n' +
'</div>\n' +
' <textarea class="zt" id="wenzhang"style=" width: 1150px; height:500px" ros="25" cols="25">'+item.introduce+'</textarea>\n' +
'<div class="fban1-2">\n' +
' <button class="preserve" id="subu"><a href="#">保存</a></button>\n' +
'</div>\n' +
' </div>';
html += '';
$('.wz1-1').html(html);
$('#subu').click(function (item, index) {
var timu = $("#timu").val();
var jieshao = $("#jieshao").val();
var wenzhang = $("#wenzhang").val();
$.ajax({
url:"/user/editwznr?id="+id,
type:'POST',
data:{
"timu":timu,
"jieshao":jieshao,
"wenzhang":wenzhang
},
dataType:"json",
success:function (data) {
alert("修改成功");
if (data.success){
window.location.href="/user/headsy";
}else {
alert(data.success);
}
}
})
})
})
});
}
})
回显评论
Mapper需要查询评论的数据进行展示到前端页面
// 查询评论的文章id
@Select("SELECT * FROM forum where hid=#{hid}")
List<Forum> Queryall (Integer hid);
Service定义接口
// 查询评论的文章id
List<Forum> Queryall (Integer hid);
ServiceImpl对接口函数进行实现，
@Override
public List<Forum> Queryall(Integer hid) {
return essayMapper.Queryall(hid);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
//回显评论
@GetMapping("/Queryallpl")
@ResponseBody
public Map<String,Object> Queryall(Integer hid) {
HashMap<String, Object> map = new HashMap<>();
if (hid != null) {
List<Forum> list = essayService.Queryall(hid);
map.put("ListPro", list);
} else {
map.put("errMsg","重写登录");
}
return map;
}
Ajax
$(function () {
let args = getQueryStringArgs();
let id = args["id"];
let hid = args["hid"];
add();
sel();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function add() {
$.getJSON('/user/over?id=' + id, function (data) {
data.listPos.map(function (item, index) {
var html = '';
html += '<div class="wz1-2 zt">\n' +
' <h4>' + item.nameessay + '</h4>\n' +
' <textarea class="zt" id="wznr" style=" width: 1150px; height:500px" ros="25" cols="25">' + item.introduce + '</textarea>\n' +
' <h4><a href="/user/increase?hid='+item.id+'", class="plwz">添加评论</a></h4>\n'+
'</div>';
$('.wz1-2').html(html);
})
});
}
function sel() {
$.getJSON('/user/Queryallpl?hid='+id, function (data) {
data.ListPro.map(function (item, index) {
var html = '';
html += '<a onclick="return confirm(\'是否删除？\')" href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'
$('.wz2-1').append(html);
})
});
}
})
/* html += '<a href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'*/
删除评论
Mapper从数据库查询评论的id进行删除
// 查询评论表所有数据
@Select("SELECT * from forum")
List<Forum> selectforum();
还需要知道这些评论是属于哪些文章下的评论
@Delete("Delete FROM head WHERE id=#{id}")
boolean delete(Integer id);
Service定义接口
// 查询评论表所有数据
List<Forum> selectforum();
boolean delete(Integer id);
ServiceImpl对接口函数进行实现，
@Override
public List<Forum> selectforum() {
return essayMapper.selectforum();
}
@Autowired
private DeleteMapper deleteMapper;
@Override
public boolean delete(Integer id) {
return deleteMapper.delete(id);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
要删除的评论不仅仅要删除评论表的数据
还需要根据是哪个文章下的评论数据进行删除
如果不这样写添加评论的时候所有的评论会出现在同一文章下
首先查询出个个评论是那个文下的
在创建一个方法进行调用三层的删除方法
定义HashMap集合把要返回的数据传到Ajax进行交互实现
删除后还需要跳转到另一个页面
// 查询要删除的评论
@GetMapping("/selectfid")
@ResponseBody
public Map<String,Object> selectfid(){
HashMap<String, Object> map = new HashMap<>();
List<Forum> forums = essayService.selectforum();
map.put("ListPro",forums);
return map;
}
// 删除的评论
@GetMapping("/deletecomment")
@ResponseBody
public Map<String,Object> deletecomment(Integer fid,HttpServletResponse response) throws IOException {
HashMap<String, Object> map = new HashMap<>();
boolean deletepl = commentService.Deletepl(fid);
System.out.println(deletepl);
response.sendRedirect("/user/headsy");
return map;
}
Ajax
Ajax我们此时需要定义两个变量是指定获取数据库的id值在创建两个方法
实现的是回显的功能所有创建出方法后进行拼接字符串进行数据回显
要实现他们的点击功能就需要把后台的实现方法定义的路径进行指定的找到字段值并赋值进行
根据传过来的方法路径给到按钮点击按钮后到后台再到三层去查找要删除的那个评论
因此我们还需要一个判断是否删除该数据缺定后删除我们要删除的数据
实现
$(function () {
let args = getQueryStringArgs();
let id = args["id"];
let hid = args["hid"];
add();
sel();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function add() {
$.getJSON('/user/over?id=' + id, function (data) {
data.listPos.map(function (item, index) {
var html = '';
html += '<div class="wz1-2 zt">\n' +
' <h4>' + item.nameessay + '</h4>\n' +
' <textarea class="zt" id="wznr" style=" width: 1150px; height:500px" ros="25" cols="25">' + item.introduce + '</textarea>\n' +
' <h4><a href="/user/increase?hid='+item.id+'", class="plwz">添加评论</a></h4>\n'+
'</div>';
$('.wz1-2').html(html);
})
});
}
function sel() {
$.getJSON('/user/Queryallpl?hid='+id, function (data) {
data.ListPro.map(function (item, index) {
var html = '';
html += '<a onclick="return confirm(\'是否删除？\')" href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'
$('.wz2-1').append(html);
})
});
}
})
/* html += '<a href="/user/deletecomment?fid='+item.fid+'"><p class="zt"><b>'+item.comment+'</b></p>删除</a><hr>'*/
添加评论
Mapper直接查询评论的字段直接根据那个文章的id直接添加即可
@Insert("insert into forum (name,comment,hid)values(#{name},#{comment},#{hid})")
boolean increaseforum(String name,String comment ,Integer hid);
Service定义接口
boolean increaseforum(String name,String comment,Integer hid);
ServiceImpl对接口函数进行实现，
@Override
public boolean increaseforum(String name, String comment, Integer hid) {
return commentMapper.increaseforum(name,comment,hid);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
定义HashMap集合把要返回的数据传到Ajax进行交互实现
添加的数据会通过标签输入然后进行覆盖
所有在这里进行赋值他的标签id
进行判断获取的id是否为空在进行调用三层的方法进行实现该功能
最后把数据结构传到Ajax进行
//添加评论
@PostMapping("/increaseforum")
@ResponseBody
public Map<Object, Object> increaseforum(@Param("hid")Integer hid, HttpServletRequest request){
HashMap<Object, Object> map = new HashMap<>();
String name = HttpServletRequestUtil.getString(request, "name");
String comment = HttpServletRequestUtil.getString(request, "comment");
if (hid != null) {
if (name!=null&&comment!=null){
boolean increaseforum = commentService.increaseforum(name, comment, hid);
map.put("success",increaseforum);
}else{
map.put("success",false);
}
}else{
map.put("success",false);
}
return map;
}
Ajax
Ajax我们此时需要定义两个变量是指定获取数据库的id值在创建两个方法
实现的是回显的功能所有创建出方法后进行拼接字符串进行数据回显
要实现他们的点击功能就需要把后台的实现方法定义的路径进行指定的找到字段值并赋值进行
我们需要根据全段标签的id值去进行把要添加的数据根据方法传入数据库进行添加
最后判断一下我们需要添加的数据是否保存到了数据库
实现
$(function (){
let args = getQueryStringArgs();
let id = args["id"];
let hid = args["hid"];
publi();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function publi(){
$('.increasepl').click(function (){
var name = $("#name").val();
var comment = $("#comment").val();
$.ajax({
url:'/user/increaseforum?hid='+hid,
type: "post",
data:{
"name":name,
"comment":comment,
},
dataType:'json',
success:function (data){
if (data.success){
alert("添加成功");
window.location.href = '/user/Essay?id='+hid;
}
}
})
});
}
})
模糊查询文章
Mapper模糊查询文章的字段内容
@Select("Select * From head Where nameessay LIKE CONCAT('%',#{nameessay},'%')")
List<Head> Fuzzyqueryhead(String nameessay);
Service定义接口
//模糊查询
List<Head> Fuzzyqueryhead(String nameessay);
ServiceImpl对接口函数进行实现，
//模糊查询
@Autowired
private FuzzyqueryMapper fuzzyqueryMapper;
@Override
public List<Head> Fuzzyqueryhead(String nameessay) {
return fuzzyqueryMapper.Fuzzyqueryhead(nameessay);
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
定义HashMap集合把要返回的数据传到Ajax进行交互实现
我们还要根据三层方法进行模糊查询
前提是判断他的数据是否为空最后把值给到map传到ajax
//模糊查询
@PostMapping("fuzzyquery")
@ResponseBody
public Map<Object, Object> fuzzyquery(HttpServletRequest http){
HashMap<Object, Object> map = new HashMap<>();
String nameessay = HttpServletRequestUtil.getString(http, "nameessay");
if (nameessay !=null){
List<Head> list = fuzzyqueryService.Fuzzyqueryhead(nameessay);
map.put("success",list);
}else{
map.put("success",false);
}
return map;
}
Ajax需要创建ajax方法方法里是模糊查询搜索标签的id值后面就是根据后台请求的方法是数据类型
根据后台方法的路径进行把要搜索框的数据到数据库进行搜索判断是否有该文章在进行替换原有的文章回显把
查询的数据展示出来
$(function (){
$('.button').click(function (){
var nameessay = $("#nameessay").val();
$.ajax({
url:'/user/fuzzyquery',
type:"POST",
data:{
"nameessay":nameessay
},
dataType:'json',
success:function (data){
if (!data.success){
alert("没有该文章")
window.location.reload();
}
var html='';
data.success.map(function (item,index){
html += '<tr>\n' +
' <td>' + item.id + '</td>\n' +
' <td><a href="/user/Essay?id='+item.id+'">' +item.nameessay + '</a></td>\n' +
' <td>' + item.detailed + '</td>\n' +
' <td><a href="/user/dele?id='+item.id+'">删除</a></td>\n' +
' <td><a href="/user/revisewz?id='+item.id+'">编辑</a></td>\n' +
' </tr>';
})
$('.today').html(html);
}
})
})
})
实现分页
Mapper需要有文章的字段内容
根据sql语句分页查询，有多少条数据和文章
//分页查询
@Select("Select * From head Limit #{currentPage},#{pageSize}")
List<Head> selectHead(@Param("currentPage")Integer currentPagel,@Param("pageSize")Integer pageSize);
//总页数
@Select("Select count(*) from head")
Integer selTotle();
//查询文章
@Select("Select * From head")
List<Head> findBy();
Service定义接口
public PageInfo<Head> paging(Integer pageNum,Integer pagrSize);//实现分页插件
PageBean<Head> SelCommodity(Integer currentPagel , Integer pageSize);//分页查询
List<Head> findBy();//
ServiceImpl对接口函数进行实现，还有一个对分页的插件进行设置有具体注解
查询出多少数据
再把总页数实现方法进行封装并定义一些数据到后台使用
封装实体类有具体的注释介绍
@Autowired
private PagingMapper pagingMapper;
@Override//查询
public PageInfo<Head> paging(Integer pageNum, Integer pagrSize) {
PageHelper.startPage(pageNum,pagrSize);
List<Head> students = pagingMapper.findBy();
PageInfo<Head> pafeinfo = new PageInfo<>(students);
return pafeinfo;
}
@Override
public PageBean<Head> SelCommodity(Integer currentPagel, Integer pageSize) {
PageBean<Head> bean = new PageBean<>();//声明实体类
bean.setCurrentPage(currentPagel);//获取当前页码
bean.setPageSize(pageSize);//设置每页显示的条数
Integer selTotle = pagingMapper.selTotle();//设计记录数
bean.setToalCount(selTotle);
int start = (currentPagel - 1) * pageSize;//当前页显示数据的集合
List<Head> commodityPageBean = pagingMapper.selectHead(start, pageSize);
bean.setList(commodityPageBean);
//设置总页数
int toalPage = 0;//定义一个变量
if (selTotle % pageSize == 0){//判断让记录数 % 每页显示的条数等于0
toalPage = selTotle / pageSize;//在计算有多少页
}else{
toalPage = (selTotle / pageSize)+1;//多余出来的数据有多少显示多少
}
bean.setTotalpage(toalPage);//结果
System.out.println(toalPage);//打印
return bean;//返回结果
}
@Override
public List<Head> findBy() {
return pagingMapper.findBy();
}
Controller
两个注解定义访问的路径，将java对象转为json格式的数据
根据Sql查询到了多少数据根据封装的分页方法进行分页从第几页开始一页有多少条数据调用三层的该方法然后返回给结果
当分页回显设置好后需要再写一个方法讲分页功能到前端页面进行实现该功能
//分页数据回显
@GetMapping("/getAlTPerson")
public String getAlTPerson(Model model, @RequestParam(value = "pageNum",defaultValue = "1")Integer pageNum){
PageHelper.startPage(pageNum,5);
PageInfo<Head> paging = pagingService.paging(pageNum, 5);
model.addAttribute("pageInfo",paging);
return "Head";
}
//分页
@GetMapping("/getpaging") @ResponseBody public Map<String,Object> getpaging(Integer currentPage,Integer pageSize){ HashMap<String, Object> map = new HashMap<>(); PageBean<Head> pageBean = pagingService.SelCommodity(currentPage, pageSize); map.put("pageBean",pageBean); return map; }
Ajax
Ajax我们此时需要定义一个变量是指定获取数据库的id值在创一两个方法
实现的是回显的功能所有创建出方法后进行拼接字符串进行数据回显
要实现他们的点击功能就需要把后台的实现方法定义的路径进行指定的找到字段值并赋值进行
然后在方法里面进行判断获取到的数据是否为空在变量等于从第一页开始进行
紧接着就是调用后台方法路径进行实现功能把分页的数据回显到前端
实现
$(function (){
const arg = getQueryStringArgs();
var pageNum=arg["pageNum"]
select();
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
function select(){
if (pageNum==null){
pageNum=1;
}
$.getJSON("getpaging?currentPage="+pageNum+"&pageSize="+5,function (data) {
var html='';
data.pageBean.list.map(function (item,index) {
html += '<tr>\n' +
' <td>' + item.id + '</td>\n' +
' <td><a href="/user/Essay?id='+item.id+'">' +item.nameessay + '</a></td>\n' +
' <td>' + item.detailed + '</td>\n' +
' <td><a href="/user/dele?id='+item.id+'">删除</a></td>\n' +
' <td><a href="/user/revisewz?id='+item.id+'">编辑</a></td>\n' +
' </tr>';
})
$('.today').html(html);
})
}
})
还得再加两个实体类
文章实体类里面还得加两个
private Integer currentPage;
private Integer pageSize;
private int toalCount;//总数
private int totalpage;//总页数
private int currentPage; //当前页
private int pageSize;;//每页显示的数据
private List<T> list;//每页显示的数据
浙公网安备 33010602011771号