基于CLI5+Vue2+Vue Router+Axios+mockjs+Vuex的品优购网站

等闲'

已于 2022-06-12 16:37:59 修改

阅读量334

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端前端框架

于 2022-06-07 15:46:36 首次发布

本文链接：https://blog.csdn.net/dream_s_a/article/details/125166207

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目简单介绍：
注册页、首页、商品列表页具体功能的实现以及各个组件的封装实现组件复用；各个组件间的路由跳转；商品列表页动态获取商品参数进行动态数据传递；各种网络请求以及父子组件的通讯。

1 项目开发准备工作

开发环境：

VSCode（1.66.2）
Chrome
node：16.14.2
npm：8.5.0
webpack：5.72.0
webpack-cli：4.9.2

技术栈：cli3+vue2+Vue Router+Axios+mockjs+Vuex

2 制作过程

2.1创建项目

在cmd页面输入

npm install -g @vue/cli                #安装cli3
vue create mall                        #创建项目
cd mall                              #进入项目文件夹
npm init -y                          #项目初始化
npm run serve                        #运行

2.2项目目录划分

创建项目后会有以下目录：
mall

	|-- node_modules         依赖node相关的模块
	|-- public             存放部分静态文件
       |-- index.html       主页面文件
	|-- src                存放项目开发的所有文件
	   |-- main.js          应用入口js
    |-- browserslistrc       浏览器相关的支持配置情况
	|-- babel.config.js       ES语法转换
    |-- .editorconfig        手动添加的统一代码风格的文件
	|-- vue.config.js        vue的配置文件
	|-- .gitignore          git版本管制忽略的配置
    |-- jsconfig.json       目录中存在此类文件表明该目录是 JavaScript 项目的根目录
    |-- package-lock.json   项目的具体配置情况
	|-- package.json       项目的基本配置情况 
	|-- README.md      应用描述说明的readme文件

接下就只要操作public和src文件夹了

在这里插入图片描述

2.3项目初始化

删除不需要的东西，在public文件夹放入favicon.ico文件可以改变网站的标志

2.3.1引入CSS

在assets文件夹下创建css文件夹，在css文件夹下放入base.css和normalize.css，其中base.css是整个项目的初始化样式即公共样式，normalize.css是统一在不同浏览器的样式。
在base.css中引入normalize.css，然后在APP.vue文件的style中引入base.css

2.3.2给路径起别名

在vue.config.js文件中配置路径别名，如下：
在这里插入图片描述

注意：
①import导入即写路径的时候可以直接以assets开头
②在img标签中的是src写引入路径的时候需要以~开头

2.3.3引入字体图标

这里使用的是iconfont
①安装
将下载的压缩包中的fonts文件夹以及style.css文件复制到src下的common文件夹下
②引入
在入口文件main.js中引入，即require(‘./common/style.css’)
③使用

2.4 引入Vue Router

2.4.1安装以及简单使用

①安装：输入：npm install vue-router --save
②引进：在src下创建router文件夹，再在router文件夹下创建index.js并添加如下代码：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
//1、安装插件
Vue.use(VueRouter)
//2、创建router实例对象
在这里插入图片描述

③在入口文件main.js中引入并全局注册，即import router from ‘./router’

2.4.2 配置路由映射

在routes数组中写入对象，在对象中使用path和component配置组件和路径映射关系，另外还需要配置redirect重定向，让路径默认跳到到首页，实例如下：
在这里插入图片描述

2.4.3实现动态改变页面标题

①在配置路由映射时加入meta:{title: ‘’}
②使用beforEach监听路由的改变,即使用前置守卫监听路由，在路由改变之前进行操作
如下:
在这里插入图片描述

2.4.4配置路由懒加载

项目在打包构建应用时，所有组件的js文件会放在一个js文件里，配置懒加载后可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，提高页面加载速度。
如下：
在这里插入图片描述

2.5 mock模拟数据接口+axios

2.5.1 mockjs

1.首先，安装模块mockjs、axios (http请求库)
npm install mockjs axios --save
2.在src目录下的mock和network文件夹，mock和network文件夹里面的文件结构如下：
在这里插入图片描述

3、mock
①例在home.json中添加以下代码：
Data
在这里插入图片描述

注意！！！这里的图片必须放在public才能被请求到，否则资源无法请求；也可以放在其他地方，但是引用路径的时候必须使用require.
②数据绑定路径
mock.js
在这里插入图片描述

③使用
在入口文件index.js中引用
在这里插入图片描述

然后就没有地方再使用到mock了

2.5.2 Axios

例在Home.vue中进行网络请求，然后通过props把数据传给HomeMain.vue
Home.vue
在这里插入图片描述

HomeMain.vue
在这里插入图片描述

2.6 Vue组件化

2.6.1 总体概述

这里在src下的component的content下封装了页面的头部、底部和轮播图，六大视图的主体部分分别在其视图下的childComps文件夹下，结构如下：
在这里插入图片描述

2.6.2 头部

头部分为三大组件，分别为Shortcut.vue、Header.vue和Nav.vue,如下：
在这里插入图片描述

在Header.vue组件中，因为每个页面的Logo不一样，所以可以在Header.vue组件中预留一个插槽，然后在不同页面按需使用，如下
Header.vue
在这里插入图片描述

Logo.vue
在这里插入图片描述

HomeHeader.vue
在这里插入图片描述

另外：这里在④Logo以及②Header中的我的购物车盒子做了router-link的路由跳转，只要点击Logo就会跳转到首页，只要点击“我的购物车”就会跳转到购物车页。

2.6.3 底部

底部分为Service.vue和copyRight.vue两大组件，如下
在这里插入图片描述

因为登录和注册页面只需要copyRight.vue组件，所以这里分为两大组件，再创建一个Footer.vue组件组合这两大组件，因为其他页面都要使用整个Footer.vue
在这里插入图片描述

2.6.4 轮播图

步骤：
1、根据请求来的图片数组长度动态生成装图片的li和小圆圈的li
2、使用v-show控制图片是否显示，用currentIndex变量控制图片下标，当item.id == currentIndex时显示为true，显示图片
3、在动态生成小圆圈的同时：
①使用v-bind实现动态类名的添加，用三元表达式进行判断li标签item.id是否与currentIndex值相等,如果相等则添加current类名
②点击小圆圈传递参数item.id ,在函数中将值赋给currentIndex,即可实现点击圆点控制图片效果
4、在左右箭头中分别绑定点击事件clickArrow(),分别传递参数left和right，在clickArrow(val)方法中判断：
①当参数为right时，currentIndex++，当值等于图片数量最大值时，currentIndex=0
②当参数为left时，要先判断currentIndex是否为0，为0时使currentIndex = 图片数量最大值，不为0时currentIndex–
5、写一个定时器startInterval()方法,在vue的生命周期函数mounted时,即在界面加载后启动定时轮播
6、使用changeInterval()方法，控制鼠标经过停止轮播和鼠标移走开启轮播，当传递参数为true时开启，否则关闭
//7、解决多次连续点击造成图片轮播加快问题，每次调用定时器时，先清除上一个定时器（这里的方法没用上）

注意：
v-show指令的作用是：
1.根据切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，值为false元素隐藏
Template
在这里插入图片描述

Script
在这里插入图片描述

在这里插入图片描述

2.6.5 商品列表页

商品列表页的头部和底部复用之前封装的组件，这里重点讲述商品列表。
①封装一个商品组件GoodListItem.vue，该商品的数据全部是动态请求的，如下：
GoodListItem.vue
在这里插入图片描述

②在GoodList.vue中遍历请求来数组数据，每个数组元素为一个对象，对象写着商品对应数据，数组中有多少个商品对象就生成多少个商品组件GoodListItem.vue。
GoodList.vue
在这里插入图片描述

在Phone.vue组件中即进入商品列表页时进行网络请求，请求的数据为listImg数组通过props传给GoodList.vue，在GoodList.vue中遍历listImg数组通过props将对象传给GoodListItem.vue。

2.6.6 商品列表页跳转对应详情页

商品列表页的每个商品都有自己的id，点击某商品时跳转到该商品的详情页并请求该商品对应的数据，这里将详情页的数据和静态资源另创文件存放。
①点击某商品，跳转该商品对应详情页，该页前端路由为detail/:id，在点击时获取该商品id，如下：
在这里插入图片描述

跳转详情页即detail.vue组件，在created生命周期时使用this.$route获取该商品id；
②进入该商品详情页前，需要根据获取的id请求该id对应的数据
将点击的id传给后端
在这里插入图片描述

封装的detail页网络请求如下：
（这里的后端接口为/detail?id=传来的id值）
在这里插入图片描述

在mockjs中做id与数据匹配
在这里插入图片描述

③数据展示
detail.json
在这里插入图片描述

使用
在这里插入图片描述

3 总结

最后的效果图：①首页：
在这里插入图片描述

②登录页：
在这里插入图片描述

③注册页：
在这里插入图片描述

④商品列表页：
在这里插入图片描述

⑤商品详情页：

在这里插入图片描述

⑥购物车页：

在这里插入图片描述

注意：
①笔者这里将需要经常改变的商品图片存在了public下，这里其实是不对的，因为public下一般放的是不需要改动的静态资源，但是我这里为了在请求mock里数据的地址较方便，就放在public下了；
②另外有一个大忌，项目做完以后才打包项目去看效果，这个时候项目已经开发到很大或者已经完了，如果出现问题就会很难修改，就比如笔者自己，写下这句话时意味着我已经犯下这个大错了；
我这里在项目刚开始的时候使用了history模式，使用这个模式时有路径和组件显示问题，无法协调，最后重新创建项目，改用hash，改用hash打包完后，基于此前把图片放在了public下，所以详情页和购物车页的图片无法获得，解决办法在③。
③最后！这个更新之前mockjs的相关使用，之前笔者是把图片都分门别类的放到了public下，nononono，千万向我这么做，太不专业了，public下应该放的是第三方/不会变的文件；所以为了解决图片放在assets下，mock文件夹中的JSON数据本地图片地址引用不起作用的问题，这里笔者把图片都存放在了七牛云平台上，直接使用图片外链。

持续更新中-----------