基于bootstrap实现简单用户管理功能
生活随笔
收集整理的這篇文章主要介紹了
基于bootstrap实现简单用户管理功能
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
基于bootstrap實(shí)現(xiàn)簡(jiǎn)單用戶管理功能，包括增刪改以及列表分頁(yè)展示功能。
1、web.xml配置servlet映射：
<servlet><servlet-name>UserMgServlet</servlet-name><servlet-class>com.userMgServlet</servlet-class></servlet><servlet-mapping><servlet-name>UserMgServlet</servlet-name><url-pattern>/ToUserMgServlet</url-pattern></servlet-mapping>2、userMg.jsp頁(yè)面代碼 <%@ page language="java" import="java.util.*" import="java.sql.*"import="java.io.*"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="loginjs/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="loginjs/jquery-ui"></script> <link href="loginjs/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="loginjs/bootstrap.min.js"></script> <title>用戶管理</title> </head> <script language="JavaScript"> function addClick(){ var name = window.document.userMgForm.inputName.value;var pwd= window.document.userMgForm.inputPassword.value;if(name.length == 0 || pwd.length==0) { alert("新建用戶，賬戶名或密碼不能為空！"); return false; } window.document.userMgForm.action="ToUserMgServlet"; window.document.userMgForm.submit(); } function updClick(){ var name = window.document.userMgForm.inputName.value;if(name.length == 0) { alert("修改用戶，賬戶名不能為空！"); return false; } window.document.userMgForm.action="ToUserMgServlet"; window.document.userMgForm.submit(); } function delClick(){ var name = window.document.userMgForm.inputName.value;if(name.length == 0) { alert("刪除用戶，賬戶名不能為空！"); return false; } window.document.userMgForm.action="ToUserMgServlet"; window.document.userMgForm.submit(); } </script> <% String userMgRet = (String)request.getSession().getAttribute("userMgRet"); request.getSession().removeAttribute("userMgRet"); %> <body> <div class="container-fluid"><div class="row-fluid"><div class="span12"><form class="form-horizontal" name="userMgForm" method="post"><div class="control-group"><label class="control-label" for="inputName">賬戶</label><div class="controls"><input name="inputName" type="text" /></div></div><div class="control-group"><label class="control-label" for="inputPassword">密碼</label><div class="controls"><input name="inputPassword" type="password" /></div></div><div class="control-group"><label class="control-label" for="inputType">賬戶類型</label><div class="controls"><div class="radio"> <input type="radio" name="optType" value="1" checked>管理員</div></div><div class="controls"><div class="radio"> <input type="radio" name="optType" value="0">普通用戶</div> </div> </div><div class="control-group"><label class="control-label" for="inputStatus">賬戶類型</label><div class="controls"><div class="form-group"><select class="form-control" name="selectStatus"> <option value="1">有效</option> <option value="0">無(wú)效</option> </select></div></div> </div> <div class="control-group"><div class="controls"><button type="submit" class="btn" name="btnPara" οnclick="addClick()" value="add">新增</button><button type="submit" class="btn" name="btnPara" οnclick="updClick()" value="upd">修改</button><button type="submit" class="btn" name="btnPara" οnclick="delClick()" value="del">刪除</button></div></div><%if(userMgRet != null) {%><div class="control-group"><label><%=userMgRet%></label></div><%} %></form> <table class="table table-bordered table-hover table-condensed"><thead><tr><th>賬戶</th><th>類型</th><th>狀態(tài)</th></tr></thead><%! public static final int PAGESIZE = 5; //每頁(yè)5條件記錄int iPageCount=0; int iCurPage = 1; %> <%try{Class.forName("com.mysql.jdbc.Driver"); Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname","root","123");if(con!=null){String strSql="select * from tb_sm_user";PreparedStatement stmt = con.prepareStatement(strSql,ResultSet.TYPE_FORWARD_ONLY,ResultSet.CONCUR_READ_ONLY); ResultSet rs = stmt.executeQuery(); rs.last(); int size = rs.getRow(); iPageCount = (size%PAGESIZE==0)?(size/PAGESIZE):(size/PAGESIZE+1);String strCurPage = request.getParameter("curPage"); if(strCurPage==null){ strCurPage="1"; } iCurPage = Integer.parseInt(strCurPage); if(iCurPage>=iPageCount) iCurPage = iPageCount; boolean flag = rs.absolute((iCurPage-1)*PAGESIZE+1); int count = 0; int iColor=0;while (rs.next()) {if(count>=PAGESIZE)break; String strName=rs.getString("name");int iType=rs.getInt("type");String strType="管理員";if(iType==0) strType="普通用戶";int iStatus=rs.getInt("status");String strStatus="有效";if(iType==0) strStatus="無(wú)效";count++;if(iColor==0){%><tbody><tr class="success"><td><%=strName%></td><td><%=strType%></td><td><%=strStatus%></td></tr></tbody><%iColor=iColor+1;} else if(iColor==1){%><tbody><tr class="error"><td><%=strName%></td><td><%=strType%></td><td><%=strStatus%></td></tr></tbody><%iColor=iColor+1;}else if(iColor==2){%><tbody><tr class="warning"><td><%=strName%></td><td><%=strType%></td><td><%=strStatus%></td></tr></tbody><%iColor=iColor+1;}else if(iColor==3){%><tbody><tr class="info"><td><%=strName%></td><td><%=strType%></td><td><%=strStatus%></td></tr></tbody><%iColor=0;} %> <%}}} catch (Exception e) { e.printStackTrace();}%> </table><div class="pagination pagination-centered"><ul><li><a href="userMg.jsp?curPage=<%=iCurPage-1%>">上一頁(yè)</a></li><li><a href="userMg.jsp?curPage=1">1</a></li><li><a href="userMg.jsp?curPage=2">2</a></li><li><a href="userMg.jsp?curPage=3">3</a></li><li><a href="userMg.jsp?curPage=4">4</a></li><li><a href="userMg.jsp?curPage=5">5</a></li><li><a href="userMg.jsp?curPage=<%=iCurPage+1%>">下一頁(yè)</a></li><li><a href="userMg.jsp?curPage=<%=iPageCount%>">尾頁(yè)</a></li><li>第<%=iCurPage%>頁(yè)/共<%=iPageCount%>頁(yè) </li></ul></div></div></div> </div> </body> </html>
3、userMgServlet.java代碼
package com;import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class userMgServlet*/ @WebServlet("/userMgServlet") public class userMgServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public userMgServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub String strBtn = request.getParameter("btnPara");String strName = request.getParameter("inputName"); String strPwd=request.getParameter("inputPassword");String strType=request.getParameter("optType");//1管理員，0普通用戶String strStatus=request.getParameter("selectStatus");//1有效，0無(wú)效if(strBtn!=null){try {Class.forName("com.mysql.jdbc.Driver"); Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname","root","123"); if(con!=null){Statement stmt = con.createStatement(); String strSql=null;if(strBtn.equals("add")){ //新增strSql="insert into tb_sm_user(name,password,type,status) values('"+strName+"','"+strPwd+"',"+Integer.parseInt(strType)+","+Integer.parseInt(strStatus)+")"; }else if(strBtn.equals("del")){//刪除strSql="delete from tb_sm_user where name='"+strName+"'";}else if(strBtn.equals("upd")){//修改strSql="update tb_sm_user set type="+Integer.parseInt(strType)+",status="+Integer.parseInt(strStatus)+" where name='"+strName+"'";}int iRet=stmt.executeUpdate(strSql);if(iRet==1) {request.getSession().setAttribute("userMgRet", "操作成功");request.getRequestDispatcher("userMg.jsp").forward(request, response);return;}}} catch (Exception e) { e.printStackTrace();} } request.getSession().setAttribute("userMgRet", "操作失敗");request.getRequestDispatcher("userMg.jsp").forward(request, response);return;//response.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}4、mysql數(shù)據(jù)庫(kù)tb_sm_user表定義
CREATE TABLE `tb_sm_user` ( `id`bigint not null AUTO_INCREMENT, `name` varchar(40)not null, `password` varchar(40) not null, `type` tinyint DEFAULT1,/*0普通用戶，1管理員*/ `status`tinyint DEFAULT 1,/*1有效，0無(wú)效*/ PRIMARY KEY (`id`) ) ENGINE=InnoDB ROW_FORMAT=COMPRESSED DEFAULT CHARSET=utf8;
總結(jié)
以上是生活随笔為你收集整理的基于bootstrap实现简单用户管理功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JSP关于Frameset的简单用法
- 下一篇： (转载)MyCat：开源分布式数据库中间