随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，鞋履商城管理系统当然也不能排除在外。鞋履商城管理系统是以实际运用为开发背景，运用软件工程原理和开发方法，采用springboot框架构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结，得出系统中存在的不足及需要改进的地方，为以后的系统维护提供了方便，同时也为今后开发类似系统提供了借鉴和帮助。这种个性化的网上管理系统特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性，对鞋履商城管理系统而言非常有利。
本鞋履商城管理系统采用的数据库是Mysql，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
1.3 研究的内容
目前许多人仍将传统的纸质工具作为信息管理的主要工具，而网络技术的应用只是起到辅助作用。在对网络工具的认知程度上，较为传统的office软件等仍是人们使用的主要工具，而相对全面且专业的鞋履商城管理系统的信息管理软件仍没有得到大多数人的了解或认可。本选题则旨在通过标签分类管理等方式，实现管理员：首页、个人中心、用户管理、商品分类管理、颜色管理、商品信息管理、商品评价管理、系统管理、订单管理，用户；首页、个人中心、商品评价管理、我的收藏管理、订单管理，前台首页；首页、商品信息、商品资讯、个人中心、后台管理、购物车、客服等功能。从而达到对鞋履商城管理系统信息的高效管理。
目 录
摘 要 I
ABSTRACT II
目 录 II
第1章 绪论 1
1.1背景及意义 1
1.2 国内外研究概况 1
1.3 研究的内容 1
第2章 相关技术 3
2.1 B/S架构 4
2.2 Java技术介绍 6
2.3 mysql数据库介绍 6
2.4 springboot框架 4
第3章 系统分析 5
3.1 需求分析 5
3.2 系统可行性分析 5
3.2.1技术可行性：技术背景 5
3.2.2经济可行性 6
3.2.3操作可行性： 6
3.3 项目设计目标与原则 6
3.4系统流程分析 7
3.4.1操作流程 7
3.4.2添加信息流程 8
3.4.3删除信息流程 9
第4章 系统设计 11
4.1 系统体系结构 11
4.2开发流程设计系统 12
4.3 数据库设计原则 13
4.4 数据表 15
第5章 系统详细设计 19
5.1管理员功能模块 20
5.2用户功能模块 23
5.3前台首页功能模块 19
第6章 系统测试 25
6.1系统测试的目的 25
6.2系统测试方法 25
6.3功能测试 26
结 论 28
致 谢 29
参考文献 30
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>首页</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="order by mobanxiu.cn" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../layui/css/layui.css">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<script src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
html::after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
#test1 {
overflow: hidden;
}
#test1 .layui-carousel-ind li {
width: 16px;
height: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 0px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 0px rgba(255,0,0,.8);
}
#test1 .layui-carousel-ind li.layui-this {
width: 16px;
height: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 0px;
background-color: rgba(0, 85, 119, 1);
box-shadow: 0 0 0px rgba(0, 85, 119, 1);
}
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.recommend .box {
width: 1014px;
}
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.recommend .box .title span {
padding: 0 10px;
line-height: 1.4;
}
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
.index-pv1 .box .list .list-item {
flex: 0 0 ${var1}%;
padding: 0 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item-body {
border: 1px solid rgba(0, 0, 0, 3);
padding: 5px;
box-sizing: border-box;
cursor: pointer;
}
.recommend .box .list img {
width: 100%;
height: 100px;
display: block;
margin: 0 auto;
object-fit: cover;
max-width: 100%;
}
.recommend .box .list .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 20%;
}
/* 商品推荐-样式4-开始 */
.recommend .list-4{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recommend .list-4 .list-4-body {
display: flex;
flex-direction: column;
}
.recommend .list-4 .list-4-item {
position: relative;
z-index: 1;
}
.recommend .list-4 .list-4-item.item-1 {
width: 400px;
height: 400px;
margin-right: 20px;
}
.recommend .list-4 .list-4-item.item-2 {
width: 220px;
height: 190px;
margin-right: 20px;
margin-bottom: 20px;
}
.recommend .list-4 .list-4-item.item-3 {
width: 220px;
height: 190px;
margin-right: 20px;
margin-bottom: 0;
}
.recommend .list-4 .list-4-item.item-4 {
width: 190px;
height: 190px;
margin-right: 0;
margin-bottom: 20px;
}
.recommend .list-4 .list-4-item.item-5 {
width: 190px;
height: 190px;
margin-right: 0;
margin-bottom: 0;
}
.recommend .list-4 .list-4-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.recommend .list-4 .list-4-item .list-4-item-center {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
background-color: rgba(0,0,0,.3);
}
.recommend .list-4 .list-4-item .list-4-item-center .list-4-item-title {
width: 50%;
text-align: left;
line-height: 44px;
color: #fff;
font-size: 14px;
padding: 0 6px;
}
.recommend .list-4 .list-4-item .list-4-item-center .list-4-item-price {
width: 50%;
text-align: right;
line-height: 44px;
color: #fff;
font-size: 14px;
padding: 0 6px;
}
/* 商品推荐-样式4-结束 */
/* 商品推荐-样式5-开始 */
.recommend #five-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
line-height: 1;
}
.recommend #five-swiper .swiper-slide.swiper-slide-prev {
z-index: 5;
}
.recommend #five-swiper .swiper-slide.swiper-slide-next {
z-index: 5;
}
.recommend #five-swiper .swiper-slide.swiper-slide-active {
z-index: 9;
}
/* 商品推荐-样式5-结束 */
.news {
padding: 10px 0;
display: flex;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
}
.news .box {
width: 1014px;
}
.news .box .title {
padding: 10px 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.news .box .title span {
padding: 0 10px;
line-height: 1.4;
}
.news .box .list {
display: flex;
flex-wrap: wrap;
}
.index-pv2 .box .list .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
.news .box .list .list-item .list-item-body {
border: 1px solid rgba(0, 0, 0, 3);
padding: 10px;
box-sizing: border-box;
display: flex;
cursor: pointer;
}
.news .box .list .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
object-fit: cover;
max-width: 100%;
}
.news .box .list .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.news .box .list .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.news .box .list .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.news .box .list .list-item1 {
flex: 0 0 100%;
}
.news .box .list .list-item3 {
flex: 0 0 33.33%;
}
.lists {
padding: 10px 0;
display: flex;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.lists .box {
width: 1014px;
overflow: hidden;
}
.lists .box .title {
padding: 10px 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.lists .box .title span {
padding: 0 10px;
line-height: 1.4;
}
.lists .box .swiper-slide {
box-sizing: border-box;
cursor: pointer;
}
.lists .box .swiper-slide .img-box {
width: 100%;
overflow: hidden;
}
.lists .box .swiper-slide .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100%;
}
.index-pv3 .box .list .list-item {
flex: 0 0 ${var3}%;
padding: 0 10px;
box-sizing: border-box;
}
.index-pv1 .animation-box:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1.1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.4s;
z-index: 2;
position: relative;
}
.index-pv2 .animation-box:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1.0) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
z-index: 2;
position: relative;
}
.index-pv3 .animation-box:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(0.95) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
z-index: 2;
position: relative;
}
#new-list-6 .swiper-wrapper {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
</style>
<body>
<div id="app">
<div class="banner">
<div class="layui-carousel" id="test1" :style='{"boxShadow":"0 0px 0px #fff143","margin":"0 ","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
<div carousel-item>
<div v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
</div>
</div>
</div>
<!-- <div class="bd">
<ul>
<li v-for="(item,index) in swiperList" v-bind:key="index"><img style="width: 1920px;height: 492px;" :src="item.img" /></li>
</ul>
<div class="hd">
<ul>
<li v-for="(item,index) in swiperList" v-bind:key="index"></li>
</ul>
</div>
</div> -->
</div>
<div :style='{"display": "flex","justify-content": "center","padding":"20px"}'>
<select v-if="queryList.length>1" @change="queryChange($event)" name="queryName" id="queryName">
<option v-for="(item,index) in queryList" v-bind:key="index" :value="index">{{item.queryName}}</option>
</select>
<div v-if="queryIndex==0" class="item-list">
<input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(102, 93, 93, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"6px","textAlign":"center","borderWidth":"1px","width":"150px","fontSize":"14px","borderStyle":"solid","height":"40px"}'
name="shangpinxinxishangpinmingcheng" id="shangpinxinxishangpinmingcheng" placeholder="商品名称" autocomplete="off" class="layui-input">
</div>
<button v-if="queryIndex==0" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(23, 124, 176, 1)","color":"#fff","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"18px","borderStyle":"solid","height":"40px"}'
id="btn-search" @click="jump('../shangpinxinxi/list.html')" type="button" class="layui-btn layui-btn-normal">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button>
</div>
<div id="content">
<!-- 商品推荐 -->
<div class="recommend index-pv1" :style='{"padding":"0px 10px 0","boxShadow":"0 0 0px ","margin":"0px 0px ","borderColor":"rgba(255, 255, 255, 0)","backgroundColor":"rgba(252, 252, 252, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<div class="box" style='width:88%'>
<div class="title" :style='{"padding":"0px 0px 0","boxShadow":"0 0 0px ","margin":"10px 0 10px 0","borderColor":"rgba(115, 115, 185, 1)","backgroundColor":"rgba(234, 224, 224, 0)","color":"rgba(15, 15, 16, 1)","borderRadius":"2px","alignItems":"center","borderWidth":"0px 0px 0px 0px","fontSize":"20px","borderStyle":"solid"}'>
<span>Recommend</span><span>商品信息推荐</span>
</div>
<div class="list-4">
<div v-if="shangpinxinxiRecommend.length>0" class="list-4-item animation-box item-1" @click="jump('../shangpinxinxi/detail.html?id='+shangpinxinxiRecommend[0].id)" :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0, .3)","margin":"0 20px 0 0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"400px","borderStyle":"solid","height":"400px"}'>
<img :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}' :src="shangpinxinxiRecommend[0].tupian?shangpinxinxiRecommend[0].tupian.split(',')[0]:''" alt="" />
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="true" class="list-4-item-center">
<div :style='{"padding":"0 6px","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#fff","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"50%","lineHeight":"44px","fontSize":"14px","borderStyle":"solid"}' class="list-4-item-title">{{shangpinxinxiRecommend[0].shangpinmingcheng}}</div>
</div>
</div>
<div class="list-4-body">
<div v-if="shangpinxinxiRecommend.length>1" @click="jump('../shangpinxinxi/detail.html?id='+shangpinxinxiRecommend[1].id)" class="list-4-item animation-box item-2" :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0, .3)","margin":"0 20px 20px 0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"220px","borderStyle":"solid","height":"190px"}'>
<img :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}' :src="shangpinxinxiRecommend[1].tupian?shangpinxinxiRecommend[1].tupian.split(',')[0]:''" alt="" />
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="true" class="list-4-item-center">
<div :style='{"padding":"0 6px","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#fff","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"50%","lineHeight":"44px","fontSize":"14px","borderStyle":"solid"}' class="list-4-item-title">{{shangpinxinxiRecommend[1].shangpinmingcheng}}</div>
</div>
</div>
<div v-if="shangpinxinxiRecommend.length>2" @click="jump('../shangpinxinxi/detail.html?id='+shangpinxinxiRecommend[2].id)" class="list-4-item animation-box item-3" :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0, .3)","margin":"0 20px 0 0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"220px","borderStyle":"solid","height":"190px"}'>
<img :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}' :src="shangpinxinxiRecommend[2].tupian?shangpinxinxiRecommend[2].tupian.split(',')[0]:''" alt="" />
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="true" class="list-4-item-center">
<div :style='{"padding":"0 6px","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#fff","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"50%","lineHeight":"44px","fontSize":"14px","borderStyle":"solid"}' class="list-4-item-title">{{shangpinxinxiRecommend[2].shangpinmingcheng}}</div>
</div>
</div>
</div>
<div class="list-4-body">
<div v-if="shangpinxinxiRecommend.length>3" @click="jump('../shangpinxinxi/detail.html?id='+shangpinxinxiRecommend[3].id)" class="list-4-item animation-box item-4" :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0, .3)","margin":"0 0 20px 0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"190px","borderStyle":"solid","height":"190px"}'>
<img :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}' :src="shangpinxinxiRecommend[3].tupian?shangpinxinxiRecommend[3].tupian.split(',')[0]:''" alt="" />
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="true" class="list-4-item-center">
<div :style='{"padding":"0 6px","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#fff","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"50%","lineHeight":"44px","fontSize":"14px","borderStyle":"solid"}' class="list-4-item-title">{{shangpinxinxiRecommend[3].shangpinmingcheng}}</div>
</div>
</div>
<div v-if="shangpinxinxiRecommend.length>4" @click="jump('../shangpinxinxi/detail.html?id='+shangpinxinxiRecommend[4].id)" class="list-4-item animation-box item-5" :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0, .3)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"190px","borderStyle":"solid","height":"190px"}'>
<img :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}' :src="shangpinxinxiRecommend[4].tupian?shangpinxinxiRecommend[4].tupian.split(',')[0]:''" alt="" />
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="true" class="list-4-item-center">
<div :style='{"padding":"0 6px","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#fff","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"50%","lineHeight":"44px","fontSize":"14px","borderStyle":"solid"}' class="list-4-item-title">{{shangpinxinxiRecommend[4].shangpinmingcheng}}</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div style="text-align: center;">
<button @click="jump('../shangpinxinxi/list.html')" style="display: block;cursor: pointer;" type="button" :style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"rgba(227, 249, 253, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid","height":"34px"}'>查看更多<i v-if="false" :style='{"isshow":false,"padding":"0px 0 0 3px","fontSize":"16px","color":"rgba(33, 31, 31, 1)"}' class="layui-icon layui-icon-next"></i></el-button>
</div>
</div>
</div>
<!-- 商品资讯 -->
<!-- 样式二 -->
<div class="news index-pv2" style="display: flex;justify-content: center;width:100%" :style='{"padding":"0px 0 0px 0","boxShadow":" 0px ","margin":"0px ","borderColor":"rgba(255, 255, 255, 0)","backgroundColor":"rgba(6, 82, 121, 0.4)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<div class="box" style='width:88%'>
<div class="title" :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"0px 0 10px 0","borderColor":"rgba(123, 104, 238, 0)","backgroundColor":"rgba(6, 82, 121, 0.4)","color":"rgba(23, 23, 24, 1)","borderRadius":"0px","alignItems":"center","borderWidth":"0px 30px 0px 0px","fontSize":"20px","borderStyle":"solid"}'>
<span>HOME NEWS</span><span>商品资讯</span>
</div>
<div class="list">
<div v-for="(item,index) in newsList" :key="index" class="list-item" @click="jump('../news/detail.html?id='+item.id)" :class="2=='1'?'list-item1':2=='3'?'list-item3':''">
<div class="list-item-body animation-box" :style='{"padding":"6px","boxShadow":"0 0 0px","margin":"0 0 10px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}'>
<img :style='{"boxShadow":"0px 0px 0px #88ada6","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","borderWidth":"0","width":"280px","borderStyle":"solid","height":"230px"}' :src="item.picture" alt="" />
<div class="item-info">
<div v-if='true' :style='{"isshow":true,"padding":"0","margin":"5px 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(16, 15, 15, 1)","borderRadius":"0","textAlign":"left","fontSize":"20px"}' class="name">{{item.title}}</div>
<div :style='{"padding":"0","margin":"0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(96, 90, 90, 1)","borderRadius":"0","textAlign":"left","fontSize":"12px"}' class="time">{{item.addtime}}</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div style="text-align: center;">
<button @click="jump('../news/list.html')" style="display: block;cursor: pointer;" type="button" :style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"rgba(227, 249, 253, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid","height":"34px"}'>查看更多<i v-if="false" :style='{"isshow":false,"padding":"0px 0 0 3px","fontSize":"16px","color":"rgba(33, 31, 31, 1)"}' class="layui-icon layui-icon-next"></i></el-button>
</div>
</div>
</div>
<!-- 特价商品展示 -->
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
queryList:[
{
queryName:"商品名称",
},
],
queryIndex: 0,
shangpinxinxiRecommend: [],
swiperList: [],
// 商品资讯
newsList: [],
leftNewsList: [],
rightNewsList: []
},
filters: {
newsDesc: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
}
return val;
}
return '';
}
},
methods: {
jump(url) {
if (this.queryIndex == 0) {
localStorage.setItem('indexQueryCondition', document.getElementById("shangpinxinxishangpinmingcheng").value);
}
jump(url)
},
queryChange(event) {
this.queryIndex = event.target.value;
if (this.queryIndex == 0) {
this.shangpinxinxishangpinmingcheng = this.queryList[event.target.value].queryName;
}
}
}
});
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function() {
var layer = layui.layer;
var element = layui.element;
var form = layui.form;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#test1',
width: '100%',
height: '600px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
// vue.$nextTick(()=>{
// window.xznSlide();
// });
}
});
// 商品资讯
http.request('news/list', 'get', {
page: 1,
limit: 2 * 2,
order: 'desc'
}, function(res) {
var newsList = res.data.list;
for(var i = 0; i<newsList.length; i++) {
let d = newsList[i].addtime.split(' ')
d = d[0].split('-')
newsList[i].year = d[0]
newsList[i].month = d[1] + '-' + d[2]
}
vue.newsList = newsList;
if (newsList.length > 0 && newsList.length <= 2) {
vue.leftNewsList = res.data.list
} else {
var leftNewsList = []
for (let i = 0; i <= 2; i++) {
leftNewsList.push(newsList[i]);
}
vue.leftNewsList = leftNewsList
}
if (newsList.length > 2 && newsList.length <= 8) {
var rightNewsList = []
for (let i = 3; i <= newsList.length; i++) {
rightNewsList.push(newsList[i]);
}
vue.rightNewsList = rightNewsList
}
let flag = 2;
let options = {"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"slidesPerView":5,"loop":true,"spaceBetween":20,"autoplay":{"delay":3000,"disableOnInteraction":false}}
options.pagination = {el:'null'}
if(flag == 3) {
vue.$nextTick(() => {
new Swiper ('#newsnews', options)
})
}
if(flag == 6) {
let sixSwiper = {
loop: true,
speed: $template2.front.index.news.six.speed,
slidesPerView: 3,
spaceBetween: $template2.front.index.news.six.spaceBetween,
centeredSlides: true,
watchSlidesProgress: true,
autoplay: {
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false
}
}
vue.$nextTick(() => {
new Swiper('#new-list-6', sixSwiper)
})
}
});
// 获取推荐信息
http.request(`shangpinxinxi/autoSort`, 'get', {
page: 1,
}, function(res) {
vue.shangpinxinxiRecommend = res.data.list
let flag = 4;
let options = {"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"slidesPerView":5,"loop":true,"spaceBetween":20,"autoplay":{"delay":3000,"disableOnInteraction":false}}
options.pagination = {el:'null'}
if(flag == 3) {
vue.$nextTick(() => {
new Swiper ('#recommendshangpinxinxi', options)
})
}
// 商品推荐样式五
if(flag == 5) {
vue.$nextTick(() => {
var swiper = new Swiper('#five-swiper', {
loop: true,
speed: 500,
slidesPerView: 5,
spaceBetween: 10,
autoplay: {"delay":3000,"disableOnInteraction":false},
centeredSlides: true,
watchSlidesProgress: true,
on: {
setTranslate: function() {
slides = this.slides
for (i = 0; i < slides.length; i++) {
slide = slides.eq(i)
progress = slides[i].progress
// slide.html(progress.toFixed(2)); //看清楚progress是怎么变化的
slide.css({
'opacity': '',
'background': ''
});
slide.transform(''); //清除样式
slide.transform('scale(' + (1.5 - Math.abs(progress) / 4) + ')');
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
},
},
navigation: {"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},
pagination: {"el":".swiper-pagination","clickable":true},
});
})
}
});
});
window.xznSlide = function() {
// jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_piclist ul",effect:"leftLoop", delayTime:200, autoPlay:true,triggerTime:0});
jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_tx ul",delayTime:0, autoPlay:true});
jQuery(".product_list").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:5,trigger:"click",interTime:4000});
};
</script>
<script src="../../xznstatic/js/index.js"></script>
</body>
</html>
扫一扫
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
