摘要

随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，零食销售商城当然也不能排除在外。零食销售商城是以实际运用为开发背景，运用软件工程原理和开发方法，采用springboot框架构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结，得出系统中存在的不足及需要改进的地方，为以后的系统维护提供了方便，同时也为今后开发类似系统提供了借鉴和帮助。这种个性化的网上管理系统特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性，对零食销售商城而言非常有利。

本零食销售商城采用的数据库是Mysql，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。

关键词：零食零售商城、springboot、Mysql

主要功能截图

首页

商品信息页

商品资讯页

 购物车页

后台登录页

 后台管理页

 相关实现代码

1、首页设计模块

    
        
        
        
        
        
        
    
    
        html, body {
            height: 100%;
        }
        #iframe {
            width: 100%;
            margin-top: 00px;
            padding-top: 70px;
        }
        #header {
            height: auto;
            background: #fff;
            border-bottom: 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        #header .nav-top {
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 16px;
            color: #2a8a15;
            box-sizing: border-box;
            height: 00px;
            background-color: rgba(46, 78, 126, 1);
            box-shadow: 0 10px 8px #fff143;
            justify-content: space-between;
            position: relative;
        }

        #header .nav-top-img {
            width: 124px;
            height: 40px;
            padding: 0;
            margin: 0;
            border-radius: 6px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(0,0,0,.3);
            box-shadow: 0 0 6px rgba(0,0,0,.3);
        }

        #header .nav-top-title {
            line-height: 40px;
            font-size: 30px;
            color: rgba(255, 251, 240, 1);
            padding: 0 10px;
            margin: 0 10px;
            border-radius: 6px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(0,0,0,.3);
            box-shadow: 0 0 0px ;
        }

        #header .nav-top-tel {
            line-height: 40px;
            font-size: 18px;
            color: rgba(240, 252, 255, 1);
            padding: 0 10px;
            margin: 0;
            border-radius: 6px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(0,0,0,.3);
            box-shadow: 0 0 0px ;
        }

        #header .navs {
            display: flex;
            padding: 0 20px;
            align-items: center;
            box-sizing: border-box;
            height: 70px;
            background-color: rgba(0, 85, 119, 1);
            box-shadow: 0 0px 0px rgba(0,0,0,0);
            justify-content: flex-start;
        }
        #header .navs .title {
            width: auto;
            line-height: 40px;
            font-size: 30px;
            color: rgba(255, 255, 255, 1);
            padding: 10px 10px 10px;
            margin: 50px;
            border-radius: 6px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(0,0,0,.3);
            box-shadow: 0 0 6px rgba(0,0,0,0);
        }
        #header .navs li {
            display: inline-block;
            width: auto;
            line-height: 66px;
            padding: 0 10px ;
            margin: 10px ;
            color: rgba(255, 255, 255, 1);
            font-size: 22px;
            border-radius: 4px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(6, 82, 121, 1);
            background-color: rgba(0, 85, 119, 1);
            box-shadow: 1px 0 3px rgba(0, 85, 119, 1);
      text-align: center;
        }
        #header .navs li a{
            color: inherit;
        }
        #header .navs li.current a{
            color: inherit;
        }
        #header .navs li a:hover{
            color: inherit;
        }
        #header .navs li.current {
            color: rgba(255, 255, 255, 1);
            font-size: 22px;
            border-radius: 0px;
            border-width: 0px;
            border-style: solid;
            border-color: rgba(255, 255, 255, 1);
            background-color: rgba(0, 85, 119, 1);
            box-shadow:  0px 3px  0px #ffffff;
        }
        #header .navs li:hover {
            color: #fff;
            font-size: 22px;
            border-radius: 0px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(255, 255, 255, 1);
            background-color: rgba(0, 85, 119, 1);
            box-shadow:  0px 3px  0px #ffffff;
        }
    
    
        
        

            

              
              

{{projectName}}

              

            

            

                <!--

-->
                

                

                    

                        
• 首页

                        

• {{item.name}}

                        

• 个人中心

                        

• 后台管理

                        

• 购物车

                        

• 在线客服

                    

                

            

        

     
     

京ICP备1041289号

     

     

   

        
      var vue1 = new Vue({el: '#tabbar'})

            var vue = new Vue({
                el: '#header',
                data: {
                    iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
                    indexNav: indexNav,
                    cartFlag: cartFlag,
                    adminurl: adminurl,
                    chatFlag: chatFlag,
                    projectName: projectName,
                },
                mounted: function() {
                    this.bindClickOnLi();
                },
                created() {
                    this.iconArr.sort(()=>{
                      return (0.5-Math.random())
                    })
                },
                methods: {
                    jump(url) {
                        jump(url)
                    },
                    bindClickOnLi() {
                        let list = document.getElementsByTagName("li");
                        for(var i = 0;i<list.length;i++){
                            list[i].onclick = function(){
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                        }
                    }
                }
            });

            layui.use(['element','layer'], function() {
                var element = layui.element;
                var layer = layui.layer;
            });

            function chatTap(){
                var userTable = localStorage.getItem('userTable');
                if (userTable) {
                    layui.layer.open({
                        type: 2,
                        title: '在线客服',
                        area: ['600px', '600px'],
                        content: './pages/chat/chat.html'
                    });
                } else {
                    window.location.href = './pages/login/login.html'
                }
            }

            // 导航栏跳转
            function navPage(url) {
                localStorage.setItem('iframeUrl', url);
                document.getElementById('iframe').src = url;
            }

            // 跳转到个人中心也
            function centerPage() {
                var userTable = localStorage.getItem('userTable');
                if (userTable) {
                    localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
                    document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
                } else {
                    window.location.href = './pages/login/login.html'
                }
            }

            var iframeUrl = localStorage.getItem('iframeUrl');
            document.getElementById('iframe').src = iframeUrl  || './pages/home/home.html';

      // var i = 0;
      setInterval(function(){
        // i++;
        // if(i<50) changeFrameHeight();
        changeFrameHeight();
      },200)

      function changeFrameHeight() {
        var iframe = document.getElementById('iframe');
        // iframe.height = 'auto';
          if (iframe) {
              var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
              if (iframeWin.document.body) {
                  iframe.height = iframeWin.document.body.scrollHeight;
              }
          }
      };

            //  窗口变化时候iframe自适应
            // function changeFrameHeight() {
                // var header = document.getElementById('header').scrollHeight;
    //     let isshow = true
    //     var tabbar = 0
    //     if(isshow) {
    //       tabbar = document.getElementById('tabbar').scrollHeight
    //     }
                // var ifm = document.getElementById("iframe");
                // ifm.height = document.documentElement.clientHeight - header - tabbar;
                // ifm.width = document.documentElement.clientWidth;
            // }

            // reasize 事件 窗口大小变化后执行的方法
            window.onresize = function() {
                changeFrameHeight();
            }
        
    

 2、登录设计模块

   
   
   
   
   
   
   
        .login {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
                        background-image: url(http://codegen.caihongy.cn/20201206/eaa69c2b4fa742f2b5acefd921a772fc.jpg);
                    }
        .login form {
            box-sizing: border-box;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center !important;
            position: inherit;
        }
        .login .logo, .login .title {
            box-sizing: border-box;
        }
        .login .logo img {
            display: block;
        }
        .login .title {
            text-align: center;
        }
        .login .form-item {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
        .login .form-item input, .login .form-label {
            box-sizing: border-box;
        }
        .login .btn-submit {
            display: block;
            box-sizing: border-box;
        }
        .login form p.txt {
            width: 100%;
            margin: 0;
            box-sizing: border-box;
        }
        .l-redio .layui-form-radio {
            margin: 0;
        }
        .l-redio .layui-form-radio>i {
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
        }
        .l-redio .layui-form-radio>div {
            font-size: 17px;
            color: rgba(14, 14, 14, 1);
        }
        .l-redio .layui-form-radioed>i {
            font-size: 17px;
            color: rgba(255, 71, 119, 1);
        }
        .l-redio .layui-form-radioed>div {
            font-size: 18px;
            color: rgba(0, 51, 113, 1);
        }
   

   
   
   
   
   
   
   
   
   
        var vue = new Vue({
            el: '#app',
            data: {
                menu: menu
            },
            methods: {
                jump(url) {
                    jump(url)
                }
            }
        })

        layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
            var layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            var form = layui.form;
            var http = layui.http;
            var jquery = layui.jquery;

            // 登录
            form.on('submit(login)', function(data) {
                data = data.field;
                if (!data.role) {
                    layer.msg('请选择登录用户类型', {
                        time: 2000,
                        icon: 5
                    });
                    return false;
                }
                http.request(data.role + '/login', 'get', data, function(res) {
                    layer.msg('登录成功', {
                        time: 2000,
                        icon: 6
                    });
                    // 登录凭证
                    localStorage.setItem('Token', res.token);
                    localStorage.setItem('role', jquery('#role:checked').attr('title'));
                    // 当前登录用户角色
                    localStorage.setItem('userTable', data.role);
                    localStorage.setItem('sessionTable', data.role);
                    // 用户名称
                    localStorage.setItem('adminName', data.username);
                    http.request(data.role + '/session', 'get', {}, function(res) {
                        // 用户id
                        localStorage.setItem('userid', res.data.id);
                        // 路径访问设置
                        window.location.href = '../../index.html';
                    })
                    
                });
                return false
            });

        });

        /**
         * 跳转登录
         * @param {Object} tablename
         */
        function registerClick(tablename) {
            window.location.href = '../' + tablename + '/register.html?tablename=' + tablename;
        }