项目实例-页面

一、页面

二、前端content页面

1.前端js页面

//加载栏目
//ajax()异步         同步
$.ajax({
    url:"SearchChannel",
    type:"get",
    //ajax请求是异步的，他只管发起，还需要同步接收
    async:false,//变为同步
    //连接的返回值返回到了value
    success: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 页码不可能等于0
                if(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=1
    loadData()
    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=1
    loadData()
    //样式切换 first方法是jquery的方法
    $(".item").removeClass("current").first().addClass("current")
    
})

//尾页切换
$(".page").on("click",".last",function(){
    //数据切换
    page=$(".item").length
    loadData()
    //样式切换
    $(".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 stub
		doGet(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);
		//设置后端给前端返回信息为json
		response.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);
		//设置后端给前端返回信息为json
		response.setContentType("text/json;charset=utf-8");
		//返回数据，都是以字符串形式传参
		response.getWriter().write(res);
	
	}

三、sql数据库

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