图书商城销售系统(前后端分离)(Springboot,vue,bootstrap,layui,mysql)+手把手视频教程

最新推荐文章于 2024-08-11 20:00:32 发布

q_549710689

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量180

点赞数

分类专栏：课题设计毕业设计图书商城文章标签： java idea json mvc Powered by 金山文档

本文链接：https://blog.csdn.net/q_549710689/article/details/129023381

版权

毕业设计同时被 3 个专栏收录

29 篇文章 3 订阅

订阅专栏

课题设计

28 篇文章 0 订阅

订阅专栏

图书商城

2 篇文章 0 订阅

订阅专栏

技术栈: SpringBoot,SSM, MYSQL,Vue,Ajax,Bootstrap,Layui JQUERY,HTML,CSS, JAVASCRIPT,日历控件

首页访问 http://127.0.0.1:5500/users/index.html

普通用户 user1 123456

http://127.0.0.1:5500/admin/index.html

管理员admin 123456

功能列表:

本系统包含普通用户,后台管理员二种角色的用户

普通用户的功能包含: 登录,退出,修改密码,用户信息查看与修改,首页信息展示,宣传图,商品信息查看,推荐商品,物价商品,全部商品,热门商品,购物车,结算,付款,发货,确认收货,订单明细

管理员的功能包含: 登录,退出,修改密码,管理员管理,网站用户信息管理,商品类型管理,商品信息管理,订单信息管理

代码下载链接：https://pan.baidu.com/s/1Bae5RFtT6awSjOCO1_WMoA 提取码：8888

【代码包含】

【文档包含】

【视频包含】

application.properties

#\u7AEF\u53E3\u53F7\u8BBE\u7F6E
server.port=8080 

#\u8BBF\u95EE\u8DEF\u5F84\u8BBE\u7F6E
server.servlet.context-path=/sboot_vue_bookshop

#\u8BBE\u7F6E\u65E5\u5FD7\u7EA7\u522B
#lv: TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF. \u9ED8\u8BA4\uFF1AINFO
logging.level.root=INFO
logging.level.org.springframework.web=INFO
logging.level.org.springframework=DEBUG
logging.level.com.boot.dao.*=DEBUG

#\u5B57\u7B26\u96C6 -\u7528\u4E8E\u89E3\u7801URI\u7684\u5B57\u7B26\u7F16\u7801  \u672C\u8EAB\u9ED8\u8BA4UTF-8
server.tomcat.uri-encoding=UTF-8

#HTTP\u8BF7\u6C42\u548C\u54CD\u5E94\u7684\u5B57\u7B26\u96C6\u3002\u5982\u679C\u672A\u660E\u786E\u8BBE\u7F6E\uFF0C\u5219\u6DFB\u52A0\u5230\u201CContent-Type\u201D\u5934 ;\u672C\u8EAB\u9ED8\u8BA4UTF-8
#spring.http.encoding.charset=UTF-8

#springboot mybatis
#\u52A0\u8F7D mybatis\u914D\u7F6E\u6587\u4EF6
mybatis.config-location = classpath:mybatis.xml
#mybatis.type-aliases-package = com.boot.entity

#\u6570\u636E\u5E93\u8FDE\u63A5\u914D\u7F6E\u6587\u4EF6
#spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#spring.datasource.url=jdbc:mysql://localhost:3307/sboot_vue_bookshop?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false&serverTimezone=UTC
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/sboot_vue_bookshop?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=root
spring.servlet.multipart.maxFileSize=10MB
spring.servlet.multipart.maxRequestSize=20MB

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>图书商城</title>
    <link href="./themes/ecmoban_benlai/style.css" rel="stylesheet" type="text/css" />
    <link href="./themes/index.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../admin/asset/layui/css/layui.css" />
    <script type="text/javascript" src="./themes/index.js"></script>
</head>

<body class="index_page">
    <div id="app">
        <div class="top_nav">
            <div class="block">
                <div class="bookmail">
                    <div id="append_parent"></div>
                </div>
                <div class="user_control">
                    <font id="ECS_MEMBERZONE" v-if="islogin"> 欢迎光临本店，<a href="login.html">[用户登录]</a>&nbsp;<a href="register.html">[用户注册]</a>
                    </font>
                    <font id="ECS_MEMBERZONE" v-if="!islogin">欢迎光临本店{{ realname }}， <a href="cart.html">[购物车]</a>&nbsp; <a href="usercenter.html">[用户中心]</a>&nbsp;
                        <a href="exit.html">[退出系统]</a>
                    </font>
                </div>
            </div>
        </div>
        <div class="clearfix">
            <div class="block header">
                <div class="top clearfix">
                    <a href="index.html" class="logo"><img src="themes/ecmoban_benlai/images/logo.gif"> </a>
                    <div class="head_r">
                        <div class="top_search">
                            <div class="vjia-suggest-container">
                                <div class="vjia-suggest-content"></div>
                                <ol>
                                </ol>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear:both"></div>

        <div class="menu_box clearfix">
            <div class="block main_menu">
                <div class="menu">
                    <a href="index.html" class="cur">首页<span></span></a>
                    <a href="recommend.html" class="cur">推荐商品<span></span></a>
                    <a href="special.html" class="cur">特价商品<span></span></a>
                    <a href="all.html" class="cur">全部商品<span></span></a>
                </div>
            </div>
        </div>

        <div class="block clearfix">
            <div class="AreaL">
                <div id="category_tree">
                    <div class="tit">所有商品分类</div>
                    <dl class="clearfix">
                        <div class="dt">
                            <div id="HandleLI2_1" v-for="item in cate" :key="item.cateid">
                                <a class="a" :href="'cate.html?id='+item.cateid+''"> {{ item.catename }}</a>
                            </div>
                        </div>
                    </dl>
                </div>
                <div class="blank"></div>
            </div>
            <div style="float:right; width:994px;">

                <div class="container" id="idTransformView">
                    <ul class="slider" id="idSlider">
                        <li><img src="./pic/slider3.jpg" titl=""></li>
                    </ul>
                    
                </div>
                <div class="blank5"></div>
                <div class="blank"></div>
            </div>
            <div class="blank"></div>

            <div class="goodsBox_1" v-for="item in front" :key="item.cateid">
                <div class="xm-box">
                    <h4 class="title"><span>{{ item.catename }}</span> <a class="more" :href="'cate.html?id='+item.cateid+''">更多</a></h4>
                    <div id="show_new_area" class="clearfix">
                        <div class="goodsItem" v-for="x in item.goodsList" :key="x.goodsid">
                            <a :href="'detail.html?id='+x.goodsid+''"><img :src="'http://127.0.0.1:8080/sboot_vue_bookshop/upfiles/'+x.image" alt="" class="goodsimg" /></a><br />
                            <p class="f1"><a :href="'detail.html?id='+x.goodsid+''" title="">{{x.goodsname}}</a></p>
                            本店价：
                            <font class="f1">￥{{x.price}}元 </font>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="VjiaFooter" class="block">
            <p class="tel"><img src="./themes/ecmoban_benlai/images/tel2.gif" /><span>客服热线：400-000-1234（周一至周日
                    8:00-20:00）</span></p>
            <div class="copyRight">
                <div style="line-height:22px;color:#000;">
                    &copy; 2023 图书商城 版权所有，并保留所有权利。 <br />
                    <a href="../admin/index.html" target="_blank" style=" font-family:Verdana; font-size:11px;">管理员入口</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../admin/asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../admin/asset/layui/layui.js"></script>
<script type="text/javascript" src="../admin/asset/js/axios.min.js"></script>
<script type="text/javascript" src="../admin/asset/js/vue.js"></script>
<script type="text/javascript">
    const vue = new Vue({ // 实例化Vue对象
        el: '#app', // 绑定作用域
        data: { //定义数据 用于vue的双向绑定
            islogin: '',
            userid: '',
            realname: '',
            cate: {}, // 用来保存商品类型对象数据
            front: {}, // 用来保存前端显示数据
        },
        methods: {
            loadPage: function() {
                let _this = this;
                axios.get('http://127.0.0.1:8080/sboot_vue_bookshop/index/front.action').then(result => {
                    _this.cate = result.data.cateList;
                });
                axios.get('http://127.0.0.1:8080/sboot_vue_bookshop/index/index.action').then(result => {
                    _this.front = result.data.frontList;
                });
                _this.userid = sessionStorage.getItem('userid');
                _this.islogin = sessionStorage.getItem('userid') == null;
                _this.realname = sessionStorage.getItem('realname');
            },
        },
        created() { // 生命周期相关的函数
            this.loadPage();
        },
    })
</script>
</html>

【运行截图】

q_549710689

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图书商城销售系统(前后端分离)(Springboot,vue,bootstrap,layui,mysql)+手把手视频教程

本系统包含普通用户,后台管理员二种角色的用户普通用户的功能包含: 登录,退出,修改密码,用户信息查看与修改,首页信息展示,宣传图,商品信息查看,推荐商品,物价商品,全部商品,热门商品,购物车,结算,付款,发货,确认收货,订单明细管理员的功能包含: 登录,退出,修改密码,管理员管理,网站用户信息管理,商品类型管理,商品信息管理,订单信息管理
复制链接

扫一扫

专栏目录