其乐后台管理系统(四)--门店管理模块

时间  2020-03-27
标签 其乐 后台 管理 系统 门店 模块 繁體版
原文   原文链接

前言：在此以前，咱们讲解了-----本项目(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！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程