SSM商城项目
业务描述
管理员通过密码登录到系统中，选择商品管理后，会将数据库中的数据全部查询出来并分页显示到页面上。
管理员可以选择新增商品来添加一个商品的信息，包括商品名称，价格，描述，数量，图片，当选择商品的图片，利用ajax来回显你刚刚添加的商品图片
管理员也可以选择修改（修改时要判断你是否修改了图片）
管理员可以删除商品，删除包括单个删除和批量删除
查询包括多条件查询
SSM中的配置文件
pom.xml：
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>com.gjxgroupId>
<artifactId>SSMxiangmuartifactId>
<version>1.0version>
<packaging>warpackaging>
<properties>
<junit.version>4.12junit.version>
<spring.version>5.2.5.RELEASEspring.version>
<mybatis.version>3.5.1mybatis.version>
<mybatis.spring.version>1.3.1mybatis.spring.version>
<mybatis.paginator.version>1.2.15mybatis.paginator.version>
<mysql.version>5.1.9mysql.version>
<slf4j.version>1.6.4slf4j.version>
<druid.version>1.1.12druid.version>
<pagehelper.version>5.1.2pagehelper.version>
<jstl.version>1.2jstl.version>
<servlet-api.version>3.0.1servlet-api.version>
<jsp-api.version>2.0jsp-api.version>
<jackson.version>2.9.6jackson.version>
properties>
<dependencies>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-beansartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aspectsartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jmsartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-context-supportartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-testartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatisartifactId>
<version>${mybatis.version}version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatis-springartifactId>
<version>${mybatis.spring.version}version>
dependency>
<dependency>
<groupId>com.github.miemiedevgroupId>
<artifactId>mybatis-paginatorartifactId>
<version>${mybatis.paginator.version}version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>${pagehelper.version}version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>${mysql.version}version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druidartifactId>
<version>${druid.version}version>
dependency>
<dependency>
<groupId>junitgroupId>
<artifactId>junitartifactId>
<version>${junit.version}version>
<scope>testscope>
dependency>
<dependency>
<groupId>jstlgroupId>
<artifactId>jstlartifactId>
<version>${jstl.version}version>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>javax.servlet-apiartifactId>
<version>3.0.1version>
<scope>providedscope>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>jsp-apiartifactId>
<scope>providedscope>
<version>${jsp-api.version}version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
<version>${jackson.version}version>
dependency>
<dependency>
<groupId>commons-iogroupId>
<artifactId>commons-ioartifactId>
<version>2.4version>
dependency>
<dependency>
<groupId>commons-fileuploadgroupId>
<artifactId>commons-fileuploadartifactId>
<version>1.3.1version>
dependency>
<dependency>
<groupId>org.jsongroupId>
<artifactId>jsonartifactId>
<version>20140107version>
dependency>
<dependency>
<groupId>org.apache.poigroupId>
<artifactId>poi-ooxml-schemasartifactId>
<version>3.14-beta1version>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<version>3.8.1version>
<configuration>
<source>1.8source>
<target>1.8target>
<encoding>UTF-8encoding>
configuration>
plugin>
plugins>
<resources>
<resource>
<directory>src/main/javadirectory>
<includes>
<include>**/*.propertiesinclude>
<include>**/*.xmlinclude>
includes>
<filtering>falsefiltering>
resource>
<resource>
<directory>src/main/resourcesdirectory>
<includes>
<include>**/*.propertiesinclude>
<include>**/*.xmlinclude>
includes>
<filtering>falsefiltering>
resource>
resources>
build>
project>
web.xml
<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">
<filter>
<filter-name>encodefilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>UTF-8param-value>
init-param>
<init-param>
<param-name>forRequestEncodingparam-name>
<param-value>trueparam-value>
init-param>
<init-param>
<param-name>forResponseEncodingparam-name>
<param-value>trueparam-value>
init-param>
filter>
<filter-mapping>
<filter-name>encodefilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
<servlet>
<servlet-name>springmvcservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:springmvc.xmlparam-value>
init-param>
servlet>
<servlet-mapping>
<servlet-name>springmvcservlet-name>
<url-pattern>*.actionurl-pattern>
servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:applicationContext_*.xmlparam-value>
context-param>
web-app>
spring的两个配置文件：
applicationContext_dao.xml：
<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">
<filter>
<filter-name>encodefilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>UTF-8param-value>
init-param>
<init-param>
<param-name>forRequestEncodingparam-name>
<param-value>trueparam-value>
init-param>
<init-param>
<param-name>forResponseEncodingparam-name>
<param-value>trueparam-value>
init-param>
filter>
<filter-mapping>
<filter-name>encodefilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
<servlet>
<servlet-name>springmvcservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:springmvc.xmlparam-value>
init-param>
servlet>
<servlet-mapping>
<servlet-name>springmvcservlet-name>
<url-pattern>*.actionurl-pattern>
servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:applicationContext_*.xmlparam-value>
context-param>
web-app>
applicationContext_service.xml:
<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 https://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 https://www.springframework.org/schema/aop/spring-aop.xsd">
<context:component-scan base-package="com.gjx.service"/>
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
bean>
<tx:advice id="myadvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="*select*" read-only="true"/>
<tx:method name="*find*" read-only="true"/>
<tx:method name="*get*" read-only="true"/>
<tx:method name="*search*" read-only="true"/>
<tx:method name="*insert*" propagation="REQUIRED"/>
<tx:method name="*save*" propagation="REQUIRED"/>
<tx:method name="*add*" propagation="REQUIRED"/>
<tx:method name="*delete*" propagation="REQUIRED"/>
<tx:method name="*remove*" propagation="REQUIRED"/>
<tx:method name="*clear*" propagation="REQUIRED"/>
<tx:method name="*update*" propagation="REQUIRED"/>
<tx:method name="*modify*" propagation="REQUIRED"/>
<tx:method name="*change*" propagation="REQUIRED"/>
<tx:method name="*set*" propagation="REQUIRED"/>
<tx:method name="*" propagation="SUPPORTS"/>
tx:attributes>
tx:advice>
<aop:config>
<aop:pointcut id="mypointcut" expression="execution(* com.gjx.service.*.*(..))"/>
<aop:advisor advice-ref="myadvice" pointcut-ref="mypointcut"/>
aop:config>
beans>
springmvc配置文件：
<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.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="com.gjx.controller"/>
<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">
bean>
<mvc:annotation-driven/>
beans>
外部文件（properties）为了连接数据库：
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/xiaomissm?characterEncoding=utf-8
jdbc.username=root
jdbc.password=
分页插件（mybatis）：
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>
逆向生成工具
利用MyBatisGeneratorTools来生成对应的dao层接口和mapper文件
简单介绍一下这个工具：利用这个工具能够直接根据你的数据库和表里面的字段来直接生成实体类，和dao层接口和mapper文件
generatorConfig.xml：
DOCTYPE generatorConfiguration
PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
<context id="testTables" targetRuntime="MyBatis3">
<commentGenerator>
<property name="suppressAllComments" value="true" />
commentGenerator>
<jdbcConnection driverClass="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3306/xiaomissm?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true" userId="root"
password="">
jdbcConnection>
<javaTypeResolver>
<property name="forceBigDecimals" value="false" />
javaTypeResolver>
<javaModelGenerator targetPackage="com.gjx.pojo"
targetProject=".\src">
<property name="enableSubPackages" value="false" />
<property name="trimStrings" value="true" />
javaModelGenerator>
<sqlMapGenerator targetPackage="com.gjx.mapper"
targetProject=".\src">
<property name="enableSubPackages" value="false" />
sqlMapGenerator>
<javaClientGenerator type="XMLMAPPER"
targetPackage="com.gjx.mapper"
targetProject=".\src">
<property name="enableSubPackages" value="false" />
javaClientGenerator>
<table schema="" tableName="admin">table>
<table schema="" tableName="product_info">table>
<table schema="" tableName="product_type">table>
context>
generatorConfiguration>
MyBatisGeneratorTools主方法：
package com.oracle.mybatis.tools;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.exception.XMLParserException;
import org.mybatis.generator.internal.DefaultShellCallback;
public class GeneratorSqlmap {
public void generator() throws Exception{
List<String> warnings = new ArrayList<String>();
boolean overwrite = true;
//指定 逆向工程配置文件
File configFile = new File("generatorConfig.xml");
ConfigurationParser cp = new ConfigurationParser(warnings);
Configuration config = cp.parseConfiguration(configFile);
DefaultShellCallback callback = new DefaultShellCallback(overwrite);
MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config,
callback, warnings);
myBatisGenerator.generate(null);
}
public static void main(String[] args) throws Exception {
try {
GeneratorSqlmap generatorSqlmap = new GeneratorSqlmap();
generatorSqlmap.generator();
} catch (Exception e) {
e.printStackTrace();
}
}
}
需要的jar包：
登录模块：
因为是管理员所以不能进行注册，管理员的用户名和密码是直接写入到数据库当中的。为了保证安全开发人员不能直接看见密码，给开发人员的密码应该是经过加密之后得到的这里我们需要用到一个加密的工具类MD5
package com.gjx.utils;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
public class MD5Util {
/**
* 1.MD5（message-digest algorithm 5）信息摘要算法，
* 它的长度一般是32位的16进制数字符串（如81dc9bdb52d04dc20036dbd8313ed055）
* 2.由于系统密码明文存储容易被黑客盗取
* 3.应用：注册时，将密码进行md5加密，存到数据库中，防止可以看到数据库数据的人恶意篡改。
* 登录时,将密码进行md5加密,与存储在数据库中加密过的密码进行比对
* 4.md5不可逆，即没有对应的算法，从产生的md5值逆向得到原始数据。
* 但是可以使用暴力破解，这里的破解并非把摘要还原成原始数据，如暴力枚举法。
*
*/
public final static String getMD5(String str){
try {
MessageDigest md = MessageDigest.getInstance("SHA");//创建具有指定算法名称的摘要
md.update(str.getBytes()); //使用指定的字节数组更新摘要
byte mdBytes[] = md.digest(); //进行哈希计算并返回一个字节数组
String hash = "";
for(int i= 0;i<mdBytes.length;i++){ //循环字节数组
int temp;
if(mdBytes[i]<0) //如果有小于0的字节,则转换为正数
temp =256+mdBytes[i];
else
temp=mdBytes[i];
if(temp<16)
hash+= "0";
hash+=Integer.toString(temp,16); //将字节转换为16进制后，转换为字符串
}
return hash;
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return null;
}
}
在管理员输入真正的密码后接收输入的密码进行加密与数据库中存的加密的算法一样后成功登陆系统
AdminService：
package com.gjx.service;
import com.gjx.pojo.Admin;
public interface AdminService {
//完成登录判断
Admin login(String name, String pwd);
}
AdminServiceImpl：
package com.gjx.service.impl;
import com.gjx.mapper.AdminMapper;
import com.gjx.pojo.Admin;
import com.gjx.pojo.AdminExample;
import com.gjx.service.AdminService;
import com.gjx.utils.MD5Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class AdminServiceImpl implements AdminService {
//在业务逻辑层中一定会有访问数据层的对象
@Autowired
AdminMapper adminMapper;
@Override
public Admin login(String name, String pwd) {
//根据传入的用户名到数据库中查询相应的对象
//如果有条件则一定要创建AdminExample的对象，用来封装条件
AdminExample example=new AdminExample();
/**
* 如何进行条件添加
* select * from admin where a_name="admin"
*/
//添加用户名a_name条件
example.createCriteria().andANameEqualTo(name);
List<Admin> list=adminMapper.selectByExample(example);
if(list.size()>0){
Admin admin=list.get(0);
//如果查询到用户对象，进行密码比对,注意密码是密文
/**
* admin.getApass（）拿到的是密文
* pwd是000000
* 在进行密码对比时要将传入的密码进行md5加密，在与数据库中查到的密码进行处理
*/
String mipwd= MD5Util.getMD5(pwd);
if(mipwd.equals(admin.getaPass())){
return admin;
}
}
return null;
}
}
controller层：
AdminAction：
package com.gjx.controller;
import com.gjx.pojo.Admin;
import com.gjx.service.AdminService;
//import com.gjx.utils.OutExcel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.*;
@Controller
@RequestMapping("/admin")
public class AdminAction {
//切记：在所有的界面层一定会有业务逻辑层的对象
@Autowired
AdminService adminService;
//实现登录判断,进行相应的跳转
@RequestMapping("/login")
public String login(String name, String pwd, HttpServletRequest request){
Admin admin=adminService.login(name, pwd);
if(admin!=null){
//成功
request.setAttribute("admin",admin);
return "main";
}else{
request.setAttribute("errmsg","用户名或密码不正确");
return "login" ;
}
}
// // 以excel的形式导出
// @RequestMapping("/derivedExcel")
// @ResponseBody
// public ResultObject derivedExcel(Integer age, Integer bacth, Integer recordType, String competentAuthority,
// String startTime, String endTime, Integer leadingLevel, String username) {
// ResultObject retObj = ResultObject.getFailResultObject();
// int pageNum = 0;
// int num = 20000;
// List bs = businessSwitchService.findEnterpriseByBussiness(age, bacth, recordType,
// competentAuthority, startTime, endTime, leadingLevel, username, pageNum, num);
// int count = businessSwitchService.countEnterpriseNum(age, bacth, recordType, competentAuthority, startTime,
// endTime, leadingLevel, username);
// Map modelList = new HashMap<>();
// SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
// SimpleDateFormat annual = new SimpleDateFormat("yyyy");
// SimpleDateFormat time = new SimpleDateFormat("yyyy-MM-dd");
// int total = count / num + 1;
// List header = new ArrayList<>();
// header.add("区域");
// header.add("名称");
// header.add("级别");
// header.add("年度");
// header.add("批次");
// header.add("类型");
// header.add("时间");
// modelList.put("total", total);
// modelList.put("number", count);
// modelList.put("enterprises", bs);
// List> body = new ArrayList<>();
// for (int i = 0; i < bs.size(); i++) {
// List data = new ArrayList<>();
// data.add(bs.get(i).getCompetentAuthority());
// data.add(bs.get(i).getUsername());
// if ("0".equals(bs.get(i).getLeadingLevel())) {
// bs.get(i).setLeadingLevel("国家级");
// } else if ("1".equals(bs.get(i).getLeadingLevel())) {
// bs.get(i).setLeadingLevel("市级");
// } else if ("2".equals(bs.get(i).getLeadingLevel())) {
// bs.get(i).setLeadingLevel("非");
// } else if ("3".equals(bs.get(i).getLeadingLevel())) {
// bs.get(i).setLeadingLevel("区级");
// } else if ("2".equals(bs.get(i).getLeadingLevel())) {
// bs.get(i).setLeadingLevel("省级");
// }
// data.add(bs.get(i).getLeadingLevel());
// data.add(annual.format(bs.get(i).getTimeOfSubmission().getTime()));
// data.add(bs.get(i).getBacth() + "");
// data.add(bs.get(i).getRecordType());
// data.add(time.format(bs.get(i).getTimeOfSubmission().getTime()));
// body.add(data);
// }
// Date date = new Date();
//
// String dateString = formatter.format(date);
// try (OutputStream out = new FileOutputStream("D:/" + dateString + "test.xls") // 输出目的地
//
// ) {
// OutExcel.generateExcel("sheetName", header, body, out);
// } catch (Exception e) {
// e.printStackTrace();
// }
//
// retObj.setData(modelList);
// return retObj;
// }
/**
* 导出Excel
* @param request
* @param response
*/
// @RequestMapping("/exportExcel")
// @ResponseBody
// public void exportExcel(HttpServletRequest request, HttpServletResponse response){
// try {
// //获取数据源
// List userList = service.queryUserAll();
// //导出excel
// response.setHeader("Content-Disposition","attachment;filename="+new String("用户信息.xls".getBytes(),"ISO-8859-1"));
// response.setContentType("application/x-excel;charset=UTF-8");
// OutputStream outputStream = response.getOutputStream();
// //导出
// service.exportExcel(userList,outputStream);
// outputStream.close();
// } catch (IOException e) {
// e.printStackTrace();
// }
// }
}
dao层和mapper文件直接使用逆向工具生成的
工程目录的图片：
登录界面：
当管理员选择商品管理后这是利用ajax查询到所有的商品信息渲染到页面中
分页用的是PageHelper
简单介绍一下里面属性的意思：
1.pageNum：指的是当前的页数
2.pageSize：每页存放几条数据
分页用到的就是这两个属性
商品的Service层
ProductInfoService：
package com.gjx.service;
import com.github.pagehelper.PageInfo;
import com.gjx.pojo.ProductInfo;
import java.util.List;
public interface ProductInfoService {
//显示全部商品不分页
List<ProductInfo> getAll();
//分页功能显示
PageInfo spliPage(int pageNum,int pageSize);
//增加商品
int save(ProductInfo info);
//按主键id查询
ProductInfo getByID(int pid);
//更新商品
int update(ProductInfo info);
// //删除商品
// int delete(int id);
//删除单个商品
int delete(int pid);
//批量删除商品
int deleteBatch(String []ids);
}
ProductInfoimpl：
package com.gjx.service.impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.gjx.mapper.ProductInfoMapper;
import com.gjx.pojo.ProductInfo;
import com.gjx.pojo.ProductInfoExample;
import com.gjx.service.ProductInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class ProductInfoServiceImpl implements ProductInfoService {
@Autowired
ProductInfoMapper productInfoMapper;
@Override
public List<ProductInfo> getAll() {
return productInfoMapper.selectByExample(new ProductInfoExample());
}
@Override
public PageInfo spliPage(int pageNum, int pageSize) {
//pageNum当前页 pageSize每页放多少数据
//分页插件PageHelper工具类完成分页设置
PageHelper.startPage(pageNum,pageSize);
//进行PageInfo的数据封装
//进行有条件查询操作，必须创建ProductInfoExampel
ProductInfoExample example=new ProductInfoExample();
//设置排序，按当前主键降序排序，
example.setOrderByClause("p_id desc");
//设置完排序后取集合 一定在取集合之前设置PageHelper.startPage(pageNum,pageSize);
List<ProductInfo> list=productInfoMapper.selectByExample(example);
//将查到的集合分装到PageInfo
PageInfo<ProductInfo> pageInfo=new PageInfo<>(list);
return pageInfo;
}
@Override
public int save(ProductInfo info) {
return productInfoMapper.insert(info);
}
@Override
public ProductInfo getByID(int pid) {
return productInfoMapper.selectByPrimaryKey(pid);
}
@Override
public int update(ProductInfo info) {
return productInfoMapper.updateByPrimaryKey(info);
}
@Override
public int delete(int pid) {
return productInfoMapper.deleteByPrimaryKey(pid);
}
@Override
public int deleteBatch(String[] ids) {
return productInfoMapper.deleteBatch(ids);
}
// @Override
// public int delete(int id) {
// return productInfoMapper.deleteByPrimaryKey(id);
// }
}
商品的controller层
ProductInfoController：
package com.gjx.controller;
import com.github.pagehelper.PageInfo;
import com.gjx.pojo.ProductInfo;
import com.gjx.service.ProductInfoService;
import com.gjx.utils.FileNameUtil;
import org.json.JSONObject;
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 org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.List;
@Controller
@RequestMapping("/prod")
public class ProductInfoAction {
//每页显示的记录数
public static final int PAGE_SIZE=5;
//异步上传的文件名称
String saveFileName="";
@Autowired
ProductInfoService productInfoService;
//显示全部商品不分页
@RequestMapping("/getALl")
public String getAll(HttpServletRequest request){
List<ProductInfo> list=productInfoService.getAll();
request.setAttribute("list",list);
return "product";
}
//显示第一页的5条记录
@RequestMapping("/split")
public String split(HttpServletRequest request){
//得到第一页的数据
PageInfo info=productInfoService.spliPage(1,PAGE_SIZE);
request.setAttribute("info",info);
return "product";
}
//ajax分页的翻页处理
@ResponseBody
@RequestMapping("/ajaxSplit")
public void ajaxSplit(int page, HttpSession session){
//取得当前page参数页面数据
PageInfo info=productInfoService.spliPage(page,PAGE_SIZE);
session.setAttribute("info",info);
}
//异步ajax文件上传的处理
@ResponseBody
@RequestMapping("/ajaxImg")
public Object ajaxImg(MultipartFile pimage,HttpServletRequest request){
//提取生成文件名UUID+上传图片的后缀
saveFileName= FileNameUtil.getUUIDFileName()+FileNameUtil.getFileType(pimage.getOriginalFilename());
//得到项目中图片存储的路径
String path=request.getServletContext().getRealPath("image_big");
System.out.println(path);
//转存 E:\idea_workspace\mimissm\image_big\23454546545f.jpg
try {
pimage.transferTo(new File(path+File.separator+saveFileName));
} catch (IOException e) {
e.printStackTrace();
}
//返回客户端JSON对象，封装图片路径，为了在页面实现立即回显
JSONObject object=new JSONObject();
object.put("imgurl",saveFileName);
return object.toString();
}
@RequestMapping("/save")
public String save(ProductInfo info,HttpServletRequest request){
info.setpImage(saveFileName);
info.setpDate(new Date());
System.out.println(info);
//info对象中有表单提交上来的5个数据，有异步ajax上来的图片名称的数据，有上架时间的数据
int num=-1;
try {
num=productInfoService.save(info);
} catch (Exception e) {
e.printStackTrace();
}
if(num>0){
//成功
request.setAttribute("msg","增加成功！");
}else {
request.setAttribute("msg","增加失败！");
}
//清空saveFileName变量的内容，为了下次增加或修改的异步ajax的上传处理
saveFileName="";
//增加成功后，重新访问数据库，跳转到分页显示的action上
return "forward:/prod/split.action";
}
@RequestMapping("/one")
public String one(int pid, Model model){
ProductInfo info=productInfoService.getByID(pid);
model.addAttribute("prod",info);
System.out.println(info);
return "update";
}
@RequestMapping("/update")
public String update(ProductInfo info,HttpServletRequest request){
//因为ajax异步的图片上传，如果有上传则saveFileName里有上传的图片名称，
// 如果没有则saveFileName为空，实体类info使用隐藏表单域pImage原始图片名称；
if(!saveFileName.equals("")){
info.setpImage(saveFileName);
}
int num=-1;
try {
num=productInfoService.update(info);
} catch (Exception e) {
e.printStackTrace();
}
if(num>0){
//更新成功
request.setAttribute("msg","更新成功");
}else {
//更新失败
request.setAttribute("msg","更新失败");
}
//处理完更新后saveFileName有可能有数据，
// 而下一次更新要使用这个变量判断就会出错所以要清空
saveFileName="";
return "forward:/prod/split.action";
}
@RequestMapping("/delete")
// public String delete(String id,HttpServletRequest request){
// id= request.getParameter("pid");
// System.out.println("id========="+id);
// int n=Integer.parseInt(id);
// int m=productInfoService.delete(n);
// if(m>0){
// request.setAttribute("msg","删除成功");
// }else {
// request.setAttribute("msg","删除失败");
// }
//
// return "forward:/prod/split.action";
// }
public String delete(int pid,HttpServletRequest request){
int num=-1;
try {
num=productInfoService.delete(pid);
} catch (Exception e) {
e.printStackTrace();
}
if (num>0){
request.setAttribute("msg","删除成功");
}else {
request.setAttribute("msg","删除失败");
}
//删除结束后跳到分页显示
return "forward:/prod/deleteAjaxSplit.action";
}
@ResponseBody
@RequestMapping(value = "/deleteAjaxSplit",produces = "text/html;charset=UTF-8")
public Object deleteAjaxSplit(HttpServletRequest request){
//取得第一页的数据
PageInfo info=productInfoService.spliPage(1,PAGE_SIZE);
request.getSession().setAttribute("info",info);
return request.getAttribute("msg");
}
//批量删除商品
@RequestMapping("/deleteBatch")
//pids="1,4,5" ps[1,4,5]
public String deleteBacth(String pids,HttpServletRequest request){
//将上传上来的字符串，形成商品id的字符数组
String []ps=pids.split(",");
int num=productInfoService.deleteBatch(ps);
try {
if (num>0){
request.setAttribute("msg","批量删除成功");
}else {
request.setAttribute("msg","批量删除失败");
}
} catch (Exception e) {
e.printStackTrace();
request.setAttribute("msg","商品不可删除");
}
return "forward:/prod/deleteAjaxSplit.action";
}
}
商品添加：
当你选择一个商品图片后回显到当前的页面上
实现的步骤：
1.选择增加商品后跳转到增加商品的页面上，当选择上传图片后会触发ajax事件去到用controller层中的方法去添加图片（注意此时的图片因为还没有提交所以是存在服务器当中的并没有存在数据库中，从服务器中取出来回显到此页面，当提交了之后再存在数据库当中。）为了防止有重名的图片我们要自动给图片生成一个名字。
生成图片名称的工具类
FileNameUtil：
package com.gjx.utils;
import java.util.UUID;
public class FileNameUtil {
//根据UUID生成文件名
public static String getUUIDFileName() {
UUID uuid = UUID.randomUUID();
return uuid.toString().replace("-", "");
}
//从请求头中提取文件名和类型
public static String getRealFileName(String context) {
// Content-Disposition: form-data; name="myfile"; filename="a_left.jpg"
int index = context.lastIndexOf("=");
String filename = context.substring(index + 2, context.length() - 1);
return filename;
}
//根据给定的文件名和后缀截取文件名
public static String getFileType(String fileName){
//9527s.jpg
int index = fileName.lastIndexOf(".");
return fileName.substring(index);
}
}
在添加商品信息的时候商品的类别不是在前端写死的，是从数据库的字典表中获取的，实现的方式是，声明了一个作用于全局的监听类将商品的类型封装到一个集合中在页面中遍历这个集合取出所有的类型
ProductTypeListener：
package com.gjx.listener;
import com.gjx.pojo.ProductType;
import com.gjx.service.ProductTypeService;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;
import java.util.List;
@WebListener
public class ProductTypeListener implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent sce) {
//手工从spring容器中取出ProductTypeServiceImpl的对象。
ApplicationContext ctx=new ClassPathXmlApplicationContext("applicationContext_*.xml");
ProductTypeService service=(ProductTypeService) ctx.getBean("productTypeServiceImpl");
List<ProductType> typeList=service.getAll();
//放入全局应用作用域，供新增页面，修改页面，前台查询功能提供全部商品类别集合
sce.getServletContext().setAttribute("typeList",typeList);
}
@Override
public void contextDestroyed(ServletContextEvent sce) {
}
}
商品修改：
当选中一个商品后会获取该商品的所有信息并且赋值到页面当中（这个时候就出现了一个问题，我们没有修改这个图片的时候应该是原先的图片，如果我们修改了图片那么就应该回显当前的图片到页面当中，在提交后修改数据，还有如果用户是先添加了了之后再修改那么saveFileName就会保留之前的文件名，因为他是全局变量）我们要判断是否修改了图片（如果修改了，那么就应该将saveFileName赋值为空，ajax重新调用ajax回显的方法）会获得修改后商品的图片
单个商品删除：
当点击了删除后会得当前商品的id，通过id删除商品并重新渲染删除后的页面
通过ajax请求controller层调用service的方法实现删除
批量删除
通过复选框将选择中的商品的id拼接到一个字符串的变量当中然后通过字符串中的split（）方法分隔，存到一个数组中，利用动态sql删除选择的所有的商品
<delete id="deleteBatch" >
delete from product_info where p_id in
<foreach collection="array" item="pid" separator="," open="(" close=")">
#{pid}
foreach>
delete>
动态sql的知识点：
foreach
foreach 标签
foreach标签主要有以下参数：
item ：循环体中的具体对象。支持属性的点路径访问，如item.age,item.info.details，在list和数组中是其中的对象，在map中是value。
index ：在list和数组中,index是元素的序号，在map中，index是元素的key，该参数可选。
open ：表示该语句以什么开始
close ：表示该语句以什么结束
separator ：表示元素之间的分隔符，例如在in()的时候，separator=","会自动在元素中间用“,“隔开，避免手动输入逗号导致sql错误，如in(1,2,)这样。该参数可选。
where and
where, 有了我，SQL语句拼接条件神马的都是浮云！
咱们通过where改造一下上面的例子：
有些人就要问了： “你这都是些什么玩意儿！ 跟上面的相比， 不就是多了个where标签嘛！ 那这个还会不会出现 select * from user where and deleteFlag=0 ？”
where会去掉相邻的and或者or
例如：
delete>
<select id="selectCondition" parameterType="com.gjx.pojo.vo.ProductInfoVo" resultMap="BaseResultMap">
select <include refid="Base_Column_List">include>
from product_info
<where>
<if test="pname !=null and pname !=''">
and p_name like '%${pname}%'
if>
<if test="typeid !=null and typeid != ''">
and type_id =#{typeid}
if>
<if test="(lprice !=null and lprice != '') and (hprice ==null or hprice == '')">
and p_price >=#{lprice}
if>
<if test="(hprice !=null and hprice !='') and (lprice ==null or lprice == '')">
and p_price <= #{hprice}
if>
<if test="(lprice !=null and lprice !='') and (lprice != null and lprice !='')">
and p_price between #{lprice} and #{hprice}
if>
where>
order by p_id desc
上述if全部满足那么sql变为：
select <include refid="Base_Column_List">include>
from product_info where p_name like '%${pname}%' and type_id =#{typeid} and p_price >=#{lprice}
and p_price <= #{hprice} and p_price between #{lprice} and #{hprice}
多条件查询
利用动态sql实现
<select id="selectCondition" parameterType="com.gjx.pojo.vo.ProductInfoVo" resultMap="BaseResultMap">
select <include refid="Base_Column_List">include>
from product_info
<where>
<if test="pname !=null and pname !=''">
and p_name like '%${pname}%'
if>
<if test="typeid !=null and typeid != ''">
and type_id =#{typeid}
if>
<if test="(lprice !=null and lprice != '') and (hprice ==null or hprice == '')">
and p_price >=#{lprice}
if>
<if test="(hprice !=null and hprice !='') and (lprice ==null or lprice == '')">
and p_price <= #{hprice}
if>
<if test="(lprice !=null and lprice !='') and (lprice != null and lprice !='')">
and p_price between #{lprice} and #{hprice}
if>
where>
order by p_id desc
select>
最后一个简单的SSM项目就完成了，主要是熟悉使用SSM框架，用到了ajax，逆向生成工具，mybatis提供的分页功能，加深对sql语句的理解
项目中用到的jsp文件：
login.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<title></title>
</head>
<body>
<div id="login">
<div id="top">
<img height="100px" width="100px" src="${pageContext.request.contextPath}/images/cloud.gif" /><span>登录</span>
</div>
<div id="bottom">
<form action="${pageContext.request.contextPath}/admin/login.action" method="post">
<table border="0px" id="table">
<tr>
<td class="td1">用户名：</td>
<td><input type="text" value="admin" placeholder="Username" class="td2" name="name"></td>
</tr>
<tr>
<td></td>
<td><span id="nameerr"></span></td>
</tr>
<tr>
<td class="td1">密码：</td>
<td><input type="password" value="000000" placeholder="Password" class="td2" name="pwd"></td>
</tr>
<tr>
<td></td>
<td><span id="pwderr"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="登录" class="td3">
<a href="${pageContext.request.contextPath}/regist.jsp"><input type="button" value="注册" class="td3 "></a>
</td>
</tr>
</table>
</form>
${errmsg}
</div>
</div>
</body>
</html>
main.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<title></title>
<%--<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" >--%>
<style type="text/css">
</style>
</head>
<body>
<!--整体部分-->
<div id="all">
<!--上部分-->
<div id="top">
<div id="top1">
<span>商品管理系统</span>
</div>
<div id="top2"></div>
<div id="top3">
<span>欢迎您，${admin.aName}</span>
</div>
</div>
<!--下部分-->
<div id="bottom">
<!--下部分左边-->
<div id="bleft">
<div id="ltop">
<div id="lts">
<img height="196px" width="196px" src="${pageContext.request.contextPath}/images/logo.jpg" /><br />
<p style="text-align: center;">随机访客</p>
</div>
</div>
<div id="lbottom">
<ul>
<a href="${pageContext.request.contextPath}/prod/split.action" target="myright" >
<li class="two"><span class="glyphicon glyphicon-book" style="color: white;"></span> 商品管理 <span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
</a>
<a href="${pageContext.request.contextPath}/admin/err.jsp" target="myright">
<li class="one"><span class="glyphicon glyphicon-sort" style="color: white;"></span> 订单管理 <span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
</a>
<a href="${pageContext.request.contextPath}/admin/err.jsp" target="myright">
<li class="one"><span class="glyphicon glyphicon-user" style="color: white;"></span> 用户管理 <span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
</a>
<a href="${pageContext.request.contextPath}/admin/err.jsp" target="myright">
<li class="one"><span class="glyphicon glyphicon-bullhorn" style="color: white"></span> 通知公告 <span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
</a>
</ul>
</div>
</div>
<!--下部分右边-->
<div id="bright">
<iframe frameborder="0" scrolling="no" name="myright" width="1235px" height="700px" ></iframe>
</div>
</div>
</div>
</body>
</html>
product.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.util.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
if ("${msg}" != "") {
alert("${msg}");
}
</script>
<c:remove var="msg"></c:remove>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bright.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/addBook.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<title></title>
</head>
<script type="text/javascript">
function allClick() {
//获取当前点击后全选按钮的状态
var flag=$("#all").prop("checked");
//将此状态赋值给下边五个复选框
$("input[name='ck']").each(function (){
this.checked=flag;
});
}
function ckClick() {
//得到下面五个复选框的个数
var fiveLength=$("input[name='ck']").length;
//得到下面五个复选框被选中的个数
var checkedLength=$("input[name='ck']:checked").length;
//进行对比，改变全选复选框的状态
if (fiveLength==checkedLength){
$("#all").prop("checked",true);
}else {
$("#all").prop("checked",false);
}
}
</script>
<body>
<div id="brall">
<div id="nav">
<p>商品管理>商品列表</p>
</div>
<div id="condition" style="text-align: center">
<form id="myform">
商品名称：<input name="pname" id="pname">
商品类型：<select name="typeid" id="typeid">
<option value="-1">请选择</option>
<c:forEach items="${ptlist}" var="pt">
<option value="${pt.typeId}">${pt.typeName}</option>
</c:forEach>
</select>
价格：<input name="lprice" id="lprice">-<input name="hprice" id="hprice">
<input type="button" value="查询" onclick="ajaxsplit(${info.pageNum})">
</form>
</div>
<br>
<div id="table">
<c:choose>
<c:when test="${info.list.size()!=0}">
<div id="top">
<input type="checkbox" id="all" onclick="allClick()" style="margin-left: 50px"> 全选
<a href="${pageContext.request.contextPath}/admin/addproduct.jsp">
<input type="button" class="btn btn-warning" id="btn1"
value="新增商品">
</a>
<input type="button" class="btn btn-warning" id="btn1"
value="批量删除" onclick="deleteBatch()">
</div>
<!--显示分页后的商品-->
<div id="middle">
<table class="table table-bordered table-striped">
<tr>
<th></th>
<th>商品名</th>
<th>商品介绍</th>
<th>定价（元）</th>
<th>商品图片</th>
<th>商品数量</th>
<th>操作</th>
</tr>
<c:forEach items="${info.list}" var="p">
<tr>
<td valign="center" align="center"><input type="checkbox" name="ck" id="ck" value="${p.pId}" onclick="ckClick()"></td>
<td>${p.pName}</td>
<td>${p.pContent}</td>
<td>${p.pPrice}</td>
<td><img width="55px" height="45px"
src="${pageContext.request.contextPath}/image_big/${p.pImage}"></td>
<td>${p.pNumber}</td>
<%--<td><a href="${pageContext.request.contextPath}/admin/product?flag=delete&pid=${p.pId}" onclick="return confirm('确定删除吗？')">删除</a>--%>
<%-- <a href="${pageContext.request.contextPath}/admin/product?flag=one&pid=${p.pId}">修改</a></td>--%>
<td>
<button type="button" class="btn btn-info "
onclick="one(${p.pId})">编辑
</button>
<button type="button" class="btn btn-warning" id="mydel"
onclick="del(${p.pId})">删除
</button>
</td>
</tr>
</c:forEach>
</table>
<!--分页栏-->
<div id="bottom">
<div>
<nav aria-label="..." style="text-align:center;">
<ul class="pagination">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${info.prePage}" aria-label="Previous">--%>
<a href="javascript:ajaxsplit(${info.prePage})" aria-label="Previous">
<span aria-hidden="true">«</span></a>
</li>
<c:forEach begin="1" end="${info.pages}" var="i">
<c:if test="${info.pageNum==i}">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${i}" style="background-color: grey">${i}</a>--%>
<a href="javascript:ajaxsplit(${i})"
style="background-color: grey">${i}</a>
</li>
</c:if>
<c:if test="${info.pageNum!=i}">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${i}">${i}</a>--%>
<a href="javascript:ajaxsplit(${i})">${i}</a>
</li>
</c:if>
</c:forEach>
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=1" aria-label="Next">--%>
<a href="javascript:ajaxsplit(${info.nextPage})" aria-label="Next">
<span aria-hidden="true">»</span></a>
</li>
<li style=" margin-left:150px;color: #0e90d2;height: 35px; line-height: 35px;">总共 <font
style="color:orange;">${info.pages}</font> 页
<c:if test="${info.pageNum!=0}">
当前 <font
style="color:orange;">${info.pageNum}</font> 页
</c:if>
<c:if test="${info.pageNum==0}">
当前 <font
style="color:orange;">1</font> 页
</c:if>
</li>
</ul>
</nav>
</div>
</div>
</div>
</c:when>
<c:otherwise>
<div>
<h2 style="width:1200px; text-align: center;color: orangered;margin-top: 100px">暂时没有符合条件的商品！</h2>
</div>
</c:otherwise>
</c:choose>
</div>
</div>
</body>
<script type="text/javascript">
function mysubmit() {
$("#myform").submit();
}
//批量删除
function deleteBatch() {
//得到所有选择的复选框的对象，根据其长度判断是否有选择的商品
var cks=$("input[name='ck']:checked");
//如果有选择的商品，则获取其value的值，进行字符串拼接
if (cks.length==0){
alert("请先选择想要删除的商品！")
}else {
var str="";
var id="";
if (confirm("确定要删除"+cks.length+"条商品吗")){
//进行提交商品的id的字符串的拼接
$.each(cks,function (){
pid=$(this).val();//每一个被选中商品的id
//进行非空判断 避免出错
if(pid!=null){
str+=pid+",";//145 变成1,4,5
}
});
//发送ajax请求进行批量删除的提交
$.ajax({
url:"${pageContext.request.contextPath}/prod/deleteBatch.action",
data:{
"pids":str
},
type:"post",
dataType:"text",
success:function (msg){
alert(msg);
$("#table").load("http://localhost:8080/SSMxiangmu_war_exploded/admin/product.jsp #table");
}
});
}
}
}
//单个删除
function del(pid) {
<%--if (confirm("确定删除吗")) {--%>
<%-- //向服务器提交请求完成删除--%>
<%-- window.location="${pageContext.request.contextPath}/prod/delete.action?pid="+pid;--%>
<%-- alert("${msg}");--%>
<%--}--%>
if(confirm("你确定删除吗？")){
$.ajax({
url:"${pageContext.request.contextPath}/prod/delete.action",
data:{
"pid":pid
},
type:"post",
dataType:"text",
success:function (msg){
alert(msg);
$("#table").load("http://localhost:8080/SSMxiangmu_war_exploded/admin/product.jsp #table");
}
});
}
}
function one(pid) {
location.href = "${pageContext.request.contextPath}/prod/one.action?pid="+pid;
}
</script>
<!--分页的AJAX实现-->
<script type="text/javascript">
function ajaxsplit(page) {
//异步ajax分页请求
$.ajax({
url:"${pageContext.request.contextPath}/prod/ajaxSplit.action",
data:{"page":page},
type:"post",
success:function () {
//重新加载分页显示的组件table
//location.href---->http://localhost:8080/admin/login.action
$("#table").load("http://localhost:8080/SSMxiangmu_war_exploded/admin/product.jsp #table");
}
})
};
</script>
</html>
addproduct.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/addBook.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>
</head>
<script type="text/javascript">
function fileChange(){//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
alert("change");
$.ajaxFileUpload({
url:"${pageContext.request.contextPath}/prod/ajaxImg.action",//用于文件上传的服务器端请求地址
secureuri: false,//一般设置为false
fileElementId: 'pimage',//文件上传控件的id属性
dataType:"json",//返回值类型 一般设置为json
success: function(obj) //服务器成功响应处理函数
{
//创建一个图片的标签
$("#imgDiv").empty(); //清空原有数据
//创建img 标签对象
var imgObj = $("![]()
");
//给img标签对象追加属性
imgObj.attr("src","${pageContext.request.contextPath}/image_big/"+obj.imgurl);
imgObj.attr("width","100px");
imgObj.attr("height","100px");
//将图片img标签追加到imgDiv末尾
$("#imgDiv").append(imgObj);
//将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
//$("#imgName").html(data.imgName);
},
error: function (e)//服务器响应失败处理函数
{
alert(e.message);
}
});
}
</script>
<body>
<!--取出上一个页面上带来的page的值-->
<div id="addAll">
<div id="nav">
<p>商品管理>新增商品</p>
</div>
<div id="table">
<form action="${pageContext.request.contextPath}/prod/save.action" enctype="multipart/form-data"
method="post" id="myform">
<table>
<tr>
<td class="one">商品名称</td>
<td><input type="text" name="pName" class="two"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="pnameerr"></span></td>
</tr>
<tr>
<td class="one">商品介绍</td>
<td><input type="text" name="pContent" class="two"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="pcontenterr"></span></td>
</tr>
<tr>
<td class="one">定价</td>
<td><input type="number" name="pPrice" class="two"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="priceerr"></span></td>
</tr>
<tr>
<td class="three">图片介绍</td>
<td> <br><div id="imgDiv" style="display:block; width: 40px; height: 50px;"></div><br><br><br><br>
<%--<input type="file" id="pimage" name="pimage" onchange="fileChange()">--%>
<input type="file" id="pimage" name="pimage" onchange="fileChange()" >
<span id="imgName" ></span><br>
</td>
</tr>
<tr class="three">
<td class="four"></td>
<td><span></span></td>
</tr>
<tr>
<td class="one">总数量</td>
<td><input type="number" name="pNumber" class="two"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="numerr"></span></td>
</tr>
<tr>
<td class="one">类别</td>
<td>
<select name="typeId">
<c:forEach items="${typeList}" var="type">
<option value="${type.typeId}">${type.typeName}</option>
</c:forEach>
</select>
</td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span></span></td>
</tr>
<tr>
<td>
<input type="submit" value="提交" class="btn btn-success">
</td>
<td>
<input type="reset" value="取消" class="btn btn-default" onclick="myclose(${param.page})">
<script type="text/javascript">
function myclose(ispage) {
window.location="${pageContext.request.contextPath}/prod/split.action?page="+ispage;
}
</script>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
update.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/addBook.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>
</head>
<body>
<div id="addAll">
<div id="nav">
<p>商品管理>更新商品</p>
</div>
<script type="text/javascript">
function fileChange(){//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
alert("change");
$.ajaxFileUpload({
url:"${pageContext.request.contextPath}/prod/ajaxImg.action",//用于文件上传的服务器端请求地址
secureuri: false,//一般设置为false
fileElementId: 'pimage',//文件上传控件的id属性
dataType:"json",//返回值类型 一般设置为json
success: function(obj) //服务器成功响应处理函数
{
//创建一个图片的标签
$("#imgDiv").empty(); //清空原有数据
//创建img 标签对象
var imgObj = $("![]()
");
//给img标签对象追加属性
imgObj.attr("src","${pageContext.request.contextPath}/image_big/"+obj.imgurl);
imgObj.attr("width","100px");
imgObj.attr("height","100px");
//将图片img标签追加到imgDiv末尾
$("#imgDiv").append(imgObj);
//将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
//$("#imgName").html(data.imgName);
},
error: function (e)//服务器响应失败处理函数
{
alert(e.message);
}
});
}
</script>
<script type="text/javascript">
<%--function myclose(ispage) {--%>
<%-- window.location="${pageContext.request.contextPath}/admin/product?flag=split&ispage="+ispage;--%>
<%-- //window.close();--%>
<%--}--%>
</script>
<div id="table">
<form action="${pageContext.request.contextPath}/prod/update.action" enctype="multipart/form-data" method="post" id="myform">
<input type="hidden" value="${prod.pId}" name="pId">
<input type="hidden" value="${prod.pImage}" name="pImage">
<%-- <input type="hidden" value="${prod.pDate}" name="pDate">--%>
<table>
<tr>
<td class="one">商品名称</td>
<td><input type="text" name="pName" class="two" value="${prod.pName}"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="pnameerr"></span></td>
</tr>
<tr>
<td class="one">商品介绍</td>
<td><input type="text" name="pContent" class="two" value="${prod.pContent}"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="pcontenterr"></span></td>
</tr>
<tr>
<td class="one">定价</td>
<td><input type="number" name="pPrice" class="two" value="${prod.pPrice}"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="priceerr"></span></td>
</tr>
<tr>
<td class="one">图片介绍</td>
<td> <br><div id="imgDiv" style="display:block; width: 40px; height: 50px;"><img src="${pageContext.request.contextPath}/image_big/${prod.pImage}" width="100px" height="100px" ></div><br><br><br><br>
<input type="file" id="pimage" name="pimage" onchange="fileChange()">
<span id="imgName"></span><br>
</td>
</tr>
<tr class="three">
<td class="four"></td>
<td><span></span></td>
</tr>
<tr>
<td class="one">总数量</td>
<td><input type="number" name="pNumber" class="two" value="${prod.pNumber}"></td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span id="numerr"></span></td>
</tr>
<tr>
<td class="one">类别</td>
<td>
<select name="typeId">
<c:forEach items="${typeList}" var="type">
<option value="${type.typeId}"
<c:if test="${type.typeId==prod.typeId}">
selected="selected"
</c:if>
>${type.typeName}</option>
</c:forEach>
</select>
</td>
</tr>
<!--错误提示-->
<tr class="three">
<td class="four"></td>
<td><span></span></td>
</tr>
<tr>
<td>
<input type="submit" value="提交" class="btn btn-success">
</td>
<td>
<input type="reset" value="取消" class="btn btn-default" onclick="myclose(1)">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>