Idea创建一个JavaWeb的SSM(maven)项目

本文将介绍使用ssm框架从登陆到实现页面简单的增删改查。在文末将源代码一并奉上

搭建说明：使用xml+注解方式搭建
具体思路：先将Spring与mybatis整合，最后在与SpringMVC进行整合即可

一，目录结构：

1：开发环境

jdk1.8
maven

2：开发工具

idea
mysql8.0.19
tomcat9.0

3：需要的知识点

Spring+SpringMVC+Mybatis
jsp+html+css
EL表达式
servlet
mysql

废话不多说，先把数据表给出

drop database if exists ssm;

create database ssm;

use ssm;

create table user(
    id int primary key auto_increment not null,
    username varchar(20) not null,
    password varchar(20) not null
)engine =innodb charset=UTF8;

create table goods(
    id int primary key auto_increment,
    name varchar(20)not null ,
    price double not null ,
    quantity int not null,
    update_time Date not null

)engine =innodb charset=UTF8;
insert into user (username, password)
values ('admin','123456');

insert into goods(name, price, quantity, update_time)
values ('iphone',5000,100,'2020-03-26');

二，创建idea的目录结构
1.1点击箭头所指创建一个项目
在这里插入图片描述
1.2选中maven点击next

1.3.点击next后父Moudle创建完成

1.4，点击自动导入

1.5由于不需要父Module的src故删除

1.6删除后右键父Module创建新的子Module
1.7而后操作和1.2一样点击next后进入图片界面再次next就行

1.8创建成功的样子
在这里插入图片描述
1.9再次右键父Module新建一个名为ssm_web的子Module，但是这次需要选择maven模板的webapp，而后点next

2.0这里之所以加archetypeCatalog是因为我在创建web项目的时候很慢具体可参考一下链接解决mavenwebapp创建慢

2.1创建完后在src目录下缺少了java和resources目录
在这里插入图片描述

2.2然后分别选中Java和resources

2.3选中ssm_webModule下的pom.xml。删除部分使pom.xml如图所示
2.4在ssm_service Module中src/main/java下分别创建名为图示包名

2.5在在ssm_service Module中src/main/resources下创建spring.xml

三，完善ssm_service
1.1在ssm_service中的pom.xml依赖spring与mybatis所需要的包，如果是第一次使用maven依赖包可能下载比较慢
解决maven依赖慢的方法

<?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">
    <parent>
        <artifactId>SSM</artifactId>
        <groupId>com.ray</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>ssm_service</artifactId>
    <!--    打包为jar包以便在ssm_web的pom文件下引入该包-->
    <packaging>jar</packaging>

    <dependencies>
<!--        mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.4</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.19</version>
        </dependency>


<!--        引入spring相关包-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-expression</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>

<!--        aop相关包-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.1</version>
        </dependency>

<!--        事务处理-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
<!--       由于整合spring与mybatis当然要引入整合包啦!!!!!-->

        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>

    </dependencies>
    
</project>

1.2将包依赖完成后将对spring.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/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/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

<!--    开启自动扫描-->
    <context:component-scan base-package="com.ray.ssm"/>

<!--    配置数据源-->
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<!--        由于我使用的是mysql8 因此驱动需要加上cj，-->
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
<!--        同样mysql8还需要对时区进行处理-->
        <property name="url"
                  value="jdbc:mysql://localhost:3306/ssm?useSSL=false&amp;serverTimezone=Hongkong&amp;useUnicode=true&amp;characterEncoding=utf-8"/>
<!--       数据库账户名-->
        <property name="username" value="root"/>
<!--        数据库密码-->
        <property name="password" value="AaAa123456"/>
    </bean>

<!--    sqlSession对象-->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
<!--      typeAliasesPackage起别名  -->
        <property name="typeAliasesPackage" value="com.ray.ssm.entity"/>
    </bean>

<!--    持久化操作对象-->

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.ray.ssm.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSession"/>
    </bean>


<!--    声明式事务-->
    <bean id="transaction" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

<!--    通知-->
    <tx:advice id="myAdvice" transaction-manager="transaction">
        <tx:attributes>
            <tx:method name="find*" read-only="true"/>
            <tx:method name="get*" read-only="true"/>
            <tx:method name="search*" read-only="true"/>
            <tx:method name="*" propagation="REQUIRED"/>
        </tx:attributes>
    </tx:advice>

<!--    植入-->
    <aop:config>
<!--        切入点-->
        <aop:pointcut id="myPoint" expression="execution(* com.ray.ssm.service.*.*(..))"/>
        <aop:advisor advice-ref="myAdvice" pointcut-ref="myPoint"/>
    </aop:config>

</beans>

1.3dao层
在这里插入图片描述
GoodsDao

package com.ray.ssm.dao;

import com.ray.ssm.entity.Goods;
import org.springframework.stereotype.Repository;

import java.util.List;
@Repository
public interface GoodsDao {
    void insert(Goods goods);

    void update(Goods goods);

    void delete(int id);

    Goods selectById(int id);

    List<Goods> selectAll();
}

UserDao

package com.ray.ssm.dao;

import com.ray.ssm.entity.User;
import org.springframework.stereotype.Repository;

@Repository
public interface UserDao {
    User selectByName(String username);
}

1.4创建实体类
在这里插入图片描述
Goods

package com.ray.ssm.entity;

import java.sql.Date;

public class Goods {
    private Integer id;
    private String name;
    private Double price;
    private Integer quantity;
    private Date updateTime;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public Integer getQuantity() {
        return quantity;
    }

    public void setQuantity(Integer quantity) {
        this.quantity = quantity;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

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

User

package com.ray.ssm.entity;

public class User {
    private int id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

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

1.5在resources目录下创建与dao包名相同的文件夹(com/ray/ssm/dao），创建完成后再分别创建与dao层名字相同的xml文件(注意大小写)
在这里插入图片描述

GoodsDao.xml

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.4//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ray.ssm.dao.GoodsDao">
    <resultMap id="resultMap" type="Goods">
<!--        property属性名(entity里),column字段名(数据表)-->
        <id property="id" column="id" javaType="Integer"/>
        <result property="name" column="name" javaType="String"/>
        <result property="price" column="price" javaType="Double"/>
        <result property="quantity" column="quantity" javaType="Integer"/>
        <result property="updateTime" column="update_time" javaType="java.sql.Date"/>
    </resultMap>
<!--  useGeneratedKeys：新增商品信息，并得到新增数据的主键，主键自增
      还可以使用selectKey，
      <selectKey resultType="Integer" keyProperty="id" order="AFTER">
                        select last_insert_id()
                    </selectKey>

      两者区别在于:selectKey适用于所有数据库，使用麻烦
                  useGeneratedKeys只支持自增主键数据库，使用简单

-->
   <insert id="insert" parameterType="Goods" useGeneratedKeys="true" keyProperty="id" keyColumn="id">
       insert into ssm.goods(name, price, quantity, update_time)
                    VALUES(#{name},#{price},#{quantity},#{updateTime});

                    <selectKey resultType="Integer" keyProperty="id" order="AFTER">
                        select last_insert_id()
                    </selectKey>
   </insert>

    <update id="update" parameterType="Goods">
        update ssm.goods set name=#{name},price=#{price},quantity=#{quantity},update_time=#{updateTime} where id=#{id};
    </update>

    <delete id="delete" parameterType="Integer">
        delete from ssm.goods where id=#{id};
    </delete>

    <select id="selectById" parameterType="Integer" resultMap="resultMap">
        select * from ssm.goods where id=#{id};
    </select>

    <select id="selectAll" resultMap="resultMap">
        select * from ssm.goods;
    </select>
    
</mapper>

UserDao.xml

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.4//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ray.ssm.dao.UserDao">
    <resultMap id="result" type="User">
        <id property="id" column="id" javaType="Integer"/>
        <result property="username" column="username" javaType="String"/>
        <result property="password" column="password" javaType="String"/>
    </resultMap>
    <select id="selectByName" parameterType="String" resultMap="result">
        select *from ssm.user where username=#{username};
    </select>
</mapper>

1.6业务层,在service包下创建
在这里插入图片描述
GoodsService

package com.ray.ssm.service;

import com.ray.ssm.entity.Goods;

import java.util.List;

public interface GoodsService {
    void add(Goods goods);

    void edit(Goods goods);

    void remove(int id);

    Goods get(int id);

    List<Goods> getAll();
}

UserService

package com.ray.ssm.service;

import com.ray.ssm.entity.User;

public interface UserService {
    User login(String username, String password);
}

GoodsServiceImpl

package com.ray.ssm.service.Impl;

import com.ray.ssm.dao.GoodsDao;
import com.ray.ssm.entity.Goods;
import com.ray.ssm.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

@Service("goodsServiceImpl")
public class GoodsServiceImpl implements GoodsService {

    @Autowired
    private GoodsDao goodsDao;
    public void add(Goods goods) {
        goods.setUpdateTime(new Date(System.currentTimeMillis()));
        goodsDao.insert(goods);
    }

    public void edit(Goods goods) {
        goods.setUpdateTime(new Date(System.currentTimeMillis()));
        goodsDao.update(goods);
    }

    public void remove(int id) {
        goodsDao.delete(id);
    }

    public Goods get(int id) {
        return goodsDao.selectById(id);
    }

    public List<Goods> getAll() {
        return goodsDao.selectAll();
    }
}

UserServiceImpl

package com.ray.ssm.service.Impl;

import com.ray.ssm.dao.UserDao;
import com.ray.ssm.entity.User;
import com.ray.ssm.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service("userServiceImpl")
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    public User login(String username, String password) {
       User user= userDao.selectByName(username);
       if (user!=null&&user.getPassword().equals("123456"))   return user;

        return null;
    }
}

1.7到此为止spring与mybatis已经整合完

四，SpringMVC部分
1.1创建目录
在这里插入图片描述
1.2在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.ray</groupId>
  <artifactId>ssm_web</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>ssm_web 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>
  </properties>

  <dependencies>
<!--    引入ssm_service包-->
    <dependency>
      <groupId>com.ray</groupId>
      <artifactId>ssm_service</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
<!--    由于需要在拦截器中实现HandleInterceptor，故需要引入该包-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>

<!--    引入SpringMVC相关包-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.9.RELEASE</version>
    </dependency>
<!--  由于需要用到EL表达式故需要导入改包-->
      <dependency>
          <groupId>jstl</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
      </dependency>
  </dependencies>

</project>

1.3在global包下创建编码过滤器以及拦截器
在这里插入图片描述
EncodingFilter

package com.ray.ssm.global;

import javax.servlet.*;
import java.io.IOException;

public class EncodingFilter implements Filter {

    private String encoding="UTF-8";
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        if (filterConfig.getInitParameter("ENCODING") != null) {
            encoding = filterConfig.getInitParameter("ENCODING");
        }
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding(encoding);
        servletResponse.setCharacterEncoding(encoding);
        filterChain.doFilter(servletRequest,servletResponse);
    }

    @Override
    public void destroy() {
        encoding = null;
    }
}

LoginFilter

package com.ray.ssm.global;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class LoginFilter implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String path = request.getServletPath();

        if(path.toLowerCase().indexOf("login")!=-1){
            return  true;
        }else{
            HttpSession session = request.getSession();
            Object obj=session.getAttribute("USER");
            if(obj!=null)
                return true;
        }
        response.sendRedirect("toLogin");
        return false;

    }
}

1.4配置spring-web.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: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">

<!--    导入spring.xml-->
    <import resource="spring.xml"/>
<!--    开启自动扫描-->
    <context:component-scan base-package="com.ray.ssm"/>
<!--     开启mvc注解模式-->
    <mvc:annotation-driven/>
<!--    -->
    <mvc:default-servlet-handler/>

<!--    拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/**.css"/>
            <bean class="com.ray.ssm.global.LoginFilter"/>
        </mvc:interceptor>
    </mvc:interceptors>
</beans>

1.5配置web.xml

<?xml version="1.0" encoding="UTF-8" ?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
          http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">

<!--   配置核心控制器-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-web.xml</param-value>
        </init-param>
        <load-on-startup>0</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

<!--    配置编码方式-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>com.ray.ssm.global.EncodingFilter</filter-class>
        <init-param>
            <param-name>ENCODING</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

1.6控制器部分
在这里插入图片描述
GoodsController

package com.ray.ssm.controller;

import com.ray.ssm.entity.Goods;
import com.ray.ssm.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;
import java.util.List;

@Controller("goodsController")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    @RequestMapping("/list")
    public String List(HttpSession session){
        List<Goods> goods =  goodsService.getAll();
        session.setAttribute("Goods", goods);
        return "list.jsp";
    }

    @RequestMapping("/toAdd")
    public String toAdd(){
        return "add.jsp";
    }

    @RequestMapping("/add")
    public  String add(String name,String price,String quantity){
        Goods good = new Goods();
        good.setName(name);
        good.setPrice(Double.parseDouble(price));
        good.setQuantity(Integer.parseInt(quantity));
        goodsService.add(good);
        return "redirect:list";
    }

    @RequestMapping("/delete")
    public String delete(Integer id){
        goodsService.remove(id);
        return "redirect:list";
    }

    @RequestMapping("/toEdit")
    public String toEdit(String id,HttpSession session){
        System.out.println(id);
        Goods good=goodsService.get(Integer.parseInt(id));
        session.setAttribute("Good",good);
        return "edit.jsp";
    }


    @RequestMapping("/edit")
    public String edit(String id,String name,String price,String quantity){
        Goods good=goodsService.get(Integer.parseInt(id));
        good.setName(name);
        good.setPrice(Double.parseDouble(price));
        good.setQuantity(Integer.parseInt(quantity));
        goodsService.edit(good);
        return "redirect:list";
    }

}

UserController

package com.ray.ssm.controller;

import com.ray.ssm.entity.User;
import com.ray.ssm.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;

@Controller("userController")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/toLogin")
    public String toLogin(){
        return "login.jsp";
    }

    @RequestMapping("/login")
    public String login(String username, String password, HttpSession session) {
        User user = userService.login(username, password);
        if (user!=null) {
            session.setAttribute("USER", user);
            return "redirect:list";
        }else  return "toLogin";
    }

}

五，页面部分
在这里插入图片描述
index.css

*{
	margin:0px;
	padding:0px;
	border:0;
	font-size:100%;
	font-family:"宋体";
}
.container{
	width:1150px;
	margin:0 auto;
}
.banner{
	margin-top:5px;
}
.banner>.container{
	overflow: hidden;
	height:190px;
	background: rgba(238,238,238,0.8);
	border-radius:5%;
}
.banner>.container>div{
	width:900px;
	margin:0 auto;
}
.banner h1{
	padding:20px;
	margin-top:10px;
	font-size: 2em;
}
.banner p{
	padding:5px 20px 20px 20px;
	text-indent: 2em;
	font-size:18px;
}
.main table th{
	width: 150px;
}
.main table td{
	width: 150px;
	text-align: center;
}

*{
    margin:0px;
    padding:0px;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
body{
    background:rgba(238,238,238,0.5);
    position:relative;
}
.login{
    width:450px;
    height:400px;
    background: white;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-225px;
    margin-top:100px;
    padding:5px 15px;
}
.login>.header{
    width:100%;
    padding:10px 0px;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}
.login>.header>h1{
    font-size:18px;
    font-weight: normal;
    float:left;
}
.login>.header>h1>a{
    padding:5px;
    margin-left:10px;
    color:black;
}
.login>.header>h1>a:first-child{
    margin-left:50px;
    color:#2C689B;
}
.login>.header>button{
    float:right;
    width:20px;
    height:20px;
    cursor:pointer;
    background: #fff;
    border:1px solid #fff;
}
.login>form{
    margin-top:30px;
    padding:0 50px;
}
.login>form>div>input{
    width:350px;
    height:40px;
    line-height: 40px;
    padding-left: 5px;
    border:1px solid #d0d6d9;
    background: #F9F9F9;
}
.login>form>div>p{
    width:350px;
    height:25px;
    line-height: 25px;
    font-size: 12px;
}
.login>form>div.idcode>input{
    width:150px;
    margin-right:30px;
    float: left
}
.login>form>div.idcode>span{
    float:right;
    width:80px;
    height:30px;
    margin-top:10px;
    border:1px solid #ccc;

}
.login>form>div.idcode>a{
    float: right;
    color: black;
    font-size: 12px;
    margin-top:25px;
    margin-left: 5px;
}
.clear{
    clear:both;
}
.login>form>.autoLogin{
    margin-top:20px;
    font-size:14px;
    line-height:15px;
    color:#999;
    height: 15px;
}
.login>form>.autoLogin>label>input{
    margin-right:5px;
}
.login>form>.autoLogin>label{
    float:left;
}
.login>form>.autoLogin>a{
    float:right;
    color:#666;
    font-size:14px;
}
.btn-red{
    margin:20px 0px;
}
#login-btn{
    width:100%;
    height:50px;
    background:#2C689B;
    border-color:#2C689B;
    text-align: center;
    line-height:50px;
    color:#fff;
    font-size: 17px;
}
#login-btn:hover{
    cursor:pointer;
}

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
</head>
<body>
   <h3>添加商品界面</h3>
    <form action="/add" METHOD="post">
        <div class="name">
            <span>商品名：</span>
            <p></p>
            <input type="text" id="name" name="name">
            <p></p>
        </div>
        <div class="jg">
            <span>价格：</span>
            <p></p>
            <input type="text" id="jg" name="price">
            <p></p>
        </div>
        <div class="sl">
            <span>数量：</span>
            <p></p>
            <input type="text" id="sl" name="quantity">
            <p></p>
        </div>
        <div class="bc">
            <input type="submit" id="bc" value="保存">
            <p></p>
        </div>
    </form>
</body>
</html>

edit.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改商品</title>
</head>
<body>
<h3>修改商品界面!!!!!请认真核对修改信息哦..........</h3>
<form action="/edit" METHOD="post">
    <input type="hidden" name="id" value="${Good.id}">
    <div class="name">
        <span>商品名：</span>
        <p></p>
        <input type="text"  name="name" value="${Good.name}">
        <p></p>
    </div>
    <div class="jg">
        <span>价格：</span>
        <p></p>
        <input type="text" name="price" value="${Good.price}">
        <p></p>
    </div>
    <div class="sl">
        <span>数量：</span>
        <p></p>
        <input type="text"  name="quantity" value="${Good.quantity}">
        <p></p>
    </div>
    <div class="bc">
        <input type="submit"  value="保存" >
        <p></p>
    </div>
</form>
</body>
</html>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="banner">
    <div class="container">
        <div>
            <h1>商品</h1>
            <p>商品列表</p>
        </div>
    </div>
</section>
<section class="main">
    <div class="container">
        <table class="table">
            <thead>
            <tr>
                <th >名称</th>
                <th>价格</th>
                <th >数量</th>
                <th>更新时间</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${Goods}" var="goods">
                <tr>
                    <td>${goods.name}</td>
                    <td>${goods.price}</td>
                    <td>${goods.quantity}</td>
                    <td>${goods.updateTime}</td>
                    <td>
                        <a href="/toEdit?id=${goods.id}">修改</a>&nbsp;&nbsp;
                        <a href="/delete?id=${goods.id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <a href="/toAdd">新建</a>
    </div>
</section>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login">
    <div class="header">
        <h1>
            <a href="">登录</a>
        </h1>
        <button></button>
    </div>
    <form action="/login" METHOD="post">
        <div class="name">
            <input type="text" id="name" name="username">
            <p></p>
        </div>
        <div class="pwd">
            <input type="password" id="pwd" name="password">
            <p></p>
        </div>
        <div class="btn-red">
            <input type="submit" value="登录" id="login-btn">
        </div>
    </form>
</div>
</body>
</html>

六,页面展示
在这里插入图片描述

七，部署tomcat
1.1

1.2

1.3

1.4

1.5最后删掉蓝色部分点OK就部署完成啦

源码附上
链接：https://pan.baidu.com/s/1-UzRlTXQ_HcCR5zfYaH8XQ
提取码：7a5l

zhangliewena

发布了1 篇原创文章 · 获赞 2 · 访问量 65

私信关注

Idea创建一个JavaWeb的SSM(maven)项目

本文将介绍使用ssm框架从登陆到实现页面简单的增删改查。在文末将源代码一并奉上

猜你喜欢