项目实例-页面

一、页面

二、前端content页面

1.前端js页面

//加载栏目
//ajax()异步         同步
$.ajax({url:"SearchChannel",type:"get",//ajax请求是异步的，他只管发起，还需要同步接收async:false,//变为同步//连接的返回值返回到了valuesuccess:function(value){/* var arr = value.data$(".channelid").empty()$(".channelid").append('<option value="0">全部</option>')for(var i=0;i<arr.length;i++){$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')}*/},error:function(){alert("出错啦")}
})var page = 1//默认一进入页面显示的是第一页
var pageSize = 6//默认每页显示的条目为六条//加载数据，动态获取参数，以后不用随时变了
var loadData = function(){//获取输入框数据.channelid表示获取class的值var channelid = $(".channelid").val()//没有数字不用加空格var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author,page,pageSize},//主体内容success:function(value){var arr = value.data//清空tbody内容，固定的不动的tobody$("tbody").empty()for(var i=0;i<arr.length;i++){//jquery增加方法，有多少条追加多少行 arr[i].id字符串拼接，createtime.substring(0,10)字符串裁剪，从0到10，要0不要10，不要分钟秒$("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].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("出错啦")}})
}
//加载页码
var loadPage = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"GetCount",type:"get",data:{channelid,title,author},//把页码数变成动态的，可以实时更新的success:function(value){//在这对页码那一行写html，让他是动态的，原来的html页注掉var count = Math.ceil(value/pageSize)$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<count;i++){//i=0 页码不可能等于0if(i==0){//谁有current谁就有样式$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")}})}//前面引函数，后面需要调函数 
//进入页面加载数据
loadData()
//进入页面加载页码
loadPage()//点击按钮搜索
$(".search").click(function(){page=1loadData()loadPage()
})//任意页码切换，可以从第一页切换到第三第四页，看看知识点，怎么绑事件
$(".page").on("click",".item",function(){//数据切换$(this)当前被点击元素，获取当前被点击元素的信息page=$(this).text() loadData()//样式切换，页码要变绿//点谁给谁添加class值$(this).addClass("current")//siblings()当前被点击的兄弟元素去掉效果$(this).siblings().removeClass("current")
})//首页切换
$(".page").on("click",".first",function(){//数据切换page=1loadData()//样式切换 first方法是jquery的方法$(".item").removeClass("current").first().addClass("current")})//尾页切换
$(".page").on("click",".last",function(){//数据切换page=$(".item").lengthloadData()//样式切换$(".item").removeClass("current").last().addClass("current")})
//上一页切换
$(".page").on("click",".prev",function(){if(page==1){alert("已经是第一页了")return}//数据切换page--loadData()//样式切换$(".item").removeClass("current").eq(page-1).addClass("current")})
//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){alert("已经是最后一页了")return}//数据切换page++loadData()//样式切换$(".item").removeClass("current").eq(page-1).addClass("current")})

二、后端查找

1.getcount获取数据表，主体部分获取参数，转成字符串形式给前端

package com.qcby.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qcby.db.MysqlUtil;/*** Servlet implementation class GetCount*/
@WebServlet("/GetCount")
public class GetCount extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public GetCount() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/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");// 构建查询总记录数的SQL语句，表名已修改为channelcontent和channelname
String sql = "select count(*) from channelcontent, channelname where channelcontent.channelid = channelname.id ";// 根据参数动态拼接SQL条件if(channelid != null && !channelid.equals("0")) {sql += " and channelcontent.channelid = " + channelid;}if(title != null && !title.equals("")) {sql += " and channelcontent.title like \"%" + title + "%\"";}if(author != null && !author.equals("")) {sql += " and channelcontent.author = \"" + author + "\"";}// 调用工具类执行查询，获取总记录数int num = MysqlUtil.getCount(sql);// 将结果转换为字符串并响应给前端String res = String.valueOf(num);response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

2.searchchannel表（单表查找）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//栏目查找只需要单表String sql = "select * from channel";String[] colums = {"id","channelname"};//参数设置成字符串形式String res = MysqlUtil.getJsonBySql(sql, colums);//设置后端给前端返回信息为jsonresponse.setContentType("text/json;charset=utf-8");//返回数据response.getWriter().write(res);}

3.searchcontent表（双表连接）

1.content表

根据请求参数动态构建SQL查询语句，从数据库中获取数据，并将数据以JSON格式返回给前端。

2.后端接收参数

3.对参数做处理并返回

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 sql = "select content.*,channelname from content,channel where content.channelid = channel.id ";//channelid连接内容和栏目的四部分if(channelid!=null&&!channelid.equals("0")) {sql+="	and channelid = "+channelid;}//title自动搜索if(title!=null&&!title.equals("")) {sql+="  and title like \"%"+title+"%\"";}//author自动搜索if(author!=null&&!author.equals("")) {sql+=" and author=\""+author+"\"";}//createtime降序排列，时间最近放在最前面，每一页都保持降序排列sql+=" order by createtime desc  limit "//计算分页的起始序号要到第几个了，还要考虑到一页只能容纳四个//Integer.parseInt把字符串转成int类型数据，int类型才可以做加减乘除运算+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;//参数设置字符串形式String[] colums = {"id","title","createtime","author","imgurl","content","channelid","channelname"};String res = MysqlUtil.getJsonBySql(sql, colums);//执行SQL查询并将结果转换为JSON格式。强制类型转换，传参需要int类型数据System.out.println(res);//设置后端给前端返回信息为jsonresponse.setContentType("text/json;charset=utf-8");//返回数据，都是以字符串形式传参response.getWriter().write(res);}

三、sql数据库

做到无论输入什么，只要有坐着，标题就可以筛选对应的条件并进行搜索。