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

原创

不会飞的小鸟

修改于 2020-03-23 10:44:52

7460

修改于 2020-03-23 10:44:52

前言：在此之前，我们讲解了-----本项目(Spring+SpringMVC+Mybatis)三大框架的整合及测试 ,对三大框架的整合有了一今天定的了解，那么今天给大家讲的是门店管理模块的实现，主要以前后端两个模块进行讲解，如若其中你有什么问题，可以留言告知！

后端部分

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(www.baishiyl2zc.cn ) {
		return tel;
	}
	public void setTel(String tel) {
		this.tel =www.xingchenylzc.cn tel;
	}
	public String getAddr( www.huiyinpp3zc.cn) {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	//重写toString方法
	@Override
	public String toString(www.yinmao2zhuce.cn) {
		return "Door [id=" + id + ", name=" + name + ", tel=" + tel + ", addr=" + addr + "]";
	}
}

2.创建Door实体类的映射文件--DoorMapper.xml(resources/mybatis/mapper)

配置内容：

1.查询所有门店信息
2.根据id删除门店信息
3.添加门店信息
4.根据id查询门店信息
5.根据id修改门店信息

如果你对数据库的操作还不太熟悉，可以通过我写的数据库详解(包含数据库的安装/单表/多表等)进行了解。

<?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中的这行代码注释掉

	<!-- <select id="findAll" resultType="com.it.pojo.Door">
		select * from tb_door
	</select> -->

在DoorMapper.java添加这行代码：

/**
	 * 查询所有门店信息
	 */
	@Select("SELECT * FROM tb_door"www.shentuylgw.cn)
	public List<Door> findAll(www.sangyulpt.com);

这种方式和我项目中的方式所得出的结果是一致的，在我的讲解中我没有使用@Select/@Insert/...等等这些方法引用SQL语句。

原项目中的DoorMapper.java如下：

在这里大家也可以用我所举的例子一样更改DoorMapper文件

package com.it.mapper;

import java.util.List;
import com.it.pojo.Door;

/**
 * DoorMapper 接口
 * 声明增删改查方法，对门店信息进行操作
 * @author XINGGou
 */
public interface DoorMapper  www.yixingylzc.cn {

	/**
	 * 1.查询所有门店信息
	 */
	public List<Door> findAll(www.tianjiptzc.cn);
	
	/**
	 * 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 www.shengyunyule.cn);
	
	/**
	 * 5.根据id修改门店信息
	 * @param door
	 */
	public void updateById(Door www.tdcqpt.cn door);

}

4.service层代码实现

1创建DoorService接口，并添加查询所有门店信息的方法：

DoorService记住它是接口，是interface而不是class

package com.it.service;

import java.util.List;
import com.it.pojo.Door;

public interface DoorService {

	/**
	 * 查询所有门店信息
	 */
	public List<Door> findAll(www.lecaixuanzc.cn);
	
	/**
	 * 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！！！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring