【米米商城项目----项目总结】

目录

前言

1、项目准备

1.1 pom.xml:

1.2 jdbc.properties:

1.3 applicationContext_dao.xml:

1.4 applicationContext_service.xml:

                ​​​​​​​  1.5 springmvc.xml:

1.6 SqlMapConfig.xml:

2.功能实现

2.1登录功能

2.1.1AdminService:

2.1.2AdminServiceImpl:

2.1.3 controller:

2.2商品显示

2.2.1接口:

2.2.2实现类:

2.2.3 controller:

2.2.4 前端页面:

2.3商品分页

2.3.1接口:

2.3.2实现类:

2.3.3 ProductInfoAction:

2.3.4 前端页面:

2.4Ajax翻页

2.4.1接口:

2.4.2实现类:

2.4.3ProductInfoAction类:

2.4.4 前端页面:

2.5新增商品功能--商品类型显示

2.5.1 ProductTypeServiceImpl类

2.5.2 ProductTypeListener类

2.5.3前端页面 addproduct.jsp

2.6新增商品功能--异步Ajax上传图片并回显

2.6.1 前端页面---addproduct.jsp

 2.6.2 controller-----ProductInfoAction类

3.做项目过程中遇到的bug

4.总结



前言

提示:此文章适合正在做米米商城项目或已经做完米米商城项目的道友观看

本文记录的是此项目的思路和博主在做项目过程中遇到的一些bug,通过阅读此博客可以引导您快速回顾一下米米商城中各个功能的实现过程,也可以解决正在做此项目的道友在做项目过程中遇到的一些bug(当然这些bug肯定是博主做项目过程中遇到过的)。

这篇博客,我会每天写一些项目功能,大约3到4天时间完成。

如果有其他问题,欢迎添加博主询问,我会与您一起研究您做项目遇到的问题,(博主是学生平时需要上课,不一定会第一时间回复您,但是我看到您的问题一定会第一时间答复您!!!)


提示:以下是本篇文章正文内容,下面案例可供参考

1、项目准备

搭建SSM项目的步骤

1)新建Maven工程

2)修改目录,修改pom.xml文件

3)添加SSM框架的所有依赖

4)拷贝jdbc.properties到resources目录下

5) 新建applicationContext_dao.xml文件,进行数据访问层的配置

6)新建applicationContext_service.xml文件,进行业务逻辑层的配置

7)新建springmvc.xml文件,配置springmvc的框架 还需要将框架注册到web.xml文件中

8)新建SqlMapConfig.xml文件,进行分页插件的配置

9)使用逆向工程生成pojo和mapper的文件

1.1 pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<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.0</modelVersion>

  <groupId>com.bjpowernode</groupId>
  <artifactId>mimissm</artifactId>
  <version>1.0</version>
  <packaging>war</packaging>

  <!-- 集中定义依赖版本号 -->
  <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>

    <!-- spring -->
    <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>
    <!-- Mybatis -->
    <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>
    <!-- MySql -->
    <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>

    <!-- junit -->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>${junit.version}</version>
      <scope>test</scope>
    </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>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>
    <!-- Jackson Json处理工具包 -->
    <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>

</project>

1.2 jdbc.properties:

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

1.3 applicationContext_dao.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       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">

<!--    读取jdbc.properties属性文件-->
<context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
<!--    创建数据源-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
    <property name="driverClassName"  value="${jdbc.driver}"></property>
    <property name="url"  value="${jdbc.url}"></property>
    <property name="username"  value="${jdbc.username}"></property>
    <property name="password"  value="${jdbc.password}"></property>
</bean>
<!--    创建SqkSwssionFactoryBean-->
<bean class="org.mybatis.spring.SqlSessionFactoryBean">
<!--配置数据源-->
    <property name="dataSource" ref="dataSource"></property>
<!--    配置MyBatis的核心配置文件-->
<property name="configLocation" value="classpath:SqlMapConfig.xml"></property>
<!--    配置实体类-->
<property name="typeAliasesPackage" value="com.bjpowernode.pojo"></property>
</bean>
<!--    创建mapper文件的扫描器-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.bjpowernode.mapper"></property>
    </bean>
</beans>



1.4 applicationContext_service.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

    <!--    设置业务逻辑层的包扫描器,目的是在指定路径下,使用@Service注解的类,Spring负责创建对象,并添加依赖-->
    <context:component-scan base-package="com.bjpowernode.service"></context:component-scan>
    <!--        设置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property><!--        爆红不用管-->
    </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="REQUIRED" />
        </tx:attributes>
    </tx:advice>
    <!--    完成切面和切入点的植入  指定方法的范围,对切面进行绑定-->
    <aop:config>
        <aop:pointcut id="mypointcut" expression="execution(* com.bjpowernode.service.*.*(..))"/>
        <aop:advisor advice-ref="myadvice" pointcut-ref="mypointcut"></aop:advisor>
    </aop:config>
</beans>

1.5 springmvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns: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.bjpowernode.controller"></context:component-scan>
    <!--    设置视图解析器  /admin/+main+.jsp-->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--    设置路径时要前后都带/-->
        <property name="prefix" value="/admin/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!--    设置文件上传核心组件-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

    </bean>
    <!--    设置注解驱动-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

1.6 SqlMapConfig.xml:

<?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>
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
<!--    分页插件的配置-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
</configuration>

2.功能实现

2.1登录功能

流程:

service层:

  • 接口中定义login方法
  • 实现类中完成数据库查询以及信息配对        

2.1.1AdminService:

public interface AdminService {
    //完成登录判断
    Admin login(String name,String pwd);
}

2.1.2AdminServiceImpl:

@Service
public class AdminServiceImpl implements AdminService {

    //在业务逻辑层中,一定会有数据访问层的对象
    @Autowired
    AdminMapper adminMapper;

    @Override
    public Admin login(String name, String pwd) {

        //根据传入的用户或到DB中查询相应用户对象
        //如果有条件 ,则一定要创建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==>c984aed014aec7623a54f0591da07a85fd4b762d
             * pwd===>000000
             * 在进行密码对比时,要将传入的pwd进行md5加密,再与数据库中查到的对象的密码进行对比
             */
//            String miPwd = MD5Util.getMD5(pwd);
            if(pwd.equals(admin.getaPass())){
                return admin;
            }
        }
        return null;
    }
}

2.1.3 controller:

实现登录判断,并进行相应的跳转

@Controller
@RequestMapping("/admin")
public class AdminAction {
    //切记:在所有的界面层,一定会有业务逻辑层的对象
    @Autowired
    AdminService adminService;
    //实现登录判断,并进行相应的跳转
    @RequestMapping("/login.action")
    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";
        }
    }
}

2.2商品显示

流程:

 service层:

  • 调用productInfoMapper.selectByExample(0方法,查询全部商品信息并返回
    

2.2.1接口:

public interface ProductInfoService {

    //显示全部商品不分页
    List<ProductInfo> getAll();

}

2.2.2实现类:

@Service
public class ProductInfoServiceImpl implements ProductInfoService {
    //切记业务逻辑层,一定有数据访问层的对象
    @Autowired
    ProductInfoMapper productInfoMapper;
    @Override
    public List<ProductInfo> getAll() {
        return productInfoMapper.selectByExample(new ProductInfoExample());
    }
}

2.2.3 controller:

  • 调用service层的getAll()方法,获取商品信息的列表
  • 将获取到的商品信息list放在request作用域中
  • 跳转到product页面
    //显示全部商品不分页
    @RequestMapping("getAll")
    public String getAll(HttpServletRequest request){
        List<ProductInfo> list = productInfoService.getAll();
        request.setAttribute("list",list);
        return "product";
    }

2.2.4 前端页面:

商品信息展示

2.3商品分页

流程:

service层:

  • ProductInfoService接口编写splitPage()方法
  • ProductInfoServiceImpl实现类中实现splitPage()方法
    • 首先使用PageHelper工具类完成分页查询
    • 然后进行PageInfo的数据封装。通过调用ProductInfoExample对象中的方法,添加相应条件查询到想要的是数据得到一个list集合,然后将它封装进PageInfo
    • 返回PageInfo

2.3.1接口:

public interface ProductInfoService {

    //分页功能实现
    PageInfo splitPage(int pageNum,int pageSize);
}

2.3.2实现类:

    public PageInfo splitPage(int pageNum, int pageSize) {

        //分页插件使用PageHelper工具类完成分页查询
        PageHelper.startPage(pageNum,pageSize);

        //PageInfo的数据封装
        //进行有条件的查询操作,必须要创建ProductInfoExample对象
        ProductInfoExample example = new ProductInfoExample();
        //设置排序,按照主键降序排序
        //select * from product_info order by p_id desc
        example.setOrderByClause("p_id desc");
        //设置完排序以后,取集合   切记:在取集合之前设置 PageHelper.startPage(pageNum,pageSize)
        List<ProductInfo> list = productInfoMapper.selectByExample(example);
        //将查询到的list集合封装到PageInfo对象中
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }
controller层:

调用productInfoService.splitPage()方法,实现首页的分页,并得到PageInfo
  • 将PageInfo设置到irequest作用于中,用于传递给前端页面
  • 跳转到product页面

2.3.3 ProductInfoAction:

    //显示第1页的5条记录
    @RequestMapping("split")
    public String split(HttpServletRequest request){

        //得到第1页的数据
        PageInfo  info = productInfoService.splitPage(1,PAGE_SIZE);
        request.setAttribute("info",info);
        return "product";
    }

2.3.4 前端页面:

商品信息展示

2.4Ajax翻页

流程:

service层:

  • ProductInfoService接口编写splitPage()方法
  • ProductInfoServiceImpl实现类中实现splitPage()方法
    • 首先使用PageHelper工具类完成分页查询
    • 然后进行PageInfo的数据封装。通过调用ProductInfoExample对象中的方法,添加相应条件查询到想要的是数据得到一个list集合,然后将它封装进PageInfo
    • 返回PageInfo

2.4.1接口:

public interface ProductInfoService {

    //分页功能实现
    PageInfo splitPage(int pageNum,int pageSize);
}

2.4.2实现类:

    public PageInfo splitPage(int pageNum, int pageSize) {

        //分页插件使用PageHelper工具类完成分页查询
        PageHelper.startPage(pageNum,pageSize);

        //PageInfo的数据封装
        //进行有条件的查询操作,必须要创建ProductInfoExample对象
        ProductInfoExample example = new ProductInfoExample();
        //设置排序,按照主键降序排序
        //select * from product_info order by p_id desc
        example.setOrderByClause("p_id desc");
        //设置完排序以后,取集合   切记:在取集合之前设置 PageHelper.startPage(pageNum,pageSize)
        List<ProductInfo> list = productInfoMapper.selectByExample(example);
        //将查询到的list集合封装到PageInfo对象中
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }

controller层:

调用service层的splitPage()方法,获取取得当前page页的PageInfo信息,然后将PageInfo通过session的setAttribute()方法,传递给前端页面

2.4.3ProductInfoAction类:

@Controller
@RequestMapping("/prod")
public class ProductInfoAction {
    //ajax分页翻页处理
    @ResponseBody
    @RequestMapping("ajaxSplit")
    public void ajaxSplit(int page, HttpSession session){
        //取得当前page页的PageInfo信息
        PageInfo info = productInfoService.splitPage(page, PAGE_SIZE);
        session.setAttribute("info",info);
    }
}

2.4.4 前端页面:

发送请求,并使用后端传过来的info对象中的值

前端:点击页码,触发ajaxsplit函数

前端: ajaxsplit函数向服务端发送请求并实现响应

2.5新增商品功能--商品类型显示

流程:

2.5.1 ProductTypeServiceImpl类

service层的这个类主要负责从数据库中查出商品的类别,并生成一个ProducType类型的list集合返回给下一层

@Service("ProductTypeServiceImpl")
public class ProductTypeServiceImpl implements ProductTypeService {

    //在业务逻辑层一定会有数据访问层的对象
    @Autowired
    ProductTypeMapper productTypeMapper;

    @Override
    public List<ProductType> getAll() {
        return productTypeMapper.selectByExample(new ProductTypeExample());
    }
}

2.5.2 ProductTypeListener类

这是一个监听器类,主要是负责将ProductTypeServiceImpl类中查到的商品类型,存到全局作用域中,供前端页面使用。

注意:监听器中的service对象,需要手动获取,不然会跟spring框架发生冲突

@WebListener
public class ProductTypeListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        //手工从spring的容器中获取ProductTypeImpl的对象
        ApplicationContext  context = new ClassPathXmlApplicationContext("applicationContext_*.xml");
        ProductTypeService productTypeService = (ProductTypeService) context.getBean("ProductTypeServiceImpl");
        List<ProductType> typeList = productTypeService.getAll();
        //放入全局作用域中,供新增页面,修改页面,前台查询功能提供全部商品类型集合
        servletContextEvent.getServletContext().setAttribute("typeList",typeList);

    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }

2.5.3前端页面 addproduct.jsp

前端页面将监听器设置到全局作用域中t的ypeList取出来,并进行相应的遍历显示

						<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>

2.6新增商品功能--异步Ajax上传图片并回显

流程:

2.6.1 前端页面---addproduct.jsp

在前端页面,点击浏览会触发fileChange()函数,次函数会发送Ajax请求,请求为:

${pageContext.request.contextPath}/prod/ajaxImg.action

在请求成功后,也就是自己编写的后端页面处理完,会在success里的函数中,获取后端传过来json对象的图片地址(这个地方不懂,可以先向下看,看完后面后头来看这里就懂聊,因为这是从前端往后端分析的,有些地方看不懂很正常),并将它追加到你新建的img标签里面(这个标签是保存在一个变量里面的),然后将这个标签放在相应的div下面(这个地方是前端的知识,我感觉也不算难以前也学过,有不懂的多看几遍视频知道怎么回事就行了),然后就可以显示了。

<!--这是图片介绍那个地方的小方格,我把它的代码以及它所绑定的函数截取出来了-->
						<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()" >
                                <span id="imgName" ></span><br>

                            </td>
						</tr>


<!--这是它触发的函数-->
 <script type="text/javascript">
        function fileChange(){
			$.ajaxFileUpload({
				url:"${pageContext.request.contextPath}/prod/ajaxImg.action",
				secureuri: false,
				fileElementId: 'pimage',
				dataType:"json",
				success:function (obj) {
					//清空div
					$("#imgDiv").empty();
					//创建一个图片的标签
					var imgObj = $("<img>");
					alert(obj.imgurl);
					imgObj.attr("src","/image_big/"+obj.imgurl);
					imgObj.attr("width","100px");
					imgObj.attr("height","100px");
					//将图片追加到imgDiv
					$("#imgDiv").append(imgObj);
				}
			});

        }
    </script>

 2.6.2 controller-----ProductInfoAction类

这里接收到Ajax发送过来的请求后,利用MultipartFile这个工具类生成一个uuid,也就是文件的一个新名字(生成新名字,是为了防止上传同名图片将原先的图片覆盖了),然后设置你要将图片存储到那哪个地方,设置完以后转存这个图片即可。

最后是利用json工具类,将图片的新名字封装,生成一个json对象,并将这个对象传送到前端页面。

//异步ajax文件上传处理
    @ResponseBody
    @RequestMapping("ajaxImg")
    public Object ajaxImg(MultipartFile pimage, HttpServletRequest request){
        //提取生成文件名UUID+加上传图片的后缀 .jpg .png
        saveFileName = FileNameUtil.getUUIDFileName() + FileNameUtil.getFileType(pimage.getOriginalFilename());
        //得到你想把图片转存到的那个项目目录的物理路径(在你电脑上实际存储路径)
        String path  = request.getServletContext().getRealPath("/image_big");
        //转存 D:\桌面临时文件\mimissm\src\main\webapp\image_big + \ + UUID.jpg
        try {
            pimage.transferTo(new File(path + File.separator + saveFileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        //返回客户端JSON对象,封装图片的路径,为了在页面实现立即回显
        JSONObject object = new JSONObject();
        //注意:这里的imgurl指的是saveFileName,所以在前段页面接受了json对象后,可以通过打点imgurl的方式取到saveFileName
        object.put("imgurl",saveFileName);
        System.out.println("文件名字"+saveFileName);
        return object.toString();
    }

3.做项目过程中遇到的bug

  1. 在进行登录判断时如果出现,浏览器上报500 显示spring mvc初始化不成功,那一定是spring mvc的配置文件出问题了,去那里找问题就行了
  2. 在进行Ajax实现翻页的时候,出现点击页码没有效果的情况,这时候就要去查看你的session作用域中的数据,与你前端jsp页面要遍历的的那个list集合是不是你的session作用域中的info.list,如果只是一个单纯的list那改成info.list即可实现Ajax翻页。

4.总结

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java登云楼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值