當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

『收藏向期末SSM课设救急』教你从搭建到测试运行手撸一个SSM项目实战，附带源码，前端页面、解析和一般遇到的问题(排雷)

發布時間：2025/3/8 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了『收藏向期末SSM课设救急』教你从搭建到测试运行手撸一个SSM项目实战，附带源码，前端页面、解析和一般遇到的问题(排雷) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🛫ssm知識學習見SSM_面向CRUD編程專欄

🚕本項目來自動力節點的【米米商城】

🚒博主對于該知識尚在學習階段

🚄如果發現存在問題請毫不吝嗇的指出

🚀🚀扎哇太棗糕的博客主頁🚀🚀

項目完成并更新到giteeZaoGao_ssm: ssm項目——棗糕商城?，但是不建議使用倉庫中gitee的前端頁面，博客中會有相應的初始化的前端頁面下載，從頭跟著博客一步一步的做

1 框架構建

1.1 項目所需技術

1.2 項目搭建

1.3 配置所有的文件信息

2 登錄功能的業務邏輯?

2.1?MD5加密算法

2.2?登錄代碼

2.3 測試執行?

3 商品管理功能的業務邏輯?

3.1 商品管理之查詢所有產品

3.2?商品管理之Ajax分頁翻頁顯示

3.3?商品管理之新增商品

3.3.1 新增商品之下拉框顯示商品類型

3.3.2?新增商品之異步Ajax圖片上傳

3.3.3 新增商品之信息持久化數據庫

3.4?商品管理之商品編輯

?3.5?商品管理之商品刪除

3.5.1 商品刪除之單個刪除

3.5.2?商品刪除之批量刪除

3.6?商品管理之多條件查詢

3.6?商品管理之刪除優化

1 框架構建

1.1 項目所需技術

服務端：Spring+SpringMVC+MyBatis
數據庫：MySql
web服務器：Tomcat
項目管理：Maven
前端：jQuery+BootStrap+JavaScript+Ajax
開發工具：idea

????????其中前端頁面、圖片等部分提供源碼，不需要我們自己進行編寫，只需要了解即可。

1.2 項目搭建

第一步：創建一個maven項目

第二步：添加web依賴成為web項目?

這里因為一些原因使用的是以前的圖，本次項目需要在上步創建好的項目上右鍵，一通操作之后將生成的web目錄放到src/main目錄下

第三步：搭建層級結構，里面內容為空?

第四步：導入所有的前端頁面

????????下載前端頁面復制粘貼到web目錄下，下載地址：棗糕商城所需的前端頁面下載

第五步：創建數據庫

????????下載數據庫的SQL文件，在Navicat的連接處右鍵運行SQL文件選中文件并運行，或者直接將下載好的文件拖拽到Navicat的連接處，SQL文件下載地址：棗糕商城的數據庫SQL文件下載

第六步：pom.xml文件導入依賴

<properties><junit.version>4.12</junit.version><spring.version>5.2.5.RELEASE</spring.version><mybatis.version>3.5.1</mybatis.version><mybatis.spring.version>1.3.1</mybatis.spring.version><mybatis.paginator.version>1.2.15</mybatis.paginator.version><mysql.version>8.0.22</mysql.version><slf4j.version>1.6.4</slf4j.version><druid.version>1.1.12</druid.version><pagehelper.version>5.1.2</pagehelper.version><jstl.version>1.2</jstl.version><servlet-api.version>3.0.1</servlet-api.version><jsp-api.version>2.0</jsp-api.version><jackson.version>2.9.6</jackson.version></properties><dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</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><dependency><groupId>org.springframework</groupId><artifactId>spring-jms</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId><version>${spring.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>com.github.miemiedev</groupId><artifactId>mybatis-paginator</artifactId><version>${mybatis.paginator.version}</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>${pagehelper.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>junit</groupId><artifactId>junit</artifactId><version>${junit.version}</version><scope>test</scope></dependency><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>${jstl.version}</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.0.1</version><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><scope>provided</scope><version>${jsp-api.version}</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>${jackson.version}</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><source>1.8</source><target>1.8</target><encoding>UTF-8</encoding></configuration></plugin></plugins><resources><resource><directory>src/main/java</directory><includes><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource><resource><directory>src/main/resources</directory><includes><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource></resources></build>

1.3 配置所有的文件信息

配置文件先都創建好并加入一些基本配置信息，后期還會對其中內容進行增添

mybatis.xml

resource目錄右鍵-->new-->File

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin></plugins> </configuration>

jdbc.properties

resource目錄右鍵-->new-->File

jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/zaogaossm?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true jdbc.username=root jdbc.password=123456

spring-dao.xml

resource目錄右鍵-->new-->XML Configuration File-->Spring Config

<?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/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"><context:property-placeholder location="classpath:jdbc.properties"/><bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"><property name="driverClassName" value="${jdbc.driver}"/><property name="url" value="${jdbc.url}"/><property name="username" value="${jdbc.username}"/><property name="password" value="${jdbc.password}"/></bean><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="dataSource"/><property name="configLocation" value="classpath:mybatis.xml"/><property name="typeAliasesPackage" value="com.xiaochen.domain"/></bean><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.xiaochen.mapper"/></bean> </beans>

spring-service.xml

resource目錄右鍵-->new-->XML Configuration File-->Spring Config

spring-tx.xml

resource目錄右鍵-->new-->XML Configuration File-->Spring Config

<?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:tx="http://www.springframework.org/schema/tx"xmlns:aop="http://www.springframework.org/schema/aop"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/txhttp://www.springframework.org/schema/tx/spring-tx.xsdhttp://www.springframework.org/schema/aophttps://www.springframework.org/schema/aop/spring-aop.xsd"><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource"></property></bean><tx:advice id="txAdvice" transaction-manager="transactionManager"><tx:attributes><tx:method name="save*" propagation="REQUIRED" /><tx:method name="insert*" propagation="REQUIRED" /><tx:method name="add*" propagation="REQUIRED" /><tx:method name="create*" propagation="REQUIRED" /><tx:method name="delete*" propagation="REQUIRED" /><tx:method name="update*" propagation="REQUIRED" /><tx:method name="find*" propagation="SUPPORTS" read-only="true" /><tx:method name="select*" propagation="SUPPORTS" read-only="true" /><tx:method name="get*" propagation="SUPPORTS" read-only="true" /><tx:method name="query*" propagation="SUPPORTS" read-only="true" /><tx:method name="*" propagation="SUPPORTS"/></tx:attributes></tx:advice><aop:config><aop:pointcut id="txPointcut" expression="execution(* com.xiaochen.service.*.*(..))"/><aop:advisor advice-ref="txAdvice" pointcut-ref="txPointcut"/></aop:config> </beans>

springMVC.xml

resource目錄右鍵-->new-->XML Configuration File-->Spring Config

<?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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd"><mvc:annotation-driven/> <context:component-scan base-package="com.xiaochen.controller"><context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/></context:component-scan><bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/admin/"/><property name="suffix" value=".jsp"/></bean><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/></beans>

web.xml

添加web支持之后生成的web/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><welcome-file-list><welcome-file>/admin/login.jsp</welcome-file></welcome-file-list><servlet><servlet-name>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springMVC.xml</param-value></init-param></servlet><servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>*.action</url-pattern></servlet-mapping><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring-*.xml</param-value></context-param><filter><filter-name>encode</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><init-param><param-name>forceRequestEncoding</param-name><param-value>true</param-value></init-param><init-param><param-name>forceResponseEncoding</param-name><param-value>true</param-value></init-param></filter><filter-mapping><filter-name>encode</filter-name><url-pattern>/*</url-pattern></filter-mapping></web-app>

2 登錄功能的業務邏輯?

2.1?MD5加密算法

? ? ? ? MD5加密算法可以直接下載該java文件放到utils目錄下即可使用，下載地址：實現MD5加密java文件下載?，下載之后復制粘貼到utils目錄下?????????這里插播一個小內容，前面生成數據庫表的sql文件有一點點的問題，在admin表中存儲的數據是000000，實際上應該是c984aed014aec7623a54f0591da07a85fd4b762d，即是000000經過MD5加密之后的字符串。所以我們要先改變一下a_pass這個字段的長度為255，在將加密之后的字符串存進去。

2.2?登錄代碼

????????按本人業務實現習慣都是先編寫domain層的數據庫對應實體類(有的話就不寫)，然后是mapper接口和對應的xml映射文件的編寫，再然后就是service接口和對應實現類的編寫，最后就是controller與前端交互的編寫。編寫順序依照個人習慣而言，寫著舒服即可。

domain層

admin數據表對應的實體類

public class Admin {private Integer aId;private String aName;private String aPass;public Integer getaId() {return aId;}public void setaId(Integer aId) {this.aId = aId;}public String getaName() {return aName;}public void setaName(String aName) {this.aName = aName == null ? null : aName.trim();}public String getaPass() {return aPass;}public void setaPass(String aPass) {this.aPass = aPass == null ? null : aPass.trim();} }

mapper層

mapper接口實現按用戶名查詢數據庫

public interface AdminMapper {/*** 管理員的登錄* @param name 管理員的用戶名* @return Admin* */List<Admin> queryByName(String name); }

????????在resource目錄下新建一個package使用com/xiaochen/mapper命名，這里的分割符一定是/而不是.具體為啥我也不知道😑，package中新建一個AdminMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.xiaochen.mapper.AdminMapper"><resultMap id="BaseResultMap" type="com.xiaochen.domain.Admin"><id column="a_id" jdbcType="INTEGER" property="aId" /><result column="a_name" jdbcType="VARCHAR" property="aName" /><result column="a_pass" jdbcType="VARCHAR" property="aPass" /></resultMap><select id="queryByName" parameterType="string" resultMap="BaseResultMap">select * from admin where a_name=#{name}</select></mapper>

service層

AdminService接口

public interface AdminService {/*** 管理員的登錄* @param name 管理員的用戶名* @return Admin* */List<Admin> queryByName(String name); }

創建一個AdminServiceImpl

@Service public class AdminServiceImpl implements AdminService {// 創建mapper層的對象，注入@Autowiredprivate AdminMapper adminMapper;@Overridepublic List<Admin> queryByName(String name) {// 調用mapper的queryByName方法，得到所有用戶名為name的管理員信息return adminMapper.queryByName(name);} }

controller層

AdminController實現登錄判斷

@Controller @RequestMapping("/admin") public class AdminController {// 注入adminservice對象@Autowiredprivate AdminService adminService;// 實現登錄判斷并進行相應的跳轉@RequestMapping("/login")public String login(String name, String pwd, HttpServletRequest request) {List<Admin> admins = adminService.queryByName(name);// 對查詢到的所有管理員進行密碼比對 for (Admin admin : admins) {// 數據庫中存儲的是加密之后的密碼，于是要將輸入的密碼進行加密之后再進行比較if (MD5Util.getMD5(pwd).equals(admin.getaPass())) {// 登陸成功，跳轉admin.jsp頁面并將這個admin對象傳遞給前端request.setAttribute("admin", admin);return "main";}}// 所有的管理員密碼都不匹配的話登陸失敗，跳回login.jsp頁面并傳遞失敗信息request.setAttribute("errmsg", "用戶名或者密碼不正確！！");return "login";} }

2.3 測試執行?

????????tomcat版本安裝(切記，不要安裝tomcat 9！！如果安裝tomcat9的話會導致下一步的商品管理顯示不出來，本人使用的是tomcat 7.0.108僅供參考)以及idea中配置tomcat參考我的這篇博客，點擊鏈接直接在目錄上點擊Tomcat的部分直接空降即可：關于黑馬程序員最全SSM框架教程視頻，P37集老師跳過的模塊創建以及tomcat下載安裝配置和運行等諸多問題

如果運行不開的話，自查一下以下兩小項

依賴jar包是否已經導入到lib目錄下

web.xml文件是否加載上且正確加載

一切就緒之后運行tomcat服務器會彈出登錄界面(因為之前web.xml文件設置了<welcome-file-list>標簽，所以一啟動就會跳轉到這個登錄的jsp頁面)

?登陸成功，網頁跳轉

登陸失敗，回寫數據

3 商品管理功能的業務邏輯?

3.1 商品管理之查詢所有產品

?domain層

productInfo數據表對應的實體類

public class ProductInfo {private Integer pId;private String pName;private String pContent;private Integer pPrice;private String pImage;private Integer pNumber;private Integer typeId;private Date pDate;public Integer getpId() {return pId;}public void setpId(Integer pId) {this.pId = pId;}public String getpName() {return pName;}public void setpName(String pName) {this.pName = pName == null ? null : pName.trim();}public String getpContent() {return pContent;}public void setpContent(String pContent) {this.pContent = pContent == null ? null : pContent.trim();}public Integer getpPrice() {return pPrice;}public void setpPrice(Integer pPrice) {this.pPrice = pPrice;}public String getpImage() {return pImage;}public void setpImage(String pImage) {this.pImage = pImage == null ? null : pImage.trim();}public Integer getpNumber() {return pNumber;}public void setpNumber(Integer pNumber) {this.pNumber = pNumber;}public Integer getTypeId() {return typeId;}public void setTypeId(Integer typeId) {this.typeId = typeId;}public Date getpDate() {return pDate;}public void setpDate(Date pDate) {this.pDate = pDate;} }

mapper層

ProductInfoMapper接口

public interface ProductInfoMapper {/*** 全部商品的顯示* @return ProductInfo*/List<ProductInfo> queryAll(); }

????????在resource目錄的com/xiaochen/mapper的package中新建一個ProductInfoMapper.xml文件

<?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.xiaochen.mapper.ProductInfoMapper" ><resultMap id="BaseResultMap" type="com.xiaochen.domain.ProductInfo" ><id column="p_id" property="pId" jdbcType="INTEGER" /><result column="p_name" property="pName" jdbcType="VARCHAR" /><result column="p_content" property="pContent" jdbcType="VARCHAR" /><result column="p_price" property="pPrice" jdbcType="INTEGER" /><result column="p_image" property="pImage" jdbcType="VARCHAR" /><result column="p_number" property="pNumber" jdbcType="INTEGER" /><result column="type_id" property="typeId" jdbcType="INTEGER" /><result column="p_date" property="pDate" jdbcType="DATE" /></resultMap><select id="queryAll" resultMap="BaseResultMap">select * from product_info</select></mapper>

service層

ProductInfoService接口

public interface ProductInfoService {/*** 全部商品的顯示* @return ProductInfo*/List<ProductInfo> queryAll(); }

創建一個ProductInfoServiceImpl

@Service public class ProductInfoServiceImpl implements ProductInfoService {// 注入productInfoMapper@Autowiredprivate ProductInfoMapper productInfoMapper;@Overridepublic List<ProductInfo> queryAll() {return productInfoMapper.queryAll();} }

controller層

ProductInfoController查詢所有的商品信息

@Controller @RequestMapping("/prod") public class ProductInfoController {// 注入productInfoService@Autowiredprivate ProductInfoService productInfoService;// 查詢所有的產品信息@RequestMapping("/queryAll")public String queryAll(HttpServletRequest request) {List<ProductInfo> products= productInfoService.queryAll();request.setAttribute("list", products);return "product";}}

運行測試

????????運行之前先修改一下前端頁面mian.jsp和product.jsp的一個小小的代碼，這個地方不是說前端代碼有錯只是本次測試使用，下面的功能還是要再改回來滴

?運行，切記是tomcat7，9的高版本會有問題?

3.2?商品管理之Ajax分頁翻頁顯示

? ? ? ? 為了便于觀察后面添加商品，也是符合實際場景，讓數據庫中的產品信息按照主鍵p_id倒序查出，這樣的話新插入的數據就是在第一條顯示了，這個功能交由MyBatis的查詢解決。

??domain層

productInfo數據表對應的實體類，已經存在不再創建

mapper層

ProductInfoMapper接口添加方法

/** * 對某表按某字段某順序排序 * @param tableName 某表 * @param field 某字段 * @param order 某順序desc降序或者abs升序 */ List<ProductInfo> orderById(@Param("tableName") String tableName, @Param("field") String field, @Param("order") String order);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件添加動態SQL查詢語句

<select id="orderById" parameterType="string" resultMap="BaseResultMap">select * from ${tableName}<if test="field != null">order by ${field}</if><if test="order!=null">${order}</if></select>

service層

ProductInfoService接口添加分頁方法

/*** 分頁操作* @param pageNum 查詢第幾頁的數據* @param PageSize 每頁有幾條數據* @return 分頁插件中帶的pageInfo實體類*/PageInfo splitPage(int pageNum, int PageSize);

????????ProductInfoServiceImpl添加分頁方法，先調用倒序查詢再將結果封裝到分頁插件自帶的pageInfo實體類中，封裝進去之后分頁插件自動將查詢到的集合轉換成諸如一共可以分多少頁上一頁下一頁等屬性，然后就可以很簡單的調用實體類中的屬性完成分頁翻頁操作了

@Overridepublic PageInfo splitPage(int pageNum, int PageSize) {// 分頁插件使用pageHelper進行分頁設置PageHelper.startPage(pageNum, PageSize);// 調用orderById方法，對product_info表的p_id字段進行desc降序操作List<ProductInfo> productInfos = productInfoMapper.orderById("product_info", "p_id", "desc");// 將查詢到的集合封裝到pageInfo對象中并返回PageInfo<ProductInfo> pageInfo = new PageInfo<>(productInfos);return pageInfo;}

controller層

ProductInfoController進行分頁用于返回展示一開始的五條數據，翻頁是調用Ajax的翻頁，翻頁的技術前端已經完成，我們只需要編寫翻頁代碼，將前端傳回來的第幾頁查出來并返回給前端進行顯示

首先需要在ProductInfoController類的最上面定義一個常量PAGE_SIZE值為5

然后添加split方法

// Ajax分頁@RequestMapping("/split")public String split(HttpServletRequest request) {PageInfo pageInfo = productInfoService.splitPage(1, PAGE_SIZE);// 放到域中，前端接收request.setAttribute("info", pageInfo);return "product";}// Ajax翻頁@ResponseBody@RequestMapping("/ajaxsplit")public void ajaxSplit(int page, HttpSession session) {PageInfo pageInfo = productInfoService.splitPage(page, PAGE_SIZE);// 放到域中，前端接收session.setAttribute("info", pageInfo);}

運行測試

????????運行之前先將前端頁面mian.jsp和product.jsp的代碼修改回來，一個加上info.一個改成split.action

?運行，切記是tomcat7，9的高版本會有問題?

3.3?商品管理之新增商品

3.3.1 新增商品之下拉框顯示商品類型

??domain層

productType數據表對應的實體類

public class ProductType {private Integer typeId;private String typeName;public Integer getTypeId() {return typeId;}public void setTypeId(Integer typeId) {this.typeId = typeId;}public String getTypeName() {return typeName;}public void setTypeName(String typeName) {this.typeName = typeName == null ? null : typeName.trim();} }

mapper層

新建ProductTypeMapper接口

public interface ProductTypeMapper {/*** 查詢所有的商品類別* @return ProductType*/List<ProductType> queryAll(); }

????????在resource目錄的com/xiaochen/mapper的package中新建ProductTypeMapper.xml文件

service層

ProductTypeService接口

public interface ProductTypeService {/*** 查詢所有的商品類別* @return ProductType*/List<ProductType> queryAll(); }

ProductTypeServiceImpl實現類

// 注解加字符串為了監聽器中創建對象使用 @Service("productTypeServiceImpl") public class ProductTypeServiceImpl implements ProductTypeService {// 注入ProductTypeMapper對象@Autowiredprivate ProductTypeMapper productTypeMapper;@Overridepublic List<ProductType> queryAll() {List<ProductType> productTypes = productTypeMapper.queryAll();return productTypes;} }

新建一個listener層

ProductTypeListener是一個監聽器類，用于在web項目啟動的時候獲取所有的商品類別，并放到全局應用作用域中，供新增、修改、查詢提供全部商品類型集合

@WebListener public class ProductTypeListener implements ServletContextListener {@Overridepublic void contextInitialized(ServletContextEvent servletContextEvent) {// 手工從spring容器取出ProductTypeServiceImpl的對象ApplicationContext context = new ClassPathXmlApplicationContext("spring-*.xml");ProductTypeService productTypeService = (ProductTypeService) context.getBean("productTypeServiceImpl");// 獲取所有的商品類別，并放到全局應用作用域中，供新增、修改、查詢提供全部商品類型集合List<ProductType> productTypes = productTypeService.queryAll();servletContextEvent.getServletContext().setAttribute("ptlist", productTypes);}@Overridepublic void contextDestroyed(ServletContextEvent servletContextEvent) {} }

運行測試

?? ? ? ? 直接運行，切記是tomcat7，9的高版本會有問題?

3.3.2?新增商品之異步Ajax圖片上傳

????????下載隨機生成文件名稱的工具類，并將其復制粘貼到utils包下，下載地址：隨機生成文件名的工具類下載使用UUID生成文件名，再拼接上圖片的后綴，給圖片隨機生成一個新的名稱，這么做的目的是新添加進去的圖片不會因為命名相同而被覆蓋掉

pom.xml文件添加依賴

controller層

????????ProductInfoController類中添加異步上傳方法，主要就是將選擇的圖片重新生成一個新的名字轉存在項目的webapp下的image_big文件夾下，并將封面圖片的路徑封裝在一個JSON類型數據中，前端獲取到JSON得到文件路徑取出圖片在前端進行一個回顯的操作

// 異步Ajax上傳 @ResponseBody @RequestMapping("/ajaxImg") public Object ajaxImg(MultipartFile pimage, HttpServletRequest request) throws IOException {// 提取生成文件名：UUID+上傳文件的后綴String saveFileName = FileNameUtil.getUUIDFileName() + FileNameUtil.getFileType(pimage.getOriginalFilename());// 得到項目中圖片存儲的路徑String path = request.getServletContext().getRealPath("/image_big");// 轉存圖片 image_big的路徑動態分隔符新生成的文件名pimage.transferTo(new File(path + File.separator + saveFileName));// 返回客戶端JSON對象，封面圖片的路徑，為了在頁面進行回顯操作JSONObject object = new JSONObject();object.put("imgurl", saveFileName);return object.toString(); }

運行測試

直接運行，切記是tomcat7，9的高版本會有問題?

3.3.3 新增商品之信息持久化數據庫

??domain層

productInfo數據表對應的實體類已經存在不用創建

mapper層

ProductInfoMapper接口添加方法

/*** 新增商品信息持久化數據庫* @param info 產品信息的數據庫* @return 是否insert成功*/ int save(ProductInfo info);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件，添加插入數據的SQL

<insert id="save" parameterType="com.xiaochen.domain.ProductInfo">insert into product_info(p_name,p_content,p_price,p_image,p_number,type_id,p_date) values (#{pName},#{pContent},#{pPrice},#{pImage},#{pNumber},#{typeId},#{pDate}) </insert>

service層

ProductInfoService接口添加方法

/*** 新增商品信息持久化數據庫* @param info 產品信息的數據庫* @return 是否insert成功*/ int save(ProductInfo info);

ProductInfoServiceImpl實現類

@Override public int save(ProductInfo info) {int flag = productInfoMapper.save(info);return flag; }

controller層

ProductInfoController將添加商品的所有信息持久化到數據庫中

????????為了方便獲取圖片名稱，現將ProductInfoController類的ajaxImg方法中的方法變量saveFileName提升為類的成員變量，這樣的話就可以在ProductInfoController類的所有方法中調用變量的值。具體操作是在常量PAGE_SIZE的下面定義變量saveFileName

并將ajaxImg方法中的String定義刪去，相當于在類中定義并初始化，在方法中重新賦值

ProductInfoController類中添加save方法

// 持久化數據庫 @RequestMapping("/save") public String save(ProductInfo info, HttpServletRequest request) {// 前端已經獲取到新增商品的商品名稱、商品介紹、定價、總數量、類別// 后端添加圖片名稱和添加日期info.setpImage(saveFileName);info.setpDate(new Date());// 調用插入數據的方法，并返回msg給前臺彈窗使用int flag = -1;try {flag = productInfoService.save(info);} catch (Exception e) {e.printStackTrace();}if (flag > 0) {request.setAttribute("msg", "增加成功！！");}else {request.setAttribute("msg", "增加失敗");}// 清空saveFileName里的值，為了下次增加或者修改的異步Ajax圖片上傳saveFileName = "";// 插入成功之后跳轉執行上面的展示產品return "forward:/prod/split.action"; }

運行測試

????????直接運行，切記是tomcat7，9的高版本會有問題?

3.4?商品管理之商品編輯

????????商品編輯有兩個需求，需求一：就是需要先根據主鍵p_id查詢到所有的商品信息，交給前端做一個回顯的操作。需求二：將前端頁面中的數據更新到數據庫(p_date不做更改)，回顯到前端頁面的數據在數據庫按照主鍵p_id進行一個更新操作

???domain層

productInfo數據表對應的實體類已經存在不用創建

mapper層

ProductInfoMapper接口添加方法

/*** 按主鍵p_id查詢所有的數據* @param pid 商品的主鍵* @return 一個使用實體類封裝好的商品所有信息*/ ProductInfo queryById(int pid);/*** 更新商品信息* @param info 使用實體類封裝好的商品所有信息* @return 是否更新成功*/ int update(ProductInfo info);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件，添加插入數據的SQL

<select id="queryById" parameterType="int" resultMap="BaseResultMap">select * from product_info where p_id=#{p_id} </select> <update id="update" parameterType="com.xiaochen.domain.ProductInfo">update product_info set p_name=#{pName},p_content=#{pContent},p_price=#{pPrice},p_image=#{pImage},p_number=#{pNumber},type_id=#{typeId} WHERE p_id=#{pId} </update>

service層

ProductInfoService接口添加方法

ProductInfoServiceImpl實現類

@Override public ProductInfo queryById(int pid) {ProductInfo productInfo = productInfoMapper.queryById(pid);return productInfo; }@Override public int update(ProductInfo info) {int flag = productInfoMapper.update(info);return flag; }

controller層

ProductInfoController實現兩個需求

// 根據主鍵查找商品，并傳遞給前端做一個回顯的操作(點擊編輯文本框里是該商品在數據庫中的信息) @RequestMapping("/one") public String one(int pid, Model model) {ProductInfo info = productInfoService.queryById(pid);model.addAttribute("prod", info);return "update"; }// 更新商品信息 @RequestMapping("update") public String update(ProductInfo info, HttpServletRequest request) {// 判斷一下，如果點擊編輯之后不去更新圖片的話，saveFileName就是空的，此時圖片使用的是前端隱藏域信息，圖片的名稱從前端域中獲取并回顯// 反之，點擊瀏覽修改圖片信息的話，相當于又是一次的Ajax異步上傳，這時就會使用UUID生成一個新的圖片名saveFileName// 需要我們手動將圖片的名設置為saveFileNameif (!saveFileName.equals("")) {info.setpImage(saveFileName);}// 數據庫更新int num = -1;try {num = productInfoService.update(info);} catch (Exception e) {e.printStackTrace();}// 返回msg信息給前端彈窗使用if (num > 0) {request.setAttribute("msg", "更新成功！");}else {request.setAttribute("msg", "更新失敗！");}//清空saveFileName，不影響下一次操作saveFileName = "";// 插入成功之后跳轉執行上面的展示產品return "forward:/prod/split.action"; }

運行測試

????????首先修改一下前端update.jsp第119行左右的一個代碼

????????直接運行，切記是tomcat7，9的高版本會有問題?

?3.5?商品管理之商品刪除

3.5.1 商品刪除之單個刪除

? ? ? ? 頁面上的商品刪除工作有一個需求，就是在第幾頁刪除之后還是返回還是在第幾頁，只不過需要用到查詢的內容，于是先讓其返回第一頁，最后再優化實現同頁返回。

domain層

productInfo數據表對應的實體類已經存在不用創建

mapper層

ProductInfoMapper接口添加方法

/*** 按照主鍵對商品進行刪除* @param pid 商品的主鍵* @return 是否刪除成功*/ int delete(int pid);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件，添加插入數據的SQL

<delete id="delete" parameterType="int">delete from product_info where p_id=#{pid} </delete>

service層

ProductInfoService接口添加方法

/*** 按照主鍵對商品進行刪除* @param pid 商品的主鍵* @return 是否刪除成功*/ int delete(int pid);

ProductInfoServiceImpl實現類

@Override public int delete(int pid) {int flag = productInfoMapper.delete(pid);return flag; }

controller層

ProductInfoController實現兩個需求

// 更新商品信息 @RequestMapping("/delete") public String delete(int pid, HttpServletRequest request) {// 刪除數據int flag = -1;try {flag = productInfoService.delete(pid);} catch (Exception e) {e.printStackTrace();}if (flag > 0) {request.setAttribute("msg", "刪除成功！！");}else {request.setAttribute("msg", "刪除失敗！！");}// 刪除成功之后跳轉執行上面的展示產品return "forward:/prod/deleteAjaxSplit.action"; }// 返回彈窗的msg信息 @ResponseBody @RequestMapping(value = "/deleteAjaxSplit", produces = "text/html;charset=UTF-8") public Object deleteAjaxSplit(HttpServletRequest request) {// 取得第一頁的數據PageInfo info = productInfoService.splitPage(1, PAGE_SIZE);request.getSession().setAttribute("info", info);// 返回msg語句return request.getAttribute("msg"); }

運行測試

????????首先修改一下前端product.jsp的兩處代碼

$.ajax({url:"${pageContext.request.contextPath}/prod/delete.action",data:{"pid":pid},type:"post",dataType:"text",success:function (msg) {alert(msg);$("#table").load("${pageContext.request.contextPath}/admin/product.jsp #table");} });

????????直接運行，切記是tomcat7，9的高版本會有問題?

3.5.2?商品刪除之批量刪除

domain層

productInfo數據表對應的實體類已經存在不用創建

mapper層

ProductInfoMapper接口添加方法

/*** 批量刪除商品* @param ids 刪除商品的主鍵p_id們* @return 是否刪除成功*/ int deleteBatch(String[] ids);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件，添加插入數據的SQL

<delete id="deleteBatch">delete from product_info<where><foreach collection="array" item="pid" separator="," open="p_id in(" close=")">#{pid}</foreach></where> </delete>

service層

ProductInfoService接口添加方法

/*** 批量刪除商品* @param ids 刪除商品的主鍵p_id們* @return 是否刪除成功*/ int deleteBatch(String[] ids);

ProductInfoServiceImpl實現類

@Override public int deleteBatch(String[] ids) {int flag = productInfoMapper.deleteBatch(ids);return flag; }

controller層

ProductInfoController實現兩個需求

// 批量刪除商品 @RequestMapping("/deleteBatch") public String deleteBatch(String pids, HttpServletRequest request) {// 分隔傳過來的字符串，拆分為數組String[] ps = pids.split(",");// 批量刪除并返回msg信息int flag = productInfoService.deleteBatch(ps);try {if (flag > 0) {request.setAttribute("msg", "批量刪除成功！！");}else {request.setAttribute("msg", "批量刪除成功！！");}} catch (Exception e) {request.setAttribute("msg", "商品不可刪除！！");}return "forward:/prod/deleteAjaxSplit.action"; }

運行測試

????????首先修改一下前端product.jsp的一處代碼

????????直接運行，切記是tomcat7，9的高版本會有問題?

3.6?商品管理之多條件查詢

domain層

domain包下創建一個vo包，vo包下創建一個ProductInfoVo類，用于封裝查詢條件

public class ProductInfoVo {// 商品名稱private String pname;// 商品類型private Integer typeid;// 最低價格private Integer lprice;// 最高價格private Integer hprice;// 設置頁碼private Integer page = 1;public ProductInfoVo() {}public ProductInfoVo(String pname, Integer typeid, Integer lprice, Integer hprice, Integer page) {this.pname = pname;this.typeid = typeid;this.lprice = lprice;this.hprice = hprice;this.page = page;}public String getPname() {return pname;}public void setPname(String pname) {this.pname = pname;}public Integer getTypeid() {return typeid;}public void setTypeid(Integer typeid) {this.typeid = typeid;}public Integer getLprice() {return lprice;}public void setLprice(Integer lprice) {this.lprice = lprice;}public Integer getHprice() {return hprice;}public void setHprice(Integer hprice) {this.hprice = hprice;}public Integer getPage() {return page;}public void setPage(Integer page) {this.page = page;} }

mapper層

ProductInfoMapper接口添加方法

/*** 多條件查詢* @param vo 所有條件的封裝* @return 返回所有的商品信息*/ List<ProductInfo> queryByCondition(ProductInfoVo vo);

????????在resource目錄的com/xiaochen/mapper的package中的ProductInfoMapper.xml文件，添加插入數據的SQL

<select id="queryByCondition" parameterType="com.xiaochen.domain.vo.ProductInfoVo" resultMap="BaseResultMap">select * from product_info<where><if test="pname != null and pname != ''">and p_name like '%${pname}%'</if><if test="typeid != null and typeid != -1">and type_id = #{typeid}</if><if test="(lprice != null and lprice != '') and (hprice == null or hprice == '')">and p_price >= #{lprice}</if><if test="(lprice == null or lprice == '') and (hprice != null and hprice != '')">and p_price <= #{hprice}</if><if test="(lprice != null and lprice != '') and (hprice != null and hprice != '')">and p_price between #{lprice} and #{hprice}</if></where>order by p_id desc </select>

service層

ProductInfoService接口添加方法

/*** 多條件查詢* @param vo 所有條件的封裝* @return 返回所有的商品信息*/ List<ProductInfo> queryByCondition(ProductInfoVo vo);/*** 多條件查詢分頁* @param vo 查詢條件* @param pageSize 每頁有幾條數據* @return*/ PageInfo<ProductInfo> splitPageVo(ProductInfoVo vo, int pageSize);

ProductInfoServiceImpl實現類

@Override public List<ProductInfo> queryByCondition(ProductInfoVo vo) {List<ProductInfo> productInfos = productInfoMapper.queryByCondition(vo);return productInfos; }@Override public PageInfo<ProductInfo> splitPageVo(ProductInfoVo vo, int pageSize) {// 分頁插件使用pageHelper進行分頁設置PageHelper.startPage(vo.getPage(), pageSize);// 調用orderById方法，對product_info表的p_id字段進行desc降序操作List<ProductInfo> productInfos = productInfoMapper.queryByCondition(vo);// 將查詢到的集合封裝到pageInfo對象中并返回PageInfo<ProductInfo> pageInfo = new PageInfo<>(productInfos);return pageInfo; }

controller層

?ProductInfoController修改上面的split方法，調用分頁時判斷是有條件還是無條件的

// Ajax分頁 @RequestMapping("/split") public String split(HttpServletRequest request) {PageInfo pageInfo = null;// 獲取條件封裝類voProductInfoVo prodVo = (ProductInfoVo) request.getSession().getAttribute("prodVo");// 判斷vo中是否有條件if (prodVo != null) {// 如果有條件的話就調用帶條件的分頁方法splitPageVo顯示條件頁面的數據pageInfo = productInfoService.splitPageVo(prodVo, PAGE_SIZE);// 從session中清除prodVo，以防對后面的操作有影響request.getSession().removeAttribute("prodVo");}else {// 如果沒有條件的話就調用不帶條件的分頁方法splitPage顯示第一頁面的數據pageInfo = productInfoService.splitPage(1, PAGE_SIZE);}// 放到域中，前端接收request.setAttribute("info", pageInfo);return "product"; }

ProductInfoController修改上面的one方法，更新之后能夠停留在當前頁面

?ProductInfoController修改上面的ajaxSplit方法，翻頁的時候獲取頁碼，停留到vo當前頁，如果vo沒值的話就是第一頁

運行測試

????????首先修改一下前端product.jsp的四處代碼

function one(pid, page) {// 取出查詢條件var pname = $("#pname").val();var typeid = $("#typeid").val();var lprice = $("#lprice").val();var hprice = $("#hprice").val();//拼接查詢條件var str = "?pid=" + pid + "&page=" + page + "&pname=" + pname + "&typeid=" + typeid + "&lprice=" + lprice + "&hprice=" + hprice;location.href = "${pageContext.request.contextPath}/prod/one.action" + str; }

???????直接運行，切記是tomcat7，9的高版本會有問題?

????????這部分就不再給大家演示了，可以自己操作測試，完成的成果是：在上面的查詢時能按照所填的條件查詢出相應的商品，更新后依舊停留在當前頁面

3.6?商品管理之刪除優化

前端代碼修改

//單個刪除 function del(pid, page) {// 彈窗提示if (confirm("確定刪除嗎")) {// 發送異步Ajax請求，進行刪除操作// 取出查詢條件var pname = $("#pname").val();var typeid = $("#typeid").val();var lprice = $("#lprice").val();var hprice = $("#hprice").val();$.ajax({url:"${pageContext.request.contextPath}/prod/delete.action",data:{"pid":pid, "page":page, "pname":pname, "typeid":typeid, "lprice":lprice, "hprice":hprice},type:"post",dataType:"text",success:function (msg) {alert(msg);$("#table").load("${pageContext.request.contextPath}/admin/product.jsp #table");}});} }

后端?ProductInfoController

// 返回彈窗的msg信息 @ResponseBody @RequestMapping(value = "/deleteAjaxSplit", produces = "text/html;charset=UTF-8") public Object deleteAjaxSplit(HttpServletRequest request) {// 取得第一頁的數據PageInfo info = null;// 獲取條件封裝類voProductInfoVo deleteProdVo = (ProductInfoVo) request.getSession().getAttribute("deleteProdVo");// 判斷vo中是否有條件if (deleteProdVo != null) {// 如果有條件的話就調用帶條件的分頁方法splitPageVo顯示條件頁面的數據info = productInfoService.splitPageVo(deleteProdVo, PAGE_SIZE);}else {// 如果沒有條件的話就調用不帶條件的分頁方法splitPage顯示第一頁面的數據info = productInfoService.splitPage(1, PAGE_SIZE);}request.getSession().setAttribute("info", info);// 返回msg語句return request.getAttribute("msg"); }

至此，棗糕商城ssm項目已經算是告一段落了，但是項目本身還存在一些小問題和未開發的模塊，敬請大家期待完善

總結

以上是生活随笔為你收集整理的『收藏向期末SSM课设救急』教你从搭建到测试运行手撸一个SSM项目实战，附带源码，前端页面、解析和一般遇到的问题(排雷)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php laravel 返回统一格式,封
下一篇：流程图虚线框表示什么_UI设计|APP的

HTML

『收藏向 期末SSM课设救急』 教你从搭建到测试运行手撸一个SSM项目实战，附带源码，前端页面、解析和一般遇到的问题(排雷)

1 框架構建

1.1 項目所需技術

1.2 項目搭建

1.3 配置所有的文件信息

2 登錄功能的業務邏輯?

2.1?MD5加密算法

2.2?登錄代碼

2.3 測試執行?

3 商品管理功能的業務邏輯?

3.1 商品管理之查詢所有產品

3.2?商品管理之Ajax分頁翻頁顯示

3.3?商品管理之新增商品

3.3.1 新增商品之下拉框顯示商品類型

3.3.2?新增商品之異步Ajax圖片上傳

3.3.3 新增商品之信息持久化數據庫

3.4?商品管理之商品編輯

?3.5?商品管理之商品刪除

3.5.1 商品刪除之單個刪除

3.5.2?商品刪除之批量刪除

3.6?商品管理之多條件查詢

3.6?商品管理之刪除優化

總結

『收藏向期末SSM课设救急』教你从搭建到测试运行手撸一个SSM项目实战，附带源码，前端页面、解析和一般遇到的问题(排雷)