工程实训项目之——电商系统

最新推荐文章于 2023-08-27 12:37:51 发布

时光荒凉了来时路

最新推荐文章于 2023-08-27 12:37:51 发布

阅读量503

点赞数 3

文章标签： python mvc c#

本文链接：https://blog.csdn.net/NIUNIUDEDALAO/article/details/120269579

版权

项目介绍

完成校内工程实训的一个作业，我的选题是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原理。详细解释没有必要了，博主也还在继续学习中，代码借鉴了一些大牛的作品。后面会继续出博客对这个项目进行深入剖析。