欢迎来到我的CSDN主页!
我是Java方文山,一个在CSDN分享笔记的博主。
推荐给大家我的专栏《电商项目实战》。
点击这里,就可以查看我的主页啦!
Java方文山的个人主页
如果感觉还不错的话请给我点赞吧!
期待你的加入,一起学习,一起进步!
前言
项目介绍
前面讲解了这么多的知识点,现在我们将这些知识点串起来,并且在这个基础上追加新的技术。 电商系统主要包括用户登录、第三方授权、首页展示、商品详情、购买商品、购物车、订单、订单详情、沙箱支付等。
开发技术
此项目开发我用到的技术有:springboot、mybatis puls、freemarker、redis、oauth2
一、环境搭建
1.配置pom文件
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
2.配置yml文件
#日志配置
logging:
level:
com.csdn.boot.mapper: debug
#server配置
server:
# 配置端口
port: 8080
# 项目名
servlet:
context-path: /
#数据库配置
spring:
freemarker:
# 设置模板后缀名
suffix: .html
# 设置文档类型
content-type: text/html
# 设置页面编码格式
charset: UTF-8
# 设置页面缓存
cache: false
# 设置ftl文件路径
template-loader-path: classpath:/templates
# 设置静态文件路径,js,css等
mvc:
static-path-pattern: /static/**
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/goodsshop?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
username: root
password: 123456
druid:
#2.连接池配置
#初始化连接池的连接数量 大小,最小,最大
initial-size: 5
min-idle: 5
max-active: 20
#配置获取连接等待超时的时间
max-wait: 60000
#配置间隔多久才进行一次检测,检测需要关闭的空闲连接,单位是毫秒
time-between-eviction-runs-millis: 60000
# 配置一个连接在池中最小生存的时间,单位是毫秒
min-evictable-idle-time-millis: 30000
validation-query: SELECT 1 FROM DUAL
test-while-idle: true
test-on-borrow: true
test-on-return: false
# 是否缓存preparedStatement,也就是PSCache 官方建议MySQL下建议关闭 个人建议如果想用SQL防火墙 建议打开
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
# 配置监控统计拦截的filters,去掉后监控界面sql无法统计,'wall'用于防火墙
filter:
stat:
merge-sql: true
slow-sql-millis: 5000
#3.基础监控配置
web-stat-filter:
enabled: true
url-pattern: /*
#设置不统计哪些URL
exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
session-stat-enable: true
session-stat-max-count: 100
stat-view-servlet:
enabled: true
url-pattern: /druid/*
reset-enable: true
#设置监控页面的登录名和密码
login-username: admin
login-password: admin
allow: 127.0.0.1
#deny: 192.168.1.100
#mybatis配置
mybatis:
#配置SQL映射文件路径
mapper-locations: classpath:mapper/*.xml
#配置别名
type-aliases-package: com.csdn.shop.pojo
#pagehelper分页插件配置
pagehelper:
#sql“方言”
helperDialect: mysql
#开启分页合理化
reasonable: true
#mapper方法上的参数
supportMethodsArguments: true
#查询数量
params: count=countSql
weblog:
enable: false
#乐观锁配置
mybatis-plus:
# Mybatis Mapper所对应的XML位置
mapper-locations: classpath:mapper/*.xml
# 别名包扫描路径
type-aliases-package: com.csdn.shop.pojo
# 是否开启自动驼峰命名规则(camel case)映射
configuration:
map-underscore-to-camel-case: true
global-config:
db-config:
logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
logic-delete-value: 1 # 逻辑已删除值(默认为 1)
logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
3.编写电商首页
这个其他页面的源码我会上传CSDN的方便大家下载实践
<#include "common/head.html">
<#include "common/top.html">
<#include "common/footer.html"/>
$(function() {
$('#home_slider').flexslider({
animation: 'slide',
controlNav: true,
directionNav: true,
animationLoop: true,
slideshow: true,
slideshowSpeed:2000,
useCSS: false
});
});
4.编写controller层代码
package com.csdn.shop.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
@RequestMapping("/page/{page}")
public String to(@PathVariable("page") String page) {
return page.replace(".html", "");
}
}
这里如果不去掉.html,我们点击的路径就会是http://localhost:8080/page/index.html.html
二、表设计
我们这个电商项目目前是有这几张表,分别是t_dict_data、t_dict_type、t_goods、t_order、t_order_item、t_user。这根据我所给出的图片创建表。
t_dict_data
t_dict_type
t_goods
t_order
t_order_item
t_user
三、功能实现
1.首页商品显示
首先根据我们的页面分析同样的商品在摆件挂件需要展示六条,而在壁挂北欧需要展示十二条所以商品类别和数量是可变的其他都是不变的,得出以下sql语句。
select * from t_dict_data a,t_goods b where
a.dict_label='?' and a.dict_value=b.goods_type limit ?
知道sql语句后根据我们的sql语句编写mapper层和service层代码
mapper.xml代码
select *
from t_dict_data a,
t_goods b
where a.dict_label = #{type}
and a.dict_value = b.goods_type limit #{num}
mapper代码
@Repository
public interface GoodsMapper extends BaseMapper
List
}
service接口类
public interface IGoodsService extends IService
List
}
service实现类
@Service
public class GoodsServiceImpl extends ServiceImpl
@Autowired
private GoodsMapper goodsMapper;
@Override
public List
return goodsMapper.BydictlabelSelect(type,num);
}
}
controller层
@Controller
public class PageController {
@Autowired
private IGoodsService goodsService;
@RequestMapping("/")
public String index(Model model) {
List
List> ps1 = Lists.partition(gs1, 3);
List
List> ps2 = Lists.partition(gs2, 4);
model.addAttribute("ps1", ps1);
model.addAttribute("ps2", ps2);
return "index";
}
@RequestMapping("/page/{page}")
public String to(@PathVariable("page") String page) {
return page.replace(".html", "");
}
}
这里用到了Google Guava库的 Lists 工具类,将 gs1 列表按照每组最多3个元素进行分割,得到一个二维列表 ps1,将 gs2 列表按照每组最多4个元素进行分割,得到一个二维列表 ps4。这样的好处是为了方便我们前端进行数据遍历。
装饰插件
<#list ps1 as p1>
#list>
壁挂北欧
<#list ps2 as p2>
#list>
2.商品分类显示
像我们的首页有一个商品类别的数据,这个数据肯定也是来自于数据库
mapper.xml代码
select dict_label,dict_value from t_dict_data
后面的代码都和上面差不多,我就直接跳到controller做讲解了
@RequestMapping("/")
public String index(Model model) {
//首页商品数据
List
List> ps1 = Lists.partition(gs1, 3);
List
List> ps2 = Lists.partition(gs2, 4);
model.addAttribute("ps1", ps1);
model.addAttribute("ps2", ps2);
//首页分类
List
model.addAttribute("type", selecttype);
return "index";
}
首页商品类别展示
- 首页
<#list type as t>
#list>
到这里我的分享就结束了,欢迎到评论区探讨交流!!
如果觉得有用的话还请点个赞吧
推荐文章
发表评论