SSM:Spring+SpringMVC+MyBatis整合之登录+商品信息分页展示(IDEA)

1.技术架构

开发工具: jdk8.0+Tomcat8.5+MySql5.7+IDEA+Maven3.6
开发技术:MyBatis+Spring+SpringMVC+html+css+js

2.数据库表结构

自行创建数据库ssm,以及users和goods表,如图,字符集选择 utf-8。
数据库表users
在这里插入图片描述

3.工程结构

  • 创建Maven工程,工程目录如下
    在这里插入图片描述
  • bean:实体类
  • dao:持久层代码管理,完成对数据库的增删查改
  • service:业务层,进行业务处理
  • controller:控制层,模型与视图的交互
  • common:工具类
resources:配置文件
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>org.example</groupId>
  <artifactId>SpringDemo1</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>SpringDemo1 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
    <!--因为Spring的jar比较多,所以统一抽取版本号,方便管理-->
    <spring.version>5.0.5.RELEASE</spring.version>
  </properties>
  
  <dependencies>
    <!--此处需要注意的是,spring5 及以上版本要求 junit 的版本必须是 4.12 及以上-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <!--导入spring的context坐标,context依赖core、beans、expression-->
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</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-expression</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</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-tx</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-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- AOP相关包 -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjrt</artifactId>
      <version>1.8.0</version>
    </dependency>
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.8.0</version>
    </dependency>
    <!-- MyBatis相关包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.0</version>
    </dependency>
    <!-- MySQL相关包 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.39</version>
    </dependency>
    <!-- 数据库连接池 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.20</version>
    </dependency>
    <!-- C3P0连接池 -->
    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.2</version>
    </dependency>
    <!-- Spring集成MyBatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.0</version>
    </dependency>
    <!-- JSP标准标签库 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--Servlet坐标-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
    <!--Jsp坐标-->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.10.1</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.10.1</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.10.1</version>
    </dependency>
    <!--以上【三个jar包紧密依赖】同时存在。-->
    <!-- 日志相关包 -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.12</version>
    </dependency>
    <!-- 上传包下载 -->
    <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.6</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>1.4</version>
    </dependency>
    <!-- 分页插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.0.0</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>springDemo1</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <groupId>org.apache.maven.plugins</groupId>
          <artifactId>maven-compiler-plugin</artifactId>
          <configuration>
            <source>1.8</source><!-- 源代码使用的JDK版本 -->
            <target>1.8</target><!-- 需要生成的目标class文件的编译版本 -->
          </configuration>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>
  • db.properties:配置数据库
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=root//你自己的密码
  • log4j.properties:日志
# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n
  • mybatis.xml:配置mybatis框架
<?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 >
    <!--配置bean的别名-->
    <typeAliases>
        <package name="com.sunyue.ssm.bean"></package>
    </typeAliases>
    <!--配置分页插件-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <property name="helperDialect" value="mysql"/>
        </plugin>
    </plugins>
    <!--配置mapper映射-->
    <mappers>
        <package name="com.sunyue.ssm.dao"></package>
    </mappers>
</configuration>
  • spring-beans.xml:spring框架配置文件
<?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/beans
	   http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
	   http://www.springframework.org/schema/context
	   http://www.springframework.org/schema/context/spring-context.xsd
	   http://www.springframework.org/schema/aop
	   http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
	   http://www.springframework.org/schema/tx
	   http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    <!--配置启用注解配置-->
    <context:annotation-config/>
    <!--配置service层的扫包-->
    <context:component-scan base-package="com.sunyue.ssm.service"></context:component-scan>
    <!--加载db.properties-->
    <context:property-placeholder location="classpath:db.properties"/>
    <!--使用dbcp连接池配置数据源-->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="maxActive" value="10"/>
        <property name="maxIdle" value="5"/>
    </bean>
    <!--mapper配置-->
    <!-- 将mybatis中的写在代码中的sqlsessionfactory配置在 Spring配置文件中,交由spring管理,从而简化操作 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--1.数据库环境,因为被Spring接管,直接使用dataSource-->
        <property name="dataSource" ref="dataSource"/>
        <!--2.mapper映射,在mybatis.xml中需要进行关联-->
        <property name="configLocation" value="classpath:mybatis.xml"/>

    </bean>
    <!--配置mapper扫描器,我们只需要在使用的时候通过@AutoWired直接访问dao层的接口就行-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--配置dao层的包-->
        <property name="basePackage" value="com.sunyue.ssm.dao"/>
        <!--注入工厂-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
    <!--配置注解版事务-->
    <tx:annotation-driven/>
    <!--配置aop自动代理-->
    <aop:aspectj-autoproxy/>
    <!--配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
</beans>
  • springmvc.xml:springmvc框架配置:包括Controller和视图解析器等…
<?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
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--使用mvc:annotation-driven代替注解映射器和注解适配器-->
    <mvc:annotation-driven conversion-service="conversionService"/>
    <!--扫描所有的Controller-->
    <context:component-scan base-package="com.sunyue.ssm.controller"/>
    <!--配置内部资源视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!--声明转换器-->
    <bean id="conversionService" class="org.springframework.context.support.ConversionServiceFactoryBean">
        <property name="converters">
            <list>
                <bean class="com.sunyue.ssm.web.converter.DateConverter"></bean>
            </list>
        </property>
    </bean>
    <!--释放静态资源-->
    <mvc:default-servlet-handler/>
    <!--定义文件上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--配置编码(针对文件名)-->
        <property name="defaultEncoding" value="UTF-8"></property>
        <!--设置文件的上传大小:5M=5*1024*1024-->
        <property name="maxUploadSize" value="5242880"></property>
    </bean>
    <!--配置自定义拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <!--对不需要拦截的方法进行执行-->
            <mvc:exclude-mapping path="/user/login"/>
            <bean class="com.sunyue.ssm.web.interceptor.MyInterceptor1"></bean>
        </mvc:interceptor>
    </mvc:interceptors>
</beans>
配置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>login.jsp</welcome-file>
    </welcome-file-list>
    <!--配置servletContext监听器,其实就是配置spring-*.xml-->
    <!--全局参数-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-*.xml</param-value>
    </context-param>
    <!--Spring的监听器-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!--配置前端控制器-->
    <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>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--编码过滤器-->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

至此配置完成,下面开始写java代码。

  • User.java
    com.sunyue.ssm.bean.User.java:在bean里面创建User.java实体类,注意与数据库中的表字段名对应。
package com.sunyue.ssm.bean;

import java.util.Date;

public class User {
    private int id;
    private String username;
    private String password;
    private String gender;
    private String phone;
    private Date birthday;
    private String pic;
    private int delFlag;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getPic() {
        return pic;
    }

    public void setPic(String pic) {
        this.pic = pic;
    }

    public int getDelFlag() {
        return delFlag;
    }

    public void setDelFlag(int delFlag) {
        this.delFlag = delFlag;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", gender='" + gender + '\'' +
                ", phone='" + phone + '\'' +
                ", birthday=" + birthday +
                ", pic='" + pic + '\'' +
                ", delFlag=" + delFlag +
                '}';
    }
}
  • UserDao.java
    com.sunyue.ssm.dao.UserDao.java:在dao层创建UserDao接口
package com.sunyue.ssm.dao;

import com.sunyue.ssm.bean.User;

public interface UserDao {
    /**
     * 登录
     * @param user
     * @return
     */
    public User login(User user);
}

  • UserDao.xml
    在resources里创建包目录,目录与java下的dao层目录一致,并创建UserDao.xml,(注意resources目录下创建包使用“ / ”进行创建,java对应目录下使用“ . ”,注意一定不要弄错!)
<?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.sunyue.ssm.dao.UserDao">
    <resultMap id="findUserResultMap" type="User">
        <id column="id" property="id"/>
        <result column="username" property="username"/>
        <result column="password" property="password"/>
        <result column="gender" property="gender"/>
        <result column="phone" property="phone"/>
        <result column="birthday" property="birthday"/>
        <result property="pic" column="pic"/>
    </resultMap>
    <!--登录-->
    <select id="login" parameterType="User" resultMap="findUserResultMap">
        select * from users where username=#{username} and password=#{password}
    </select>
</mapper>
  • IUserService.java
    com.sunyue.ssm.service.IUserService.java
package com.sunyue.ssm.service;

import com.sunyue.ssm.bean.User;

public interface IUserService {
    /**
     * 用户登录
     * @param user
     * @return
     * @throws Exception
     */
    public User login(User user)throws Exception;
}
  • UserService.java
    com.sunyue.ssm.service.impl.IUserService.java
package com.sunyue.ssm.service.impl;

import com.sunyue.ssm.bean.User;
import com.sunyue.ssm.dao.UserDao;
import com.sunyue.ssm.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional(value = "transactionManager")
public class UserService implements IUserService {
    @Autowired
    private UserDao userDao;
    /**
     * 用户登录
     * @param user
     * @return
     * @throws Exception
     */
    @Transactional(propagation = Propagation.NOT_SUPPORTED,readOnly = true)
    @Override
    public User login(User user) throws Exception {
        return userDao.login(user);
    }
}
  • UserController.java
    com.sunyue.ssm.controller.UserController.java
package com.sunyue.ssm.controller;

import com.sunyue.ssm.bean.User;
import com.sunyue.ssm.service.IUserService;
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.RequestMethod;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private IUserService userService;

    /**
     * 登录
     * @param user
     * @param httpSession
     * @return
     */
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public String login(User user, HttpSession httpSession){
        try {
            User u = userService.login(user);
            if (u==null){
                return "redirect:/login.jsp";
            }else {
                httpSession.setAttribute("user",u);
                return "redirect:/good/showGood";
            }
        } catch (Exception e) {
            e.printStackTrace();
            return "redirect:/login.jsp";
        }
    }
  • Good.java
    在bean里面创建Good.java实体类,注意与数据库中的表字段名对应。
package com.sunyue.ssm.bean;

import java.util.Date;

public class Good {
    private int id;
    private String goodName;
    private String goodPic;
    private String goodPrice;
    private String goodDetail;
    private Date updateTime;
    private int delFlag;

    public Good() {
    }

    public Good(String goodName, String goodPic, String goodPrice, String goodDetail, Date updateTime) {
        this.goodName = goodName;
        this.goodPic = goodPic;
        this.goodPrice = goodPrice;
        this.goodDetail = goodDetail;
        this.updateTime = updateTime;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getGoodName() {
        return goodName;
    }

    public void setGoodName(String goodName) {
        this.goodName = goodName;
    }

    public String getGoodPic() {
        return goodPic;
    }

    public void setGoodPic(String goodPic) {
        this.goodPic = goodPic;
    }

    public String getGoodPrice() {
        return goodPrice;
    }

    public void setGoodPrice(String goodPrice) {
        this.goodPrice = goodPrice;
    }

    public String getGoodDetail() {
        return goodDetail;
    }

    public void setGoodDetail(String goodDetail) {
        this.goodDetail = goodDetail;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }

    public int getDelFlag() {
        return delFlag;
    }

    public void setDelFlag(int delFlag) {
        this.delFlag = delFlag;
    }

    @Override
    public String toString() {
        return "Good{" +
                "id=" + id +
                ", goodName='" + goodName + '\'' +
                ", goodPic='" + goodPic + '\'' +
                ", goodPrice='" + goodPrice + '\'' +
                ", goodDetail='" + goodDetail + '\'' +
                ", updateTime=" + updateTime +
                ", delFlag=" + delFlag +
                '}';
    }
}

  • GoodDao.java
    在dao层创建GoodDao接口
package com.sunyue.ssm.dao;
import com.sunyue.ssm.bean.Good;
import java.util.List;
public interface GoodDao {
    /**
     * 商品展示
     * @return
     */
    public List<Good> showGood();
}
  • GoodDao.xml
    在resources里创建包目录,目录与java下的dao层目录一致,并创建GoodDao.xml,(注意resources目录下创建包使用“ / ”进行创建,java对应目录下使用“ . ”,注意一定不要弄错!)
<?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.sunyue.ssm.dao.GoodDao">
    <resultMap id="findGoodsResultMap" type="Good">
        <id column="id" property="id"/>
        <result column="good_name" property="goodName"/>
        <result column="good_pic" property="goodPic"/>
        <result column="good_price" property="goodPrice"/>
        <result column="good_detail" property="goodDetail"/>
        <result column="update_time" property="updateTime"/>
    </resultMap>
    <!--    商品展示-->
    <select id="showGood" resultMap="findGoodsResultMap">
        select * from goods
    </select>
</mapper>
  • IGoodService.java
    com.sunyue.ssm.service.IGoodService.java
package com.sunyue.ssm.service;
import com.github.pagehelper.PageInfo;
import com.sunyue.ssm.bean.Good;
import com.sunyue.ssm.bean.User;
import com.sunyue.ssm.service.impl.GoodService;
import org.springframework.ui.Model;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
public interface IGoodService {
    /**
     * 分页显示商品
     * @param pageNum
     * @param pageSize
     * @return
     * @throws Exception
     */
    public PageInfo<Good> showGood(int pageNum,int pageSize)throws Exception;
}
  • IGoodService.java
    com.sunyue.ssm.service.impl.IGoodService.java
package com.sunyue.ssm.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.sunyue.ssm.bean.Good;
import com.sunyue.ssm.dao.GoodDao;
import com.sunyue.ssm.service.IGoodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

@Service
@Transactional(value = "transactionManager")
public class GoodService implements IGoodService {
    @Autowired
    private GoodDao goodDao;
    /**
     * 分页显示商品
     * @param pageNum
     * @param pageSize
     * @return
     * @throws Exception
     */
    @Override
    public PageInfo<Good> showGood(int pageNum, int pageSize) throws Exception {
        PageHelper.startPage(pageNum, pageSize);
        List<Good> goods = goodDao.showGood();
        PageInfo<Good> page = new PageInfo<>(goods,3);

        return page;
    }
}
  • GoodController.java
    com.sunyue.ssm.controller.GoodController.java
package com.sunyue.ssm.controller;

import com.github.pagehelper.PageInfo;
import com.sunyue.ssm.bean.Good;
import com.sunyue.ssm.service.IGoodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Date;
import java.util.List;

@Controller
@RequestMapping("/good")
public class GoodController {
    @Autowired
    private IGoodService goodService;
    /**
     * 显示商品列表
     * @param currentPage
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/showGood")
    public String showGood(@RequestParam(value = "currentPage",defaultValue = "1")int currentPage,Model model)throws Exception{
        PageInfo<Good> page = goodService.showGood(currentPage,4);
        model.addAttribute("page",page);
        System.out.println(page);
        return "goods";
    }
}

所有后台代码均已完成,接下来用原始写法完成前端界面。

前端页面目录如下

登录界面需放在WEB-INF外面,否则无法跳转。WEB-INF里面views中的界面需通过后台进行跳转。静态资源放在WEB-INF外面。
在这里插入图片描述

  • login.jsp界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <style>
        body{
            background:url("${pageContext.request.contextPath}/static/image/mysky.jpg") no-repeat;
            background-size: 100%;
        }
        .bg{
            margin: 10% 5% 10% 50%;
            border:1px solid lightgray;
            width: 500px;
            height: 360px;
            background: #ffffff88;
            border-radius: 10px;
        }
        h2{
            text-align: center;
            color: #00000098;
            font-weight: bold;
            font-size: 28px;
            font-family: 幼圆;
            padding: 10px;
            border-bottom: 1px solid lightgray;
        }

        .acountbg,.passwordbg{
            width: 74%;
            height: 40px;
            border:1px solid lightgray;
            border-radius: 5px;
        }
        .acountbg{
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
        }
        .passwordbg{
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
        }
        span{
            display: block;
            height: 100%;
            width: 25%;
            text-align: right;
            vertical-align: middle;
            font-size: 18px;
            color: #00000098;
            font-family: 幼圆;
            position: relative;
            top: 10px;
            float: left;
        }
        #username,#password{
            width: 75%;
            height: 100%;
        }

        #username, #password {
            background: none;
            float: left;
            border: none;
            font-family: 幼圆;
            font-size: 18px;
            outline: none;
            padding-left: 10px;

        }
        .btn{
            margin-top: 20px;
            width: 100%;
            height: 60px;
            text-align: center;
        }
        .btn input{
            background: steelblue;
            font-size: 18px;
            padding: 8px 20px;
            color: white;
            font-family: 幼圆;
            border:1px solid steelblue;
            border-radius: 5px;
            margin: 10px;
            outline: none;
        }
        .btn input:active{
            background: #00CED188;
            color: white;
        }
    </style>
</head>
<body >
<div class="bg" >
<form action="${pageContext.request.contextPath}/user/login" method="post">
    <table border="1">
        <h2 style="text-shadow: black">Shopping百货商城</h2>
        <div class="acountbg">
            <span for="account">用户名:</span>
            <input type="text" name="username" id="username" placeholder="请输入账号">
        </div>
        <div class="passwordbg">
            <span for="password">&nbsp;码:</span>
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="btn">
            <input type="submit" value="登录">
        </div>

    </table>
</form>
</div>
</body>

</html>

  • goods.jsp
    WEB-INF/views/goods.jsp:此页面做了分页处理
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
</head>
<style>
    body{
        background:url("${pageContext.request.contextPath}/static/image/mysky.jpg") no-repeat;
        background-size: 100%;
    }
    .bg {
        margin: 50px auto;
        border: 1px solid lightgray;
        width: 1150px;
        height: 500px;
        background: #ffffffbb;
        border-radius: 10px;
    }

    table {
        border-collapse: collapse;
        margin-top: 10px;
        width: 100%;
        border: 1px solid lightgray;
    }

    .cap {
        color: white;
        background: gray;
    }

    td {
        width: 100px;
        height: 35px;
        margin: 0;
        padding: 0;
        font-family: 宋体;
        font-size: 16px;
        text-align: center;
        border: 1px solid lightgray;
    }
    a{
        text-decoration: none;
        white-space: nowrap;
        color: white;
        size: 16px;
    }

    .bt1 {
        width: 60px;
        background: steelblue;
        color: white;
        font-size: 15px;
        font-family: 宋体;
        border: 1px solid lightgray;
        border-radius: 5px;
        outline: none;
    }
    .bt1:active {
        background: indianred;
        color: white;
    }

    .bt2 {
        width: 60px;
        background: indianred;
        color: white;
        font-size: 15px;
        font-family: 宋体;
        border: 1px solid lightgray;
        border-radius: 5px;
        outline: none;
    }
    .bt2:active {
        background: cadetblue;
        color: white;
    }

    input[type=text] {
        border: 1px solid black;
        padding: 10px;
        border-radius: 50px;
        background: white;
        outline: none; 
    }
</style>
</head>
<body >
    <div class="bg">
        <table>
            <tr>
                <td align="center" colspan="7">
                        <input type="text" id="searchGood" name="searchGood" placeholder="请输入需要查询的商品名称">
                        <input  type="button" value="搜索" class="bt1" onclick="sech()">
                        <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood" >list</a></button>
                        <button class="bt1"><a href="${pageContext.request.contextPath}/good/add">添加</a></button>
                        <%--<button href="${pageContext.request.contextPath}/good/add">添加</button>--%>
                        <%--<input type="button" href="${pageContext.request.contextPath}/good/add" value="添加" class="bt">--%>
                </td>
            </tr>
            <tr class="cap">
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品图片</td>
                <td>商品价格</td>
                <td>更新时间</td>
                <td>商品描述</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${page.list}" var="item">
                <tr>
                    <td>${item.id}</td>
                    <td>${item.goodName}</td>
                    <td><input type="image" name="goodPic" src="${pageContext.request.contextPath}/${item.goodPic}" style="width: 50px;height: 50px"></td>
                    <td>${item.goodPrice}</td>
                    <td><f:formatDate value="${item.updateTime}" pattern="yyyy-MM-dd HH:mm:ss" ></f:formatDate></td>
                    <td>${item.goodDetail}</td>
                    <td>
                         <button class="bt1"><a href="${pageContext.request.contextPath}/good/updateGood?id=${item.id}">修改</a></button>
                         <button class="bt2"><a href="${pageContext.request.contextPath}/good/deleteGood?id=${item.id}">删除</a></button>
                    </td>
                </tr>
            </c:forEach>
            <td colspan="7">
                <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood?currentPage=1">首页</a></button>
                <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood?currentPage=${page.prePage>1?page.prePage:1}">上一页</a></button>
                <c:forEach items="${page.navigatepageNums}" var="p">
                <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood?currentPage=${p}">${p}</a></button>
                </c:forEach>
                <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood?currentPage=${(page.nextPage<page.lastPage&&page.nextPage>page.firstPage)?page.nextPage:page.lastPage}">下一页</a></button>
                <button class="bt1"><a href="${pageContext.request.contextPath}/good/showGood?currentPage=${page.lastPage}" type="${page.isLastPage}">尾页</a></button>
            </td>
        </table>
    </div>
</body>
</html>

至此,登录以及商品信息展示(分页)已经实现。
增删改功能后续再说。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值