後臺商品管理功能實現
阿新 • • 發佈：2018-03-15
option lan listener -type htm rod 類名 spl else
1 課前知識回顧
1.1 監聽器的方式
1.1.1 配置文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="jt-manage" version="2.5"> <display-name>jt-manage</display-name> <!--配置監聽器啟動spring容器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:/spring/applicationContext*.xml</param-value> </context-param> <!—及時配置了springMVC容器的配置文件.程序也能照常執行--> <!--1.配置前端控制器 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--配置加載SpringMVC.xml --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:/spring/springmvc.xml</param-value> </init-param> </servlet> <!-- / 規定 1.表示攔截 全部的請求 2.攔截所有靜態資源js/css/image 後期配置放行 3.放行.jsp資源 --> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!--配置全站亂碼解決 POST亂碼 --> <filter> <filter-name>characterEncoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <!--定義默認字符集utf-8 --> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
1.1.2 圖例
說明:如果通過監聽器的方式,即使加載了springMVC的配置文件.SpringMVC的容器是不認的,只有通過前端控制器調用時,才會加載啟動springMVC容器。這時會創建另外一個controller將原有的Controller覆蓋。達到使用的目的。
1.1.3 框架調用邏輯圖
2 EasyUI
2.3 EasyUI入門案例
2.3.1 靜態資源放行
說明:在配置文件中添加標簽.放行靜態資源文件
2.3.2 引入js工具
<!--引入jquery的js，EasyUI的執行需要依賴於jQuery --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <!--easyUI的js主文件 --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <!--國際化的js文件 --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <!--引入easyUI的樣式 --> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
2.3.3 文件的拖動
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-拖動</title> <!--引入jquery的js，EasyUI的執行需要依賴於jQuery --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <!--easyUI的js主文件 --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <!--國際化的js文件 --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <!--引入easyUI的樣式 --> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <style type="text/css"> div { height: 200px; width: 200px; background: green; border: 10px solid #abcdef; } </style> </head> <body> <div class="easyui-draggable">拖動DIV</div> <div>測試div</div> </body> </html>
2.3.4 進度條
<script type="text/javascript"> $(function(){ $("#b").click(function(){ onload(); }) /*采用遞歸的方法實現進度條刷新 */ var i = 0; function onload(){ $(‘#p‘).progressbar({ value:i++}); if(i<=100){ /*多久執行一次方法 */ setTimeout(function(){ onload(); },2) } } }) </script> </head> <body> <div id="p" class="easyui-progressbar" style="width:400px;"></div> <input id="b" type="button" value="加載"/> </body> </html>
2.3.5 頁面布局
<%@ page language="java" 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="/css/jt.css" /> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> </head> <body class="easyui-layout"> <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div> <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div> <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div> </div> </body>
說明:將頁面分為為5個部分.上/右/下/左
2.3.6 選項卡技術
<body class="easyui-layout"> <div data-options="region:‘west‘,title:‘菜單‘,split:true" style="width:10%;"> <!--一級菜單 --> <ul class="easyui-tree"> <li> <span>商品管理</span> <!--二級菜單 --> <ul> <li><a onclick="addTab(‘商品新增BBBB‘,‘/item-add‘)">商品新增AAAAA</a></li> <li><a onclick="addTab(‘商品查詢‘,‘/item-list‘)">商品查詢</a></li> <li><a onclick="addTab(‘商品更新‘,‘/item-update‘)">商品更新</a></li> </ul> </li> <li> <span>網站內容管理</span> <ul> <li>內容新增</li> <li>內容修改</li> </ul> </li> </ul> </div> <div id="tt" class="easyui-tabs" data-options="region:‘center‘,title:‘首頁‘"></div> </body> <script type="text/javascript"> function addTab(title, url){ if ($(‘#tt‘).tabs(‘exists‘, title)){ $(‘#tt‘).tabs(‘select‘, title); } else { var content = ‘<iframe scrolling="auto" frameborder="0" src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘; $(‘#tt‘).tabs(‘add‘,{ title:title, content:content, closable:true }); } } </script>
頁面效果:
3 後臺商品查詢
3.1 頁面通用跳轉
3.1.1 RestFul結構實現頁面跳轉
//跳轉到商品的新增頁面 /page/item-add /** * 問題:如果index頁面中需要跳轉多個頁面, * 則需要編輯多個Controller方法用來.處理請求. * 要求:采用一個方法.實現頁面的通用跳轉 * 辦法:采用restFul結構實現頁面通用跳轉 * * 回顧: * get方法: localhost:8091/addUser?id=1&name=tom.... * restFel: localhost:8091/addUser/1/tom * * 解決辦法: * localhost:8091/page/item-add * @PathVariable 的作用:可以將{module}的數據,傳值交給參數列表 * 中的module.要求名稱必須一致. * * 總結: * 1.restFul結構參數用{}包裹 * 2.參數與參數之間用"/"分割 * 3.接收參數和變量應該一致 * 4.使用@PathVariable 實現數據傳參 * @return */ @RequestMapping("/page/{module}") public String toItemAdd(@PathVariable String module){ return module; }
3.2 安裝PD軟件
3.2.1 安裝pd文件
說明:選擇地址hongkong,之後一路下一步安裝
3.2.2 破解並且漢化
說明:將可課前資料中的破解文件,復制,替換PD的根目錄的內容.全部覆蓋後重啟PD.圖示表示漢化成功!
3.2.3 PD的介紹
說明:
1.PD是現在主流的數據庫建模工具,Pd可以通過圖形化的界面展現建模.
2.可以自動的生成數據庫語句.
3.能夠根據不同的數據庫實現數據建模
3.2.4 PD數據庫選擇
3.2.5 創建表
說明:創建表時需要添加備註信息的選項.所以開啟備註信息
定義數據庫字段
3.2.6 主鍵自增設定
說明:在Mysql數據模型中,提供了數據自增的設置.勾選Identity即可
3.2.7 根據PD模型創建表
說明將PD中的sql語句復制後在SqlYog中執行
效果:
在控制臺中出現已經創建的表即可
3.2.8 關聯關系
說明:通過tb_user查詢用戶時,也可以通過user_id查詢當前用戶的外掛信息.
解決辦法:在tb_wg表中添加一個外鍵.這個外鍵是tb_user的主鍵.
自關聯畫法:
定義關聯關系:
3.3 商品信息查詢
3.3.1 創建pojo對象
3.3.2 創建Mybatis
- 新建接口文件
- 編輯映射文件
<mapper namespace="com.jt.manage.mapper.ItemMapper"> <!--說明:所有的sql語句必須小寫.否則Linux操作時,不能識別表 --> <select id="findItemAll" resultType="Item"> select * from tb_item order by updated desc </select> </mapper>
3.3.3 編輯Service
說明:根據接口文件實現商品查詢,註意對象的依賴註入
3.3.4 編輯Controller
說明:定義查詢全部數據的方法.實現數據查詢
結果:
3.4 商品展現的頁面分析
3.4.1 Item-list分析
3.4.2 編輯ItemController
說明:編輯ItemControll接收用戶請求
3.4.3 編輯Service
/** * page:當前查詢的頁數 * rows:每頁展現的行數 * 要求: * 查詢第1頁數據,每頁20條 * sql:SELECT * FROM tb_item LIMIT 0,20 * * 查詢第2頁 * sql:SELECT * FROM tb_item LIMIT 20,20 * * 查詢第3頁 * sql:SELECT * FROM tb_item LIMIT 40,20 * * 查詢第n頁 * sql:SELECT * FROM tb_item LIMIT (n-1)*rows,rows */ @Override public EasyUIResult findItemByPage(Integer page, Integer rows) { //獲取記錄總數 int total = itemMapper.findItemCount(); //計算分頁的起始位置 int begin = (page-1) * rows; List<Item> itemList = itemMapper.findItemByPage(begin,rows); return new EasyUIResult(total, itemList); }
3.4.4 定義Mybatis
編輯映射文件
<!--查詢記錄總數 -->
<select id="findItemCount" resultType="int">
select count(*) from tb_item
</select>
<!--實現分頁的查詢 -->
<select id="findItemByPage" resultType="Item">
select * from tb_item order by updated desc limit #{begin},#{rows}
</select>
3.4.5 商品價格的處理
3.5 格式化分類名稱
3.5.1 編輯格式化方法
說明:通過js定義格式化方法
3.5.2 編輯js方法
3.5.3 編輯Controller
方法一:傳統Ajax方法 /** * 1.采用傳統的Ajax實現數據的回顯 * url:/item/cat/queryItemCatName */ @RequestMapping("/cat/queryItemCatName") public void findItemCatNameById(Long itemCatId,HttpServletResponse response){ String name = itemService.findItemCatName(itemCatId); //設定字符集編碼 response.setContentType("text/html;charset=utf-8"); try { response.getWriter().write(name); } catch (IOException e) { e.printStackTrace(); } } 方法二:采用註解形式 /** * @ResponseBody的註意事項 * 1.如果使用該註解 返回的是String字符串則必須處理亂碼問題. * 原因:springMVC源碼中有如下的下發 * 1.如果返回值是對象,解析的編碼格式utf-8 * 2.如果返回值是String類型,則采用ISO-8859-1的編碼格式 * * 解決方法: * 1.將返回值封裝為對象 * 2.執行字符集 * * 總結:以後的返回值盡量使用對象封裝 * @param itemCatId * @return */ @RequestMapping(value="/cat/queryItemCatName",produces="text/html;charset=utf-8") @ResponseBody name public String findItemCatNameById(Long itemCatId){ return itemService.findItemCatName(itemCatId); }
3.5.4 編輯Service
3.5.5 編輯Mybatis
說明:根據接口文件,實現分類查詢
後臺商品管理功能實現