• bootstrap +servlet 样例

    2020-06-08 20:04:33
    bootstrap servlet
  • 前情提要 ...获取bootstrap方法一使用 Bootstrap 中文网提供的免费 CDN 加速服务(同时支持 http 和 https 协议) 将下面的代码copy到自己的JSP页面即可。<!-- 新 Bootstrap 核心 CSS 文件 --> ...

    前情提要
    之前已经搭好的springMVC+myBatis项目骨架,详情请看–>传送门

    获取bootstrap

    方法一

    使用 Bootstrap 中文网提供的免费 CDN 加速服务(同时支持 http 和 https 协议)
    将下面的代码copy到自己的JSP页面中即可。

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    好处,不需要下载bootstrap的JS和CSS文件,只要有网络就能引用到。

    方法二

    • 到官网下载编译好的bootstrap–>传送门,它是编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。当然你也可以下载源码版,源码包含编译好的文件。
    • 另外bootstrap是完全基于jQuery开发的,要使用bootstrap,必须依赖jQuery。所以再把jQuery下载下来。
    • 把下载下来的文件copy到项目里面,如图:
      这里写图片描述

    这样我们就能使用bootstrap给我提供的前端框架开发漂亮的web应用了。


    添加JSP页面

    在此之前,为了避免重复劳动,我们先创建一个JSP模板。
    点击window–>搜索JSP–>templent–>new, Name随便输入,Context选择New JSP,如图:
    这里写图片描述

    • JSP模板代码
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <!DOCTYPE html><!--Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型-->
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
      <title>Document</title>
    
      <link rel="stylesheet" href="<%=basePath %>resources/css/bootstrap/bootstrap.css">
    </head>
    <body>
    
      <!--bootstrap需要依赖jQuery,所以必须在他之前先引入jQuery-->
      <script src="<%=basePath %>resources/js/bootstrap/jquery-1.11.3.min.js"></script>
      <script src="<%=basePath %>resources/js/bootstrap/bootstrap.js"></script>
    </body>
    </html>

    在webapp目录下新建login.jsp

    • login.jsp
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>login</title>
    
        <link rel="stylesheet" href="<%=basePath %>resources/css/bootstrap/bootstrap.css">
        <link rel="stylesheet" href="<%=basePath %>resources/css/myCss/login.css">
    </head>
    <body>
        <!--引入头部JSP-->
        <jsp:include page="head.jsp" ></jsp:include>
        <!--使用模态框的方式模拟一个登陆框-->
        <div class="modal show" id="loginModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close">&times;</button>
                        <h1 class="text-center text-primary">登录</h1>
                    </div>
                    <div class="modal-body">
                        <form class="form col-md-12 center-block" id="loginForm" action="main/successLogin.do" method="post">
                            <div class="form-group-lg"  id="accountDiv">
                                <label class="sr-only" for="inputAccount">账号</label>
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                                    <input class="form-control" id="inputAccount" name="accountNo" type="text" placeholder="账号" required autofocus>
                                </div>
                                <div class="hidden text-center" id="accountMsg"><span class="glyphicon glyphicon-exclamation-sign"></span>用户名不存在</div>
                            </div>
                            <br>
                            <div class="form-group-lg" id="pwdDiv">
                                <label class="sr-only" for="inputPassword">密码</label>
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                                    <input class="form-control" id="inputPassword" name="pwd" type="password" placeholder="密码" required>
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-eye-open"></span></div>
                                </div>
                                <div class="hidden text-center" id="pwdMsg"><span class="glyphicon glyphicon-exclamation-sign"></span>用户名密码错误</div>
                            </div>
                            <div class="checkbox">
                                <label> <input type="checkbox" value="remember-me">记住我</label>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-default btn-lg col-md-6" id="btn_register" type="submit">注册</button>
                                <button class="btn btn-primary btn-lg col-md-6" id="btn_login" type="button" >登录</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
    
                    </div>
                </div>
            </div>
        </div>
        <!-- /container -->
        <script src="<%=basePath %>resources/js/bootstrap/jquery-1.11.3.min.js"></script>
        <script src="<%=basePath %>resources/js/bootstrap/bootstrap.js"></script>
        <script src="<%=basePath %>resources/js/myJs/login.js"></script>
    </body>
    </html>

    • login.js
    $("#btn_login").click(function(){
        var loginObj = new Object();
        loginObj.accountNo= $("#inputAccount").val();
        loginObj.pwd= $("#inputPassword").val();
        var loginJson = JSON.stringify(loginObj); //将JSON对象转化为JSON字符    
        $.post('main/validateLogin.do',
                {"loginObj":loginJson},
                function(e){
                    e=JSON.parse(e); //由JSON字符串转换为JSON对象
                    if(e.accountMsg){
                        $("#accountDiv").addClass("has-error");
                        $("#accountMsg").removeClass("hidden");
    
                        $("#pwdDiv").removeClass("has-error");
                        $("#pwdMsg").addClass("hidden");
                    }else if (e.pwdMsg){
                        $("#accountDiv").removeClass("has-error");
                        $("#accountMsg").addClass("hidden");
    
                        $("#pwdDiv").addClass("has-error");
                        $("#pwdMsg").removeClass("hidden");
                    }else if (e.user){
                        //location.href="main/successLogin.do";
                        $("#loginForm").submit();
                    }
        });
    });

    • login.css
    #loginModal{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform:  translateY(-50%);
      -ms-transform:  translateY(-50%);
      -o-transform:  translateY(-50%);
      transform:  translateY(-50%);
      background-color: #eee;
    }

    完了之后效果基本就像这样了:
    这里写图片描述


    接下来就得来写后台代码了

    在controller包下面新增一个LoginController.class

    • LoginController.class
    package com.dimon.xwater.controller;
    
    import javax.annotation.Resource;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.alibaba.fastjson.JSONObject;
    import com.dimon.xwater.dao.XUserMapper;
    import com.dimon.xwater.pojo.XUser;
    import com.dimon.xwater.utils.RequestUtils;
    import com.dimon.xwater.utils.ResponseUtils;
    
    @Controller
    @RequestMapping("/main")
    public class LoginController {
        @Resource
        private XUserMapper userDao;
    
        /**
         * 登陆跳转
         * @param request
         * @param model
         * @return
         */
        @RequestMapping("/successLogin")
        public ModelAndView login(HttpServletRequest request,ModelAndView model){
            String accountNo = RequestUtils.getString(request, "accountNo");
            String pwd = RequestUtils.getString(request, "pwd");
            XUser user = new XUser();
            user.setAccountNo(accountNo);
            user.setPwd(pwd);
            model.addObject("user", user);
            //跳转到/jsp/main.jsp页面
            model.setViewName("main");
            return model;
        }
    
        /**
         * 登陆表单校验
         * @param request
         * @param response
         */
        @RequestMapping("/validateLogin")
        public void login(HttpServletRequest request, HttpServletResponse response){
            //获取form表单数据
            String loginObj = RequestUtils.getString(request, "loginObj");
            //JSON字符串序列化成JSON对象
            JSONObject loginJosn = JSONObject.parseObject(loginObj);
            String accountNo = loginJosn.getString("accountNo");
            String pwd = loginJosn.getString("pwd");
            //根据账号查询用户名是否存在
            XUser selectUser = userDao.selectByAcccountNo(accountNo);
            JSONObject result = new JSONObject();
    
            if (null == selectUser){
                result.put("accountMsg", "用户名不存在");
            }else if (!pwd.equals(selectUser.getPwd())){
                result.put("pwdMsg", "用户名密码错误");
            }else {
                result.put("user",selectUser);
            }
            String resultStr = result.toJSONString();
    
            ResponseUtils.send(response, resultStr);
        }
    }
    

    用到的两个工具方法,也记录一下。
    - RequestUtils.getString();

        /**
         * 返回字符串,删除了首尾空格,如果不存在则返回null
         * 
         * @param request
         * @param key
         * @return
         */
        public static String getString(HttpServletRequest request, String key) {
            String value = request.getParameter(key);
            if (StringUtils.isEmpty(value)) {
                return StringUtils.trimWhitespace(value);
            }
            return value;
        }
    • ResponseUtils.send();
        /**
         * 发送json格式数据到页面
         * 
         * @param response
         * @param content
         */
        public static void send(HttpServletResponse response, String content) {
            response.setCharacterEncoding("UTF-8");
            response.setContentType("text/html");
            PrintWriter out = null;
            try {
                out = response.getWriter();
                //若发送数据为null 则默认为""
                if(content == null){
                    content = "";
                }
                out.write(content);
            }
            catch (IOException e) {
                log.error(e.getLocalizedMessage(), e);
            }
            finally {
                if (out != null){
                    out.close();
                }
            }
        }

    还有根据账号去查询用户是否存在,因为账号不是表的主键,所以自动生成的mapping.xml中没有相应的查询SQL语句,需要我们手动给它加上:

      <select id="selectByAcccountNo" resultMap="BaseResultMap" parameterType="java.lang.String" >
        <!--
          WARNING - @mbggenerated
          This element is automatically generated by MyBatis Generator, do not modify.
        -->
        select 
        <include refid="Base_Column_List" />
        from X_USER
        where ACCOUNT_NO = #{id,jdbcType=VARCHAR}
      </select>

    同时再到XUserMapping.java中添加一个selectByAcccountNo接口:

    XUser selectByAcccountNo(String accountNo);

    这样一个登陆页面实例就算完成了,登陆验证一下:

    • 输入错误的账号或密码:
      这里写图片描述
      这里写图片描述
    • 输入正确的账号和密码:
      这里写图片描述

    附上数据库表结构:

    --系统用户表
    truncate table xuser;
    drop table xuser;
    create table xuser(   
    xuser_id number(10),
    xuser_name varchar2(32),
    xuser_realName varchar2(64),
    xuser_acctno varchar2(64),
    xuser_pwd varchar2(64),
    xuser_email varchar2(64),
    xuser_mphone varchar2(11),
    xuser_addrId number(10),
    xuser_lastLogin timestamp,
    CONSTRAINT pk_xuser PRIMARY KEY (xuser_id),
    CONSTRAINT uk_xuser UNIQUE (xuser_acctno)
    );
    
    COMMENT ON TABLE xuser IS '用户表';
    COMMENT ON COLUMN xuser.xuser_name IS '昵称';
    COMMENT ON COLUMN xuser.xuser_realName IS '真实姓名';
    COMMENT ON COLUMN xuser.xuser_acctno IS '登陆账号';
    COMMENT ON COLUMN xuser.xuser_pwd IS '密码';
    COMMENT ON COLUMN xuser.xuser_email IS '邮箱';
    COMMENT ON COLUMN xuser.xuser_mphone IS '手机号码';
    COMMENT ON COLUMN xuser.xuser_addrId IS '地址ID,外键关联地址表';
    COMMENT ON COLUMN xuser.xuser_lastLogin IS '最后登陆时间';
    
    --创建序列
    drop sequence xUser_seq;
    CREATE SEQUENCE xUser_seq
    INCREMENT BY 1
    START WITH 1
    NOMAXVALUE
    NOCYCLE
    NOCACHE;
    
    --ID自增长的触发器
    CREATE OR REPLACE TRIGGER ins_xUser_triger
      BEFORE INSERT ON xuser
      FOR EACH ROW
      WHEN (new.xuser_id is null)
    begin
      select xUser_seq.Nextval into :new.xuser_id from dual;
    end;
    
    
    --地址表
    drop table xaddr;
    create table xaddr(
    xaddr_id number(10),
    xaddr_prov varchar2(32),
    xaddr_ctiy varchar2(32),
    xaddr_dist varchar2(32),
    xaddr_detail varchar2(100),
    xaddr_type char,
    CONSTRAINT pk_xaddr PRIMARY KEY (xaddr_id)
    );
    
    COMMENT ON TABLE xaddr IS '地址表';
    COMMENT ON COLUMN xaddr.xaddr_prov IS '省';
    COMMENT ON COLUMN xaddr.xaddr_ctiy IS '市';
    COMMENT ON COLUMN xaddr.xaddr_dist IS '区';
    COMMENT ON COLUMN xaddr.xaddr_detail IS '详细地址';
    COMMENT ON COLUMN xaddr.xaddr_type IS '地址类型';
    
    
    --枚举字典表
    drop table xdic;
    create table xdic(
    xdic_id number(10),
    xdic_tab varchar2(32) not null,
    xdic_col varchar2(32) not null,
    xdic_key char(2),
    xdic_val varchar2(32),
    constraint pk_xdic primary key (xdic_id)
    );
    COMMENT ON TABLE xdic IS '枚举字典表';
    COMMENT ON COLUMN xdic.xdic_id IS '所属表';
    COMMENT ON COLUMN xdic.xdic_col IS '所属字段';
    COMMENT ON COLUMN xdic.xdic_key IS '字典key';
    COMMENT ON COLUMN xdic.xdic_val IS '字典值';
    
    --登陆登出记录
    create table xlogin(
    xlogin_id number(10),
    xlogin_localip varchar2(32),
    xlogin_netip varchar2(32),
    xlogin_logintime timestamp,
    xlogin_logouttime timestamp,
    xlogin_ipaddr varchar2(32),
    constraint pk_xlogin primary key (xlogin_id)
    );
    
    COMMENT ON TABLE xlogin IS '登陆记录';
    COMMENT ON COLUMN xlogin.xlogin_localip IS '本地地址';
    COMMENT ON COLUMN xlogin.xlogin_netip IS '网络地址';
    COMMENT ON COLUMN xlogin.xlogin_logintime IS '登陆时间';
    COMMENT ON COLUMN xlogin.xlogin_logouttime IS '登出时间';
    COMMENT ON COLUMN xlogin.xlogin_ipaddr IS 'IP所在地';
    
    展开全文
  • 本系列课程主要讲述如何利用Servlet3.0+JDBC+Bootstrap+MYSQL+Ajax+构建企业级应用解决方案,主要分为两部分完成第一部分:设计部分,通过需求分析,设计物理模型,画出原型界面(HTML)第二部分:编码部分,具体实现...
  • 实现表格与servlet的传值 (1)修改bootstrapTable的设置 var state ="loadData"; var StartSearch =null; var EndSearch =null; var mPage =1; //将bootstrap-table的过程放入一个函数,方便初始化,毁灭,...

    实现表格与servlet的传值

    为了实现bootstrap-table的表格中实现数据显示,归根结底就是将你想要显示的数据进行封装,分装成一个json数据包,包含"total"和"rows"两个参数的值的一个json数据包,然后传回表格,进行显示。

    (1)修改bootstrapTable的设置

        <table id="reportTable" >
        <tbody id="show_tbody">
            </tbody> 
        </table>
        <script type="text/javascript">
            
    	var state ="loadData";
    	var StartSearch =null;
    	var EndSearch =null;
    	var mPage =1;
    	//将bootstrap-table的过程放入一个函数中,方便初始化,毁灭,重建。
    	var TableInit=function(){
    	    var oTableInit = new Object();
    	    oTableInit.Init=function(){
    			$('#reportTable').bootstrapTable({
    				method: 'get',
    				url: "<c:url value='/IP_IndexServlet?act="+state+"&&other="+otherdata+"'/>", 
    				//重点在这里,url后面写的就是你想要指向的servlet,还能传递一部分参数
    	            queryParams: function queryParams(params) {   //设置查询参数              
    	            	var param = {                    
    	            		pageNumber: params.pageNumber,                    
    	            		pageSize: params.pageSize,                              
    	            		};                
    	            return param;                            
    	            },
    
    				cache: false,
    				//height: 750, 
    				striped: true,
    				pagination: true, 
    				silent: true, //以静默方式刷新数据
    				toolbar:"#toolbar",
    				locale:"zh-US", //表格汉化
    				sidePagination: "client",
    				pageSize: 10,
    				pageNumber:1,
    				pageList: [10, 14,15, 16, 18,20],
    				search: true,
    				showColumns: true,
    				showRefresh: true,
    				showExport: true,
    				exportDataType: 'all', 
    				clickToSelect: true,
    				exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
                    exportOptions:{  
                        //ignoreColumn: [12,14],            //忽略某一列的索引  
                        fileName: '数据导出',              //文件名称设置  
                        worksheetName: 'Sheet1',          //表格工作区名称  
                        tableName: 'IP数据表',  
                        excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
                        //onMsoNumberFormat: DoOnMsoNumberFormat  
                    },
    	            columns : [{
    	                field : '序号',
    	                title : '序号'
    	            }, {
    	                field : '类型',
    	                title : '类型'
    	            }, {
    	                field : '品牌',
    	                title : '品牌'
    	            }, {
    	                field : '操作系统',
    	                title : '操作系统'
    	            }, {
    	                field : 'IP地址',
    	                title : 'IP地址'
    	            }, {
    	                field : 'MAC地址',
    	                title : 'MAC地址'
    	            }, {
    	            	field: 'operate',
    	            	title: '操作',
    	            	align: 'center',
    	            	events: operateEvents,//给按钮注册事件
    	            	formatter: operateFormatter
    	            }],
    			});
    			//隐藏正在加载
    			//$('#reportTable').bootstrapTable('hideLoading');
    	    };
    	    oTableInit.destroy=function(){
    	        $("#reportTable").bootstrapTable('destroy');
    	    }
    	    return oTableInit;
    	}
    	var oTable = new TableInit();//新定义一个表格
    	oTable.destroy();//如果之前存在,则先毁灭
    	oTable.Init();//初始化表格
    
    	</script>
    

    (2)servlet中的写法

    request.setCharacterEncoding("UTF-8");
    String act=request.getParameter("act");
    String other=request.getParameter("other");
    IP_Dao ipd=new IP_Dao();//数据库的一个类,在此我写了一个查询功能
    if(act.equals("loadData")) {
    			response.setContentType("text/json; charset=utf-8");
    			PrintWriter out = response.getWriter();
    			JSONArray jsonarray = new JSONArray();  
    			try {
    			ipd.IP_CreateTable(mIP);
    		} catch (SQLException e1) {
    			// TODO 自动生成的 catch 块
    			e1.printStackTrace();
    		}
    
    			//获取全部的IP信息
    			Result result=ipd.SelectAll(mIP);
    
    	        for(int i=0;i<result.getRowCount();i++) {
    				Map rst=result.getRows()[i];
    				JSONObject jsonobj = new JSONObject();
    				jsonobj.put("序号", rst.get("序号"));  
    				jsonobj.put("类型", rst.get("类型"));  
    				jsonobj.put("品牌", rst.get("品牌"));
    				jsonobj.put("操作系统", rst.get("操作系统"));  
    				jsonobj.put("IP地址", rst.get("IP地址"));
    				jsonobj.put("MAC地址", rst.get("MAC地址"));  
    				jsonobj.put("责任单位", rst.get("责任单位"));
    				jsonobj.put("责任人", rst.get("责任人"));  
    				jsonobj.put("用户名", rst.get("用户名"));
    				jsonobj.put("密码", rst.get("密码"));  
    				jsonobj.put("接入地点", rst.get("接入地点"));
    				jsonobj.put("最后修改时间", rst.get("最后修改时间"));  
    				jsonobj.put("是否分配", rst.get("是否分配"));
    				jsonobj.put("备注", rst.get("备注"));  
    
    				jsonarray.add(jsonobj);
    			}
    			int length = jsonarray.size();
    			
    			JSONObject jsonobj1 = new JSONObject();
    			jsonobj1.put("total", length);
    			jsonobj1.put("rows", jsonarray);
    			out = response.getWriter();
    			out.println(jsonobj1);
    		}
    
    展开全文
  • 效果图如下: 目录结构如下: *简介: 使用全局静态数组模拟用户数据 使用ajax操作数据 使用servlet操作 代码地址:BootStrap-Ajax

    效果图如下:
    这里写图片描述

    目录结构如下:
    这里写图片描述

    简介:

    1. 使用全局静态数组模拟用户数据
    2. 使用ajax操作数据
    3. 使用servlet操作

    地址: 码云地址

    展开全文
  • bootstrapTable 之 重复使用 Java【JDK 1.6.0_13】 web.xml <servlet> <servlet-name>NoticeSelect</servlet-name> <servlet-class>NoticeSelect</servlet-class> .....

    bootstrapTable 之 重复使用

     

    Java【JDK 1.6.0_13】

     

    web.xml

      <servlet>
        <servlet-name>NoticeSelect</servlet-name>
        <servlet-class>NoticeSelect</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>NoticeSelect</servlet-name>
        <url-pattern>/NoticeSelect</url-pattern>
      </servlet-mapping>

    entity

    public class Mynotice {
        /*编号,标题,内容*/
        private String noId,notitle,nocontent;
    
        @Override
        public String toString() {
            return "Mynotice [noId=" + noId + ", nocontent=" + nocontent
                    + ", notitle=" + notitle + "]";
        }
    
        public Mynotice() {
            super();
        }
    
        public Mynotice(String noId, String notitle, String nocontent) {
            super();
            this.noId = noId;
            this.notitle = notitle;
            this.nocontent = nocontent;
        }
    
        public String getNoId() {
            return noId;
        }
        public String getNotitle() {
            return notitle;
        }
            public String getNocontent() {
            return nocontent;
        }
        public void setNotitle(String notitle) {
            this.notitle = notitle;
        }
            public void setNoId(String noId) {
            this.noId = noId;
        }
        public void setNocontent(String nocontent) {
            this.nocontent = nocontent;
        }
    }

    servlet:

    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    //gson包
    import com.google.gson.GsonBuilder;
    
    //实体类
    import Mynotice;
    //操作数据库的类
    import ConDao;
    
    
    @SuppressWarnings("serial")
    public class NoticeSelect extends HttpServlet {
    
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse res)
                throws ServletException, IOException {
            //查出所有数据  返回道 List 集合中  由于ConDao类中的SelectAll方法使用了反射  以至于  all 无需使用泛型 
            List all = new ConDao().SelectAll(null,Mynotice.class);
            //设置为Json类型输出
            res.setContentType("text/json;charset=utf-8");
            //将   all 数组    以  json 形式  out
            String json = new GsonBuilder().setDateFormat("yyyy-MM-dd").create().toJson(all);
            PrintWriter out = res.getWriter();
            out.println(json);
            System.out.println(json);
            out.flush();
            out.close();
        }
    }

     

     

    Html:

     

     

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
         <title> bootstrapTable </title>
    <!-- 必要css包 -->    <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head> <body> <table class="table table-striped table-hover" id="NoticeTable"> </table> <input type="button" value="清空" onclick="dele()"/> <input type="button" value="加载" onclick="NoticeSele()"/>

    <!-- 必要js包 --> <script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.js"></script> <script src="js/bootstrap-table-zh-CN.js"></script> <script> function NoticeSele(){ $("#NoticeTable").bootstrapTable('destroy'); //用于将table销毁,如果不用【则会保留上次加载的内容】 $("#NoticeTable").bootstrapTable({ url:"NoticeSelect", method:"get", columns:[ {title:"公告标题",field:"notitle"}, {title:"操作",field:"", formatter:function(value,row,index){return "<a href=\"JavaScript:NoticeSeID('"+row["noId"]+"')\">查看</a>";} } ] }) } function NoticeSeID(id){ alert(id); } function dele(){ $("#NoticeTable").html(""); } </script> </body>

     

    
    

    自行参考 必要文件,自行百度搜索下载


    官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

    转载于:https://www.cnblogs.com/huishaoKH/p/9833898.html

    展开全文
  • 这是不使用注解的情况下完成的分页功能,换言之就是没有使用任何框架。 首先,创建一个分页的工具类: package zz.winterWork.domain; import java.util.List; /** * @author Administrator 分页 * @param <T...

    这是不使用注解的情况下完成的分页功能,换言之就是没有使用任何框架。
    首先,创建一个分页的工具类:

    package zz.winterWork.domain;
    
    import java.util.List;
    
    /**
     * @author Administrator 分页
     * @param <T>
     */
    public class PageBean<T> {
    	private int currentPage = 1; // 当前页, 默认显示第一页
    	private int pageCount = 4; // 每页显示的行数(查询返回的行数), 默认每页显示4行
    	private int totalCount; // 总记录数
    	private int totalPage; // 总页数 = 总记录数 / 每页显示的行数 (+ 1)
    	private List<T> pageData; // 分页查询到的数据
    
    	// 返回总页数
    	public int getTotalPage() {
    		if (totalCount % pageCount == 0) {
    			totalPage = totalCount / pageCount;
    		} else {
    			totalPage = totalCount / pageCount + 1;
    		}
    		return totalPage;
    	}
    
    	public void setTotalPage(int totalPage) {
    		this.totalPage = totalPage;
    	}
    
    	public int getCurrentPage() {
    		return currentPage;
    	}
    
    	public void setCurrentPage(int currentPage) {
    		this.currentPage = currentPage;
    	}
    
    	public int getPageCount() {
    		return pageCount;
    	}
    
    	public void setPageCount(int pageCount) {
    		this.pageCount = pageCount;
    	}
    
    	public int getTotalCount() {
    		return totalCount;
    	}
    
    	public void setTotalCount(int totalCount) {
    		this.totalCount = totalCount;
    	}
    
    	public List<T> getPageData() {
    		return pageData;
    	}
    
    	public void setPageData(List<T> pageData) {
    		this.pageData = pageData;
    	}
    }
    
    

    这里以employee为例:
    先创建一个实体类:

    package zz.winterWork.domain;
    
    import java.util.Date;
    
    public class Employee {
    	private Long id;
    	private String eName;
    	private Integer age;
    	private Integer sex;
    	private Long phone;
    	private String email;
    	private Date inDate;
    
    	public String getdName() {
    		return dName;
    	}
    
    	public void setdName(String dName) {
    		this.dName = dName;
    	}
    
    	private Integer deptId;
    	private String dName;
    
    	public Long getId() {
    		return id;
    	}
    
    	public void setId(Long id) {
    		this.id = id;
    	}
    
    	public String geteName() {
    		return eName;
    	}
    
    	public void seteName(String eName) {
    		this.eName = eName;
    	}
    
    	public Integer getAge() {
    		return age;
    	}
    
    	public void setAge(Integer age) {
    		this.age = age;
    	}
    
    	public Integer getSex() {
    		return sex;
    	}
    
    	public void setSex(Integer sex) {
    		this.sex = sex;
    	}
    
    	public Long getPhone() {
    		return phone;
    	}
    
    	public void setPhone(Long phone) {
    		this.phone = phone;
    	}
    
    	public String getEmail() {
    		return email;
    	}
    
    	public void setEmail(String email) {
    		this.email = email;
    	}
    
    
    	public Integer getDeptId() {
    		return deptId;
    	}
    
    	public void setDeptId(Integer deptId) {
    		this.deptId = deptId;
    	}
    
    	@Override
    	public String toString() {
    		return "[id=" + id + ", eName=" + eName + ", age=" + age + ", sex=" + sex + ", phone=" + phone + ", email="
    				+ email + ", date=" + inDate + ", deptId=" + deptId + "]";
    	}
    
    	public Date getInDate() {
    		return inDate;
    	}
    
    	public void setInDate(Date inDate) {
    		this.inDate = inDate;
    	}
    }
    
    

    然后创建dao层方法:

    package zz.winterWork.Dao;
    
    import java.util.List;
    
    import zz.winterWork.domain.Employee;
    import zz.winterWork.domain.PageBean;
    
    /**
     * @author Administrator
     *	员工表
     */
    public interface EmpDao {
    	/*增加员工*/
    	void addEmp(Employee emp);
    	/*显示所有员工信息*/
    	List<Employee> serachAll();
    	/*显示所有员工信息*/
    	void serachSome(String str,PageBean<Employee> pb);
    	/*获取分页数据*/
    	void getAll(PageBean<Employee> pb);
    	/*数据总行数*/
    	int getTotalCount();
    	/*修改员工信息*/
    	void editEmp(Employee emp);
    	/*根据ID查询员工信息*/
    	Employee serachById(Long id);
    	/*删除员工*/
    	void delete(Long id);
    }
    
    

    dao层方法实现:

    package zz.winterWork.DaoImp;
    
    import java.util.List;
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.BeanHandler;
    import org.apache.commons.dbutils.handlers.BeanListHandler;
    import org.apache.commons.dbutils.handlers.ScalarHandler;
    
    import zz.winterWork.Dao.EmpDao;
    import zz.winterWork.domain.Employee;
    import zz.winterWork.domain.PageBean;
    import zz.winterWork.util.DbcpUtils;
    
    public class EmpDaoImp implements EmpDao {
    
    	private QueryRunner qr = new QueryRunner(DbcpUtils.getDataSource());
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#addEmp(zz.winterWork.domain.Employee) 添加员工
    	 */
    	@Override
    	public void addEmp(Employee emp) {
    		String sql = "insert into q_emp(eName,age,sex,phone,email,inDate,deptId) values(?,?,?,?,?,?,?)";
    		try {
    			qr.update(sql, emp.geteName(), emp.getAge(), emp.getSex(), emp.getPhone(), emp.getEmail(), emp.getInDate(),
    					emp.getDeptId());
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#serachAll() 查询所有员工
    	 */
    	@Override
    	public List<Employee> serachAll() {
    		String sql = "select e.*,d.dName from q_emp e,q_dept d where e.deptId=d.deptId order by e.id desc";
    		try {
    			return qr.query(sql, new BeanListHandler<Employee>(Employee.class));
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    		return null;
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#editEmp(zz.winterWork.domain.Employee)
    	 * 修改员工信息
    	 */
    	@Override
    	public void editEmp(Employee emp) {
    		String sql = "update q_emp set eName=?,age=?,sex=?,phone=?,email=?,inDate=?,deptId=? where id=?";
    		try {
    			qr.update(sql, emp.geteName(), emp.getAge(), emp.getSex(), emp.getPhone(), emp.getEmail(), emp.getInDate(),
    					emp.getDeptId(), emp.getId());
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#serachById(java.lang.Long) 根据ID定位员工
    	 */
    	@Override
    	public Employee serachById(Long id) {
    		String sql = "select * from q_emp where id=?";
    		try {
    			return qr.query(sql, new BeanHandler<Employee>(Employee.class), id);
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    		return null;
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#delete(java.lang.Long) 根据ID删除员工
    	 */
    	@Override
    	public void delete(Long id) {
    		String sql = "delete from q_emp where id=?";
    		try {
    			qr.execute(sql, id);
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    	}
    
    	@Override
    	public void serachSome(String str,PageBean<Employee> pb) {
    		String str2 = str.replace("*", "count(*)");
    		try {
    			// 执行查询, 返回结果的第一行的第一列
    			Long c2 = qr.query(str2, new ScalarHandler<Long>());
    			int vae = c2.intValue();
    			pb.setTotalCount(vae);
    			
    			// 判断
    			if (pb.getCurrentPage() <= 0) {
    				pb.setCurrentPage(1); // 把当前页设置为1
    			} else if (pb.getCurrentPage() > pb.getTotalPage()) {
    				pb.setCurrentPage(pb.getTotalPage()); // 把当前页设置为最大页数
    			}
    
    			// 1. 获取当前页: 计算查询的起始行、返回的行数
    			int currentPage = pb.getCurrentPage();
    			int index = (currentPage - 1) * pb.getPageCount(); // 查询的起始行
    			int count = pb.getPageCount(); // 查询返回的行数
    			// 3. 分页查询数据; 把查询到的数据设置到pb对象中
    			str +=" order by id desc limit ?,?";
    			List<Employee> some = qr.query(str, new BeanListHandler<Employee>(Employee.class), index, count);
    			// 设置到pb对象中
    			pb.setPageData(some);
    		} catch (Exception e) {
    			// TODO: handle exception
    		}
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#getAll(zz.winterWork.domain.PageBean) 获取总页数
    	 */
    	@Override
    	public void getAll(PageBean<Employee> pb) {
    		// 2. 查询总记录数; 设置到pb对象中
    		int totalCount = this.getTotalCount();
    		pb.setTotalCount(totalCount);
    		/*
    		 * 问题: jsp页面,如果当前页为首页,再点击上一页报错! 如果当前页为末页,再点下一页显示有问题!
    		 *  解决: 1. 如果当前页 <= 0, 当前页设置当前页为1; 
    		 *  2. 如果当前页 > 最大页数; 当前页设置为最大页数
    		 */
    		// 判断
    		if (pb.getCurrentPage() <= 0) {
    			pb.setCurrentPage(1); // 把当前页设置为1
    		} else if (pb.getCurrentPage() > pb.getTotalPage()) {
    			pb.setCurrentPage(pb.getTotalPage()); // 把当前页设置为最大页数
    		}
    
    		// 1. 获取当前页: 计算查询的起始行、返回的行数
    		int currentPage = pb.getCurrentPage();
    		int index = (currentPage - 1) * pb.getPageCount(); // 查询的起始行
    		int count = pb.getPageCount(); // 查询返回的行数
    		// 3. 分页查询数据; 把查询到的数据设置到pb对象中
    		String sql = "select e.*,d.dName from q_emp e,q_dept d where e.deptId=d.deptId order by e.id desc limit ?,?";
    
    		try {
    			// 根据当前页,查询当前页数据(一页数据)
    			List<Employee> pageData = qr.query(sql, new BeanListHandler<Employee>(Employee.class), index, count);
    			// 设置到pb对象中
    			pb.setPageData(pageData);
    		} catch (Exception e) {
    			throw new RuntimeException(e);
    		}
    
    	}
    
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see zz.winterWork.Dao.EmpDao#getTotalCount() 获取总数据的行数
    	 */
    	@Override
    	public int getTotalCount() {
    		String sql = "select count(*) from q_emp";
    		try {
    			// 执行查询, 返回结果的第一行的第一列
    			Long count = qr.query(sql, new ScalarHandler<Long>());
    			return count.intValue();
    		} catch (Exception e) {
    			throw new RuntimeException(e);
    		}
    	}
    }
    
    

    controller控制层代码:

    package zz.winterWork.controller;
    
    import java.io.IOException;
    import java.util.Arrays;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import cn.itsource.annotation.Controller;
    import cn.itsource.annotation.RequestMapping;
    import zz.winterWork.Dao.AdminDao;
    import zz.winterWork.Dao.DeptDao;
    import zz.winterWork.Dao.EmpDao;
    import zz.winterWork.DaoImp.AdminDaoImp;
    import zz.winterWork.DaoImp.DeptDaoImp;
    import zz.winterWork.DaoImp.EmpDaoImp;
    import zz.winterWork.domain.Admin;
    import zz.winterWork.domain.Dept;
    import zz.winterWork.domain.Employee;
    import zz.winterWork.domain.PageBean;
    import zz.winterWork.util.MyBeanUtils;
    import zz.winterWork.util.UpLoadUtils;
    
    @Controller("/login")
    public class Controller2 {
    
    	/* 创建引用对象 */
    	private AdminDao adD = new AdminDaoImp();
    	private DeptDao dD = new DeptDaoImp();
    	private EmpDao eD = new EmpDaoImp();
    	private EmpDao emp = new EmpDaoImp();
    	// 跳转资源
    	private String uri;
    	
    	/*
    	 * (non-Javadoc)
    	 * 
    	 * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.
    	 * HttpServletRequest, javax.servlet.http.HttpServletResponse) 跳转页面,显示所有员工
    	 */
    	@RequestMapping("doGet.do")
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		try {
    			// 1. 获取“当前页”参数; (第一次访问当前页为null)
    			String currPage = request.getParameter("currentPage");
    			// 判断
    			if (currPage == null || "".equals(currPage.trim())) {
    				currPage = "1"; // 第一次访问,设置当前页为1;
    			}
    			// 转换
    			int currentPage = Integer.parseInt(currPage);
    			// 2. 创建PageBean对象,设置当前页参数; 传入service方法参数
    			PageBean<Employee> pageBean = new PageBean<Employee>();
    			pageBean.setCurrentPage(currentPage);
    
    			// 3. 调用service
    			emp.getAll(pageBean); // 【pageBean已经被dao填充了数据】
    
    			// 4. 保存pageBean对象,到request域中
    			request.setAttribute("pageBean", pageBean);
    			// 5. 跳转
    			uri = "/employee.jsp";
    		} catch (Exception e) {
    			e.printStackTrace(); // 测试使用
    			// 出现错误,跳转到错误页面;给用户友好提示
    			uri = "/error.jsp";
    		}
    		request.getRequestDispatcher(uri).forward(request, response);
    
    	}
    
    	@RequestMapping("doPost.do")
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		this.doGet(request, response);
    	}
    }
    
    

    前端分页代码:

    <!-- 分页 -->
    					<ul class="pagination" style="margin-left: 210px;">
    						<li><a>当前${requestScope.pageBean.currentPage }/${requestScope.pageBean.totalPage }页
    						</a></li>
    						<li><a
    							href="${pageContext.request.contextPath }/login/doGet.do?currentPage=${requestScope.pageBean.currentPage-1}">&laquo;</a></li>
    						<li><a
    							href="${pageContext.request.contextPath }/login/doGet.do?currentPage=1">首页</a></li>
    						<li><a
    							href="${pageContext.request.contextPath }/login/doGet.do?currentPage=${requestScope.pageBean.totalPage}">末页</a></li>
    						<li><a
    							href="${pageContext.request.contextPath }/login/doGet.do?currentPage=${requestScope.pageBean.currentPage+1}">&raquo;</a>
    						</li>
    						<li>
    							<div style="padding: 0px 340px;">
    								<form class="bs-example bs-example-form" role="form">
    									<div class="row">
    										<div class="col-lg-6">
    											<div class="input-group">
    												<input type="text" id="page" placeholder="页数" class="form-control"> <span
    													class="input-group-btn">
    													<button class="btn btn-primary" "getPage();" type="button">Go!
    													</button>
    												</span>
    											</div>
    											<!-- /input-group -->
    										</div>
    										<!-- /.col-lg-6 -->
    									</div>
    									<!-- /.row -->
    								</form>
    							</div>
    						</li>
    					</ul>
    

    跳页的JS代码:

    function getPage() {
    		var page = document.getElementById('page').value;
    		if (page<=0) {
    			alert("请正确输入页码数!!");
    		} else {
    			location.href = "/ojbk/login/doGet.do?currentPage=" + page;
    		}
    	}
    
    展开全文
  • 本系列课程主要讲述如何利用Servlet3.0+JDBC+Bootstrap+MYSQL+Ajax+构建企业级应用解决方案,主要分为两部分完成第一部分:设计部分,通过需求分析,设计物理模型,画出原型界面(HTML)第二部分:编码部分,具体实现...
  • 用jquary-ajax实现jsp从servlet中读取数据 实现通过日期查询数据库 需要的可以下载,含项目文件和数据库sql文件 链接:https://pan.baidu.com/s/1AHrqXPFvCvFYdEeTE-WJFA 提取码:k92k 项目截图: 登陆注册界面 ...
  • 1.缘起 刚刚接触一点JavaWeb,会一点Servlet和JSP,所以想写点东西,巩固一下...2. 使用的技术 前端:HTML+CSS+Bootstrap 后台:JSP+Servlet 数据库:MySQL(JDBC) 3.实现的功能以及截图 Bootstrap实现具有轮播背...
  • 使用到的容器及框架有Servlet3.0+Boostrap3.3.7+Jquery2.2+Ajax。只有基础用例CRUD。
  • 前端: HTML+CSS+Jquery+Bootstrap,后端: JSP+Servlet3.0+C3P0;压缩包包括员工管理系统源代码和数据库SQL,原型设计、数据库建模、相关知识点的学习资源
  • 本文记录了如何使用bootstrap-fileinput插件和servlet实现一个炫酷的文件上传功能。
  • 在本教程,我们将检查Ajax文件上传如何与Servlet一起使用。 同样,我们将用Bootstrap装饰表单并通过jQuery Ajax上传ajaxify文件。 实作 基本的servlet实现是相同的。 因此,我们需要做的第一件事是更新我们的...
  • 最近在做一个比较大的项目,用了bootstrap-table这个插件来处理表格,方便很多。但是在分页的时候,不知道前端jsp界面和后端servlet分别怎么写。后端是不是只要传递json给前端就可以,前端分页怎么发送请求到后端?...
  • bootstrap-switch真TM的满满都是槽点,坑之多,全网吐槽。 首先是,只有第一行能够显示标图的问题。...然后,碰到了第三个问题,bootstrap-table当数据分页时,翻页以后,bootstrap-switch的效果...
  • 本案例针对bootstrap中table的使用方法,通过ajax远程调用服务器实现table的显示、分页、查询。
  • 在html中使用bootstrap时引入bootstrap文件均可以在网页中正常显示,但是在jsp中使用bootstrap的时候,F12控制台总是报错net::ERR_ABORTED。最后通过百度发现,是因为在springmvc的xml文件中没有设置加载静态资源。...
  • 做界面,因为老板要求要漂亮些,于是使用了冷藏的bootstrap(IE6兼容性不好,之前老板不让用),应用bootstrap-fileinput的插件做文档上传,但是原有框架使用servlet的文件上传方式,不符合bootstrap-fileinput的...
  • 1.基础搭建使用到的容器及框架有Servlet3.0+Boostrap3.3.7+Jquery2.2+Ajax2.用例CRUD(增删改)3.可学习点a.JDBC操作数据库b.Servlet与前台Jsp页面的交互c.servlet dopost doget参数乱码处理4.项目截图若查询时有...
1 2 3 4 5 ... 20
收藏数 22,644
精华内容 9,057