其樂後臺管理系統(四)--門店管理模塊
前言：在此以前，咱們講解了-----本項目(Spring+SpringMVC+Mybatis)三大框架的整合及測試 ,對三大框架的整合有了一今天定的瞭解，那麼今天給你們講的是門店管理模塊的實現，主要之前後端兩個模塊進行講解，如若其中你有什麼問題，能夠留言告知！javascript
| 其樂蛋糕店後臺管理系統 | 地址 |
|---|---|
| Github--其樂後臺管理系統源碼 | https://github.com/XINGGou/qile |
| 其樂後臺管理系統(一)--項目介紹 | http://www.javashuo.com/article/p-gbpajmha-dd.html |
| 其樂後臺管理系統(二)--整合三大框架(spring+springmvc+mybatis) | http://www.javashuo.com/article/p-nzkhhnxu-dp.html |
| 其樂後臺管理系統(三)--整合mybatis框架(三大框架搭建成功) | http://www.javashuo.com/article/p-ozfmlifj-ee.html |
| 其樂後臺管理系統(四)--門店管理模塊 | http://www.javashuo.com/article/p-ragyplqr-cu.html |
| 其樂後臺管理系統(五)--訂單管理系統 | http://www.javashuo.com/article/p-oqpdbazv-en.html |
後端部分
1. 建立Door實體類，用於封裝全部的門店信息--如若以前已建立可直接跳過
package com.it.pojo;
/**
* 門店信息
*/
public class Door {
private Integer id; //門店編號
private String name; //門店名稱
private String tel; //門店電話
private String addr; //門店地址
//getter和setter方法
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
//重寫toString方法
@Override
public String toString() {
return "Door [id=" + id + ", name=" + name + ", tel=" + tel + ", addr=" + addr + "]";
}
}
2.建立Door實體類的映射文件--DoorMapper.xml(resources/mybatis/mapper)
配置內容：css
- 1.查詢全部門店信息
- 2.根據id刪除門店信息
- 3.添加門店信息
- 4.根據id查詢門店信息
- 5.根據id修改門店信息
若是你對數據庫的操做還不太熟悉，能夠經過我寫的數據庫詳解(包含數據庫的安裝/單表/多表等)進行了解。html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 門店表的映射文件 namespace值爲對應接口的全路徑 -->
<mapper namespace="com.it.mapper.DoorMapper">
<!-- 1.查詢全部門店信息，
id值爲對應接口中方法的名字
resultType指定將查詢的結果封裝到哪一個pojo對象中
-->
<select id="findAll" resultType="com.it.pojo.Door">
select * from tb_door
</select>
<!-- 2.根據id刪除門店信息 -->
<delete id="deleteById">
delete from tb_door
where id=#{id}
</delete>
<!-- 3.添加門店信息 -->
<insert id="addDoor">
insert into tb_door
values(#{id}, #{name}, #{tel}, #{addr})
</insert>
<!-- 4.根據id查詢門店信息 -->
<select id="findById"
resultType="com.it.pojo.Door">
select * from tb_door
where id=#{id}
</select>
<!-- 5.根據id修改門店信息 -->
<update id="updateById">
update tb_door set name=#{name},
tel=#{tel}, addr=#{addr}
where id=#{id}
</update>
</mapper>
3.mapper(dao)層的代碼實現
我如今所寫的這項目是專門面對與初學SSM框架的初學者的，因此SQL語句尚未嵌套或者其餘的複雜語句； 因此咱們能夠直接將其寫在mapper層中，沒有必要寫在xml文件之中。前端
這裏我給你們舉一個例子：
首先將DoorMapper.xml中的這行代碼註釋掉java
<!-- <select id="findAll" resultType="com.it.pojo.Door"> select * from tb_door </select> -->
在DoorMapper.java添加這行代碼：git
/**
* 查詢全部門店信息
*/
@Select("SELECT * FROM tb_door")
public List<Door> findAll();
這種方式和我項目中的方式所得出的結果是一致的，在個人講解中我沒有使用@Select/@Insert/...等等這些方法引用SQL語句。github
原項目中的DoorMapper.java以下：
在這裏你們也能夠用我所舉的例子同樣更改DoorMapper文件web
package com.it.mapper;
import java.util.List;
import com.it.pojo.Door;
/**
* DoorMapper 接口
* 聲明增刪改查方法，對門店信息進行操做
* @author XINGGou
*/
public interface DoorMapper {
/**
* 1.查詢全部門店信息
*/
public List<Door> findAll();
/**
* 2.根據id刪除門店信息
* @param id
*/
public void deleteById(Integer id);
/**
* 3.添加門店信息
* @param door
*/
public void addDoor(Door door);
/**
* 4.根據id查詢門店信息
* @param id
* @return
*/
public Door findById(Integer id);
/**
* 5.根據id修改門店信息
* @param door
*/
public void updateById(Door door);
}
4.service層代碼實現
1建立DoorService接口，並添加查詢全部門店信息的方法：
DoorService記住它是接口，是interface而不是classspring
package com.it.service;
import java.util.List;
import com.it.pojo.Door;
public interface DoorService {
/**
* 查詢全部門店信息
*/
public List<Door> findAll();
/**
* 2.根據id刪除門店信息
* @param id
*/
public void deleteById(Integer id);
/**
* 3.添加門店信息
* @param door
*/
public void addDoor(Door door);
/**
* 4.根據id查詢門店信息
* @param id
* @return
*/
public Door findById(Integer id);
/**
* 5.根據id修改門店信息
* @param Door
* @return
*/
public void updateById(Door door);
}
2.建立DoorService接口的實現類--DoorServiceImpl.java,實現父類接口的增刪改查方法
在這裏不少初學者都栽在了@Service和@Autowired的手中數據庫
@Service主要用於將當前的對象建立交給spring管理以及做爲service層的代碼標識
@Autowired是由Spring建立mapper對象併爲屬性賦值
package com.it.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.it.mapper.DoorMapper;
import com.it.pojo.Door;
/**
* @Service
* 做用1：將當前對象的建立交給spring管理
* 做用2：做爲業務層代碼的標識
*/
@Service
public class DoorServiceImpl implements DoorService{
@Autowired
private DoorMapper doorMapper;
@Override
public List<Door> findAll() {
//1.調用DoorMapper的findAll方法，查詢全部門店信息
List<Door> list = doorMapper.findAll();
//2.將全部門店信息的List集合返回
return list;
}
@Override
public void deleteById(Integer id) {
//根據id刪除門店信息
doorMapper.deleteById(id);
}
@Override
public void addDoor(Door door) {
//添加門店
doorMapper.addDoor(door);
}
@Override
public Door findById(Integer id) {
//根據id查詢門店信息
Door door = doorMapper.findById(id);
return door;
}
@Override
public void updateById(Door door) {
//根據id修改門店信息
doorMapper.updateById(door);
}
}
5controller層的代碼實現
1.建立DoorController類，
controller類用於與前端進行鏈接，經過@Autowired調用DoorService中的方法類實現增刪改查功能
@Controller是控制層的標誌，用於將當前的對象交給Spring管理
package com.it.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.it.pojo.Door;
import com.it.service.DoorService;
/**
* @Controller
* 做用1： 將當前對象的建立交給spring管理
* 做用2：做爲控制層代碼的標識
*/
@Controller
public class DoorController {
@Autowired //自動注入(由spring建立當前對象併爲屬性賦值)
private DoorService doorService;
/** 1.查詢全部門店信息 */
@RequestMapping("/doorList")
public String doorList(Model model){
//調用service層的findAll方法，查詢全部的門店信息
List<Door> list = doorService.findAll();
//將全部門店信息的list集合存入model中，帶到JSP顯示
model.addAttribute("list", list);
return "door_list";
}
/**
* 2.根據id刪除門店信息
*/
@RequestMapping("/doorDelete")
public String doorDelete(Integer id){
//調用deleteById方法, 根據id刪除門店
doorService.deleteById(id);
return "redirect:/doorList";
}
/** 3.添加門店信息 */
@RequestMapping("/doorAdd")
public String doorAdd(Door door){
//System.out.println(door);
//1.調用DoorService層的addDoor方法, 添加門店信息
doorService.addDoor(door);
return "redirect:/doorList";
}
/** 4.根據id修改門店信息
* 4.1.先根據id查詢當前門店的信息 */
@RequestMapping("/doorInfo")
public String doorInfo(Integer id, Model model){
//1.根據id查詢門店信息
Door door = doorService.findById(id);
System.out.println(door);
//2.將門店信息存入model中(存入request域中)
model.addAttribute("door", door);
//3.轉向door_update.jsp
return "door_update";
}
/** 4.根據id修改門店信息
* 4.1.先根據id查詢當前門店的信息
* 4.2.再根據id修改當前門店的信息 */
@RequestMapping("/doorUpdate")
public String doorUpdate(Door door){
//System.out.println(door);
//1.調用doorService的updateById方法修改門店信息
doorService.updateById(door);
//2.轉向查詢全部門店的方法
return "redirect:/doorList";
}
}
2.建立通用的頁面跳轉方法
@PathVariable 映射 URL 綁定的佔位符
URL 中的 {xxx} 佔位符能夠經過@PathVariable(「xxx「) 綁定到操做方法的入參中。
舉例：如今要訪問 /WEB-INF/pages/index.jsp頁面，按照以前的講解，咱們會在Controller中添加一個方法，例如：
@RequestMapping("/index")
public String xxx(){
return "index";
}
若是有不少這樣的jsp頁面須要咱們訪問呢？每訪問一個jsp都要在Controller中添加一個方法嗎？毫無疑問，這樣作太繁瑣了。
經過上面的觀察，咱們能夠發現，@RequestMapping("/index") 中的"/index" 和 return "index"中的"/index" 名稱是相同的，按照此規律，咱們能夠提供一個通用的頁面跳轉方法，訪問路徑中的名字是什麼，就返回/WEB-INF/pages/下的什麼JSP頁面。
所以，建立PageController類，代碼實現以下：
package com.it.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
/** 通用的頁面跳轉方法
* 例如:訪問路徑爲 "/index"，則方法最後返回的值爲："index"
* 即最終返回 /WEB-INF/pages/index.jsp
*/
@RequestMapping("/{page}")
public String page(@PathVariable String page){
return page;
}
}
前端
1. index.jsp
本項目中index.jsp是經過三個jsp拼接而成，將頁面分爲了左右上三個板塊
_top.jsp
用於顯示頭條，也就是項目名稱
<%@ page pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{background:#3C8DBC;}
h1{color:#fff;text-indent:20px;letter-spacing:5px;text-shadow:5px 5px 5px #000;}
</style>
</head>
<body>
<h1>其樂蛋糕店後臺管理系統</h1>
</body>
</html>
_left.jsp
用於顯示模塊信息，如若之後作成多模塊的項目，能夠用樹形結構顯示(tree)
<%@ page pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{ background:#222D32;margin:0px; }
.menu-bar a{ color:#fff;text-decoration:none; }
.menu-bar{ font-size:22px;border-bottom:1px solid #fff;height:40px;line-height:40px;text-indent:18px;letter-spacing:5px; }
.menu-bar:first-child{border-top:1px solid #fff;}
.menu-bar:hover{background:#797979;}
</style>
</head>
<body>
<div class="menu-bar">
<a href="doorList" target="rightFrame">› 門店管理</a>
</div>
<div class="menu-bar">
<a href="orderList" target="rightFrame">› 訂單管理</a>
</div>
</body>
</html>
_right.jsp
用於顯示模塊內容，如歡迎頁面，以後的操做頁面，皆是它
<%@ page pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{ background:#ffffff; }
#welcome{font-size:36px;color:#686868;text-align:center;text-shadow:5px 5px 5px #444;margin-top:180px;}
#qile{font-size:24px;color:#686868;text-align:right;text-shadow:5px 5px 5px #444;margin-top:240px;}
</style>
</head>
<body>
<div id="welcome">
歡迎訪問其樂蛋糕店後臺管理系統...
</div>
<div id="qile">
<a href="https://my.oschina.net/u/4115134">@其樂
</div>
</body>
</html>
最後用index.jsp對三個頁面進行拼接
<%@ page pageEncoding="utf-8"%> <!doctype html> <html> <head> <meta charset="utf-8"/> </head> <!-- frameset標籤必需要放在head和body之間 --> <frameset rows="14%,86%" frameborder="0"> <frame src="_top" /> <frameset cols="180px,*"> <frame src="_left" /> <frame src="_right" name="rightFrame"/> </frameset> </frameset> <body> </body> </html>
Door頁面
door_list.jsp
經過<c:forEach items="${ list }" var="door" varStatus="status">標籤的方式進行對數據信息賦值， 若是你對<c:foreach>標籤想要有進一步的瞭解能夠經過---->varStatus="stat"的屬性及用法
<%@ page pageEncoding="utf-8"%>
<%-- 引入JSTL標籤庫 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
<title>門店管理</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{ font-family: "微軟雅黑"; background-color: #EDEDED; }
h2{ text-align: center;}
table{ width:96%; margin: 0 auto; text-align: center; border-collapse:collapse; font-size:16px;}
td, th{ padding: 5px;}
th{ background-color: #DCDCDC; width:120px; }
th.width-40{ width: 40px; }
th.width-70{ width: 70px; }
th.width-80{ width: 80px; }
hr{ margin-bottom:20px; border:1px solid #aaa; }
#add-door{text-align:center;font-size:20px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>門店管理</h2>
<div id="add-door">
<a href="door_add" target="rightFrame">新增門店</a>
</div>
<hr/>
<table border="1">
<tr>
<th class="width-40">序號</th>
<th>門店名稱</th>
<th class="width-80">聯繫電話</th>
<th>門店地址</th>
<th class="width-80">操 做</th>
</tr>
<!-- 模版數據 -->
<c:forEach items="${ list }" var="door"
varStatus="status">
<tr>
<td>${ status.count }</td>
<td>${ door.name }</td>
<td>${ door.tel }</td>
<td>${ door.addr }</td>
<td>
<a href="doorDelete?id=${ door.id }">刪除</a>
|
<a href="doorInfo?id=${ door.id }">修改</a>
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
door_add.jsp
他是門店添加的頁面，你經過點擊door_list.jsp中的新增門店進行跳轉，door_list中如何實現的代碼以下：
<div id="add-door"> <a href="door_add" target="rightFrame">新增門店</a> </div>
door_add.jsp:
這裏使用的是post請求，去提交用戶端輸入的數據到數據庫中，好比<input type="text" name="name"/>，這標籤中name="name"，也就是賦值，將用戶端輸入的信息命名爲name提交給數據庫中Door實體類的name上面(這是個人理解，如若你有更好的理解請留言，謝謝)。
<%@ page pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>新增門店</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{ font-family: "微軟雅黑"; background-color: #EDEDED; }
h2{ text-align: center;font-size:26px; }
table{ margin: 30px auto; text-align: center; border-collapse:collapse; width:50%; }
td, th{ padding: 7px;font-size:18px;}
hr{ margin-bottom:20px; border:1px solid #aaa; }
input,select,textarea{ width:284px; height:30px; background:#EDEDED; border:1px solid #999; text-indent:5px; font-size:18px; }
input[type='submit']{ width:130px; height:36px; cursor:pointer; border-radius:5px 5px 5px 5px; background:#ddd; }
select{text-indent:0px;}
textarea{height:100px;font-size:22px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>新增門店</h2>
<hr/>
<form action="doorAdd" method="POST">
<table border="1">
<tr>
<td width="30%">門店名稱</td>
<td>
<input type="text" name="name"/>
</td>
</tr>
<tr>
<td>聯繫電話</td>
<td>
<input type="text" name="tel"/>
</td>
</tr>
<tr>
<td>門店地址</td>
<td>
<input type="text" name="addr"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提 交"/>
</td>
</tr>
</table>
</form>
</body>
</html>
door_update.jsp
看名稱就應該知道這是門店信息修改頁面。
<%@ page pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>修改門店</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{ font-family: "微軟雅黑"; background-color: #EDEDED; }
h2{ text-align: center;font-size:26px; }
table{ margin: 30px auto; text-align: center; border-collapse:collapse; width:50%; }
td, th{ padding: 7px;font-size:18px;}
hr{ margin-bottom:20px; border:1px solid #aaa; }
input,select,textarea{ width:284px; height:30px; background:#EDEDED; border:1px solid #999; text-indent:5px; font-size:18px; }
input[type='submit']{ width:130px; height:36px; cursor:pointer; border-radius:5px 5px 5px 5px; background:#ddd; }
select{text-indent:0px;}
textarea{height:100px;font-size:22px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>修改門店</h2>
<hr/>
<form action="doorUpdate" method="POST">
<!-- hidden隱藏域,在提交表單時連door.id一塊兒提交 -->
<input type="hidden" name="id" value="${ door.id }"/>
<table border="1">
<tr>
<td width="30%">門店名稱</td>
<td>
<input type="text" name="name" value="${ door.name }"/>
</td>
</tr>
<tr>
<td>聯繫電話</td>
<td>
<input type="text" name="tel" value="${ door.tel }"/>
</td>
</tr>
<tr>
<td>門店地址</td>
<td>
<input type="text" name="addr" value="${ door.addr }"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提 交" />
</td>
</tr>
</table>
</form>
</body>
</html>
行，今天的門店管理模塊就到此，麻雀雖小五臟俱全嘛，但願能對你有用，訂單模塊請稍等，goodbye！！！
相關文章
- 1. 其樂後臺管理系統(五)--訂單管理模塊
- 2. 其樂蛋糕店後臺管理系統(一)--項目介紹
- 3. 後臺管理系統-菜單管理模塊
- 4. 其樂後臺管理系統SSM(一)---簡介
- 5. SpringBoot + Vue 後臺管理系統（四）：管理頁面
- 6. RuoYi-後臺管理系統
- 7. 後臺管理系統
- 8. HTML--後臺管理系統
- 9. extjs5 後臺管理系統
- 10. SpringBoot後臺管理系統
- 更多相關文章...
- • Swarm 集羣管理 - Docker教程
- • Maven 依賴管理 - Maven教程
- • Docker 清理命令
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章