项目介绍
完成校内工程实训的一个作业，我的选题是B2C电商系统。所以就仿照京东做了一个仿京东商城。首先声明，本人技术水平有限，这个项目还很不完善，但是可以通过这个简单的项目，带你了解前后端分离的这种思想，以及前后端数据传送的法则。hhh，学会照猫画虎是你开始编程的第一步。
项目展示
我们看几张图
未登录时大概浏览界面
可以点击侧边菜单栏实现类型选择
可以进入商品详情页
这时候是没有登录状态的，所以添加购物车会跳到登录界面。
这里是个简单的登录界面。
登录后可以进入后台
登陆成功后，可以使用购物车了。
当我登录成功后，浏览器获取session数据获取我的用户名显示在购物车里面，并且获取我的购物车商品数量。
后台系统中可以添加商品类型，添加商品。添加后展示到前台。
登录后能还能查看购物车物品，选择物品进行购买。
提交订单界面
项目结构
项目创建方式，idea中spring Initializr。项目目录如下：
这个项目结构采取前后端分离。前端使用的layui框架，后端springboot。
我们用一个前端和后端作为示例
下面是前端index.html文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="plugins/js::js"></div>
<head>
<meta charset="UTF-8">
<title>仿京东商城</title>
</head>
<style>
#goods_title1:hover{
color: red;
cursor: pointer;
}
#goods_title2:hover{
color: red;
cursor: pointer;
}
#goods_title3:hover{
color: red;
cursor: pointer;
}
#goods_title4:hover{
color: red;
cursor: pointer;
}
#goods_title5:hover{
color: red;
cursor: pointer;
}
#goods_title6:hover{
color: red;
cursor: pointer;
}
#loginBtn:hover{
color: red;
cursor: pointer;
}
#registBtn:hover{
color: red;
cursor: pointer;
}
[id^=type-]:hover{
color:red;
cursor: pointer;
}
</style>
<body>
<!--头部-->
<div style=" display: flex;align-items: center">
<div style="width: 35%;height: 87px">
<img src="/images/index/jd2.jpg">
</div>
<div style="width: 35%;">
<div style="display: flex;border: solid red 2px;">
<div style="width:75%">
<input type="text" style="height:50px;border:none;width:100%">
</div>
<div style="color:white;background: red;padding: 5px 20px;width:25%;text-align: center;font-size: 30px">
搜索
</div>
</div>
</div>
<div th:action="@{/pages/front/login}" method="post" onclick="window.location='/pages/back/shopCar/showMyCar'" style="cursor: pointer;width: 15%;text-align: center;border:solid lightgray 1px;background:rgb(245,245,245);padding: 6px;color:red;
margin-left: 40px " >
(<span th:text="${session.userName}">我的</span>)的购物车(<span th:text="${session.goodsCount}">10</span>)
</div>
<!--下面的location对应前面的LoginController方法-->
<div onclick="window.location='/pages/front/loginPage'" id="loginBtn" style="cursor: pointer;width: 80px;text-align: center;border:solid lightgray 1px;background:rgb(245,245,245);padding: 6px;margin-left: 40px ">
登录
</div>
<img src="">
<!--下面是跳转到控制器的register-->
<!--<div οnclick="window.location='/pages/front/registPage'" id="registBtn" style="cursor: pointer;width: 80px;text-align: center;border:solid lightgray 1px;background:rgb(245,245,245);padding: 6px;margin-left: 40px ">-->
<!--注册-->
<!--</div>-->
</div>
<div style="display: flex;">
<div style="width: 20%;border: solid red 1px ">
<div style="display: flex;align-items: center;padding: 20px" th:each="t:${types}">
<div th:text="${t.typeName}" style="font-weight: bold;font-size: 16px">电子</div>
<div style="display: flex;flex-wrap: wrap;margin-left: 30px">
<div th:id="'type-'+${ct.goodsTypeId}" style="margin: 5px" th:each="ct:${t.childrenTypes}"
th:text="${ct.typeName}">手机
</div>
</div>
</div>
</div>
<div style="width: 80%;border: solid red 1px;display: flex;padding: 20px 5px;flex-wrap: wrap" id="goodsDiv"></div>
</div>
<script th:inline="javascript" type="text/javascript">
$(function () {
layui.use(['table', 'form', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
$("[id^=type-]").click(function () {
//alert(this.id);
let typeId = this.id.split('-')[1];
$("[id^=type-]").css({color: ''});
$(this).css({color: 'red'});
$.post('/pages/back/goods/getGoodsByTypeId/' + typeId, {}, function (res) {
let goodsDiv = $("#goodsDiv");
goodsDiv.empty();//清空goodsDiv里边的商品
if (res.res) {
let data = res.data;
for (let x = 0; x < data.length; x++) {
let g = data[x];
let goodsItem = $("<div style=\"padding: 10px;border: solid lightgray 1px;box-shadow: 0 0 5px lightgray;width: 26%;;margin: 15px\">\n" +
" <div><img src='" + g.img + "' style='width: 100%;height: 250px'></div>\n" +
" <div style=\"color: orangered;padding: 5px 0\">¥<span style=\"font-size: 22px;\">" + g.price + "</span></div>\n" +
" <div id=\"goods_title\">" + g.title + "</div>\n" +
" <div style=\"color: orangered;font-size:12px;font-weight: bold;padding: 5px 0;color: #646fb0\">" + g.evaluationCount + "万+<span\n" +
" style=\"color: gray\">条评价</span></div>\n" +
" <div style=\"color: gray;font-size: 12px\">" + g.merchantName + "</div>\n" +
" </div>");
goodsDiv.append(goodsItem);
goodsItem.click(function () {
window.location = 'pages/front/goods/goodsDetail/' + g.goodsId;
})
}
}
});
})
$("[id^=type-]:eq(0)").click();
});
})
</script>
</body>
</html>
然后看看indexController
package com.zce.market.controller;
import com.zce.market.dao.UserDao;
import com.zce.market.pojo.entity.User;
import com.zce.market.service.TypeService;
import com.zce.market.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
/**
* @Author 时光荒凉了来时路
* @Date 2021/9/3 22:49
*/
@Controller
public class IndexController {
//@ResponseBody //表示返回字符串给前端
@Resource
UserDao userDao;
@Resource
TypeService typeService;
@Resource
UserService userService;
@RequestMapping("/")
String index(Model model){
//下面return会自动查找页面
User user = userDao.selectByPrimaryKey(1);
model.addAttribute("types",typeService.selectTypesByParentId(-1));
return "index";//此时不需要@ResponseBody
}
@RequestMapping("/pages/back/dashBoard")
String dashBoard() {
return "pages/back/dashBoard";
}
}
springboot使用起来其实不是难点，这里关键的是springboot底层实现方式需要有所了解。这里建议你看看这篇文档：spring中文文档
代码这部分讲解起来内容过于繁杂，除了springboot的基本使用外，这个项目你还需要了解cookie和session原理。详细解释没有必要了，博主也还在继续学习中，代码借鉴了一些大牛的作品。后面会继续出博客对这个项目进行深入剖析。
后台数据库设计
UML图如下
项目源代码地址：github源码地址
看到的小伙伴记得github点个小星星哦
6899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
