管理員登錄后臺以后才能操作 ，權限管理只有一個管理員, 系統的主要作用是查看所有的 “公司列表”， 并查看該公司的”產品“， 用戶可以對該公司的產品進行添加或者刪除， 添加或者刪除公司等 , 添加產品和刪除產品等功能；
主界面如下： 
添加公司產品的界面截圖：
添加公司的功能界面：
項目中就包含了兩個實體類， 偷懶的小妖精：
公司實體類：
package com.nono.Bean;public class Product { private int id; private String address; private String username; private String otherInfo; private long phone; private String productType; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getAddress() { return address; } public void setAddress(String object) { this.address = object; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getOtherInfo() { return otherInfo; } public void setOtherInfo(String otherInfo) { this.otherInfo = otherInfo; } public long getPhone() { return phone; } public void setPhone(long phone) { this.phone = phone; } public String getProductType() { return productType; } public void setProductType(String productType) { this.productType = productType; }}View Code產品類型實體類：
package com.nono.Bean;public class ProductType { private int id; private String pName; private String info; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getpName() { return pName; } public void setpName(String pName) { this.pName = pName; } public String getInfo() { return info; } public void setInfo(String info) { this.info = info; }}View Code數據庫設計了三個表， 對應了上面的兩個實體類：
/*Navicat MySQL Data TransferSource Server : localhost_3306Source Server Version : 50621Source Host : 127.0.0.1:3306Source Database : quote_Target Server Type : MYSQLTarget Server Version : 50621File Encoding : 65001Date: 2015-08-10 19:11:24*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for tb_product-- ----------------------------DROP TABLE IF EXISTS `tb_product`;CREATE TABLE `tb_product` ( `id` int(11) NOT NULL AUTO_INCREMENT, `address` varchar(30) DEFAULT '(NULL)', `username` varchar(15) DEFAULT '(NULL)', `otherInfo` varchar(30) DEFAULT '(NULL)', `phone` varchar(15) DEFAULT '(NULL)', `productType` varchar(20) NOT NULL DEFAULT '', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;-- ------------------------------ Records of tb_product-- ----------------------------INSERT INTO `tb_product` VALUES ('3', '北京海淀', 'mongo', 'mongo公司', '33333333', '9,10');INSERT INTO `tb_product` VALUES ('4', '北京五道口', 'xx', 'xx公司', '44444444', '3,4');INSERT INTO `tb_product` VALUES ('5', '北京哪里', '用戶名', '公司名', '111112223', '3,4,8');INSERT INTO `tb_product` VALUES ('9', '北京', 'chenqihao', 'www.fuhess.com', '111111', '3,4');INSERT INTO `tb_product` VALUES ('11', '立水橋', '北京', '高智商有線公司', '185855', '2');-- ------------------------------ Table structure for tb_producttype-- ----------------------------DROP TABLE IF EXISTS `tb_producttype`;CREATE TABLE `tb_producttype` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pId` int(11) NOT NULL, `pName` varchar(40) DEFAULT '(null)', `info` varchar(40) DEFAULT '(null)', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;-- ------------------------------ Records of tb_producttype-- ----------------------------INSERT INTO `tb_producttype` VALUES ('3', '3', '電腦', '就是電腦啊');INSERT INTO `tb_producttype` VALUES ('4', '4', '平板', '就是平板啊');INSERT INTO `tb_producttype` VALUES ('8', '1', '手機', '移動設備');INSERT INTO `tb_producttype` VALUES ('9', '1', 'pad', '平板啦');INSERT INTO `tb_producttype` VALUES ('10', '1', '水杯', '可以喝水的哦');-- ------------------------------ Table structure for users-- ----------------------------DROP TABLE IF EXISTS `users`;CREATE TABLE `users` ( `username` varchar(20) NOT NULL DEFAULT '', `passWord` varchar(20) DEFAULT NULL, PRIMARY KEY (`username`)) ENGINE=InnoDB DEFAULT CHARSET=gb2312 COMMENT='用戶';-- ------------------------------ Records of users-- ----------------------------INSERT INTO `users` VALUES ('nono', 'nono');View Code
后端的主要是路由和數據和業務邏輯的處理，包含登錄處理， 用戶的權限控制， 用戶POST數據和對應的返回數據等：
package com.nono.Controller;import java.io.IOException;import java.security.PublicKey;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSON;import net.sf.json.JSONSerializer;import net.sf.json.JSONString;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import com.nono.Bean.ProductType;import com.nono.Dao.productDao;import com.nono.Service.Service;import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XsiNilLoader.Array;@Controller@RequestMapping(value="custom")public class Main { @Autowired Service service; @Autowired productDao productDao; @RequestMapping( value="index", method=RequestMethod.GET) public String index( HttpServletRequest request, HttpServletResponse response) { return "../index"; } @RequestMapping( value="getList", method=RequestMethod.POST) @ResponseBody public ArrayList<Object> getCustomList(HttpServletRequest request, HttpServletResponse response) { ArrayList<Object> resultArrayList = service.getCustomList(); return resultArrayList; } @RequestMapping( value="getTypes", method=RequestMethod.POST) @ResponseBody public ArrayList<ProductType> getTypes(HttpServletRequest request, HttpServletResponse response) { String type = request.getParameter("type"); ArrayList<ProductType> resultArrayList = service.getTypes( type ); return resultArrayList; } @RequestMapping( value="getAllType", method=RequestMethod.POST) @ResponseBody public ArrayList<ProductType> getAllType(HttpServletRequest request, HttpServletResponse response) { ArrayList<ProductType> resultArrayList = service.getAllType(); return resultArrayList; } @RequestMapping( value="updateProduct", method=RequestMethod.POST) @ResponseBody public boolean updateProduct(HttpServletRequest request, HttpServletResponse response) { String id = request.getParameter("id"); String productType = request.getParameter("productType"); return productDao.updateProduct(id, productType); }; @RequestMapping( value="del", method=RequestMethod.POST) @ResponseBody public boolean delCustom(HttpServletRequest request, HttpServletResponse response) { return productDao.delCustom( request.getParameter("type") ); } @RequestMapping( value="add", method=RequestMethod.POST) @ResponseBody public boolean addCustom(HttpServletRequest request, HttpServletResponse response) { String address = request.getParameter("address"); String username = request.getParameter("username"); String otherInfo = request.getParameter("otherInfo"); Long phone = Long.parseLong( request.getParameter("phone") ); String productyType = request.getParameter("productyType") ; return productDao.addCustom( address, username , otherInfo, phone, productyType); } @RequestMapping( value="addPro", method=RequestMethod.POST) @ResponseBody public boolean addPro(HttpServletRequest request, HttpServletResponse response) { String pName = request.getParameter("pName"); String info = request.getParameter("info"); return productDao.addPro( pName, info); } @RequestMapping( value="delPro", method=RequestMethod.POST) @ResponseBody public boolean delPro(HttpServletRequest request, HttpServletResponse response) { int id = Integer.parseInt( request.getParameter("id") ); return productDao.delPro( id ); }}View Code
前端是對后臺提供的數據進行了展示， 以及和后臺的交互， 代碼也不少， 調試起來挺麻煩的：
登錄界面的HTML:
<!DOCTYPE html><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html> <head> <title>login.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="descrCSS/bootstrap.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="./js/jq.js"></script> </head> <body> <div class="container"> <div class="row"> <h2>登錄</h2> </div> <div class="row"> <form method="POST" action="login.do"> <div class="form-group"> <label for="user">user</label> <input type="text" class="form-control" id="user" name="user" placeholder="user"> </div> <div class="form-group"> <label for=Password>Password</label> <input type="password" class="form-control" id="password" name="password" placeholder="Password"> </div> <button id="login" type="sumbit" class="btn btn-success">登錄</button> </form> </div> </div> </body></html>View Code
主界面的HTML:
<!DOCTYPE html><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head> <base href="<%=basePath%>"> <title>系統主頁</title> <meta charset="utf-8"/> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="testDescription"> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="./js/jq.js"></script> <script src="./js/handlebars.js"></script> <script src="./js/bootstrap.min.js"></script> </head><style> html,body{ height:100%; } .col-md-3{ } .col-md-3 .custom{ padding:10px; border:1px solid #ddd; text-align: center; margin:10px; } .col-md-3 .custom:hover{ border:1px solid #ddd; opacity:.6; } .wrap{ border-color: #ddd; border-width: 1px; border-radius: 1px 1px 0 0; } .h{ display: none; } .s{ display: block; }</style> <body> <div class="container wrap"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"> 公司產品信息 </a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"> 用戶 </a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <!-- 用戶查詢開始; --> <div class="container "> <div class="row "> <div class="col-md-3 "> <div class="custom custom-view"> <img src="./imgs/c.png" title="客戶查看"/> </div> <div class="custom custom-query"> <img src="./imgs/cq.png" title="客戶編輯"/> </div> <div class="custom product-edit"> <img src="./imgs/oq.png" title="產品編輯"/> </div> </div> <div class="col-md-9"> <!--右側內容開始--> <div class="custom-view-body"> <br> <div class="panel panel-default"> <div class="panel-body"> 公司列表: </div> </div> <table class="table table-hover"> <thead> <tr> <td>公司名字</td> <td>公司地址</td> <td>負責人</td> <td>聯系方式</td> <td> 查看 </td> <td> 編輯產品 </td> <td> 刪除 </td> </tr> </thead> <script type="text/tpl" id="list-tpl"> {{#each list}} <tr> <td>{{this.otherInfo}}</td> <td>{{this.address}}</td> <td>{{this.username}}</td> <td>{{this.phone}}</td> <td> <button type="button" action="{{this.productType}}" class="about btn btn-primary" data-toggle="modal" data-target="#show-product"> 查看公司產品 </button> </td> <td> <button type="button" action="{{this.id}}" class="edit btn btn-primary" data-toggle="modal" data-target="#edit-custom-modal"> 編輯產品 </button> </td> <td> <button type="button" action="{{this.id}}" class="delete btn btn-danger"> 刪除 </button> </td> </tr> {{/each}} </script> <tbody id="customs"> <!-- <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td> <a href="###"> 查看公司產品 </a> </td> <td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#edit-custom-modal"> 編輯 </button> </td> <td> <a href="###"> 刪除 </a> </td> </tr> --> </tbody> </table> </div> <div class="custom-query-body h"> <div class="panel-body"> <label class="input-group"> 用戶名字 <input class="form-control" type="text" name="username" id="username"> </label> <label class="input-group"> 用戶地址 <input class="form-control" type="text" name="address" id="address"> </label> <label class="input-group"> 用戶公司 <input class="form-control" type="text" name="otherInfo" id="otherInfo"> </label> <label class="input-group"> 用戶電話 <input class="form-control" type="text" name="phone" id="phone"> </label> <label class="input-group"> 用戶產品 <select multiple="multiple" class="form-control" name="product" id="product"> <option value="pid">pName</option> <option value="pid">pName</option> <option value="pid">pName</option> <option value="pid">pName</option> </select> </label> <button class="btn btn-default" id="submit">提交</button> </div> </div> <div class="product-edit-body"> <script type="text/tpl" id="li-tpl"> {{#each list}} <li class="list-group-item"> <b>{{this.pName}}</b> <button class="pull-right btn btn-danger del-product" action="{{this.id}}">刪除該產品</button> </li> {{/each}} </script> <ul class="list-group product-edit-ul"> </ul> <button type="button" class="edit btn btn-primary" data-toggle="modal" data-target="#add-product"> 添加產品 </button> </div> <!--右側內容結束--> </div> </div> </div> <!-- 用戶查詢結束; --> </div> <div role="tabpanel" class="tab-pane" id="profile"> 管理員:${user} </div> </div> </div> <!-- Modal --> <div class="modal fade" id="edit-custom-modal" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">編輯用戶信息</h4> </div> <div class="modal-body"> <label class="input-group"> 用戶產品 <select multiple="multiple" class="form-control" name="product" id="edit-product"> <option value="pid">pName</option> <option value="pid">pName</option> <option value="pid">pName</option> <option value="pid">pName</option> </select> </label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-save">Save changes</button> </div> </div> </div> </div> <!-- Modal 模態窗查看客戶產品--> <div class="modal fade" id="show-product" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">查看產品</h4> </div> <script type="text/tpl" id="product-tpl"> {{#each list}} <p>產品名稱：{{this.pName}}</p> <p>產品描述：{{this.info}}</p> <br> {{/each}} </script> <div class="modal-body" id="show-modal-content"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal 模態窗查看客戶產品--> <div class="modal fade" id="add-product" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">添加產品</h4> </div> <div class="modal-body" id="show-modal-content"> <label class="input-group"> <input type="text" class="form-control" placeholder="產品名字" id="product-name"> </label> <label class="input-group"> <input type="text" class="form-control" placeholder="產品描述" id="product-info"> </label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-edit-save">Save changes</button> </div> </div> </div> </div> <script> var Show = function( tab ){ if( typeof tab === "string") { Show.classs&&Show.classs.push( tab ); $(tab).click(function() { for(var i=0; i< Show.classs.length; i++ ) { $(Show.classs[i]+"-body").addClass("h"); }; var el = $(tab+"-body"); el.removeClass("h"); }); }; }; Show.classs = []; new Show(".custom-view"); new Show(".custom-query"); new Show(".product-edit"); //主要列表的填充; var listTpl = Handlebars.compile( $("#list-tpl").html() ); $(".custom-view").click(function() { //通過Ajax更新內容; $.post("custom/getList.do", function(res) { $("#customs").html( listTpl({list:res}) ); }); }); var productTpl = Handlebars.compile( $("#product-tpl").html() ); //用戶點擊查看關于 $(document).delegate("button.about","click", function() { var action = $(this).attr("action"); $.post("custom/getTypes.do?"+Math.random(),{type:action},function(res) { $("#show-modal-content").html( productTpl({list:res}) ); }); }).delegate("button.delete","click", function() { var action = $(this).attr("action"); var _this = this; $.post("custom/del.do",{type:action},function(res) { if(res) { alert("刪除成功"); $(_this).closest("tr").remove(); }else{ alert("刪除失敗"); }; $(".custom-view").click(); }); }); $(".custom-query").click(function() { $.post("custom/getAllType.do", function(resp) { $("#product").html(function() { var str=""; $.each(resp,function(i, e) { str+="<option value="+e.id+">"+e.pName+"</option>"; }); return str; }); }); }); $("#submit").click(function() { var username = $("#username").val(); var address = $("#address").val(); var otherInfo = $("#otherInfo").val(); var phone = $("#phone").val(); var productyType = $("#product").val().join(","); if(!username||!address||!otherInfo||!phone||!product) { return ; }else{ $.post("custom/add.do",{username : username, address : address, otherInfo : otherInfo, phone: phone, productyType:productyType}, function(resp) { if(resp) { alert("添加成功"); }else{ alert("添加失敗"); }; $(".custom-view").click(); }); } }); $(document).delegate("button.edit", "click", function(ev) { var _this = this; window.nowEl = _this; $.post("custom/getAllType.do", function(resp) { $("#edit-product").html(function() { var str=""; $.each(resp,function(i, e) { str+="<option value="+e.id+">"+e.pName+"</option>"; }); return str; }); }); }); $(".btn-save").click(function() { if(nowEl) { var id = $(nowEl).attr("action"); $.post("custom/updateProduct.do", {id:id,productType:$("#edit-product").val().join(",")} , function ( res ) { if(res) { alert("更新成功"); }else{ alert("更新失敗"); }; $('.modal').modal('hide') }); }; }); var liTpl = Handlebars.compile( $("#li-tpl").html() );
新聞熱點
疑難解答
