移动商城第一篇【搭建项目环境+数据模型】

╰+攻爆jí腚メ 2021-09-30 17:26 389阅读 0赞

# 前言 #

本次该项目使用的技术如下：

![640?wx\_fmt=png][640_wx_fmt_png] 这里写图片描述

# 搭建Oracle数据库环境 #

本次我们用Oracle作为我们的服务器，我们**一般开发并不是把数据表放在我们练习的scott用户下的**。

需要**我们自己创建用户、创建默认的表空间**

使用超级管理员账号登陆Oracle

![640?wx\_fmt=png][640_wx_fmt_png 1] 这里写图片描述

sys/change_on_install as sysdba

创建表空间

create tablespace zhongfuchenglogging   datafile 'D:\app\ozc\oradata\zhongfucheng\zhongfucheng.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent management local;  tablespace zhongfucheng
    logging   
    datafile 'D:\app\ozc\oradata\zhongfucheng\zhongfucheng.dbf'   
    size 32m   
    autoextend on   
    next 32m maxsize 2048m   
    extent management local;

![640?wx\_fmt=png][640_wx_fmt_png 2] 这里写图片描述

创建表空间并指定用户

create user zhongfucheng identified by zhong default tablespace zhongfucheng   user zhongfucheng identified by zhong default tablespace zhongfucheng

单单创建了用户是不能够使用的，我们还需要为它授权

grant connect,resource,dba to zhongfucheng;  connect,resource,dba to zhongfucheng;

我们来查看一下当前用户默认的表空间

select username,default_tablespace from user_users;from user_users;

![640?wx\_fmt=png][640_wx_fmt_png 3] 这里写图片描述

导入相关的数据：

@D:/ECPS_GUIZHOU2.sql@D:/data.sql

--------------------

# 使用Maven搭建环境 #

因为Maven有两大特点：

1.  **依赖管理**
2.  **项目构建**

依赖管理非常好用，**我们就不用拷贝对应的jar包，直接从别的项目依赖过来就行了**。

我们本次的**项目分为前台和后台**。

值得注意的是：

基于这么两个特性，那么前台系统和后台系统应该是分开的【**当前台系统访问量奔溃的时候，后台系统不会受到影响**】

由于我们前台和后台系统的某些逻辑是一致的【都要查询商品..根据商品id获取具体商品信息等等】，因此我们**需要把相同的逻辑抽取出来，多添加一个核心模块Core**

从前边也已经说了，我们如果使用到图片上传的话，也应该把该逻辑抽取出来，**因为我们在备份的时候，是备份该WEB项目的数据。如果把图片放在同一个WEB项目下，那么就非常难处理图片了。**

因此，我们也需要**把文件单独放在文件服务器上**

到目前为止的分析，我们现在有4个独立的模块了….

当我们把项目发布出去的时候，我们需要**把每个模块都要构建**

因此，我们再**用一个parent模块把它们4个管理起来！做到一次构建的效果！**

![640?wx\_fmt=png][640_wx_fmt_png 4] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 5] 这里写图片描述

## idea下构建Maven项目 ##

**创建父模块，在父模块下创建4个子模块。在Idea下直接创建Model就行了**

![640?wx\_fmt=png][640_wx_fmt_png 6] 这里写图片描述

最终在Idea创建出来的目录结构是这样子的：

![640?wx\_fmt=png][640_wx_fmt_png 7] 这里写图片描述

重置Maven的设置，使用自带的Maven

![640?wx\_fmt=png][640_wx_fmt_png 8] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 9] 这里写图片描述

## 编写pom ##

父项目将其他4个子项目管理起来

![640?wx\_fmt=png][640_wx_fmt_png 10] 这里写图片描述

portal和console对core依赖：

![640?wx\_fmt=png][640_wx_fmt_png 11] 这里写图片描述

--------------------

# 将原型页面拷贝到项目中 #

首先，我在Idea创建Maven项目的时候是没有用任何的模版的。因此，需要我们自己创建WEB功能。

http://blog.csdn.net/hon\_3y/article/details/76942530

![640?wx\_fmt=png][640_wx_fmt_png 12] 这里写图片描述

访问portal客户端的原型页面没有问题

![640?wx\_fmt=png][640_wx_fmt_png 13] 这里写图片描述

访问console页面的原型页面的时候出现了以下的错误：

![640?wx\_fmt=png][640_wx_fmt_png 14] 这里写图片描述

关注**是不是没有使用webapp来生成maven项目的模版**！

--------------------

# 页面框架解析 #

他的JSP是非常简单的，我们来看一下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/ecps/console/common/taglibs.jsp"%><head><title>商品管理</title><meta name="heading" content="商品管理"/><meta name="menu" content="ItemMgmtMenu"/></head><body id="main"><div class="frameL"><div class="menu icon">   <jsp:include page="/ecps/console/common/itemmenu.jsp"/></div></div><div class="frameR"><div class="content"></div></div></body>
    <%@ include file="/ecps/console/common/taglibs.jsp"%>
    <head>
    <title>商品管理</title>
    <meta name="heading" content="商品管理"/>
    <meta name="menu" content="ItemMgmtMenu"/>
    </head>
    <body id="main">
    
    <div class="frameL"><div class="menu icon">
       <jsp:include page="/ecps/console/common/itemmenu.jsp"/>
    </div></div>
    
    <div class="frameR"><div class="content">
    
    </div></div>
    </body>

明显地，我们看见它用了**menu icon**这么一个类来修饰，如果我们使用过bootstrap、easyui这么一类的框架的话，那么我们对这些的修饰也就不陌生了！

我们点进去它的包含JSP页面中

<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %><%@ include file="taglibs.jsp"%><head><title>商品管理</title></head><h2><samp class="t03"></samp>商品管理</h2><ul class="ul"><li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>商品录入/上下架</a></li><li><a href="${path}/shop/item/listAudit.jsp?auditStatus=0&showStatus=1"><samp class="t05"></samp>商品审核</a></li><li><a href="${base}/activity/listOfferGroup.do?showStatus=1&labelStatus=4"><samp class="t05"></samp>营销案管理</a></li><li><a href="${base}/activity/listAudit.do?auditStatus=0&labelStatus=1"><samp class="t05"></samp>营销案审核</a></li><li><a href="${base}/activity/listoffer.do"><samp class="t05"></samp>营销案档次</a></li><li><a href="${path}/shop/item/listfeature.jsp"><samp class="t05"></samp>属性管理</a></li><li><a href="${path}/shop/item/listbrand.jsp"><samp class="t05"></samp>品牌管理</a></li></ul>
    <%@ include file="taglibs.jsp"%>
    <head>
    <title>商品管理</title>
    
    </head>
    <h2><samp class="t03"></samp>商品管理</h2>
    <ul class="ul">
    <li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>商品录入/上下架</a></li>
    <li><a href="${path}/shop/item/listAudit.jsp?auditStatus=0&showStatus=1"><samp class="t05"></samp>商品审核</a></li>
    <li><a href="${base}/activity/listOfferGroup.do?showStatus=1&labelStatus=4"><samp class="t05"></samp>营销案管理</a></li>
    <li><a href="${base}/activity/listAudit.do?auditStatus=0&labelStatus=1"><samp class="t05"></samp>营销案审核</a></li>
    <li><a href="${base}/activity/listoffer.do"><samp class="t05"></samp>营销案档次</a></li>
    <li><a href="${path}/shop/item/listfeature.jsp"><samp class="t05"></samp>属性管理</a></li>
    <li><a href="${path}/shop/item/listbrand.jsp"><samp class="t05"></samp>品牌管理</a></li>
    </ul>

发现这正是我们的左边菜单栏的数据

![640?wx\_fmt=png][640_wx_fmt_png 15] 这里写图片描述

那么上边横线的菜单栏从何而来的呢？？？

我们发现项目中有好几个配置文件：

![640?wx\_fmt=png][640_wx_fmt_png 16] 这里写图片描述

菜单栏的配置文件，该配置文件在Tomcat启动的时候加载的

<?xml version="1.0" encoding="UTF-8"?><MenuConfig>    <Displayers>        <Displayer name="Velocity" type="net.sf.navigator.displayer.VelocityMenuDisplayer"/>    </Displayers>    <Menus>        <Menu name="MainMenu" title="首页" page="/shop/mainMenu.jsp" />        <Menu name="ItemMgmtMenu" title="商品管理" page="/shop/item/index.jsp" />                <Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />                        <Menu name="OrderMgmtMenu" title="订单管理" page="/shop/order/index.jsp" />        <Menu name="ValetOrderMgmtMenu" title="代客下单" page="/shop/valetorder/index.jsp" />        <Menu name="EbPtlUserMgmtMenu" title="会员管理" page="/shop/ptlUser/index.jsp" />        <Menu name="RelationShipMgmtMenu" title="合作伙伴管理" page="/shop/relational/index.jsp"  />        <Menu name="PaymentMgmtMenu" title="支付管理" page="/shop/payment/index.jsp" />        <Menu name="AdvertisementMenu" title="广告管理" page="/shop/advertisement/index.jsp" />                        <Menu name="SystemSet" title="系统配置" page="/shop/contentset/index.jsp" />        <Menu name="permission" title="权限管理" page="/shop/permission/index.jsp" />        <Menu name="reportMenu" title="报表管理" page="/shop/report/index.jsp" />        <Menu name="Logout" title="退出" page="/shop/logout" />        <Menu name="PMS-CHANNEL" title="栏目管理" page="/pms/frame/channel/main.jsp" />        <Menu name="PMS-CONTENT" title="内容管理" page="/pms/frame/content/main.jsp" />        <Menu name="PMS-PUBLISH" title="静态发布" page="/pms/frame/generate/main.jsp" />        <Menu name="PMS-TEMPLATE" title="模版管理" page="/pms/frame/template/main.jsp" />        <Menu name="PMS-SYSTEM" title="PMS管理" page="/pms/frame/system/main.jsp" />        <Menu name="SAMPLE-LOGIN" title="APP-LOGIN" page="/sample/login.jsp" />        <Menu name="SAMPLE-INDEX" title="mainMenu.title" page="/sample/index.jsp" />    </Menus></MenuConfig>
    <MenuConfig>
        <Displayers>
            <Displayer name="Velocity" type="net.sf.navigator.displayer.VelocityMenuDisplayer"/>
        </Displayers>
        <Menus>
    
            <Menu name="MainMenu" title="首页" page="/shop/mainMenu.jsp" />
            <Menu name="ItemMgmtMenu" title="商品管理" page="/shop/item/index.jsp" />
    
            
            <Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />
            
            
            <Menu name="OrderMgmtMenu" title="订单管理" page="/shop/order/index.jsp" />
            <Menu name="ValetOrderMgmtMenu" title="代客下单" page="/shop/valetorder/index.jsp" />
            <Menu name="EbPtlUserMgmtMenu" title="会员管理" page="/shop/ptlUser/index.jsp" />
            <Menu name="RelationShipMgmtMenu" title="合作伙伴管理" page="/shop/relational/index.jsp"  />
            <Menu name="PaymentMgmtMenu" title="支付管理" page="/shop/payment/index.jsp" />
            <Menu name="AdvertisementMenu" title="广告管理" page="/shop/advertisement/index.jsp" />
            
            
            <Menu name="SystemSet" title="系统配置" page="/shop/contentset/index.jsp" />
            <Menu name="permission" title="权限管理" page="/shop/permission/index.jsp" />
            <Menu name="reportMenu" title="报表管理" page="/shop/report/index.jsp" />
            <Menu name="Logout" title="退出" page="/shop/logout" />
    
            <Menu name="PMS-CHANNEL" title="栏目管理" page="/pms/frame/channel/main.jsp" />
            <Menu name="PMS-CONTENT" title="内容管理" page="/pms/frame/content/main.jsp" />
            <Menu name="PMS-PUBLISH" title="静态发布" page="/pms/frame/generate/main.jsp" />
            <Menu name="PMS-TEMPLATE" title="模版管理" page="/pms/frame/template/main.jsp" />
            <Menu name="PMS-SYSTEM" title="PMS管理" page="/pms/frame/system/main.jsp" />
    
            <Menu name="SAMPLE-LOGIN" title="APP-LOGIN" page="/sample/login.jsp" />
            <Menu name="SAMPLE-INDEX" title="mainMenu.title" page="/sample/index.jsp" />
    
        </Menus>
    </MenuConfig>

<listener>        <listener-class>net.sf.navigator.menu.MenuContextListener</listener-class>    </listener>
            <listener-class>net.sf.navigator.menu.MenuContextListener</listener-class>
        </listener>

从另外的配置文件中，我们可以发现他使用了装饰器来修饰我们的JSP页面

找到默认的装饰器JSP页面，**找到了对应的修饰菜单**：

<%@ page language="java" errorPage="/ecps/console/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %><%@ include file="taglibs.jsp"%><menu:useMenuDisplayer name="Velocity" config="cssHorizontalMenu.vm"><div class="nav w">    <ul id="nav_m" class="ul">        <menu:displayMenu name="MainMenu"/>        <menu:displayMenu name="ItemMgmtMenu"/>        <menu:displayMenu name="OrderMgmtMenu"/>        <menu:displayMenu name="ValetOrderMgmtMenu"/>         <menu:displayMenu name="PaymentMgmtMenu"/>        <menu:displayMenu name="AdvertisementMenu"/>        <menu:displayMenu name="RelationShipMgmtMenu"/>        <menu:displayMenu name="EbPtlUserMgmtMenu"/>        <menu:displayMenu name="permission"/>        <menu:displayMenu name="SystemSet"/>        <menu:displayMenu name="reportMenu"/>     </ul>    <p></p></div></menu:useMenuDisplayer>
    <%@ include file="taglibs.jsp"%>
    
    <menu:useMenuDisplayer name="Velocity" config="cssHorizontalMenu.vm">
    <div class="nav w">
        <ul id="nav_m" class="ul">
            <menu:displayMenu name="MainMenu"/>
            <menu:displayMenu name="ItemMgmtMenu"/>
            <menu:displayMenu name="OrderMgmtMenu"/>
            <menu:displayMenu name="ValetOrderMgmtMenu"/>
             <menu:displayMenu name="PaymentMgmtMenu"/>
            <menu:displayMenu name="AdvertisementMenu"/>
            <menu:displayMenu name="RelationShipMgmtMenu"/>
            <menu:displayMenu name="EbPtlUserMgmtMenu"/>
            <menu:displayMenu name="permission"/>
            <menu:displayMenu name="SystemSet"/>
            <menu:displayMenu name="reportMenu"/>
         </ul>
        <p></p>
    </div>
    </menu:useMenuDisplayer>

我们发现该页面包含了taglibs.jsp，taglibs中又有众多的标签引入

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %><%@ taglib uri="http://www.springmodules.org/tags/commons-validator" prefix="v" %><%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %><%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %><%@ taglib uri="http://struts-menu.sf.net/tag" prefix="display" %><%@ taglib uri="http://struts-menu.sf.net/tag-el" prefix="menu" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %><%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %><%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%><%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%><c:set var="path" value="${pageContext.request.contextPath}"/><c:set var="system" value="/ecps/console"/><c:set var="PmsServerPath" value="http://10.1.248.131:8080/pmsV4/pms/main.do"/><c:set var="datePattern"><fmt:message key="date.format"/></c:set>"security" %>
    <%@ taglib uri="http://www.springmodules.org/tags/commons-validator" prefix="v" %>
    <%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
    <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
    <%@ taglib uri="http://struts-menu.sf.net/tag" prefix="display" %>
    <%@ taglib uri="http://struts-menu.sf.net/tag-el" prefix="menu" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
    
    <c:set var="path" value="${pageContext.request.contextPath}"/>
    <c:set var="system" value="/ecps/console"/>
    <c:set var="PmsServerPath" value="http://10.1.248.131:8080/pmsV4/pms/main.do"/>
    <c:set var="datePattern"><fmt:message key="date.format"/></c:set>

而sitemesh就是我们在web.xml配置的过滤器，它的功能就是用来渲染我们的页面的

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%><%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>"decorator"%>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>

<filter>        <filter-name>sitemesh</filter-name>        <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>    </filter>    <filter-mapping>        <filter-name>sitemesh</filter-name>        <url-pattern>*.do</url-pattern>         <dispatcher>REQUEST</dispatcher>        <dispatcher>FORWARD</dispatcher>    </filter-mapping>    <filter-mapping>        <filter-name>sitemesh</filter-name>        <url-pattern>*.jsp</url-pattern>        <dispatcher>REQUEST</dispatcher>        <dispatcher>FORWARD</dispatcher>    </filter-mapping>
            <filter-name>sitemesh</filter-name>
            <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>sitemesh</filter-name>
            <url-pattern>*.do</url-pattern> 
            <dispatcher>REQUEST</dispatcher>
            <dispatcher>FORWARD</dispatcher>
        </filter-mapping>
        <filter-mapping>
            <filter-name>sitemesh</filter-name>
            <url-pattern>*.jsp</url-pattern>
            <dispatcher>REQUEST</dispatcher>
            <dispatcher>FORWARD</dispatcher>
        </filter-mapping>

再次看回我们的index页面，我们可以发现有那么一段代码

**content和上面的name是一致的**…

## 模拟增加新功能 ##

根据上面我们所看到的，我们在原有的页面上增添新的功能，看看我们的分析是否有错误！

在菜单的配置文件中新增学生管理

<Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />
            <Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />

随后在修饰器中新增学生管理菜单项

<%--新增！--%>        <menu:displayMenu name="studentMenu"/>
            <menu:displayMenu name="studentMenu"/>

接着根据其他的index页面，编写我们学生管理的JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/ecps/console/common/taglibs.jsp"%><head>    <title>学生管理</title>    <meta name="heading" content="学生管理"/>    <meta name="menu" content="studentMenu"/></head><body id="main"><div class="frameL"><div class="menu icon">    <jsp:include page="/student/studentmenu.jsp"/></div></div><div class="frameR"><div class="content"></div></div></body>
    <%@ include file="/ecps/console/common/taglibs.jsp"%>
    <head>
        <title>学生管理</title>
        <meta name="heading" content="学生管理"/>
        <meta name="menu" content="studentMenu"/>
    </head>
    <body id="main">
    <div class="frameL"><div class="menu icon">
        <jsp:include page="/student/studentmenu.jsp"/>
    </div></div>
    <div class="frameR"><div class="content">
    
    </div></div>
    </body>

左侧菜单的JSP

<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %><%@ include file="../ecps/console/common/taglibs.jsp"%><head>    <title>学生管理</title></head><h2><samp class="t03"></samp>学生管理</h2><ul class="ul">    <li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>查看成绩</a></li></ul>
    <%@ include file="../ecps/console/common/taglibs.jsp"%>
    <head>
        <title>学生管理</title>
    
    </head>
    <h2><samp class="t03"></samp>学生管理</h2>
    <ul class="ul">
        <li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>查看成绩</a></li>
    </ul>

效果：

![640?wx\_fmt=png][640_wx_fmt_png 17] 这里写图片描述

--------------------

# Mybatis和Spring环境搭建 #

**由于我们的所编写的dao层、service代码可能前台和后台都需要用到的，因此我们把环境搭建在core模块中**

## 逆向工程 ##

首先，我们要做的就是品牌管理，我们首先来看看原型界面的的品牌管理

![640?wx\_fmt=png][640_wx_fmt_png 18] 这里写图片描述

涉及到的数据库表在我们的powerdesigner中就已经定义过了

![640?wx\_fmt=png][640_wx_fmt_png 19] 这里写图片描述

我们来看一下对应数据库表的数据

![640?wx\_fmt=png][640_wx_fmt_png 20] 这里写图片描述

### 添加逆向工程插件 ###

<build>        <finalName>zhongfucheng</finalName>        <plugins>            <plugin>                <groupId>org.mybatis.generator</groupId>                <artifactId>mybatis-generator-maven-plugin</artifactId>                <version>1.3.2</version>                <configuration>                    <verbose>true</verbose>                    <overwrite>true</overwrite>                </configuration>            </plugin>        </plugins>    </build>
            <finalName>zhongfucheng</finalName>
            <plugins>
                <plugin>
                    <groupId>org.mybatis.generator</groupId>
                    <artifactId>mybatis-generator-maven-plugin</artifactId>
                    <version>1.3.2</version>
                    <configuration>
                        <verbose>true</verbose>
                        <overwrite>true</overwrite>
                    </configuration>
                </plugin>
            </plugins>
        </build>

### 编写逆向工程文件 ###

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE generatorConfiguration PUBLIC"-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"><generatorConfiguration>        <classPathEntry location="F:\传智168期JAVA\传智168期JAVA\移动商城\shoprepository\shoprepository\repository\com\oracle\ojdbc14\10.2.0.2.0\ojdbc14-10.2.0.2.0.jar" />        <context id="context1">        <commentGenerator>                        <property name="suppressAllComments" value="true" />                        <property name="suppressDate" value="true" />        </commentGenerator>        <jdbcConnection driverClass="oracle.jdbc.OracleDriver"            connectionURL="jdbc:oracle:thin:@127.0.0.1:1521:ZHONGFUCHENG" userId="zhongfucheng"            password="zhong" />                <javaModelGenerator targetPackage="com.rl.ecps.model" targetProject="src/main/java" />                <sqlMapGenerator targetPackage="com.rl.ecps.sqlMap" targetProject="src/main/java" />                <table schema="" tableName="eb_brand" enableCountByExample="false"            enableUpdateByExample="false" enableDeleteByExample="false"            enableSelectByExample="false" selectByExampleQueryId="false"        >        </table>    </context></generatorConfiguration>
    <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
    <generatorConfiguration>
        
        <classPathEntry location="F:\传智168期JAVA\传智168期JAVA\移动商城\shoprepository\shoprepository\repository\com\oracle\ojdbc14\10.2.0.2.0\ojdbc14-10.2.0.2.0.jar" />
    
        
        <context id="context1">
    
            <commentGenerator>
                
                <property name="suppressAllComments" value="true" />
                
                <property name="suppressDate" value="true" />
            </commentGenerator>
            <jdbcConnection driverClass="oracle.jdbc.OracleDriver"            connectionURL="jdbc:oracle:thin:@127.0.0.1:1521:ZHONGFUCHENG" userId="zhongfucheng"            password="zhong" />
            
            <javaModelGenerator targetPackage="com.rl.ecps.model" targetProject="src/main/java" />
            
            <sqlMapGenerator targetPackage="com.rl.ecps.sqlMap" targetProject="src/main/java" />
    
            
            <table schema="" tableName="eb_brand" enableCountByExample="false"            enableUpdateByExample="false" enableDeleteByExample="false"            enableSelectByExample="false" selectByExampleQueryId="false"        >
            </table>
        </context>
    </generatorConfiguration>

生成的文件：

![640?wx\_fmt=png][640_wx_fmt_png 21] 这里写图片描述

sqlMapping映射文件也算是一种资源文件把，因此我把它移到resources中了

![640?wx\_fmt=png][640_wx_fmt_png 22] 这里写图片描述

## 编写Mybatis配置文件 ##

sqlMapConfig.xml

<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration>    <mappers>        <mapper resource="sqlMap/EbBrandMapper.xml"/>    </mappers></configuration>
    <configuration>
        <mappers>
            <mapper resource="sqlMap/EbBrandMapper.xml"/>
        </mappers>
    </configuration>

## 创建beans.xml文件 ##

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"       xmlns:aop="http://www.springframework.org/schema/aop"       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">        <context:component-scan base-package="com.rl.ecps"/>        <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">        <property name="driverClassName" value="oracle.jdbc.OracleDriver"></property>        <property name="url" value="jdbc:oracle:thin:@127.0.0.1:1521:ZHONGFUCHENG"></property>        <property name="username" value="zhongfucheng"></property>        <property name="password" value="zhong"></property>    </bean>        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">        <property name="dataSource" ref="dataSource"></property>        <property name="configLocation" value="classpath:sqlMapConfig.xml"></property>    </bean>        <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">        <property name="dataSource" ref="dataSource"></property>    </bean>        <tx:advice id="txAdive" transaction-manager="txManager">        <tx:attributes>            <tx:method name="save*" propagation="REQUIRED"/>            <tx:method name="update*" propagation="REQUIRED"/>            <tx:method name="add*" propagation="REQUIRED"/>            <tx:method name="modify*" propagation="REQUIRED"/>            <tx:method name="delete*" propagation="REQUIRED"/>            <tx:method name="remove*" propagation="REQUIRED"/>            <tx:method name="select*" read-only="true"/>            <tx:method name="get*" read-only="true"/>        </tx:attributes>    </tx:advice>        <aop:config>        <aop:advisor advice-ref="txAdive" pointcut="execution(* com.rl.ecps.service..*.*(..))"/>    </aop:config></beans>
    <beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"       xmlns:aop="http://www.springframework.org/schema/aop"       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">
    
        
        <context:component-scan base-package="com.rl.ecps"/>
    
        
        <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
            <property name="driverClassName" value="oracle.jdbc.OracleDriver"></property>
            <property name="url" value="jdbc:oracle:thin:@127.0.0.1:1521:ZHONGFUCHENG"></property>
            <property name="username" value="zhongfucheng"></property>
            <property name="password" value="zhong"></property>
        </bean>
    
    
        
        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            <property name="dataSource" ref="dataSource"></property>
            <property name="configLocation" value="classpath:sqlMapConfig.xml"></property>
        </bean>
    
    
        
        <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
            <property name="dataSource" ref="dataSource"></property>
        </bean>
    
        
        <tx:advice id="txAdive" transaction-manager="txManager">
            <tx:attributes>
                <tx:method name="save*" propagation="REQUIRED"/>
                <tx:method name="update*" propagation="REQUIRED"/>
                <tx:method name="add*" propagation="REQUIRED"/>
                <tx:method name="modify*" propagation="REQUIRED"/>
                <tx:method name="delete*" propagation="REQUIRED"/>
                <tx:method name="remove*" propagation="REQUIRED"/>
                <tx:method name="select*" read-only="true"/>
                <tx:method name="get*" read-only="true"/>
            </tx:attributes>
        </tx:advice>
    
        
        <aop:config>
            <aop:advisor advice-ref="txAdive" pointcut="execution(* com.rl.ecps.service..*.*(..))"/>
        </aop:config>
    
    </beans>

## 添加log4j ##

log4j.properties

log4j.rootLogger=DEBUG, Console#Consolelog4j.appender.Console=org.apache.log4j.ConsoleAppenderlog4j.appender.Console.layout=org.apache.log4j.PatternLayoutlog4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p [%c] - %m%nlog4j.logger.java.sql.ResultSet=INFOlog4j.logger.org.apache=INFOlog4j.logger.java.sql.Connection=DEBUGlog4j.logger.java.sql.Statement=DEBUGlog4j.logger.java.sql.PreparedStatement=DEBUG
    log4j.appender.Console=org.apache.log4j.ConsoleAppender
    log4j.appender.Console.layout=org.apache.log4j.PatternLayout
    log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p [%c] - %m%n
    log4j.logger.java.sql.ResultSet=INFO
    log4j.logger.org.apache=INFO
    log4j.logger.java.sql.Connection=DEBUG
    log4j.logger.java.sql.Statement=DEBUG
    log4j.logger.java.sql.PreparedStatement=DEBUG

# Dao层 #

## 编写Dao接口 ##

interface EbBrandDao {    void saveBrand(EbBrand brand);    EbBrand getBrandById(Long brandId);    void updateBrand(EbBrand brand);    void deleteBrand(Long brandId);    List<EbBrand> selectBrand();    List<EbBrand> selectBrandByName(String brandName);}
    
    
        void saveBrand(EbBrand brand);
    
        EbBrand getBrandById(Long brandId);
    
        void updateBrand(EbBrand brand);
    
        void deleteBrand(Long brandId);
    
        List<EbBrand> selectBrand();
    
        List<EbBrand> selectBrandByName(String brandName);
    }

## 编写Dao实现 \#\# ##

/** * 继承SqlSessionDaoSupport能够得到sessionFactory的引用，非常方便！ */@Repositorypublic class EbBrandDaoImpl extends SqlSessionDaoSupport implements EbBrandDao {    String nameSpace = "com.rl.ecps.sqlMap.EbBrandMapper.";    public void saveBrand(EbBrand brand) {        this.getSqlSession().insert(nameSpace + "insert", brand);    }    public EbBrand getBrandById(Long brandId) {        return this.getSqlSession().selectOne(nameSpace + "selectByPrimaryKey", brandId);    }    public void updateBrand(EbBrand brand) {        /**         * updateByPrimaryKeySelective和updata的区别：         *  一个是动态SQL，一个是静态SQL。这里就使用动态SQL比较好。因为是更新操作         */        this.getSqlSession().update(nameSpace + "updateByPrimaryKeySelective", brand);    }    public void deleteBrand(Long brandId) {        this.getSqlSession().delete(nameSpace + "deleteByPrimaryKey", brandId);    }    public List<EbBrand> selectBrand() {        return this.getSqlSession().selectList(nameSpace+"selectBrand");    }    public List<EbBrand> selectBrandByName(String brandName) {        return this.getSqlSession().selectList(nameSpace+"selectBrandByName", brandName);    }}
    @Repository
    public class EbBrandDaoImpl extends SqlSessionDaoSupport implements EbBrandDao {
        
    
        String nameSpace = "com.rl.ecps.sqlMap.EbBrandMapper.";
    
        public void saveBrand(EbBrand brand) {
        
    
            this.getSqlSession().insert(nameSpace + "insert", brand);
        }
        public EbBrand getBrandById(Long brandId) {
        
            return this.getSqlSession().selectOne(nameSpace + "selectByPrimaryKey", brandId);
        }
        public void updateBrand(EbBrand brand) {
        
    
            /**         * updateByPrimaryKeySelective和updata的区别：         *  一个是动态SQL，一个是静态SQL。这里就使用动态SQL比较好。因为是更新操作         */
            this.getSqlSession().update(nameSpace + "updateByPrimaryKeySelective", brand);
        }
        public void deleteBrand(Long brandId) {
        
    
            this.getSqlSession().delete(nameSpace + "deleteByPrimaryKey", brandId);
        }
        public List<EbBrand> selectBrand() {
        
            return this.getSqlSession().selectList(nameSpace+"selectBrand");
        }
        public List<EbBrand> selectBrandByName(String brandName) {
        
            return this.getSqlSession().selectList(nameSpace+"selectBrandByName", brandName);
        }
    }

mybatis插件只有最后两个方法没有帮我们自动生成，其他的SQL语句都自动生成了。

<select id="selectBrand" resultMap="BaseResultMap">    select * from eb_brand  </select>  <select id="selectBrandByName" resultMap="BaseResultMap" parameterType="string">      select * from eb_brand t where t.brand_name = #{brandName}  </select>
        select * from eb_brand
      </select>
    
      <select id="selectBrandByName" resultMap="BaseResultMap" parameterType="string">
          select * from eb_brand t where t.brand_name = #{brandName}
      </select>

# 编写Service #

## Service接口 ##

public interface EbBrandService {    void saveBrand(EbBrand brand);    EbBrand getBrandById(Long brandId);    void updateBrand(EbBrand brand);    void deleteBrand(Long brandId);    List<EbBrand> selectBrand();    List<EbBrand> selectBrandByName(String brandName);}interface EbBrandService {
        
        void saveBrand(EbBrand brand);
    
        EbBrand getBrandById(Long brandId);
    
        void updateBrand(EbBrand brand);
    
        void deleteBrand(Long brandId);
    
        List<EbBrand> selectBrand();
    
        List<EbBrand> selectBrandByName(String brandName);
    }

## Service实现 ##

package com.rl.ecps.service.impl;import com.rl.ecps.dao.EbBrandDao;import com.rl.ecps.dao.impl.EbBrandDaoImpl;import com.rl.ecps.model.EbBrand;import com.rl.ecps.service.EbBrandService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;/** * Created by ozc on 2017/8/26. */@Servicepublic class EbBrandServiceImpl implements EbBrandService {    @Autowired    private EbBrandDao brandDao;    public void saveBrand(EbBrand brand) {        brandDao.saveBrand(brand);    }    public EbBrand getBrandById(Long brandId) {        return brandDao.getBrandById(brandId);    }    public void updateBrand(EbBrand brand) {        brandDao.updateBrand(brand);    }    public void deleteBrand(Long brandId) {        brandDao.deleteBrand(brandId);    }    public List<EbBrand> selectBrand() {        return brandDao.selectBrand();    }    public List<EbBrand> selectBrandByName(String brandName) {        return brandDao.selectBrandByName(brandName);    }}
    
    import com.rl.ecps.dao.EbBrandDao;
    import com.rl.ecps.dao.impl.EbBrandDaoImpl;
    import com.rl.ecps.model.EbBrand;
    import com.rl.ecps.service.EbBrandService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    /** * Created by ozc on 2017/8/26. */
    
    @Service
    public class EbBrandServiceImpl implements EbBrandService {
        
    
    
        @Autowired
        private EbBrandDao brandDao;
    
        public void saveBrand(EbBrand brand) {
        
            brandDao.saveBrand(brand);
    
        }
    
        public EbBrand getBrandById(Long brandId) {
        
            return brandDao.getBrandById(brandId);
        }
    
        public void updateBrand(EbBrand brand) {
        
    
            brandDao.updateBrand(brand);
    
        }
        public void deleteBrand(Long brandId) {
        
    
            brandDao.deleteBrand(brandId);
    
        }
        public List<EbBrand> selectBrand() {
        
            return brandDao.selectBrand();
        }
        public List<EbBrand> selectBrandByName(String brandName) {
        
            return brandDao.selectBrandByName(brandName);
        }
    
    }

## 测试Service ##

在idea中，我们新建一个test目录

![640?wx\_fmt=png][640_wx_fmt_png 23] 这里写图片描述

对着我们的serviceImpl使用快捷键ctrl+shift+t

![640?wx\_fmt=png][640_wx_fmt_png 24] 这里写图片描述

idea就会帮我们自动把想要测试的方法把相关的目录创建出来了

![640?wx\_fmt=png][640_wx_fmt_png 25] 这里写图片描述

我们在插入数据的时候，记得要改写SQL语句，因为默认是没有主键的。下面就是我们把在主键列上使用自动增长

<insert id="insert" parameterType="com.rl.ecps.model.EbBrand" >    <selectKey keyProperty="brandId" order="BEFORE" resultType="long">      select seqbrandid.nextval from dual    </selectKey>    insert into EB_BRAND (BRAND_ID, BRAND_NAME, BRAND_DESC,       IMGS, WEBSITE, BRAND_SORT      )    values (#{brandId,jdbcType=DECIMAL}, #{brandName,jdbcType=VARCHAR}, #{brandDesc,jdbcType=VARCHAR},       #{imgs,jdbcType=VARCHAR}, #{website,jdbcType=VARCHAR}, #{brandSort,jdbcType=DECIMAL}      )  </insert>
    
        <selectKey keyProperty="brandId" order="BEFORE" resultType="long">
          select seqbrandid.nextval from dual
        </selectKey>
    
    
        insert into EB_BRAND (BRAND_ID, BRAND_NAME, BRAND_DESC, 
          IMGS, WEBSITE, BRAND_SORT
          )
        values (#{brandId,jdbcType=DECIMAL}, #{brandName,jdbcType=VARCHAR}, #{brandDesc,jdbcType=VARCHAR}, 
          #{imgs,jdbcType=VARCHAR}, #{website,jdbcType=VARCHAR}, #{brandSort,jdbcType=DECIMAL}
          )
      </insert>

插入成功

![640?wx\_fmt=png][640_wx_fmt_png 26] 这里写图片描述

# Controller层配置 #

编写SpringMVC的配置文件

springmvc.xml

# 分析商品的数据模型 #

本篇主要是分析我们的项目中的数据模型…一般地，我们都是用powerdesigner来设计我们的数据库模型表…

首先我们要看懂powerdesigner箭头的意义：

> 表之间的关系
> 
> 一对多：**箭头所指向的表是一的一端**
> 
> 多对一：**箭头背向的方向的表是多的一端**（除了一对一）
> 
> 多对多：在数据库模型上，由三张表来组成，中间表体现的是其余两张表的关系是多对多，中间表只能有两个表的主键作为外键来组成，箭头由中介表来分别指向其余两张表。
> 
> 一对一：箭头指向的方向是一的一端，背向的方向的表使用指向的方向的表的主键作为主键和外键就形成了一对一的关系。

## 品牌管理 ##

我们前面已经写了品牌管理了，我们来看看数据库设计是怎么样的。

首先是我们的品牌表：**主要定义了品牌基本信息字段**

![640?wx\_fmt=png][640_wx_fmt_png 27] 这里写图片描述

## 商品类目 ##

该类目表主要对商品进行分类…

![640?wx\_fmt=png][640_wx_fmt_png 28] 这里写图片描述

同时他还有自关联的连接线，那是什么意思呢？？

该商品类目表**拥有父类目的属性**：

![640?wx\_fmt=png][640_wx_fmt_png 29] 这里写图片描述

也就是说，类目我们可以看成是树形结构的：

![640?wx\_fmt=png][640_wx_fmt_png 30] 这里写图片描述

**是可以根据当前类目查询出上一级类目的**。

![640?wx\_fmt=png][640_wx_fmt_png 31] 这里写图片描述

## 类目与品牌 ##

**一个类目下是可以有多个品牌的，而一个品牌可以有多个类目**..

![640?wx\_fmt=png][640_wx_fmt_png 32] 这里写图片描述

我们可以举个例子来理解：

空调类目下：

海尔：

格力：

**对于海尔，格力这样的品牌，不仅仅是做空调，还可以做洗衣机。而空调和洗衣机又是不同的类目下的。**

## 类目与商家 ##

为了实现更好地管理，我们还有**类目所对应的商家表**

![640?wx\_fmt=png][640_wx_fmt_png 33] 这里写图片描述

## 商品 ##

我们的商品主要是手机和号卡

**通过在类目表中预置的手机类目和号卡类目来区分**

**而一个品牌也对应着多个商品**。

![640?wx\_fmt=png][640_wx_fmt_png 34] 这里写图片描述

我们商品的存储事例数据如下：

![640?wx\_fmt=png][640_wx_fmt_png 35] 这里写图片描述

除了与品牌和类目之间的关联关系，还存储着一些销售语、是否上架、等信息

![640?wx\_fmt=png][640_wx_fmt_png 36] 这里写图片描述

## 商品标签图片和大字段表 ##

**我们的商品标签图片也是用另外一张数据库表来存储。它有着商品的全部属性**

**而当商品信息太多，写不完的时候就需要用到大字段表了。**

![640?wx\_fmt=png][640_wx_fmt_png 37] 这里写图片描述

## 商品属性 ##

我们使用了一张专门管理商品属性的数据表来进行**展示对应的商品属性**。

该数据库表可以设置该属性是否前台展示，以及属性是怎么录入的：

![640?wx\_fmt=png][640_wx_fmt_png 38] 这里写图片描述

数据如下所示：

![640?wx\_fmt=png][640_wx_fmt_png 39] 这里写图片描述

## 类目与属性 ##

对于属性而言也是分开的：

因此我们的属性与类目也是存在：**一个类目对应多个属性的关系的**。

## 参数 ##

我们可以发现在**我们的商品属性表中，如果一个属性是可以多选的话，那么在属性值上是使用“，”逗号来进行分割的**

![640?wx\_fmt=png][640_wx_fmt_png 40] 这里写图片描述

而我们的参数表就是**对其选中的值进行保存！**

![640?wx\_fmt=png][640_wx_fmt_png 41] 这里写图片描述

## 商品与参数与属性关系 ##

**一个商品是有多个参数的，而一个属性也对应着多个参数。**

![640?wx\_fmt=png][640_wx_fmt_png 42] 这里写图片描述

## 库存与价格值 ##

**库存也是用一张表来存储的，对应地，不同类型的商品对应的不同的库存**

我们可以简单理解成一下的情况：

![640?wx\_fmt=png][640_wx_fmt_png 43] 这里写图片描述

# 总结 #

> 如果文章有错的地方欢迎指正，大家互相交流。**习惯在微信看技术文章，想要获取更多的Java资源的同学，可以关注微信公众号:Java3y**

[640_wx_fmt_png]: /images/20210827/45b4843a8136409aa94cd9dee98ad3cf.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/364c7d49f05943d8902f9577249cfce3.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/1b6d00024c4c496884ba14ec5eabec41.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/80d6f4a369384069861bef7be3f627dc.png?wx_fmt=png
[640_wx_fmt_png 4]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib22MJvRIibKNEdLlwO79OyUrSrCnIv3fCOnMLDXXia868feXjIdkClv8U3ibtOEp6Sp3I4ImcJrIQw0Q/640?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/c62f4e05769043d8b51c0bb822aa56eb.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/cd57a11f56304f07b4c5b88041e9c3ae.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/35ff698a2af44a3f8de561ced8c99ec5.png?wx_fmt=png
[640_wx_fmt_png 8]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib22MJvRIibKNEdLlwO79OyUrMGRLC48Q588H92ic0BFiciaZUBic9uohqW7iaO4yE4s3yGMKVgmscUKkMYw/640?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210827/6a634bbe52fa402886dbae999d96f67d.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210827/22e76379e1ff4e4c8a17f1ca11372dae.png?wx_fmt=png
[640_wx_fmt_png 11]: /images/20210827/c79c8a95efcf49bd88476f49140be523.png?wx_fmt=png
[640_wx_fmt_png 12]: /images/20210827/c66992c668a24eefb38de442c31aa340.png?wx_fmt=png
[640_wx_fmt_png 13]: /images/20210827/12c3955cc7584f14b68c9417ab08cf63.png?wx_fmt=png
[640_wx_fmt_png 14]: /images/20210827/9f8fed24817c4d60ae34a19faa06cb1b.png?wx_fmt=png
[640_wx_fmt_png 15]: /images/20210827/82eeeed8060040539f186b1408f8dbef.png?wx_fmt=png
[640_wx_fmt_png 16]: /images/20210827/b557d45fa99f468a8553902c9215dc1b.png?wx_fmt=png
[640_wx_fmt_png 17]: /images/20210827/001daaf4aa4c4fea80d11439dd83cbf3.png?wx_fmt=png
[640_wx_fmt_png 18]: /images/20210827/e0e280ca8b674eecbea828e8059eaa82.png?wx_fmt=png
[640_wx_fmt_png 19]: /images/20210827/f6d15aeaad9b4ae3bbe6c92fd75cf010.png?wx_fmt=png
[640_wx_fmt_png 20]: /images/20210827/f736640151574d5ea832aff9f016c642.png?wx_fmt=png
[640_wx_fmt_png 21]: /images/20210827/5ca0b4889b0e4914a4ddd1dab84c66de.png?wx_fmt=png
[640_wx_fmt_png 22]: /images/20210827/d376897ae47b4f4e8ac7bf77536e4534.png?wx_fmt=png
[640_wx_fmt_png 23]: /images/20210827/821d6b936a184a18a6f593c620ef3191.png?wx_fmt=png
[640_wx_fmt_png 24]: /images/20210827/0f775464e86b49d2acd0253c83f19a52.png?wx_fmt=png
[640_wx_fmt_png 25]: /images/20210827/bf9f2e423c0448baa053e16b176b4c51.png?wx_fmt=png
[640_wx_fmt_png 26]: /images/20210827/4a477fd9da73465cb29dafd4e37b5f63.png?wx_fmt=png
[640_wx_fmt_png 27]: /images/20210827/723aa50f83bd47c38505ad996b3dbd7e.png?wx_fmt=png
[640_wx_fmt_png 28]: /images/20210827/2eee0531ee1d486f8cee10c2b60ead9a.png?wx_fmt=png
[640_wx_fmt_png 29]: /images/20210827/360dea03f896474787784c092ee08282.png?wx_fmt=png
[640_wx_fmt_png 30]: /images/20210827/42ab1e870ebc491987d94392bbf99539.png?wx_fmt=png
[640_wx_fmt_png 31]: /images/20210827/e26497b2b7724f78915ae9e5f3590920.png?wx_fmt=png
[640_wx_fmt_png 32]: /images/20210827/2ed404296d2e416fbe0aa436d7eedfc1.png?wx_fmt=png
[640_wx_fmt_png 33]: /images/20210827/0857ee1e64614c89b8055fec8876d793.png?wx_fmt=png
[640_wx_fmt_png 34]: /images/20210827/62c1dc34403247fb834df50d0eb31814.png?wx_fmt=png
[640_wx_fmt_png 35]: /images/20210827/02ea5f77573f49098d07bb472d9b48ad.png?wx_fmt=png
[640_wx_fmt_png 36]: /images/20210827/2a3d144a1ea541a6b2f7496749f49ade.png?wx_fmt=png
[640_wx_fmt_png 37]: /images/20210827/997a29e198774800ad6e94f787d4f51e.png?wx_fmt=png
[640_wx_fmt_png 38]: /images/20210827/4c1f682bc26b40268561f4a2c574d6ae.png?wx_fmt=png
[640_wx_fmt_png 39]: /images/20210827/fa22718483a94b7a809362ea2504c187.png?wx_fmt=png
[640_wx_fmt_png 40]: /images/20210827/cb420c0993b74357b6fa530a3fb8f94b.png?wx_fmt=png
[640_wx_fmt_png 41]: /images/20210827/14105cdfef554c3c8779b4d63d3e5b08.png?wx_fmt=png
[640_wx_fmt_png 42]: /images/20210827/b7adcb74ec9746419d411b81cf5bc620.png?wx_fmt=png
[640_wx_fmt_png 43]: /images/20210827/aa2eea06b246458db3bf4b3c3c2ec361.png?wx_fmt=png