cookie、session的作用
一、删除操作
（一）单条删除操作
1. 前端发起请求
delete是后续写的元素，先获取元素，再绑定事件- 获取当前要删除数据的id值
- 发起请求
//删除操作
$("tbody").on("click",".delete",function(){
var id = $(this).attr("index")
if(confirm("确定要删除么？")){
$.ajax({
url:"DeleteContent",
type:"post",
data:{
id
},
success:function(value){
console.log(value)
}
})
}
})
2. 后端接受请求
- 接受参数
- 字符串拼接，拼接sql语句
- 返回受影响的行数
- 设置编码和写入输入流
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
String sql = "delete from content where id = " +id;
int num = MysqlUtil.del(sql);//返回受影响的行数
String res = "删除失败";
if(num>0) {
res="删除成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
}
3. 前端回调函数
- 设置弹窗，提示删除是否成功
- 由于删除操作后，页面不会自动刷新，删除的数据依然会显示，所有设置自动刷新
//删除操作
$("tbody").on("click",".delete",function(){
var id = $(this).attr("index")
if(confirm("确定要删除么？")){
$.ajax({
url:"DeleteContent",
type:"post",
data:{
id
},
success:function(value){
alert(value)
location.reload()//页面刷新
}
})
}
})
（二）批量删除出操作
1. 前端发起请求并回调函数
remove是本身就有的元素，可直接获取，绑定事件- 使用循环，拼接获取本页所有删除的id值，并设置当前选择的进行删除
- 做判断，没有选择的数据，不能进行批量删除
//批量删除
$(".remove").click(function(){
var id = ""
for(var i=0;i<$(".check:checked").length;i++){
id = id+$(".check:checked").eq(i).attr("index")+","
}
id = id.substring(0,id.length-1)
if(id){
if(confirm("确定要删除么？")){
$.ajax({
url:"DeleteContent",
type:"post",
data:{
id
},
success:function(value){
alert(value)
//页面刷新
location.reload()
}
})
}
}else{
$(".check").disabled()//按钮禁用
}
})
2. 后端接受请求
- 只需将单条删除操作中的字符串拼接修改下，即可实现单个删除，也能实现多条删除
String sql = "delete from content where id in("+id+")";
（三）全选
- 点击全选后，让本页的所有数据都为选中的状态
- 是否选中，依靠的是
checked属性 - 如果取消全写，本页的所有数据跟随取消状态
//全选
$(".checkAll").click(function(){
if($(".checkAll").prop("checked")){
$(".check").prop("checked",true)
}else{
$(".check").prop("checked",false)
}
})
（四）反选
- 做与运算
- 本页中的数据但凡有一个没选中，全选按钮没有被选中
- 本页中的数据都选中，全选按钮被选中
//反选
$("tbody").on("click",$(".check"),function(){
var flag = true
for(var i=0;i<$(".check").length;i++){
flag = flag&$(".check").eq(i).prop("checked")
}
if(flag){
$(".checkAll").prop("checked",true)
}else{
$(".checkAll").prop("checked",false)
}
})
（五）涉及到的知识点
attr()：设置或返回被选元素的属性/值，对自定义的属性处理更好eq()：从0开始:checked：伪类选择器，当前被选中的元素css()：设置css属性，设置单个css("属性","属性值")；设置多个css({"属性1":"属性值1","属性2":"属性值2"})prop：设置或返回被选元素的属性/值，原生的属性和属性值是true和false的处理效果更好checked属性：表示是否选中状态，写checked属性这个单词，表示true，默认选中状态；不写checked属性，表示false，表示没有选中状态。1为真，0为假
二、添加操作
（一）跳转添加页面
- 在content.js页面中设置：点击添加按钮，跳转添加页面
//跳转添加页面
$(".add").click(function(){
location.href="add.html"
})
（二）在add.js文件前端发起请求并回调函数
- 添加栏目，与之前写的加载栏目相似
//添加栏目
$.ajax({
url:"SearchChannel",
type:"get",
success:function(value){
var arr = value.data
$(".channelid").empty()
for(var i=0;i<arr.length;i++){
$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')
}
},
error:function(){
alert("出错了")
}
})
- 返回内容页
//返回
$(".back").click(function(){
location.href="content.html"
})
- 添加标题、作者、创建事件、内容参数
- 后端返回操作后，前端返回内容页
//添加
$(".add").click(function(){
//获取参数
var channelid = $(".channelid").val()
var title = $(".title").val()
var author = $(".author").val()
var createtime = $(".createtime").val()
var content = $(".content").val()
$.ajax({
url:"AddContent",
type:"post",
data:{
channelid,
title,
author,
createtime,
content
},
success:function(value){
alert(value)
location.href="content.html"
}
})
})
（三）后端接受请求
- 接受参数
- 拼接字符串sql
- 判断添加是否成功
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String channelid = request.getParameter("channelid");
String title = request.getParameter("title");
String author = request.getParameter("author");
String createtime = request.getParameter("createtime");
String content = request.getParameter("content");
String sql = "insert into content(title,createtime,author,imgurl,content,channelid) value(\""+title+"\",\""+createtime+"\",\""+author+"\",\"11\",\""+content+"\","+channelid+")";
int num = MysqlUtil.add(sql);
String res = "添加失败";
if(num>0) {
res="添加成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
}
问题： 在写完前端和后端代码，进行页面操作时，一直不成功没有反应。
解决： 后来发现在add.html中引用add.js文件时，由于写在了头部，没有使用defer延迟操作导致的问题。加上defer问题解决了。
三、修改操作
由于修改是跨页面操作，因此，使用到了cookie。
- update做逻辑上的删除，改一个字段做无效，还可回收恢复。
- detele物理上的删除，删除后，不能恢复。
（一）跳转添加页面
- 在content.js页面中设置：点击添加按钮，跳转添加页面
//跳转到修改页面
$("tbody").on("click",".update",function(){
$.cookie('id',$(this).attr("index"))
location.href="update.html"
})
（二）在update.js文件前端发起请求并回调函数
1. 前期准备
- 使用
cookie获取当前数据的id值
var id = $.cookie('id')
- 返回内容页
//返回
$(".back").click(function(){
location.href="content.html"
})
- 加载栏目
//加载栏目
$.ajax({
url:"SearchChannel",
type:"get",
success:function(value){
var arr = value.data
$(".channelid").empty()
for(var i=0;i<arr.length;i++){
$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')
}
},
error:function(){
alert("出错了")
}
})
2. 回显
- 回显：
- 根据id做查找
- 回调函数中：使数据回显
$.ajax({
url:"SearchContent",
type:"get",
data:{
id
},
success:function(value){
var obj = value.data[0]
$(".channelid").val(obj.channelid)
$(".title").val(obj.title)
$(".author").val(obj.author)
$(".createtime").val(obj.createtime)
$(".content").val(obj.content)
}
})
3. 修改
- 原先就有的元素，可之直接绑事件
- 获取参数
- 发起请求
- 回到函数，刷新页面
//修改
$(".update").click(function(){
//获取参数
var channelid = $(".channelid").val()
var title = $(".title").val()
var author = $(".author").val()
var createtime = $(".createtime").val()
var content = $(".content").val()
$.ajax({
url:"UpdateServlet",
type:"post",
data:{
channelid,
title,
author,
createtime,
content,
id
},
success:function(value){
alert(value)
location.href="content.html"
}
})
})
（三）后端接受请求
1. 在SearchContent.java文件中添加ID值参数
- 修改
SearchContent.java文件中的内容：- 添加一个接受id值的参数
- sql语句修改为动态的
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String channelid = request.getParameter("channelid");
String title = request.getParameter("title");
String author = request.getParameter("author");
String page = request.getParameter("page");
String pageSize = request.getParameter("pageSize");
String id = request.getParameter("id");
String sql = "select content.*,channelname from content,channel where content.channelid = channel.id";
if(channelid!=null && !channelid.equals("0")) {
sql += " and channelid = "+channelid;
}
if(title!=null && !title.equals("")) {
sql += " and title like \"%"+title+"%\"";
}
if(author!=null && !author.equals("")) {
sql += " and author=\""+author+"\"";
}
if(id!=null && !id.equals("")) {
sql += " and content.id= "+id;
}
sql += " order by createtime desc";
if(page!=null && pageSize!=null && !page.equals("") && !pageSize.equals("")) {
sql += " limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;
}
String[] colums = {"id","title","createtime","author","imgurl","content","channelid","channelname"};
String res = MysqlUtil.getJsonBySql(sql, colums);
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(res);
}
2. UpdateServlet.java后端接受请求
- 接受参数
- 拼接sql
- 执行sql
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接受参数
String channelid = request.getParameter("channelid");
String title = request.getParameter("title");
String author = request.getParameter("author");
String createtime = request.getParameter("createtime");
String content = request.getParameter("content");
String id = request.getParameter("id");
//拼接sql
String sql = "update content set title=\""+title+"\",createtime=\""+createtime+"\",author=\""+author+"\",imgurl=\"ee\",content=\""+content+"\",channelid="+channelid+" where id ="+id+"";
//执行sql
int num = MysqlUtil.update(sql);
String res = "修改失败";
if(num>0) {
res="修改成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
}
四、加入富文本编译器
使用的是UEditor富文本编辑器，具体使用方法，可查看该文档。
（一）解决报错问题
- 将富文本编译器加载到项目中，目录
jsp->lib->config.json报错，右击选择properties，修改编码为utf-8 - 修改后，依然显示报错，不用管，因为，json不支持注释。
- 目录
jsp->lib->controller.jsp报错，将jsp->lib下的jar包放到WEB-INF->lib目录下 - 修改一下图片配置信息：目录
jsp->lib->config.json："imageUrlPrefix": "", /* 图片访问路径前缀 */加上项目名称
（二）在添加页面中加入富文本编译器
1. 在add.html文件中替换代码
将<textarea class="content"></textarea>替换为
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
2. 在add.js文件中加入实例化编译器
//实例化编辑器
var ue = UE.getEditor('container');
3. 修改相应的代码
- 修改add.js中添加部分的代码
将var content = $(".content").val()替换为var content = ue.getContent() - 在AddContent.java中对双引号做处理
将双引号变单引号，加入content = content.replaceAll("\"", "\'");代码
（三）在修改页面中加入富文本编译器
- 前两步过程同上。
- 在update.js中，修改回显相应的代码
将$(".content").val(obj.content)替换为
ue.ready(function(){
//设置编译器的内容
ue.setContent(obj.content);
})
- 在update.js中，修改修改对应的代码
将var content = $(".content").val()替换为var content = ue.getContent() - 在UpdateServlet.java中对双引号做处理
将双引号变单引号，加入content = content.replaceAll("\"", "\'");代码
扫一扫
4180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
