目录
项目简单介绍:
注册页、首页、商品列表页具体功能的实现以及各个组件的封装实现组件复用;各个组件间的路由跳转;商品列表页动态获取商品参数进行动态数据传递;各种网络请求以及父子组件的通讯。
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数据本地图片地址引用不起作用的问题,这里笔者把图片都存放在了七牛云平台上,直接使用图片外链。
持续更新中-----------