如果你是入门Javaweb,那么这个商城项目就将会是个不错的入门选择,总代码以及素材附在文章底下百度网盘中。
************************************************************************************************************
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};
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" %>
产品列表
产品管理系统
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" %>
添加页面
产品管理系统
.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" %>
产品列表
产品管理系统
.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
************************************************************************************************************