ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] # 查询 ## 步骤 1 : 先运行,看到效果,再学习 接下来就开始一步一步来,由浅入深地开发功能了。 因为项目用到了SSM技术,SSM技术本身较为复杂,涉及到了多个框架、多个类、多个配置文件。 不仅如此,模仿天猫业务也较为复杂,所以在进行项目开发之前,一定要先将tmall-ssm(向老师要相关资料),配置运行起来, 先自己跑起来,确认项目本身没有问题,建立对学习内容的信心,然后再跟着步骤,一步步做出来。 这样出了问题心里才有底,通过代码比较等手段,定位到问题所在,成功消化掉这个知识点。 > 必读:十分不推荐一来就跟着步骤做下去,本知识点一共有20多个步骤,只要任何一个步骤,跟着做的时候写错了,都有可能导致项目无法成功启动,影响学习情绪和学习效果。 ## 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。 模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。 采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。 ## 步骤 3 : 新建Maven 项目 菜单->File->New->Other->Maven->Maven Project ![](https://box.kancloud.cn/b1fb842610fc6b3e6d2a6619eea742e5_597x497.png) ## 步骤 4 : 这个界面点下一步 ![](https://box.kancloud.cn/2f4678d204f6ab673740185e04fc26c9_770x647.png) ## 步骤 5 : 这个界面使用webapp,点下一步 默认选中的是maven-archetype-quickstart, 请修改为: maven-archetype-webapp ![](https://box.kancloud.cn/c825dc4f01495f6dee7eac376d19a986_770x647.png) ## 步骤 6 : 这一步填写如图所示的信息 GroupId: com.dodoke.tmall ArtifactId: tmall_ssm ![](https://box.kancloud.cn/7b50ddc935599b07985c10f025ec4180_770x647.png) ## 步骤 7 : 此时得到的maven web 项目的问题 此时能得到的maven web 项目,不过有两个问题 1. 没有java源代码目录 2. index.jsp报错 ![](https://box.kancloud.cn/115325b5fb59a22e25066e16dbc054f1_378x354.png) ## 步骤 8 : 创建java 源代码目录 在上一步的截图中可以发现,没有地方存放java源文件,这个时候就需要按照如下步骤做: 右键项目->属性->Java Build Path->Libraries->Edit->Workspace default JRE(jdk8)->Finish ![](https://box.kancloud.cn/866fa970bdeb759f1e9797bacd776c42_785x670.png) ## 步骤 9 : java源文件目录创建好了 如图所示,java源文件目录创建好了 ![](https://box.kancloud.cn/77599f6341d3e1e9038b31ec9c372e57_371x444.png) ## 步骤 10 : pom.xml 复制如下内容到已经存在的pom里, 粘贴之后,jsp本来的报错就消失了,不过出来一个新的问题,要求通过Maven更新项目。 右键项目->Maven->Update Project,会弹出一个对话框,点击Ok,这个问题就消失了。 ~~~ <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.dodoke.tmall</groupId> <artifactId>tmall_ssm</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <properties> <spring.version>4.1.3.RELEASE</spring.version> <pagehelper.version>5.1.2-beta</pagehelper.version> <mysql.version>5.1.6</mysql.version> <mybatis.spring.version>1.2.3</mybatis.spring.version> <mybatis.version>3.1.1</mybatis.version> <junit.version>4.12</junit.version> <jstl.version>1.2</jstl.version> <jsqlparser.version>1.0</jsqlparser.version> <jackson.version>1.2.7</jackson.version> <servlet-api.version>3.1.0</servlet-api.version> <druid.version>1.0.18</druid.version> <log4j.version>1.2.16</log4j.version> <commons-logging.version>1.2</commons-logging.version> <commons-fileupload.version>1.2.1</commons-fileupload.version> <commons-io.version>1.3.2</commons-io.version> <commons-lang.version>2.6</commons-lang.version> <aopalliance.version>1.0</aopalliance.version> <mybatis-generator.version>1.3.5</mybatis-generator.version> </properties> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>${junit.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>${mybatis.spring.version}</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>${druid.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>${spring.version}</version> </dependency> <!-- JSP相关 --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>${jstl.version}</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>${servlet-api.version}</version> <scope>provided</scope> </dependency> <!-- pageHelper --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>${pagehelper.version}</version> </dependency> <!--jsqlparser --> <dependency> <groupId>com.github.jsqlparser</groupId> <artifactId>jsqlparser</artifactId> <version>${jsqlparser.version}</version> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>${commons-logging.version}</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>${commons-fileupload.version}</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>${commons-io.version}</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>${commons-lang.version}</version> </dependency> <dependency> <groupId>aopalliance</groupId> <artifactId>aopalliance</artifactId> <version>${aopalliance.version}</version> </dependency> <dependency> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-core</artifactId> <version>${mybatis-generator.version}</version> </dependency> </dependencies> <build> <finalName>${project.artifactId}</finalName> <plugins> <!-- 资源文件拷贝插件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>2.7</version> <configuration> <encoding>UTF-8</encoding> </configuration> </plugin> <!-- java编译插件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.2</version> <configuration> <source>1.8</source> <target>1.8</target> <encoding>UTF-8</encoding> </configuration> </plugin> </plugins> <pluginManagement> <plugins> <!-- 配置Tomcat插件 --> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> </plugin> </plugins> </pluginManagement> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> <include>**/*.tld</include> </includes> <filtering>false</filtering> </resource> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> </resources> </build> </project> ~~~ ## 步骤 11 : 创建包 首先点中源目录:src/main/java,然后菜单->File->New->Package 输入 com.dodoke.tmall.pojo 创建包。 包创建好之后如图所示: ![](https://box.kancloud.cn/8c34785a434d3de2c36daae0d6cc17c9_355x471.png) ## 步骤 12 : Category 选中创建包步骤中的包,然后菜单->File->New->Java Class,创建Category类。 这是实体类,声明了id和name,以及对应的setter,getter。 ~~~ package com.dodoke.tmall.pojo; public class Category { private Integer id; private String name; 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; } } ~~~ ## 步骤 13 : CategoryMapper 首先点中源目录:src/main/java 然后菜单->File->New->Package 输入 com.dodoke.tmall.mapper 创建包 接着创建接口CategoryMapper,因为本知识点只做查询,所以只声明了一个list方法。 ~~~ package com.dodoke.tmall.mapper; import java.util.List; import com.dodoke.tmall.pojo.Category; public interface CategoryMapper { List<Category> list(); } ~~~ ## 步骤 14 : CategoryService 首先点中源目录:src/main/java 然后菜单->File->New->Package 输入 com.dodoke.tmall.service 创建包 接着创建接口CategoryService,因为本知识点只做查询,所以只声明了一个list方法。 ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Category; public interface CategoryService { List<Category> list(); } ~~~ ## 步骤 15 : CategoryServiceImpl 首先点中源目录:src/main/java 然后菜单->File->New->Package 输入 com.dodoke.tmall.service.impl 创建包 新建CategoryService接口的实现类CategoryServiceImpl 注解@Service声明当前类是一个Service类 通过自动装配@Autowired引入CategoryMapper ,在list方法中调用CategoryMapper 的list方法. ~~~ package com.dodoke.tmall.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.CategoryMapper; import com.dodoke.tmall.pojo.Category; @Service public class CategoryServiceImpl { @Autowired CategoryMapper categoryMapper; public List<Category> list() { return categoryMapper.list(); } } ~~~ ## 步骤 16 : CategoryController 首先点中源目录:src/main/java 然后菜单->File->New->Package 输入 com.dodoke.tmall.controller 创建包 新建CategoryController, 注解@Controller声明当前类是一个控制器。 注解@RequestMapping("")表示访问的时候无需额外的地址。 注解@Autowired把CategoryServiceImpl自动装配进了CategoryService 接口。 注解@RequestMapping("admin_category_list") 映射admin_category_list路径的访问。 在list方法中,通过categoryService.list()获取所有的Category对象,然后放在"cs"中,并服务端跳转到 “admin/listCategory” 视图。 > “admin/listCategory” 会根据后续的springMVC.xml 配置文件,跳转到 WEB-INF/jsp/admin/listCategory.jsp 文件。 ~~~ package com.dodoke.tmall.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.dodoke.tmall.pojo.Category; import com.dodoke.tmall.service.CategoryService; @RequestMapping("") @Controller public class CategoryController { @Autowired CategoryService categoryService; @RequestMapping("admin_category_list") public String list(Model model) { List<Category> cs = categoryService.list(); model.addAttribute("cs", cs); return "admin/listCategory"; } } ~~~ ## 步骤 17 : CategoryMapper.xml 1. 在src/main/resources目录下,新建mapper目录 2. 右键mapper目录->New->File 新建文件CategoryMapper.xml CategoryMapper.xml的namespace必须是com.dodoke.tmall.mapper.CategoryMapper,以和CategoryMapper保持一致。 CategoryMapper.xml声明了唯一的一条sql语句: `select * from t_category order by id desc` ~~~ <?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"> <mapper namespace="com.dodoke.tmall.mapper.CategoryMapper"> <select id="list" resultType="Category"> select * from t_category order by id desc </select> </mapper> ~~~ ## 步骤 18 : log4j.properties 在resources目录下新建log4j.properties。这个配置文件的作用是开启日志,当访问页面的时候,查看mybatis运行的情况,执行了什么SQL语句,以及sql语句的返回情况等信息。 ~~~ # Global logging configuration log4j.rootLogger=debug, stdout # MyBatis logging configuration... log4j.logger.com.dodoke.tmall=TRACE # Console output... log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n ~~~ ## 步骤 19:jdbc.properties 在resources目录下新建jdbc.properties,此配置文件给出了访问数据库需要的必须信息: 1. 驱动 2. url 3. 账号 4. 密码 ~~~ # 数据库配置文件 jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/tmall_ssm?useUnicode=true&characterEncoding=utf8 jdbc.username=root jdbc.password= ~~~ > 这边是我自己的数据库配置信息,注意改成自己的数据库,用户名,以及密码。 ## 步骤 20 : applicationContext.xml 在resources目录下新建applicationContext.xml 此配置文件做了如下工作 1. 启动对注解的识别 ~~~ <context:annotation-config /> <context:component-scan base-package="com.dodoke.tmall.service" /> ~~~ 2. 指定对jdbc.properties的引用 ~~~ <context:property-placeholder location="classpath:jdbc.properties"/> ~~~ 3. 配置数据源 ~~~ <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"> ~~~ 4. 配置Mybatis的SessionFactory,其中声明了别名,并且使用前面配置的数据源,扫描CategoryMapper.xml配置文件 ~~~ <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean"> ~~~ 5. 扫描Mapper类: CategoryMapper ~~~ <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> ~~~ ~~~ <?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" xsi:schemaLocation="http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd"> <context:annotation-config /> <context:component-scan base-package="com.dodoke.tmall.service" /> <!-- 导入数据库配置文件 --> <context:property-placeholder location="classpath:jdbc.properties"/> <!-- 配置数据库连接池 --> <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"> <!-- 基本属性 url、user、password --> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <!-- 配置初始化大小、最小、最大 --> <property name="initialSize" value="1" /> <property name="minIdle" value="1" /> <property name="maxActive" value="20" /> <!-- 配置获取连接等待超时的时间 --> <property name="maxWait" value="60000" /> <!-- 配置间隔多久才进行一次检测,检测需要关闭的空闲连接,单位是毫秒 --> <property name="timeBetweenEvictionRunsMillis" value="60000" /> <!-- 配置一个连接在池中最小生存的时间,单位是毫秒 --> <property name="minEvictableIdleTimeMillis" value="300000" /> <property name="validationQuery" value="SELECT 1" /> <property name="testWhileIdle" value="true" /> <property name="testOnBorrow" value="false" /> <property name="testOnReturn" value="false" /> <!-- 打开PSCache,并且指定每个连接上PSCache的大小 --> <property name="poolPreparedStatements" value="true" /> <property name="maxPoolPreparedStatementPerConnectionSize" value="20" /> </bean> <!--Mybatis的SessionFactory配置--> <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="typeAliasesPackage" value="com.dodoke.tmall.pojo" /> <property name="dataSource" ref="dataSource"/> <property name="mapperLocations" value="classpath:mapper/*.xml"/> <!--分页插件,目前先注释,后面重构的时候才会使用 <property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties"> <value> </value> </property> </bean> </array> </property> --> </bean> <!--Mybatis的Mapper文件识别--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.dodoke.tmall.mapper"/> </bean> </beans> ~~~ ## 步骤 21 : springMVC.xml 在resources目录下新建springMVC.xml 1. 开启注解的识别 ~~~ <context:annotation-config/> <context:component-scan base-package="com.dodoke.tmall.controller"> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <mvc:annotation-driven /> ~~~ 2.开通静态资源的访问,否则访问图片,css,js等文件可能出错 ~~~ <mvc:default-servlet-handler /> ~~~ 3. 视图定位 视图定位到/WEB-INF/JSP/*.jsp这里 4. 对上传文件的解析 ~~~ <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" /> ~~~ ~~~ <?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:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> <!--启动注解识别 --> <context:annotation-config /> <!-- 扫描Controller,并将其生命周期纳入Spring管理 --> <context:component-scan base-package="com.dodoke.tmall.controller"> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> <!-- 注解驱动,以使得访问路径与方法的匹配可以通过注解配置 --> <mvc:annotation-driven /> <!--开通静态资源的访问 --> <mvc:default-servlet-handler /> <!-- 视图定位到/WEB/INF/jsp 这个目录下 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 对上传文件的解析 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" /> </beans> ~~~ 目录结构: ![](https://box.kancloud.cn/2da4ea1d507eba7e73259bd86cb1024f_371x747.png) ## 步骤 22 : 修改web.xml 修改web.xml,主要提供如下功能 1. 指定spring的配置文件为classpath下的applicationContext.xml 2. 设置中文过滤器 3. 指定spring mvc配置文件为classpath下的springMVC.xml ~~~ <?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" version="2.5"> <!-- spring的配置文件 --> <!-- 通过ContextLoaderListener在web app启动的时候,获取contextConfigLocation配置文件的文件名applicationContext.xml,并进行Spring相关初始化工作 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--中文过滤器 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- spring mvc核心:分发servlet --> <servlet> <servlet-name>mvc-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- spring mvc的配置文件 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springMVC.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>mvc-dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app> ~~~ > web.xml没指定欢迎页的情况下,它默认先查找index.html文件,如果找到了,就把index.html作为欢迎页还回给浏览器。如果没找到index.html,tomcat就去找index.jsp。找到index.jsp就把它作为欢迎页面返回。而如果index.html和index.jsp都没找到,又没有用web.xml文件指定欢迎页面,那此时tomcat就不知道该返回哪个文件了。 > ## 步骤 23 : 静态资源 接下来是各种静态资源,诸如jquery, bootstrap, css, 图片,公用jsp等,内容稍杂,就不挨个列出来了。 这些静态资源打包在webapp.rar里(向老师要相关资料),解压之后,并复制到项目中的webapp目录中,复制结果如图所示。 1. admin目录里有个index.jsp 用户客户端跳转到CategoryController中指定的admin_category_list路径 2. css,img,js目录是样式,图片脚本等文件 3. include/admin目录下是4个JSP包含关系中讲解到的被包含文件 ![](https://box.kancloud.cn/e7739d3c6013f6b3485917b4863fdf90_348x557.png) ## 步骤 24 : listCategory.jsp 通过**静态资源**步骤,就会在WEB-INF下创建jsp目录。 然后在jsp目录中创建admin目录,接着创建listCategory.jsp文件 listCategory.jsp主要作用是通过27行的forEach标签遍历"cs"里的内容,然后挨个显示出来。 ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <title>分类管理</title> <div class="workingArea"> <h1 class="label label-info" >分类管理</h1> <br> <br> <div class="listDataTableDiv"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>图片</th> <th>分类名称</th> <th>属性管理</th> <th>产品管理</th> <th>编辑</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${cs}" var="c"> <tr> <td>${c.id}</td> <td><img height="40px" src="img/category/${c.id}.jpg"></td> <td>${c.name}</td> <td><a href="admin_property_list?cid=${c.id}"><span class="glyphicon glyphicon-th-list"></span></a></td> <td><a href="admin_product_list?cid=${c.id}"><span class="glyphicon glyphicon-shopping-cart"></span></a></td> <td><a href="admin_category_edit?id=${c.id}"><span class="glyphicon glyphicon-edit"></span></a></td> <td><a deleteLink="true" href="admin_category_delete?id=${c.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> <div class="pageDiv"> <%//@include file="../include/admin/adminPage.jsp" %> </div> <div class="panel panel-warning addDiv"> <div class="panel-heading">新增分类</div> <div class="panel-body"> <form method="post" id="addForm" action="admin_category_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>分类名称</td> <td><input id="name" name="name" type="text" class="form-control"></td> </tr> <tr> <td>分类图片</td> <td> <input id="categoryPic" accept="image/*" type="file" name="image" /> </td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> </div> <%@include file="../include/admin/adminFooter.jsp"%> <script> $(function(){ $("#addForm").submit(function(){ if(!checkEmpty("name","分类名称")) return false; if(!checkEmpty("categoryPic","分类图片")) return false; return true; }); }); </script> ~~~ > 表格参考:菜鸟教程中,Bootstrap教程-Bootstrap表格 ## 步骤 25 : 测试数据 首先点中源目录:src/main/java 然后菜单->File->New->Package 输入 com.dodoke.tmall.test 创建包 接着创建测试TestTmall, 其作用是借助JDBC, 运行代码,创建10条分类测试数据。 注: 既然是SSM教程,为什么不用mybatis创建测试数据,而要用JDBC创建? 因为增加功能要到下个知识点才讲。 ~~~ package com.dodoke.tmall.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.SQLException; public class TestTmall { public static void main(String args[]) { Connection conn = null; PreparedStatement ps = null; String url = "jdbc:mysql://localhost:3306/tmall_ssm?useUnicode=true&characterEncoding=utf8"; String user = "root"; String password = ""; try { // 1.选择连接数据库:加载数据库驱动 Class.forName("com.mysql.jdbc.Driver"); // 2.连接数据库 conn = DriverManager.getConnection(url, user, password); for (int i = 1; i <= 10; i++) { // 3.创建数据库查询(加入占位符) ps = conn.prepareStatement("INSERT INTO t_category(name) VALUES(?)"); ps.setString(1, "测试分类" + i); // 4.获取查询结果 ps.executeUpdate(); } System.out.println("已经成功创建10条分类测试数据"); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } finally { // 5.关闭查询和连接 try { if (null != ps) { ps.close(); } if (null != conn) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } } } ~~~ ![](https://box.kancloud.cn/ced040eadbcf5608e1a6cacd5c1d82dc_155x308.png) ## 步骤 26 : 启动Tomcat并观察效果 通过Eclipse中的tomcat启动并部署项目之后,访问地址: `http://localhost:8080/tmall_ssm/admin_category_list` 将观察到如图的运行效果 注: 刚开始看不到分类数据,分类数据需要自己添加 ![](https://box.kancloud.cn/6f8d32e68d7e466b7e2ce42fe48edec1_1828x443.png) ### 问题 1. 正常运行之后图片不显示,请问这样是正常的吗? > 对的,要增加,或者修改的时候上传了图片才看得到图片。 ## 步骤 27 : 可运行项目 实在自己搞不出来,就比较下可运行项目中的内容。 ## 步骤 28 : 思路图 1. 首先浏览器上访问路径 /admin_category_list 2. tomcat根据web.xml上的配置信息,拦截到了/admin_category_list,并将其交由DispatcherServlet处理。 3. DispatcherServlet 根据springMVC的配置,将这次请求交由CategoryController类进行处理,所以需要进行这个类的实例化 4. 在实例化CategoryController的时候,注入CategoryServiceImpl 5. 在实例化CategoryServiceImpl的时候,又注入CategoryMapper 6. 根据ApplicationContext.xml中的配置信息,将CategoryMapper和CategoryMapper.xml关联起来了。 7. 这样就拿到了实例化好了的CategoryController,并调用list方法 8. 在list方法中,访问CategoryService,并获取数据,并把数据放在"cs"上,接着服务端跳转到listCategory.jsp去 9. 最后在listCategory.jsp 中显示数据 ![](https://box.kancloud.cn/2848b4d0e949da1b4ea5054d891b997d_1188x522.png)