Javaweb商城项目大作业

Javaweb商城项目大作业

 如果你是入门Javaweb，那么这个商城项目就将会是个不错的入门选择，总代码以及素材附在文章底下百度网盘中。

ps:如报错，需根据自己的背景路径位置自行调整！！！

首先我们来看一下效果图

productlist页面：
 

productadd页面：

productedit页面：

 

************************************************************************************************************

下面附上代码：

1 数据库准备
创建商品数据库表： product

DROP TABLE IF EXISTS product;
CREATE TABLE product (
product_id int(11) PRIMARY KEY AUTO_INCREMENT COMMENT '产品id',
product_name varchar(63) DEFAULT NULL COMMENT '产品名称',
product_type varchar(2) DEFAULT NULL COMMENT '产品类型: 1-通讯,2-视频,3-家电',
can_sale varchar(2) DEFAULT NULL COMMENT '是否上架销售: 0-否,1-是',
manufacturer varchar(50) DEFAULT NULL COMMENT '生产厂家'
);

2 项⽬创建及配置
2.1 添加项⽬依赖
在pom.xml⽂件，添加依赖，确保有以下内容的依赖
1、 spring framework 全套组件
2、 aspectjrt （AOP实现）
3、 mybatis
4、 mybatis-spring
5、 servlet-api
6、 jsp-api
7、 jstl
8、 mysql驱动
 

  4.0.0

  com.ws
  springmvcwebstudy
  1.0-SNAPSHOT
  war

  springmvcwebstudy Maven Webapp
  
  http://www.example.com

  
    
      UTF-8
    
    
      1.8
    
    
      1.8
    
  

  
    
      aliyun
      aliyun
      http://maven.aliyun.com/nexus/content/groups/public
    
  


  
    
    
      org.springframework
      spring-core
    
    
    
      org.springframework
      spring-beans
    
    
    
    
      org.springframework
      spring-context
    
    
    
      org.springframework
      spring-context-indexer
    
    
    
      org.springframework
      spring-context-support
    
    
    
      org.springframework
      spring-aop
    
    
    
      org.springframework
      spring-aspects
    
    
    
      org.springframework
      spring-expression
    

    
    
      org.springframework
      spring-instrument
    

    
    
      org.springframework
      spring-orm
    
    
    
      org.springframework
      spring-jdbc
    
    
    
      org.springframework
      spring-oxm
    
    
    
      org.springframework
      spring-tx
    

    
    
      org.springframework
      spring-web
    
    
    
      org.springframework
      spring-webmvc
    

    
    
      org.aspectj
      aspectjrt
      1.9.6
    

    
    
      mysql
      mysql-connector-java
      8.0.12
    

    
    
      com.zaxxer
      HikariCP
      3.4.2
    
    
    
      org.slf4j
      slf4j-simple
      1.7.25
      compile
    

    
    
      org.apache.commons
      commons-dbcp2
      2.7.0
    

    
    
      com.mchange
      c3p0
      0.9.5.5
    

    
    
      org.mybatis
      mybatis
      3.5.6
    

    
    
      org.mybatis
      mybatis-spring
      2.0.5
    

    
    
      javax.servlet
      javax.servlet-api
      4.0.1
      
      provided
    
    
    
      javax.servlet.jsp
      javax.servlet.jsp-api
      2.3.3
      
      provided
    
    
    
      javax.servlet
      jstl
      1.2
    

    
      junit
      junit
      4.11
      test
    
    
    
      org.hibernate.validator
      hibernate-validator
      6.1.6.Final
    
    
    
      commons-fileupload
      commons-fileupload
      1.3.3
    

    
    
      com.fasterxml.jackson.core
      jackson-annotations
      2.11.3
    
    
    
      com.fasterxml.jackson.core
      jackson-core
      2.11.3
    
    
    
      com.fasterxml.jackson.core
      jackson-databind
      2.11.3
    
    
      org.jetbrains
      annotations
      RELEASE
      compile
    
  

  
    
      
      
        org.springframework
        spring-framework-bom
        5.3.0
        pom
        import
      
      
    
  


  
    springmvcwebstudy
    
      
        
          maven-clean-plugin
          3.1.0
        
        
        
          maven-resources-plugin
          3.0.2
        
        
          maven-compiler-plugin
          3.8.0
        
        
          maven-surefire-plugin
          2.22.1
        
        
          maven-war-plugin
          3.2.2
        
        
          maven-install-plugin
          2.5.2
        
        
          maven-deploy-plugin
          2.8.2
        
      
    

    
      
      
        src/main/java
        
          **/*.xml
        
      
      
        src/main/resources
        
          **/*.*
        
      
    
  

2.2 创建java包结构
在src/main/java下，创建包：
com.hbxy.ssm.prodect(存放产品管理模块的所有代码)
com.hbxy.ssm.prodect.model (存放模型类)
com.hbxy.ssm.prodect.dao (存放内部实现的mapper接⼝)
com.hbxy.ssm.prodect.mapper (存放mapper映射⽂件)
com.hbxy.ssm.prodect.service (存放对外提供的服务接⼝)
com.hbxy.ssm.prodect.service.impl (存放服务接⼝的实现)
com.hbxy.ssm.prodect.controller (存放mvc模型中的控制器)
2.3 创建jsp⽬录
在src/main/webapp⽬录下，创建static⽬录，在static下创建：
css (存放样式⽂件)
js (存放js⽂件)
img (存放图⽚资源⽂件)
3 创建相关Java业务类
3.1 创建模型类
在包com.hbxy.ssm.product.model中创建Product.java类
 

package com.ws.ssm.product.model;

public class Product {
    private int productId;
    private String productName;
    private String productType;
    private String canSale;
    private String manufacturer;

    public int getProductId() {
        return productId;
    }

    public void setProductId(int productId) {
        this.productId = productId;
    }

    public String getProductName() {
        return productName;
    }

    public void setProductName(String productName) {
        this.productName = productName;
    }

    public String getProductType() {
        return productType;
    }

    public void setProductType(String productType) {
        this.productType = productType;
    }

    public String getCanSale() {
        return canSale;
    }

    public void setCanSale(String canSale) {
        this.canSale = canSale;
    }

    public String getManufacturer() {
        return manufacturer;
    }

    public void setManufacturer(String manufacturer) {
        this.manufacturer = manufacturer;
    }

    @Override
    public String toString() {
        return "Product{" +
                "productId=" + productId +
                ", productName='" + productName + '\'' +
                ", productType='" + productType + '\'' +
                ", canSale='" + canSale + '\'' +
                ", manufacturer='" + manufacturer + '\'' +
                '}';
    }
}

3.2 创建Mapper接⼝类
在包com.hbxy.ssm.product.dao中，创建ProductMapper.java接⼝

package com.ws.ssm.product.dao;

import com.ws.ssm.product.model.Product;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface ProductMapper {
    public void addProduct(Product product);

    public void deleteProduct(int productId);

    public void deleteProductAll();

    public void updateProduct(Product product);

    public Product findProductById(int productId);

    public List findAllProduct();
}

3.3 创建Mapper映射⽂件
在包com.hbxy.ssm.product.mapper中，创建ProductMapper.xml⽂件
 

    
        
        
        
        
        
    

    
        insert into product(product_name,product_type,can_sale,manufacturer)
        values(#{productName},#{productType},#{canSale},#{manufacturer});
    

    
        delete from product
        where product_id=#{productId};
    

    
        delete from product;
    

    
        update product
        set product_name=#{productName},product_type=#{productType},can_sale=#{canSale},manufacturer=#{manufacturer}
        where product_id=#{productId};
    

    
        select * from product
        where product_id=#{productId};
    

    
        select * from product;
    

3.4 创建服务接⼝
在包com.hbxy.ssm.product.service中，创建ProductService.java接⼝
 

package com.ws.ssm.product.service;

import com.ws.ssm.product.model.Product;

import java.util.List;

public interface ProductService {
    public void addProduct(Product product);

    public void deleteProduct(int productId);

    public void deleteProductAll();

    public void updateProduct(Product product);

    public Product findProductById(int productId);

    public List findAllProduct();

}

3.5 创建服务实现类
在包com.hbxy.ssm.product.service.impl中，创建ProductServiceImpl.java类
 

package com.ws.ssm.product.service.impl;

import com.ws.ssm.product.dao.ProductMapper;
import com.ws.ssm.product.model.Product;
import com.ws.ssm.product.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductServiceImpl implements ProductService {

    @Autowired
    private ProductMapper mapper;

    @Override
    public void addProduct(Product product) {
        mapper.addProduct(product);
    }

    @Override
    public void deleteProduct(int productId) {
        mapper.deleteProduct(productId);
    }

    @Override
    public void updateProduct(Product product) {
        mapper.updateProduct(product);
    }

    @Override
    public Product findProductById(int productId) {
        return mapper.findProductById(productId);
    }

    @Override
    public List findAllProduct() {
        return mapper.findAllProduct();
    }

    @Override
    public void deleteProductAll(){ mapper.deleteProductAll(); }
}

3.6 创建控制器
在包com.hbxy.ssm.product.controller中，创建ProductController.java类
 

package com.ws.ssm.product.controller;

import com.ws.ssm.product.model.Product;
import com.ws.ssm.product.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

@Controller /*控制器类*/
public class ProductController {
    @Autowired  /*自动装配，将spring容器中的bean自动和Product类中bean组装到一起*/
    private ProductService productService;

    @GetMapping("/productlist") /*将 HTTP GET 请求映射到特定的处理程序方法*/
    public String productList(Model model){
        //调⽤服务接⼝,获得数据
        List list = productService.findAllProduct();
        //把数据放进model,传递给⻚⾯展现
        model.addAttribute("productlist",list);
        //跳转到展现⻚⾯
        return "/jsp/product/product_list";
    }

    @GetMapping("/toproductadd")
    public String toProductAdd(Model model){
        //跳转到添加⻚⾯
        return "/jsp/product/product_add";
    }

    @PostMapping("/productadd")
    public String productAdd(Product product, Model model){
        //调⽤服务接⼝,添加数据
        productService.addProduct(product);
        //重定向到列表url
        return "redirect:productlist";
    }

    @GetMapping("/toproductedit")
    public String toProductEdit(int productId,Model model) {
        //调⽤服务接⼝,通过id查询获得数据
        Product product = productService.findProductById(productId);
        //把数据放进model,传递给⻚⾯展现
        model.addAttribute("product", product);
        //跳转到修改⻚⾯
        return "/jsp/product/product_edit";
    }

    @PostMapping("/productedit")
    public String productEdit(Product product, Model model){
        //调⽤服务接⼝,更新数据
        productService.updateProduct(product);
        //重定向到列表url
        return "redirect:productlist";
    }

    @RequestMapping("/productdelete")
        public String productDelete(int productId){
        //调⽤服务接⼝,删除

        productService.deleteProduct(productId);
        //重定向到列表url
        return "redirect:productlist";
    }

    @RequestMapping("/productdeleteall")
    public String productDeleteAll(){
        productService.deleteProductAll();
        return "redirect:productlist";
    }
}

4 创建jsp⻚⾯
在webapp/jsp/party⽂件夹中，创建三个jsp⻚⾯。在webapp/static/css⽂件夹中创建对应的css文件
4.1 product_list.jsp和product_list.css

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/6/11
  Time: 12:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>

    
        
        
    
    
    
产品管理系统
    
	
        产品目录	
        添加产品
        全部删除
    
    

        
            
                

                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            

                
                    ${product.productName}

                通讯
                视频
                家电

                否
                是
                    ${product.manufacturer}
            
        
            
        
    
    
备案号\班级姓名：计科1905王烁
	

    
    

body{
    margin: 0;
    background-color: #f5f5f5;

    display: flex;		/*一种布局方式*/
    flex-direction: column;
    height: 100%;
    /*用flex化空间需要父元素有具体的尺寸*/
    background-image: url(../img/background.jpg);
}

a{
    text-decoration: none;
    color: black;
}
a:hover{
    cursor: pointer;
}
header{
    height: 40px;
    flex-shrink: 0;	/*flex布局防止被挤压，子元素宽度减小*/
    padding-bottom: 20px;
    font-size: 40px;
    margin: 0 auto;
    color: black;
    margin-top: 40px;
    margin-bottom:20px
}

nav{
    border-bottom: 1px solid #e6e6e6;
    height: 80px;

    display: flex;
    justify-content: center;
}
nav a{
    text-decoration: none;	/*去下划线*/
    font-size: 20px;
    color: #000000;
    padding: 30px 20px;
    margin: 0 20px;
    /*调整内外边距，有种线分开的感觉*/
}
nav a:hover{
    color: #ff6700;
    border-bottom: 3px solid #FF6700;
    transition: all .2s;
}
.deleteAll{
    width: 50px;
    height: 50px;
    font-size: 7px;
    border-radius: 50px;
    margin-top: 20px;
    background-color:white;
    color: black;
    outline: none;  /*去外边框框*/
}
.deleteAll:hover{
    background-color: black;
    color: white;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 20px darkgrey;	/*块周围有阴影*/
    transition: all .3s;	/*多个属性变换，过渡效果0.3s*/
    border: red 5px solid;
    outline: none;  //去外边框框
}

.showcase{
    flex-grow: 1;	/*索取父容器的剩余空间*/
    margin-top: 20px;
    /*这里其实是给showcase划了100%（占据header和nav和footer的）的伸缩空间*/


    /*之前的空行也是，为了分开对自己的设置和对子元素的设置，好读*/
    display: flex;
    justify-content: center;	/*弹性项目居中紧挨着填充*/
    flex-wrap: wrap;	/*flex-wrap属性定义，如果一条轴线排不下，如何换行    换行，第一行在上方*/
}
.showcase a{
    width: 270px;
    height: 180px;
    background-color: #ffffff;
    transition: all .3s;
    margin: 20px;
    text-decoration: none;	/*去下划线*/
}
.showcase a:hover{
    transform: translateY(-8px);	/*块向上抖动*/
    box-shadow: 0 10px 20px darkgrey;	/*块周围有阴影*/
    transition: all .3s;	/*多个属性变换，过渡效果0.3s*/
}


.detail{
    background-color: gray;
    text-align: center;
    color: white;
}
.btnDel{
    height: 200px;
    margin-top: 20px;
    transform: translateX(-20px);	/*块向上抖动*/
    cursor:pointer;
}
.btnDel:hover{
    transform: translateX(-25px);	/*块向上抖动*/
    box-shadow: 0 10px 20px darkgrey;	/*块周围有阴影*/
    transition: all .3s;	/*多个属性变换，过渡效果0.3s*/

}

footer{
    text-align: center;
}

4.2 product_add.jsp和product_add.css

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/6/11
  Time: 12:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    


产品管理系统
	
    产品目录
    添加产品	
    全部删除



    
  
        
请添加产品信息
        
            产品名称 :
            
        

        
            产品类型 :
            
                请选择产品类型
                通讯
                视频
                家电
            
        

        
            是否上架 :
            
                请确认是否上架
                是
                否
            
        

        
            生产厂家： :
            
        

        
            
            
        
    

备案号\班级姓名：计科1905王烁
	

.addcase{
	margin-top: 30px;
}

 .smart-green {
      margin-left: auto;
      margin-right: auto;
      max-width: 500px;
      background: #F8F8F8;
      padding: 30px 30px 20px 30px;
      font: 12px Arial, Helvetica, sans-serif;
      color: #666;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
  }

  .smart-green h1 {
      font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
      padding: 20px 0px 20px 40px;
      display: block;
      margin: -30px -30px 10px -30px;
      color: #FFF;
      background: #9DC45F;
      text-shadow: 1px 1px 1px #949494;
      border-radius: 5px 5px 0px 0px;
      -webkit-border-radius: 5px 5px 0px 0px;
      -moz-border-radius: 5px 5px 0px 0px;
      border-bottom: 1px solid #89AF4C;
  }

  .smart-green h1 > span {
      display: block;
      font-size: 11px;
      color: #FFF;
  }

  .smart-green label {
      display: block;
      margin: 0px 0px 5px;
  }

  .smart-green label > span {
      float: left;
      margin-top: 10px;
      color: #5E5E5E;
  }

  .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
      color: #555;
      height: 30px;
      line-height: 15px;
      width: 100%;
      padding: 0px 0px 0px 10px;
      margin-top: 2px;
      border: 1px solid #E5E5E5;
      background: #FBFBFB;
      outline: 0;
      -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
      box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
      font: normal 14px/14px Arial, Helvetica, sans-serif;
  }

  .smart-green textarea {
      height: 100px;
      padding-top: 10px;
  }


  .smart-green .button {
  	  margin-top: 20px;
  	  margin-left: 110px;
      background-color: #9DC45F;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-border-radius: 5px;
      border: none;
      padding: 10px 25px 10px 25px;
      color: #FFF;
      text-shadow: 1px 1px 1px #949494;
  }

  .smart-green .button:hover {
      background-color: #80A24A;
  }

  .error-msg{
      color: red;
      margin-top: 10px;
  }
  .success-msg{
      color: #80A24A;
      margin-top: 10px;
      margin-bottom: 10px;
  }
  

4.3 product_edit.jsp和product_edit.css

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/6/11
  Time: 12:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>


    
    
    
    
    


产品管理系统
    
    产品编辑    


    

        
            
        
        
            
        
        
            
        
    
    

        

            
请修改产品信息
            
                产品名称 :
                
            

            
                产品类型 :
                
                    
                                selected
                            >
                            通讯
                    
                                selected
                            >
                            视频
                    
                                selected
                            >
                            家电
                
            

            
                是否上架 :
                
                    
                                selected
                            >
                        是
                    
                                selected
                            >
                        否
                
            

            
                生产厂家： :
                
            

            
                
                
            
        
    

备案号\班级姓名：计科1905王烁
    

.editcase{
	margin: 0 auto;
	padding-top: 20px;
	width: 883px;
}
.img{
	width: 436px;
	height: 407px;
	float: left;
}
img{
	width: 100%;
	height: 100%;
	border: 5px solid black;
	border-radius: 50px 0 0 50px;
}
.information{
	float: right;
}

5 创建/修改配置⽂件
5.1 创建/修改MyBatis配置⽂件
在src/main/resources⽬录下，创建mybatis-config.xml⽂件。如果mybatisconfig.xml已存在，则添加
相关模块的mapper.xml⽂件及声明别名
 

5.2 创建/修改Spring配置⽂件
在src/main/resources⽬录下，创建spring-config.xml⽂件。如果springconfig.xml已存在，则修改添
加mybatis相关内容，添加新的服务实现类的扫描路径
 

5.3 创建SpringMVC配置⽂件
在src/main/resources⽬录下，创建springmvc-config.xml⽂件。如果springmvc-config.xml已存在，
则修改添加新模块的控制器扫描路径
 

5.4 修改web.xml⽂件
修改web.xml⽂件，添加spring， springmvc的配置，以及处理中⽂的过滤器
 

contextConfigLocation
classpath:spring-config.xml


org.springframework.web.context.ContextLoaderListener


springmvc

org.springframework.web.servlet.DispatcherServlet


contextConfigLocation
classpath:springmvc-config.xml

1



springmvc
/



CharacterEncodingFilter
org.springframework.web.filter.CharacterEncodingFilter

encoding
UTF-8



CharacterEncodingFilter
/*

6、功能测试
访问：http://localhost:8080/productlist 进行测试
 

        我们还可以根据以上描述添加更多有趣好玩的功能模块。也可做出更好看的形式看着效果更加好。

素材及源代码百度网盘链接：百度网盘 请输入提取码

提取码：2205

************************************************************************************************************

您的建议是博主更新最大的动力！！

如发现错误请在评论区评论，博主会仔细查看并修改的！！

希望对您有所帮助！！！