码迷，mamicode.com
首页 > Web开发 > 详细

57-005-3 bootstrap实现一个简单的项目案例--新闻操作（基于jsp无刷新异步操作）

时间：2016-06-12 01:55:55      阅读：564      评论：0      收藏：0      [点我收藏+]

标签：

资源文件下载：https://yunpan.cn/OcRdu34JqpRdtw 访问密码 67af

3.1 本项目的将按照企业标准开发流程，将程序分成几个层次，同时使用mysql数据库，IDEA开发工具

技术分享

3.2 本程序主要是对新闻数据（编号、标题、发布日期、内容）的一个维护，具体要求：

    a. 业务层--增加新闻数据

            数据层--新闻表中保存新增的数据

    b. 业务层--要列表实现新闻数据，同时还要求分页

            数据层--通过数据库查询部分数据

            数据层--统计所有新闻数据量

    c. 业务层--可以修改新闻数据

            数据层--修改标题和内容，不允许修改编号和发布日期

    d. 业务层--可以删除指定新闻数据

            数据层--通过编号批量删除数据

3.3 本次开发只实现最核心的功能，不涉及数据验证。

3.4 编写数据库脚本

    news.sql

-- 删除数据库
DROP DATABASE IF EXISTS ms ;
-- 创建数据表
CREATE DATABASE ms CHARACTER SET UTF8 ;
-- 使用数据库
USE ms ;
-- 删除数据表
DROP TABLE IF EXISTS news ;
-- 创建数据表
CREATE TABLE news (
 nid   INT AUTO_INCREMENT ,
 title  VARCHAR(50) ,
 pubdate DATETIME ,
 content TEXT ,
 CONSTRAINT pk_nid PRIMARY KEY (nid)
)type=innodb;

3.5 利用IDEA工具创建一个NewsProject项目，并导入bootstrap开发包和jquery的js文件，然后导入数据库脚本到src目录下

技术分享

3.6 利用mysql数据库工具运行上面的脚本从而建立一个数据表

技术分享

3.7 通过以上步骤完成了一些准备工作，现在为项目继续准备数据库的驱动程序

技术分享

3.8 现在定义一个数据库连接的类,它只负责数据库的打开与关闭

    DatabaseConnection.java

public class DatabaseConnection {
    private static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ;
    private static final String DBURL = "jdbc:mysql://localhost:3306/ms" ;
    private static final String USER = "root" ;
    private static final String PWD = "o" ;
    private Connection conn ;
    public DatabaseConnection(){
        try {
            Class.forName(DBDRIVER);
            conn = DriverManager.getConnection(DBURL, USER, PWD);
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    public Connection getConnection(){
        return conn ;
    }
    public void close(){
        if(conn != null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}
3.9 下面就定义一个vo类的javabean
技术分享

    News.java
public class News implements Serializable{
    private Integer nid ;
    private String title ;
    private String content ;
    private Date pubdate ;
    public Integer getNid() {
        return nid;
    }
    public void setNid(Integer nid) {
        this.nid = nid;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public Date getPubdate() {
        return pubdate;
    }
    public void setPubdate(Date pubdate) {
        this.pubdate = pubdate;
    }
}

3.10 定义数据层的开发，这个层主要通过PreparedStatement类进行操作

技术分享

3.11 首先定义一个dao层的接口

    INewsDAO.java

public interface INewsDAO {
    public boolean doCreate(News vo) throws Exception ;
    public boolean doUpdate(News vo) throws Exception ;
    public boolean doRemoveBatch(Set<Integer> nids) throws Exception ;
    public News findById(Integer nid)throws Exception ;
    public List<News> findAll(Integer currentPage,Integer lineSize)throws Exception ;
    public Integer getAllCount()throws Exception ;
}

3.12 然后再定义上面接口的实现子类

    NewsDAOImpl.java     

public class NewsDAOImpl implements INewsDAO{
    private Connection conn ;
    private PreparedStatement pstmt ;
    String sql = null ;
    public NewsDAOImpl(Connection conn){
        this.conn = conn ;
    }
    public boolean doCreate(News vo) throws Exception {
        sql = "INSERT INTO news(title,pubdate,content) VALUES(?,?,?)" ;
        pstmt = conn.prepareStatement(sql) ;
        pstmt.setString(1,vo.getTitle());
        pstmt.setDate(2,new java.sql.Date(vo.getPubdate().getTime()));
        pstmt.setString(3,vo.getContent());
        return pstmt.executeUpdate()>0;
    }
    public boolean doUpdate(News vo) throws Exception {
        sql = "UPDATE news SET title=?,content=? WHERE nid=?" ;
        pstmt = conn.prepareStatement(sql) ;
        pstmt.setString(1,vo.getTitle());
        pstmt.setString(2,vo.getContent());
        pstmt.setInt(1,vo.getNid());
        return pstmt.executeUpdate()>0;
    }
    public boolean doRemoveBatch(Set<Integer> nids) throws Exception {
        if(nids.size() == 0)
            return false ;
        StringBuffer sql = new StringBuffer("DELETE FROM news WHERE nid IN (");
        Iterator<Integer> iter = nids.iterator() ;
        while(iter.hasNext()){
            sql.append(iter.next()+",") ;
        }
        sql.delete(sql.length()-1,sql.length()).append(")") ; //删除最后那个逗号
        pstmt = conn.prepareStatement(sql.toString()) ;
        return pstmt.executeUpdate() == nids.size(); //不能用"> 0"这样不能保证所有的都能被删除
    }
    public List<News> findAll(Integer currentPage, Integer lineSize) throws Exception {
        sql = "SELECT nid,title,content,pubdate FROM news LIMIT ?,? " ;
        pstmt = conn.prepareStatement(sql) ;
        pstmt.setInt(1,(currentPage-1)*lineSize);
        pstmt.setInt(2,lineSize);
        List<News> list = new ArrayList<News>() ;
        ResultSet rs = pstmt.executeQuery();
        while(rs.next()){
            News news = new News();
            news.setNid(rs.getInt("nid"));
            news.setTitle(rs.getString("title"));
            news.setContent(rs.getString("content"));
            news.setPubdate(rs.getDate("pubdate"));
            list.add(news) ;
        }
        return list;
    }
    public Integer getAllCount() throws Exception {
        sql = "SELECT COUNT(*) FROM news" ;
        pstmt = conn.prepareStatement(sql) ;
        ResultSet rs = pstmt.executeQuery() ;
        if(rs.next())
            return rs.getInt(1);
        return 0 ;
    }
}

3.13 在定义了DAO层的实现类和接口以后，那么就需要为这个dao层定义一个工厂类，通过此工厂类就能得到DAO接口的对象

    DAOFactory.java

public class DAOFactory {
    public static INewsDAO getINewsDAOInstance(Connection conn){
        return new NewsDAOImpl(conn) ;
    }
}

 日后在业务层就可以通过工厂类来取得DAO的对象。

3.14 现在进行业务层的开发，也是项目中最重要的一项，对数据库的开启关闭也都是在这一层完成的。首先定义业务层的接口

    INewsService.java

public interface INewsSerivce {
    public boolean insert(News vo)throws Exception ;
    public boolean delete(Set<Integer> nids)throws Exception ;
    public boolean update(News vo)throws Exception ;
    public Map<String,Object> list(Integer currentPage,Integer lineSize)throws Exception ;

3.15 定义业务层的实现类
    NewsServiceImpl.java
public class NewsServiceImpl implements INewsSerivce{
    private Connection conn ;
    private DatabaseConnection db = new DatabaseConnection() ;
    public NewsServiceImpl(){
        conn =db.getConnection() ;
    }
    public boolean insert(News vo) throws Exception {
        try {
            return DAOFactory.getINewsDAOInstance(conn).doCreate(vo);
        }catch(Exception e){
            throw e ;
        }finally {
            db.close();
        }
    }
    public boolean delete(Set<Integer> nids) throws Exception {
        try {
            return DAOFactory.getINewsDAOInstance(conn).doRemoveBatch(nids) ;
        }catch(Exception e){
            throw e ;
        }finally {
            db.close();
        }
    }
    public boolean update(News vo) throws Exception {
        try {
            return DAOFactory.getINewsDAOInstance(conn).doUpdate(vo) ;
        }catch(Exception e){
            throw e ;
        }finally {
            db.close();
        }
    }
    public Map<String, Object> list(Integer currentPage, Integer lineSize) throws Exception {
        try {
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("allCount",
                    DAOFactory.getINewsDAOInstance(conn).getAllCount());
            map.put("selectedNews",
                    DAOFactory.getINewsDAOInstance(conn).findAll(currentPage,lineSize));
            return map ;
        }catch(Exception e){
            throw e ;
        }finally {
            db.close();
        }
    }
}

3.16 本次项目的业务层实现不再区分前台或后台业务，现在定义业务层的工厂类

    ServiceFactory.java

public class ServiceFactory {
    public static INewsSerivce getINewsServiceInstance(){
        return new NewsServiceImpl();
    }
}

3.17 通过以上的步骤就完成了整个业务层的实现。那么现在就剩下控制层的开发，在定义控制层时，由于存在编码的问题，所以需要增加一个编码的过滤器

    EncodingFilter.java

@WebFilter(filterName = "EncodingFilter",urlPatterns="/*")
public class EncodingFilter implements Filter {
    public void destroy() {
    }
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        //来回都设置了编码过滤
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        chain.doFilter(req, resp);
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
    }
    public void init(FilterConfig config) throws ServletException {
    }
}

3.18 定义控制层的核心功能

技术分享

    NewsServlet.java

@WebServlet(name = "NewsServlet",urlPatterns = "/pages/news/NewsServlet/*")
public class NewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String methodName = request.getPathInfo().substring(1); //获取输入的方法名称
        try{
            Method method = this.getClass().getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class) ;
            method.invoke(this,request,response) ;
        }catch(Exception e){
            e.printStackTrace();
        }
        if(methodName==null||methodName.equals("")){
            request.getRequestDispatcher("index") ;
        }else if(methodName.equalsIgnoreCase("insert")){
        }else if(methodName.equalsIgnoreCase("delete")){
        }else if(methodName.equalsIgnoreCase("update")){
        }else if(methodName.equalsIgnoreCase("list")){
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
    public void update(HttpServletRequest request,HttpServletResponse response)throws Exception{
        News vo = new News() ;
        vo.setTitle(request.getParameter("title"));
        vo.setContent(request.getParameter("content"));
        //采用页面局部刷新更改数据--Ajax
        response.getWriter().print(ServiceFactory.getINewsServiceInstance().update(vo));
    }
    public void delete(HttpServletRequest request,HttpServletResponse response)throws ServletException{
        //删除操作也是采用的异步处理
        String nids = request.getParameter("ids") ;
        try{
            if(nids == null){
                response.getWriter().print(false);
            }else{
                Set<Integer> ids = new TreeSet<Integer>() ;
                String idSet[] = nids.split("\\|") ;
                for(int x=0 ;x<idSet.length ;x++){
                    ids.add(Integer.parseInt(idSet[x])) ;
                }
                response.getWriter().print(ServiceFactory.getINewsServiceInstance().delete(ids)) ;
            }
        }catch(Exception e){
            e.printStackTrace() ;
        }
    }
    public void list(HttpServletRequest request,HttpServletResponse response)throws ServletException{
        int lineSize = 5 ;
        try {
            lineSize = Integer.parseInt(request.getParameter("lineSize")) ;
        }catch(Exception e){}
        int currentPage = 1 ;
        try {
            currentPage = Integer.parseInt(request.getParameter("currentPage"));
        }catch(Exception e){}
        Map<String,Object> map = null ;
        List<News> list = null ;
        try {
            map = ServiceFactory.getINewsServiceInstance().list(lineSize,currentPage) ;
            if(map != null){
                //数据是通过json传输的，所以定义json对象来传输数据
                JSONObject obj = new JSONObject() ;
                JSONArray arr = new JSONArray() ;
                int allCount = (Integer)map.get("allCount") ;
                list = (List<News>)map.get("selectedNews") ;
                obj.put("allCount",allCount) ;
                Iterator<News> iter = list.iterator() ;
                while(iter.hasNext()){
                    JSONObject tmp = new JSONObject() ;
                    News vo = iter.next() ;
                    tmp.put("nid",vo.getNid()) ;
                    tmp.put("content",vo.getContent()) ;
                    tmp.put("title",vo.getTitle()) ;
                    tmp.put("pubdate",new SimpleDateFormat("yyyy-MM-dd").format(vo.getPubdate())) ;
                    arr.add(tmp) ;
                }
                obj.put("selectedNews",arr) ;
                response.getWriter().print(obj) ;
            }else{
                response.getWriter().print(false) ;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public void insert(HttpServletRequest request,HttpServletResponse response)throws Exception{
        News vo = new News() ;
        vo.setNid(Integer.parseInt(request.getParameter("nid")));
        vo.setTitle(request.getParameter("title"));
        vo.setContent(request.getParameter("content"));
        vo.setPubdate(new Date());
        String msg = "新闻数据增加失败！" ;
        String path = request.getContextPath()+"/pages/news/news_insert.jsp" ; //跳转路径
        if(ServiceFactory.getINewsServiceInstance().insert(vo)){
            msg = "新闻数据增加成功！" ;
        }
        request.setAttribute("msg",msg) ;
        request.setAttribute("path",path);
        request.getRequestDispatcher("/pages/forward.jsp").forward(request,response) ;
    }
}

3.19 项目中使用到了json数据传输，所以需要配置json的jar包

技术分享
3.20 控制层over后，现在就处理显示层，本次显示层利用jsp与bootstrap进行处理。首先处理新闻增加的界面显示
技术分享

3.21 根据上图提示，定义一个forward.jsp页面

    forward.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" >
    alert(${msg}) ;
    window.location="${path}" ;
</script>

3.22 定义新闻增加页面

    news_insert.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath() ;
    String basePath = request.getScheme()+"://"+request.getServerName()
            +":"+request.getServerPort()+"/"+path ;
    String insertUrl = basePath+"/pages/news/NewsServlet/insert" ;
%>
<html>
<head>
    <base href="<%=basePath%>" />
    <title>bootstrap综合应用</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--首先定义导航条-->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <strong>增加新闻</strong>
                </div>
                <div class="panel-body">
                    <!-- 定义bootstrap样式的form表单 -->
                    <form action="<%=insertUrl%>" method="post" id="myForm" class="form-horizontal">
                        <fieldset>
                            <legend><label>新闻增加</label></legend>
                        <div class="form-group" id="titleDiv" >
                            <!-- 用label元素便于鼠标点击实现联动效果同时要设置for="title"才有效果 -->
                            <label class="col-md-3 control-label" for="title">标题:</label>
                            <div class="col-md-5">
                                <input id="title" name="title" type="text" value="test_title" placeholder="请输入标题" class="form-control">
                            </div>
                            <div class="col-md-4" id="titleSpan"></div>
                        </div>
                        <div class="form-group" id="contentDiv" >
                            <!-- 用label元素便于鼠标点击实现联动效果同时要设置for="content"才有效果 -->
                            <label class="col-md-3 control-label" for="content">新闻内容:</label>
                            <div class="col-md-5">
                                <textarea id="content" name="content"  placeholder="请输入内容" class="form-control">test_content</textarea>
                            </div>
                            <div class="col-md-4" id="contentSpan"></div>
                        </div>
                        <!-- 定义两个按钮 -->
                        <div class="form-group">
                            <div class="col-md-5 col-md-offset-3" >
                                <button type="submit" class="btn btn-info">发布</button>
                                <button type="reset" class="btn btn-info">重置</button>
                            </div>
                        </div>
                      </fieldset>
                    </form>
            </div>
        </div>
     </div>
     </div>
    </div>
</body>
</html>

    效果图：

技术分享

3.23 通过测试上面的新闻功能ok后，现在实现新闻前端列表显示的功能，而此次列表显示需要分页显示，界面可以利用之前已经做过的分页显示界面。

技术分享

3.24 建立分页显示的公共函数页面

    util.js

// 实现分页功能
var jsCommonCp = 1 ; //当前的页码
var jsCommonLs = 5 ; //每页显示数据量
var jsCommonPageSize ; //总页数
function createSplitBar(allRecorders){ //专门用于创建分页操作的
    clearBar();
    calcPageSize(allRecorders) ;
    if(jsCommonPageSize > 1){
        previousPage() ;
        addBar(1)  ;
    }
    var seed = 3 ; //设置一个显示省略号的临界点--种子数，如果大于它则出现，否则不出现
    if(jsCommonCp > seed*2){
        addDetailPage() ; //增加省略号按钮
        var startPage = jsCommonCp - seed ;
        for(var x=startPage ; x<jsCommonCp + seed ; x++){
            if(x < jsCommonPageSize){
                addBar(x) ;
            }
        }
        if(jsCommonCp+2*seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }else{
        for(var x = 2 ; x < jsCommonCp+seed ; x++){
            if(x < jsCommonPageSize)
                addBar(x) ;
        }
        if(jsCommonCp+seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }
    addBar(jsCommonPageSize) ;
    if(jsCommonPageSize > 1){
        nextPage() ;
    }
}
function clearBar(){ //定义数据的清空操作
    $("#pagecontrol li").remove() ;
}
function addBar(index){ //用来生成分页功能的代码,即增加页面页码标签
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>"+index+"</a>") ;
    if(jsCommonCp == index){
        liObj.addClass("active") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
           jsCommonCp = index ;
            loadData() ;
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function addDetailPage(){ //添加省略号按钮
    var liObj = $("<li><span>...</span></li>") ;
    $("#pagecontrol").append(liObj) ;
}
function previousPage(){ //在页面定义上一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>上一页</a>") ;
    if(jsCommonCp == 1){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp > 1){ //如果还存在有上一页
                jsCommonCp -- ;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function nextPage(){ //在页面定义下一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>下一页</a>") ;
    if(jsCommonCp == jsCommonPageSize){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp < jsCommonPageSize){ //如果还存在有下一页
                jsCommonCp ++;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function calcPageSize(allRecorders){ //计算总页数
    //alert("calcPageSize function") ;
    if(allRecorders == 0){
        jsCommonPageSize = 1 ;
    }else{
        //js与java不一样此时不会自动转换成整型数据，需要手动设置
        jsCommonPageSize = parseInt((allRecorders+jsCommonLs-1)/jsCommonLs) ;
    }
}
3.25 定义列表显示的页面功能函数页面
    news_list.js
$(function(){
    loadData() ;
}) ;
// 读取JSP页面所返回的数 据
function loadData(){ //数据读取的函数定义
 $.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,
      "ls":jsCommonLs},function(obj){
       createSplitBar(obj.allRecorders) ;
      },"json") ;
}

3.26 定义列表显示页面

    news_list.jsp

<!-- 定义表格 -->
       <!-- bordered:表格带有边框线条、hover：鼠标移动时表格行的颜色改变、striped表格行的颜色隔行变换 -->
       <table class="table table-bordered tabel-hover table-striped" id="newsTable">
        <tr>
         <td class="text-center"><input type="checkbox" id="selectedAll" name="selectedAll"></td>
         <td class="text-center"><strong>标题</strong></td>
         <td class="text-center"><strong>发布日期</strong></td>
         <td class="text-center"><strong>内容</strong></td>
                        <td class="text-center"><strong>操作</strong></td>
        </tr>
       </table>
          <button class="btn btn-info" id="delBtn"><span class="glyphicon glyphicon-trash"></span> 删除</button>
      </div>
        <div id="dividedPage" class="text-right">
          <ul class="pagination pagination-sm" id="pagecontrol">
          </ul>
        </div>

    同时定义js功能实现列表功能

    news_list.js

$(function(){
    loadData() ;
}) ;
// 读取JSP页面所返回的数 据
function loadData(){ //数据读取的函数定义
 $.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,
      "ls":jsCommonLs},function(obj){
                            $("#newsTable tr:gt(0)").remove() ;
       createSplitBar(obj.allCount) ;
        for(var i= 0 ;i<obj.selectedNews.length ;i++){
            addRow(obj.selectedNews[i].nid,obj.selectedNews[i].title,obj.selectedNews[i].content,obj.selectedNews[i].pubdate);
        }
      },"json") ;
}
//增加表格行
function addRow(nid,title,content,pubdate){
 var str = "<tr><td class=‘text-center‘><input type=‘checkbox‘"+
 "id=‘nid‘ name=‘nid‘ value=‘"+nid+"‘></td>"+
 "<td class=‘text-center‘ id=‘title-‘"+nid+">"+title+"</td>"+
 "<td class=‘text-center‘ id=‘pubdate-‘"+nid+">"+pubdate+"</td>"+
 "<td class=‘text-left‘ id=‘content-‘"+nid+">"+content+"</td>"+
 "<td id=‘btn-‘"+nid+"><btn id=‘updateBtn-"+nid+"‘ data-toggle=‘modal‘ data-target=‘#newsInfo‘ "+
 "class=‘btn btn-info‘><span class=‘glyphicon glyphicon-pencil‘>"+
 "</span> 修改</btn></td></tr>"  
 $("#newsTable").append($(str)) ;
    $("#updateBtn-"+nid).on("click",function(){
        $("#snid").text(nid) ;
        $("#title").val(title) ;
        $("#content").val(content) ;
    }) ;
}

    然后定义分页显示的页面

    util.js

var jsCommonCp = 1 ; //当前的页码
var jsCommonLs = 5 ; //每页显示数据量
var jsCommonPageSize ; //总页数
function createSplitBar(allRecorders){ //专门用于创建分页操作的
    clearBar();
    calcPageSize(allRecorders) ;
    if(jsCommonPageSize > 1){
        previousPage() ;
        addBar(1)  ;
    }
    var seed = 3 ; //设置一个显示省略号的临界点--种子数，如果大于它则出现，否则不出现
    if(jsCommonCp > seed*2){
        addDetailPage() ; //增加省略号按钮
        var startPage = jsCommonCp - seed ;
        for(var x=startPage ; x<jsCommonCp + seed ; x++){
            if(x < jsCommonPageSize){
                addBar(x) ;
            }
        }
        if(jsCommonCp+2*seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }else{
        for(var x = 2 ; x < jsCommonCp+seed ; x++){
            if(x < jsCommonPageSize)
                addBar(x) ;
        }
        if(jsCommonCp+seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }
    addBar(jsCommonPageSize) ;
    if(jsCommonPageSize > 1){
        nextPage() ;
    }
}
function clearBar(){ //定义数据的清空操作
    $("#pagecontrol li").remove() ;
}
function addBar(index){ //用来生成分页功能的代码,即增加页面页码标签
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>"+index+"</a>") ;
    if(jsCommonCp == index){
        liObj.addClass("active") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
           jsCommonCp = index ;
            loadData() ;
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function addDetailPage(){ //添加省略号按钮
    var liObj = $("<li><span>...</span></li>") ;
    $("#pagecontrol").append(liObj) ;
}
function previousPage(){ //在页面定义上一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>上一页</a>") ;
    if(jsCommonCp == 1){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp > 1){ //如果还存在有上一页
                jsCommonCp -- ;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function nextPage(){ //在页面定义下一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style=‘cursor:pointer;‘>下一页</a>") ;
    if(jsCommonCp == jsCommonPageSize){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp < jsCommonPageSize){ //如果还存在有下一页
                jsCommonCp ++;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function calcPageSize(allRecorders){ //计算总页数
   // alert("calcPageSize function:allRecorders="+allRecorders) ;
    if(allRecorders == 0){
        jsCommonPageSize = 1 ;
    }else{
        //js与java不一样此时不会自动转换成整型数据，需要手动设置
        jsCommonPageSize = parseInt((allRecorders+jsCommonLs-1)/jsCommonLs) ;
    }
}

    效果图：

技术分享

3.27 定一个bootstrap的模态弹出窗口，此窗口主要用来显示数据更新的

    news_list.jsp

<%--定义模态窗口--%>
  <div class="modal" id="newsInfo">
      <div class="modal-dialog" style="width: 600px">
          <div class="modal-content">
              <div class="modal-header">
                  <button class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">新闻数据编辑</h4>
              </div>
              <div class="modal-body">
                  <form method="post" id="myForm" class="form-horizontal">
                      <fieldset>
                          <legend><label>新闻编辑</label></legend>
                          <div class="form-group" id="snidDiv" >
                              <label class="col-md-3 control-label" for="title">编号:</label>
                              <div class="col-md-5">
                                  <span id="snid"></span>
                              </div>
                              <div class="col-md-4" id="snidSpan"></div>
                          </div>
                          <div class="form-group" id="titleDiv" >
                              <!-- 用label元素便于鼠标点击实现联动效果同时要设置for="title"才有效果 -->
                              <label class="col-md-3 control-label" for="title">标题:</label>
                              <div class="col-md-5">
                                  <input id="title" name="title" type="text" value="test_title" placeholder="请输入标题" class="form-control">
                              </div>
                              <div class="col-md-4" id="titleSpan"></div>
                          </div>
                          <div class="form-group" id="contentDiv" >
                              <!-- 用label元素便于鼠标点击实现联动效果同时要设置for="content"才有效果 -->
                              <label class="col-md-3 control-label" for="content">新闻内容:</label>
                              <div class="col-md-5">
                                  <textarea id="content" name="content"  placeholder="请输入内容" class="form-control">test_content</textarea>
                              </div>
                              <div class="col-md-4" id="contentSpan"></div>
                          </div>
                          <!-- 定义两个按钮 -->
                          <div class="form-group">
                              <div class="col-md-5 col-md-offset-3" >
                                  <button type="submit" class="btn btn-info" id="updateBtn">修改</button>
                              </div>
                          </div>
                      </fieldset>
                  </form>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal">关闭界面</button>
              </div>
          </div>
      </div>
  </div>
  为了在点击修改按钮后弹出的模态窗口能同时显示修改之前的数据，需要定义相应的js文件
    news_list.js 
    $("#updateBtn-"+nid).on("click",function(){
        $("#snid").text(nid) ;
        $("#title").val(title) ;
        $("#content").val(content) ;
效果图：
技术分享

3.28 在定义完了修改的模态界面之后，那么现在就可以对修改按钮所触发的事件进行定义了。

技术分享

    定义修改数据的函数

    news_list.js

function updateNews(){
    var nid = $("#snid").text();
    var title = $("#title").val() ;
    var content = $("#content").val() ;
    $.post("pages/news/NewsServlet/update",{"nid":nid,"title":title,"content":content},
        function(obj){
            if(obj.trim() == "true"){
                $("#alertDiv").attr("class","alert alert-success") ;
                $("#alertText").text("修改成功！") ;
                //后台数据修改成功后，那么前台列表页相应的数据肯定要同步更新
                $("#title-"+nid).text(title) ;
                $("#content-"+nid).text(content) ;
            }else{ //表示修改失败
                $("#alertDiv").attr("class","alert alert-danger") ;
                $("#alertText").text("修改失败！") ;
            }
        },"text") ;
    //更新完毕后需要自动关闭模态窗口
    $("#newsInfo").modal("hide") ;
    //同时更新的状态信息也逐渐消失
    $("#alertDiv").fadeIn(1000,function(){
        $("#alertDiv").fadeOut(3000) ;
    });
}

    然后需要在前台页面定义后台数据修改状态的反馈信息

    news_list.jsp

  <%--用来显示后台数据更新的状态--%>
 <div class="alert alert-info" style="display: none;" id="alertDiv">
     <button class="colse">&times;</button>
     <span id="alertText"></span>
  </div>

3.29 定义完了新闻增加、修改、列表显示之后现在就只剩下新闻删除的工作了，同样是通过ajax来完成，之前列表页已经存在了删除的按钮，所以就直接定义删除按钮相关的函数

    util.js
/触发全选的元素
// 被全选的元素
function checkboxSelectedAll(eleA,eleB){ //实现复选框全选操作
    eleA.on("click",function(){
        eleB.each(function(){
            this.checked = eleA.prop("checked") ; //把eleA元素的属性checked赋值给前面
        }) ;
    }) ;
}
// 删除按钮的选择器
// ajax异步处理的链接
// 所有被选上的复选框
function deleteBtn(ele,cele,url){
    ele.on("click",function(){
        var selectedItem = "" ; //保存所有要删除的数据
        cele.each(function(){ //针对每一个满足选择要求的元素都调用一次定义的函数
            if(this.checked){ //如果当前的元素有tmd被选中，那么就要执行下列语句
                selectedItem += this.value+"|" ;
            }
        });
        if(selectedItem == ""){
            alert("对不起，你他妈还没有选择任何元素，请先选择？");
        }else{
            if(window.confirm("你丫真要删除所选择的数据吗？")){
                // 如果要删除就通过ajax调用后台实现数据删除的操作
                $.post(url,{"ids":selectedItem},function(obj){
                    if(obj.trim("true")){
                        $("#alertDiv").attr("class","alert alert-success") ;
                        $("#alertText").text("删除成功") ;
                        loadData() ; //重新刷新列表页
                    }else{
                        $("#alertDiv").attr("class","alert alert-danger") ;
                        $("#alertText").text("删除失败") ;
                    }
                    $("#alertDiv").fadeIn(1000,function(){
                        $("#alertDiv").fadeOut(3000) ;
                    })
                },"text") ;
            }
        }
    });
} 

    然后再定义调用删除函数的方法
    news_list.js
function loadData(){ //数据读取的函数定义
 $.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,
      "ls":jsCommonLs},function(obj){
                            $("#newsTable tr:gt(0)").remove() ;
       createSplitBar(obj.allCount) ;
        for(var i= 0 ;i<obj.selectedNews.length ;i++){
            addRow(obj.selectedNews[i].nid,obj.selectedNews[i].title,obj.selectedNews[i].content,obj.selectedNews[i].pubdate);
        }
        checkboxSelectedAll($("#selectedAll"),$("input[id=‘nid‘]"));
        deleteBtn($("#delBtn"),$("input[id=‘nid‘]"),"pages/news/NewsServlet/delete");
      },"json") ;
}
最终效果图：

技术分享

57-005-3 bootstrap实现一个简单的项目案例--新闻操作（基于jsp无刷新异步操作）

标签：

原文地址：http://blog.csdn.net/jizhu4873/article/details/51636827
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！