前后端+数据库的项目实战：hbu迎新网-较复杂（上）

一、准备工作

二、创建数据库

三、前端html+css搭建好

四、把数据库的信息显示到页面-实现查找全部操作

（1）写js文件进行交互

（2）创建服务器后端通过js与前端页面进行相响应

五、实现查找部分信息

（1）后端修改

（2）前端修改：给按钮绑定事件

（3）最终效果

六、实现数据库栏目的及时更新

（1）创建一个SearchChannel的服务器

（2）在content.js中添加查找栏目的代码：将数据库内容传到前端

（3）将查到的内容添加到前端页面

（4）最终效果

七、实现分页操作

（1）sql语句：

（2）进一步修改SearchContent.js 中修改sql语句

（3）在content.js中添加page,pagesize参数

（4）前端能结合搜索更新分页页码，而非静态写死

1、创建SearchContentNum.java服务器获取搜索到的有几条事件，需要几页

2、在content.js中获取后端的页数value.count

编辑 3、将pageNUM显示在前端html页面

（5）最终效果

八、实现页面切换

（1）添加item属性

（2）conten.js对点击的items绑定事件

（3）最终效果

九、实现添加操作

（1）点击添加跳转页面 content.js添加一下代码

（2）在跳转到的add.html中引入js文件

1.给返回按键绑事件

2、将查找到的栏目放到add.html页面

3、真正添加-往数据库中塞数据

（3）最终效果

十、实现修改操作

（1）点击添加跳转页面 content.js添加一下代码

（2）在跳转到的update.html中引入js文件

1、给返回按键绑事件（和添加操作一样)

2、将查找到的栏目放到update.html页面（和添加操作一样)

3、将要修改的事件回显到输入框

4、实现对数据库的修改

（3）最终效果

上期内容：

前后端+数据库的项目实战--学生信息管理系统-易-CSDN博客

用到的知识：

基于 JDBC 的后端与 MySQL 数据库交互 javaweb-CSDN博客

一、准备工作

在进行项目之前，需要复制mysql驱动和db包【之前封装过的】，在这篇博客中可以了解到基于 JDBC 的后端与 MySQL 数据库交互 javaweb-CSDN博客

db包中需要修改关联数据库的名字，同时保证编码为utf-8

二、创建数据库

这里的内容都是先随便写的

三、前端html+css搭建好

这里是静态网页，就不详细展开啦

四、把数据库的信息显示到页面-实现查找全部操作

功能：把数据库的信息显示到页面 ajax关联到后端服务器--模版

（1）写js文件进行交互

建立一个content.js文件，用get请求绑定到服务器后端

// 查找
$.ajax({url:"SearchContent",type:"get",success:function(value){var arr = value.data // 放到tbody表格$("tbody").empty()for(var i=0;i<arr.length;i++){$("tbody").append('<tr>'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].desc+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+' <td>'+' <input type="button" value="修改" class="update">'+' <input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("查询出错啦")}
})

（2）创建服务器后端通过js与前端页面进行相响应

务器后端与数据库进行交互，返回给js文件结果

最终效果

五、实现查找部分信息

（1）后端修改

sql语句这里用到字符串的拼接，修改SearchContent.java文件

注意拼接字符串时空格的使用

    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 sql = "select content.*,channelname from content,channel where content.channelid = channel.id";// 查找的选项不为空且不是空字符串if(channelid!=null && !channelid.equals("")) {sql+="and  channelid = " + channelid;}if(title!=null && !title.equals("")) {sql+="and title like \"%"+title+"%\"";}if(author!=null && !author.equals("")) {sql+="and  author = \"" + author +"%\"";}sql+="order by  createtime desc";System.out.println(sql);String[] colums = {"id","title","desc","createtime","author","channelid","channelname","content","imgurl"} ;String res = MysqlUtil.getJsonBySql(sql, colums);//返回给前端response.setContentType("text/json;charset=utf-8");//数据返回        response.getWriter().write(res);}

搜索的时候什么都不输入，默认为全部【也就是不进入 if 语句】

（2）前端修改：给按钮绑定事件

js添加新的代码给search事件

//点击按钮查找
$(".search").on("click",function(){// alert(1)// 获取输入框的信息var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()//        发起请求  连接数据库信息  这时候就需要携带参数了$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author},success:function(value){var arr = value.data // 放到tbody表格$("tbody").empty()for(var i=0;i<arr.length;i++){$("tbody").append('<tr>'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].desc+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+' <td>'+' <input type="button" value="修改" class="update">'+' <input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("查询出错啦")}
})})

上面的ajax部分重复使用，为了方便将其封装为 lodaData()函数，最终content.js代码如下

// 获取输入框的信息var lodaData = function(){var channelid = $(".channelid").val() var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author},success:function(value){var arr = value.data // 放到tbody表格$("tbody").empty()for(var i=0;i<arr.length;i++){$("tbody").append('<tr>'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].desc+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+' <td>'+' <input type="button" value="修改" class="update">'+' <input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("查询出错啦")}})}// 进入页面查找lodaData()
//点击按钮查找
$(".search").on("click",function(){// alert(1)lodaData()})

（3）最终效果

六、实现数据库栏目的及时更新

【原网页栏目选择静态写死，若数据库新增一个栏目，不能及时更新】

（1）创建一个SearchChannel的服务器

sql语句：select * from channel

（2）在content.js中添加查找栏目的代码：将数据库内容传到前端

//查找栏目
var loadChannel = function(){$.ajax({url:"SearchChannel",type:"get",success:function(value){console.log(value)}})}
//进入页面加载栏目loadChannel()

（3）将查到的内容添加到前端页面

（4）最终效果

七、实现分页操作

（1）sql语句：

（2）进一步修改SearchContent.js 中修改sql语句

（3）在content.js中添加page,pagesize参数

（4）前端能结合搜索更新分页页码，而非静态写死

1、创建SearchContentNum.java服务器获取搜索到的有几条事件，需要几页

2、在content.js中获取后端的页数value.count

3、将pageNUM显示在前端html页面

（5）最终效果

八、实现页面切换

（1）添加item属性

（2）conten.js对点击的items绑定事件

//任意页切换
$(".page").on("click",".item",function(){//数据切换page = $(this).text() // 获取当前点击页码的值loadData() //重新加载页面//样式切换$(this).siblings().removeClass("current")$(this).addClass("current")})//首页切换
$(".page").on("click",".first",function(){//数据切换page =1loadData()//样式切换$(".item").removeClass("current")$(".item").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换page = $(".item").lengthloadData()//样式切换$(".item").removeClass("current")$(".item").last().addClass("current")
})//上一页切换
$(".page").on("click",".prev",function(){if(page==1){alert("已经是第一页啦")return}//数据切换page--loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){alert("已经是最后一页啦")return}//数据切换page++loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})

细节：需要重置一下

（3）最终效果

九、实现添加操作

这里涉及到跨页面交互【因为点击会跳转到另外一个页面】会用到cookie/session会话与会话管理：Cookie与Session的深度解析_cookie会话信息-CSDN博客

（1）点击添加跳转页面 content.js添加一下代码

// 点击添加跳转到添加页面
$(".add").click(function(){//页面跳转location.href="add.html"
})

（2）在跳转到的add.html中引入js文件

1.给返回按键绑事件

// 给返回按键绑事件
$(".back").click(function(){location.href="content.html"})

2、将查找到的栏目放到add.html页面


//查找栏目，将之前content.js的复制过来就好var loadChannel = function(){$.ajax({url:"SearchChannel",type:"get",success:function(value){// console.log(value)var arr = value.data$(".channelid").empty()for(var i=0;i<arr.length;i++){//在容器中追加新的channelid$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')}}})
}
//进入页面加载栏目
loadChannel()

3、真正添加-往数据库中塞数据

①先写sql语句

-- 往数据库中添加数据 
insert into content(title,`desc`,createtime,author,imgurl,content,channelid) values("标题","摘要","2025-01-31 10:16:27","作者"，"图片","内容",1)

desc 撞上了关键字，使用 ` ` 引用即可

②获取输入框内容：给添加按钮绑事件

//点击添加按钮，给其绑事件
$(".add").click(function(){//alert(1)//获取输入框的值var channelid = $(".channelid").val() //下拉框var title = $(".title").val().trim() //输入标题var author = $(".author").val().trim()var createtime = $(".createtime").val()var desc = $(".desc").val().trim()var content = $(".content").val().trim()console.log(channelid)console.log(title)console.log(author)console.log(createtime)
})

③将获取到的内容通过后端添加到数据库

在add.js中发起请求：添加

创建AddContent.java服务器

    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 desc = request.getParameter("desc");String content = request.getParameter("content");//拼接sql + 变量替换String sql = "insert into content(title,`desc`,createtime,author,imgurl,content,channelid) values(\""+title+"\",\""+desc+"\",\""+createtime+"\",\""+author+"\",\"77\",\""+content+"\","+channelid+")";int num = MysqlUtil.add(sql);//返回数据库中受影响的行数String res ="添加失败";if(num>0){res="添加成功";}request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.getWriter().write(res);}

（3）最终效果

十、实现修改操作

（1）点击添加跳转页面 content.js添加一下代码

// 点击跳转到修改页面//给后来生成的元素绑事件，需要使用事件委托
$("tbody").on("click",".update",function(){location.href="update.html"
})

（2）在跳转到的update.html中引入js文件

1、给返回按键绑事件（和添加操作一样)

2、将查找到的栏目放到update.html页面（和添加操作一样)

//alert(1)
// 给返回按键绑事件
$(".back").click(function(){location.href="content.html"})//查找栏目，将之前content.js的复制过来就好var loadChannel = function(){$.ajax({url:"SearchChannel",type:"get",success:function(value){// console.log(value)var arr = value.data$(".channelid").empty()for(var i=0;i<arr.length;i++){//在容器中追加新的channelid$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')}}})
}
//进入页面加载栏目
loadChannel()

3、将要修改的事件回显到输入框

需要知道content.html中待修改事件的id，跨页面交互，需要用到cookie,cookie存取事件的id，在conten.js文件中存取一下id

在content.js文件设置cookie,: content.html文件中引入

①content.js文件

②当点击修改时cookie会携带事件id

这样update.js就可以访问到content.js中的id值了 alert($.cookie("id"))

③实现回显操作：创建一个servlet (SearchContentById.java）

④ 同时updata.js


//回显
var id = $.cookie("id")$.ajax({url:"SearchContentById",type:"get", data:{id},success:function(value){console.log(value)}})

⑤ 将得到的数据赛到输入框中


//回显
var id = $.cookie("id")$.ajax({url:"SearchContentById",type:"get", data:{id},success:function(value){var obj = value.data[0]//将后端返回的数据存到输入框中$(".title").val(obj.title) // 将对象里面的标题赋值到标题的输入框$(".author").val(obj.author)$(".desc").val(obj.desc)$(".createtime").val(obj.createtime)$(".content").val(obj.content)$(".channelid").val(obj.channelid)}})

⑥因为跳转修改页面和查找栏目为两个异步的ajax请求，所以需要修改其为同步，因为后面的修改请求需要用到前面返回的下拉框数据

异步（AJAX）：请求发送后，JavaScript代码会继续执行，不会等待服务器响应。响应到达时，通过回调函数处理结果。
同步：请求发送后，JavaScript代码会暂停执行，直到服务器响应返回。

⑦最终效果

4、实现对数据库的修改

①先写sql语句

update content set title="11",desc="das",createtime="22",author="pp",imgurl="a",content="aa",channelid= 2 where id = 1

② 创建UpdateContent.java servlet

③update.js像服务器后端post数据

//修改
$(".update").click(function(){//获取输入框内容 和添加一样var channelid = $(".channelid").val() //下拉框var title = $(".title").val().trim() //输入标题var author = $(".author").val().trim()var createtime = $(".createtime").val()var desc = $(".desc").val().trim()var content = $(".content").val().trim()$.ajax({url:"UpdateContent",type:"post", data:{channelid,title,author,createtime,desc,content,id // 多传参一个从cookie中获得的id},success:function(value){alert(value)location.href="content.html"}})
})