前言
1、使用到的技术
1-vant ui框架
2-less-css预编译语言
3-vue
4-vue router
5-vuex
6-axios
7-javascript
8-html5
9-css3
10-vue-cli
11-webpack
2、使用到的软件
1.visua lstudio code,官网https://code.visualstudio.com/
2.navicat
3、使用代码步骤
代码地址 链接:https://pan.baidu.com/s/1xVw9nVNf-Hg-N3S_3IoNvA 提取码:f7861、用navicat创建一个新的数据库
导入数据库,运行SQL文件
导入mall-server文件下的nideshop.sql文件
导入成功后就会出现这些表(可能要等待一点时间)
** 2、使用visua lstudio code打开文件**
打开红线路径的文件,database是数据库名称、user,password是数据库账户和密码(需要改),prefix是表的前缀
把文件mall和mall-server,分别在终端打开。打开后输入npm install安装两个文件都要安装。(还需要安装vue依赖才能使用)
安装成功后,在mall-server输入npm start,在mall输入npm run serve(要是报错看下面)
如果报错Module build failed (from ./node_modules/babel-loader/lib/index.js)
意思是babel版本冲突
安装npm install @babel/core @babel/preset-env
浏览器打开后
打开文件mall\src\views的Home.vue
<script>
//导入接口
import axios from 'axios'
import api from '../assets/config/api'
</script>
接口地址,mall/src/assets/config/api.js
一、首页
1、Search 搜索
打开vant框架网站,基本用法
https://vant-contrib.gitee.io/vant/#/zh-CN/search
mall\src\views的Home.vue
//Home.vue
<van-search placeholder="商品搜索 共239万款好物" input-align='center' v-model="searchData" />
//导入vant
import Vue from 'vue';
import {
Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
name: 'home',
data:function(){
return {
//设置v-mode的值
searchData:"",
data:{
},
}
},
}
2、Swipe 轮播
https://vant-contrib.gitee.io/vant/#/zh-CN/swipe
//Home.vue
<van-swipe :autoplay="3000" :width="375" :height="200">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img class="swiperimg" v-lazy="image.image_url" />
</van-swipe-item>
</van-swipe>
<scrpet>
export default {
data:function(){
return {
searchData:"",
data:{
},
}
},
computed: {
images:function(){
//判断ajax的data.banner是否为数组,是的话返回数组,不是的话返回空数组
if(typeof this.data.banner=='object'){
return this.data.banner
}else{
return []
}
},
}
}
</scrpet>
<style lang="less">
#home{
.swiperimg{
width: 375px;
height: 200px;
}
}
<style>
3、5个图标
Grid 宫格https://vant-contrib.gitee.io/vant/#/zh-CN/grid
<van-grid :column-num='5'>
<van-grid-item v-for="(item,index) in channel" :key="index" :icon="item.icon_url" :text="item.name" />
</van-grid>
<script>
export default {
name: 'home',
data:function(){
return {
searchData:"",
data:{
},
}
computed: {
channel:function(){
//判断ajax的data.channel是否为数组,是的话返回数组,不是的话返回空数组
if(typeof this.data.channel=='object'){
return this.data.channel
}else{
return []
}
},
}
}
</script>
4、品牌制造商直供
图片懒加载
https://vant-contrib.gitee.io/vant/#/zh-CN/swipe
<div class="brandlist">
<!-- Panel 面板 -->
<van-panel title="品牌制造商直供">
<van-grid :column-num="2">
<van-grid-item v-for="(item1,index1) in brandList" :key="index1">
<van-image fit="cover" lazy-load :src="item1.new_pic_url" />
<h4 class="title">{
{
item1.name}}</h4>
<p class="price">{
{
item1.floor_price}}元起</p>
</van-grid-item>
</van-grid>
</van-panel>
</div>
<script>
export default {
name: 'home',
data:function(){
return {
searchData:"",
data:{
},
}
computed: {
brandList:function(){
//判断ajax的data.brandList是否为数组,是的话返回数组,不是的话返回空数组
if(typeof this.data.brandList=='object'){
return this.data.brandList
}else{
return []
}
},
}
}
</script>
<style lang="less">
.brandlist{
.van-grid-item__content{
padding: 0;
}
.van-image{
border: 1px solid #fff;
}
.title{
position: absolute;
top: 20px;
left: 10px;
}
.price{
position: absolute;
top: 40px;
left: 10px;
font-size: 14px;
color:#999 ;
}
</style>
5、新品首发
<!-- 新品首发 -->
<div class="newlist">
<van-panel title="品牌制造商直供">
<van-grid :column-num="2">
<van-grid-item v-for="(item2,index2) in newGoodsList" :key="index2">
<van-image fit="cover" lazy-load :src="item2.list_pic_url" />
<h4 class="title" >{
{
item2.name}}</h4>
<p class="price">{
{
item2.retail_price}}元起</p>
</van-grid-item>
</van-grid>
</van-panel>
</div>
<script>
export default {
name: 'home',
data:function(){
return {
searchData:"",
data:{
},
}
computed: {
newGoodsList:function(){
//判断ajax的data.newGoodsList是否为数组,是的话返回数组,不是的话返回空数组
if(typeof this.data.newGoodsList=='object'){
return this.data.newGoodsList
}else{
return []
}
},
}
}
<script>
<style>
.newlist{
.title{
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price{
font-size: 14px;
color:#999 ;
}
}![在这里插入图片描述](https://img-blog.csdnimg.cn/20200911153220161.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qdWFqdW4=,size_16,color_FFFFFF,t_70#pic_center)
</style>
6、人气面板
Card 卡片
https://vant-contrib.gitee.io/vant/#/zh-CN/card
<div class="hotlist">
<van-panel title="人气推荐">
<van-card v-for="(item3,index3) in hotGoodsList" :key="index3"
:price="item3.retail_price"
:desc="item3.goods_brief"
:title="item3.name"
:thumb="item3.list_pic_url"
/>
</van-panel>
</div>
<script>
export default {
name: 'home',
data:function(){
return {
searchData:"",
data:{
},
}
computed: {
hotGoodsList:function(){
//判断ajax的data.hotGoodsList=是否为数组,是的话返回数组,不是的话返回空数组
if(typeof this.data.hotGoodsList=='object'){
return this.data.hotGoodsList
}else{
return []
}
},
},
}
}
<script>
<style>
.hotlist{
.van-card__content{
justify-content: center;
text-align:left;
}
.van-card__title{
font-weight: 900;
color: #333;
font-size: 14px;
padding: 5px 0;
}
.van-card__price{
color: red;
}
}
</style>
二、分类列表
1、创建分类列表的页面
//mall/src/router/index.js
{
path:'/category',
name:'category',
component:Category
},
在mall/scr/views,创建一个文件category.vue
然后导入页面