![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue仿小米商城项目笔记
学习vue仿小米商城笔记
啵雨的博客
要学习的还有很多!!
展开
-
项目总结
项目总结原创 2020-07-30 14:24:09 · 266 阅读 · 0 评论 -
vue路由按需加载
vue路由按需加载1》安装插件npm install --save-dev @babel/plugin-syntax-dynamic-import2》用promise的方式3》但此时会发现在首页每个js对应一个import 进行了预加载 没有达到真正的按需加载,进行优化在main.js中:由于修改了main.js要重启项目...原创 2020-07-30 13:24:31 · 309 阅读 · 0 评论 -
订单列表组件相关笔记
订单列表组件相关笔记一.调整Order父组件结构:在刚开始讲order父组件结构的时候,我们发现orderlist orderpay orderconfirm等子组件 都有orderheader组件作为头部,,只是内容不同我们当时觉得在order父组件进行封装,由于路由的不同进行内容修改很棒封装方法如下:但是我们发现一个问题:mounted生命周期,只有在第一次加载渲染页面时,才会触发。当我们从订单确认组件跳转到订单列表的时候,不会触发mounted生命周期,会导致订单列表的orderhead原创 2020-07-29 18:26:38 · 1257 阅读 · 0 评论 -
订单组件支付有关笔记(支付宝微信)
订单组件支付有关笔记首先说明支付功能百分之七十都是由后端完成的接口:一.支付宝支付:1》首先了解支付宝content是html源码,渲染到页面上后自动跳转到支付页面,支付宝有层网关,网关有层签名,重定向到收银台,进行扫码支付2》由于接口需要orderId为参数所以需要的data为orderId和content=‘’3》用payType判断是支付宝支付还是微信支付orderPay.vue:4》其次调用支付接口需要另起一个页面(alipay.vue),因为支付宝会新打开一个支付宝页面进行支原创 2020-07-27 02:39:51 · 303 阅读 · 0 评论 -
订单组件地址增删改以及结算提交笔记
订单组件地址增删改以及结算提交笔记一.设置静态的模态框:1》删:submitAddress后面会说,点击确定按钮触发的事件2》增,改:同时注意,增改的这个模态框的template插入的是表单(v-model后面会说)二.新增datacheckedItem表示选中的商品对象userAction表示用户行为三.封装接口及对应函数:1》设置点击删增改图标触发的事件函数:删和改需要传item参数是因为,删改的接口地址含有item的id还要注意在点击删改按钮,弹出模态框时,checke原创 2020-07-24 12:21:05 · 202 阅读 · 0 评论 -
订单组件地址和商品数据加载笔记
订单组件地址和商品数据加载笔记一.首先确定要渲染的数据列表:此处要注意cartList是购物车选中的列表,是接口的购物车列表经过过滤器过滤出来加入购物车之后选中的商品列表其次 count计算的是 cartList列表中各种商品一共购买了多少件,需要遍历二.调用接口三.过滤器 filter和 遍历器 map的应用:过滤器过滤出来选中状态为true的商品,加入cartList中;遍历器对cartList的商品数量依次相加得到总数量四.渲染:...原创 2020-07-22 16:18:08 · 169 阅读 · 0 评论 -
订单组件父组件结构封装
订单组件父组件结构封装首先我们可以发现orderconfirm orderpay orderlist 这三个组件的 orderheader组件都是复用的,只是内容不一样,我们可以封装在order组件中,不用再一个一个组件的引用,直接渲染即可:...原创 2020-07-21 17:42:37 · 192 阅读 · 0 评论 -
项目退出功能实现以及部分接口优化
项目退出功能实现以及部分接口优化一.退出功能实现:1》添加退出按钮,并实现退出登录的接口:navheader.vue:2》此时退出功能没有完全实现,我们需要把在navheader渲染的用户名称和购物车数量清空:清空cookie和vuex中 用户名称和购物车数量3》正常情况下,用户选择一定量的商品添加购物车,退出登录再登录,购物车也不会清空,但是我们现在会清空,我们需要进行修改:我们需要再次登录后,重新获取购物车数量。此时有人会有问题,之前App.vue不是设置过获取用户名称和购物车数量的原创 2020-07-19 18:02:59 · 524 阅读 · 0 评论 -
项目中element-ui的运用
项目中element-ui的运用首先element-ui这个框架用在b端,即管理系统较多,我们这个商场系统c端用的较少,我们只是简单地了解用一下element-ui官网一.安装,并按需引入 :npm i element-ui babel-plugin-component --save-dev二.配置babal.config.js:安装按需引入插件babel-plugin-component后,会自动生成一个babal.config.js文件:module.exports = { "pr原创 2020-07-19 11:22:51 · 305 阅读 · 0 评论 -
购物车页面其余部分笔记
购物车页面其余部分笔记购物车大部分功能其实都是后端实现的,比如价格计算等不需要前端实现,我们只需要调用接口就行,因为后端实现更具有安全性。注意点:1》发现每个功能函数的实现,都在最后运行了 this.renderData(res)即重新刷新了一下数据,我们就单独提出来一个renderData函数进行复用,这种思想很关键。2》在全选非全选toggleAll函数中,我们在根据某一变量的值的true,false来决定选择调用什么接口:let url = this.allChecked?’/car原创 2020-07-16 10:53:39 · 252 阅读 · 0 评论 -
购物车页面 order-header组件笔记
购物车页面 order-header组件笔记一.复用小米logo:我们之前在首页已经编写好了logo的样式,但是没有考虑复用,我们在这里进行改进,使之可以复用1》把首页hear-logo这个盒子以及里面的小盒子复制到购物车页面的相应位置2》把hear-logo的样式剪切到base.scss中3》只要引用.header-logo这个类的盒子,都会成功引入logo二.购物车的order-header组件,之后的支付和订单页面也会复用,只是|我的购物车|和|温馨提示。。。。|这两部分内容不同,我们原创 2020-07-15 15:50:28 · 329 阅读 · 0 评论 -
商品详情页面笔记
商品详情页面笔记(detail.vue)一.样式部分省略:有个地方回顾一下就是清除浮动的知识:清除浮动的方法二.商品详情页面进行交互:1》渲染名称和价格detail组件也复用了productparam组件,进行数据父传子2》版本按钮切换,和切换数据更改三.商品详情页面加入购物车:四.首页index.vue加入购物车:...原创 2020-07-13 22:50:25 · 370 阅读 · 0 评论 -
产品栈交互实现以及小bug解决笔记
产品栈交互实现以及小bug解决笔记一.交互实现:1》产品栈总组件,商品名称和价钱渲染此处需要注意的是 路由跳转是this.$router.push;this.$route.params.id 获取的参数在这里是商品id一个是router 一个是route2》产品栈总组件获取的数值传送到产品栈参数组件渲染(父组件传值到子组件)比如左上角的小米CC93》点击立即购买,会跳转到相应的产品详情页上二.总结两个问题1》添加默认值确定在未登录情况下能获取值2》当打开控制台或原创 2020-07-12 11:56:39 · 155 阅读 · 0 评论 -
产品栈视频组件相关笔记
产品栈视频组件相关笔记1》首先设置视频的样式首先一个大盒子,里面有一个遮罩层盒子(overlay盒子),进行淡黑色的遮罩,遮罩层里面有一个video盒子 装video标签和关闭的span标签给遮罩层fixde布局,透明度设置0.4 ,z-index:10再给video盒子fixed布局,并设置水平垂直居中,z-index:10video标签 高度 宽度 100%,设置object-fit:cover; outline:none;span给absoluted绝对定位 定位在盒子的右上角,z-i原创 2020-07-11 16:40:47 · 140 阅读 · 0 评论 -
产品栈参数组件相关笔记(插槽slot,吸顶问题)
产品栈组件相关笔记产品栈参数组件(具体引入步骤省略,就是常规的组件引入过程)一.样式内容配置立即购买按钮,以slot插槽的形式插入的因为有的产品栈页面这个按钮不是立即购买功能,可能是添加购物车功能,用插槽更利于我们灵活的控制。(之前model组件也是插槽的形式,也是为了以后能方便根据功能更改内容,更加便利)二.吸顶:1》先撑开内容(用假数据)有滚动条2》给window绑定scroll滚动事件,并给nav-bar绑定类class3》给is-fixed 绝对定位添加样式三吸顶的问原创 2020-07-10 15:33:03 · 171 阅读 · 0 评论 -
有关项目scss的引入问题
有关项目scss的引入问题为什么 在header组件中引入了base.scss中定义的container,在index.vue中可以直接class=container使用,不需要引入?但是config.scss和mixin.scss却必须在每一个组件里面单独引入才可以使用,否则就会报错答:引入的样式文件是全局的,除非加了scoped,否则其它文件能公用这个样式config和mixin他们本身不是页面样式,他们是定义的变量,用来做扩展的,为了能够提供一些高效的工具和方法,如果要用到里面的全局函数或者原创 2020-07-10 10:57:53 · 615 阅读 · 0 评论 -
Vuex的知识和项目实战笔记
Vuex的知识和项目实战笔记一.介绍一下vuexvuex是为vue.js 开发的状态管理模式,在兄弟组件,甚至没有关系的组件之间来做数据存储和共享,把数据存储到vuex里,在各个组件都可以共用这个流程图是精髓:Vue Components 组件里面的一个按钮点击事件,通过dispatch派发一个Action,Action会提交一个commit到Mutations,Mutations会自动提交状态到State里面去,从而State会重新渲染Vue Components(视图)注意:当状态改变之后呢原创 2020-07-08 12:25:55 · 288 阅读 · 0 评论 -
login登录页面有关笔记
login登录页面有关笔记一登录:1》首先查看接口文档:会发现需要username和password两个参数,我们需要从用户在input输入的内容中获取两个参数的信息,需要用到双向绑定v-model2》调用接口,并设置cookiecookie用法:首先npm下载插件,然后main.js中引入,具体参数可查看npmjs网站,{expires:xxx}参数代表cookie能存活多长时间并利用了解构赋值方便快捷二.注册:虽然本项目没有注册页面,但是自定义注册信息,有固定的接口提供注册功能原创 2020-07-06 15:57:32 · 4430 阅读 · 0 评论 -
modal组件部分实现+懒加载
modal组件部分实现+懒加载一.把modal组件(放入component文件夹中)引入到index组件中二.modal组件层次1》modal父级容器2》mask制造层3》modal-dialog弹框4》modal-header modal-body modal-footer弹框的头,中心内容和底部三modal样式在index.vue中,引入modal组件,内容放入插槽中:四.传值1》父传子:index组件:引用modal组件modal组件: props接收父亲组件ind原创 2020-06-08 22:25:41 · 870 阅读 · 0 评论 -
手机商品实现部分的一个新知识
手机商品实现部分的一个新知识根据类判断tag是新品还是秒杀scss:新品类:new-pro秒杀类:kill-pro组件格式:偶数的时候添加新品类原创 2020-06-07 19:51:40 · 129 阅读 · 1 评论 -
首页轮播菜单实现
首页轮播菜单实现这个部分,我们采用二维数组的方式赋值①.menuList:[ [] ] 二维数组,数组中在添加一个数组②.一共有六行,row=6menuList:[ [], [],[],[],[],[] ]③.每行有四列,col=4menuList:[ [1,2,3,4], [1,2,3,4],[1,2,3,4],[1,2,3,4],[1,2,3,4],[1,2,3,4] ]④.我们只把第一行的四个设定特定数值,其余都设置为默认的小米9总体效果如上图,那么我们为什么把设置为默认的值都设原创 2020-06-06 14:37:13 · 498 阅读 · 0 评论 -
Navheader部分结束总结
Navheader部分总结一.获取数据接口(axios)1》因为在main.js中,我们所以我们在Nav-header.vue使用axios时,不需再import引用,直接this.axios使用即可2》在main.js中,我们对axios进行了基础设置3》我们在vue.config.js中,进行代理设置注意改完代理之后要重新执行项目4》注意因为进行了基础设置,interceptors拦截,此时res已经是data数据了,而且用get方法时需要用params传递参数,若用post则原创 2020-06-04 15:22:23 · 592 阅读 · 0 评论 -
Nav-header部分之scssCSS预处理器
Nav-header部分之scssCSS预处理器一基础用法:可嵌套,能更好的表示层级关系,其他写法与普通css类似若想加伪类,则需在子级&:hover,如下所示 .header-menu{ width: 643px; padding-left: 209px; .item-menu{ display: inline-block;原创 2020-06-03 19:49:38 · 264 阅读 · 0 评论 -
Mock(虚拟数据)设置
Mock(虚拟数据)设置一.为什么要设置:开发阶段,为了高效率,需要提前Mock减少代码冗余,灵活插拔减少沟通、减少接口联调时间(前端工作主要两个方面:网页开发和交互)二. 三种方案1》本地创建json2》easy-mock平台3》集成Mock API三.详讲三种方案:(一)本地创建json文件1》创建一个静态的json文件,在public—mock—login.json2》在app.vue中 本地加载请求静态json文件的形式 export default原创 2020-05-26 12:01:09 · 1221 阅读 · 0 评论 -
接口环境设置
接口环境设置(理解不太好,希望以后会慢慢理解)一.总体思路:开发上线的不同阶段,需要不同的配置(做一个项目,需要经历很多阶段,比如开发,测试,预发布,线上等等,不同阶段,调用的后台接口不同,需要不同的配置)不同的跨域方式,配置不同打包的时候统一注入环境参数,统一管理环境,输出不同的版本包二.写代码:1》在main.js中,如果使用的是代理跨域axios.defaults.baseURL = '/api';即可若在代理跨域的条件下,有不同的请求,直接修改vue.config 里面的tar原创 2020-05-25 18:09:28 · 588 阅读 · 0 评论 -
接口错误拦截设置
接口错误拦截设置一.错误怎么提示,取决于后台的架构,后台分底层和业务层,后台把底层的错误抛出来,给业务层,业务层把开发者编写的错误,封装成用户能看懂得错误。前端负责把错误展示给用户二.接口错误拦截得种类:统一报错未登录同意拦截(在未登陆前,不允许加订单,购物车)请求值,返回值统一处理三.axios一个小知识点:同时发送多个请求:axios.all 或者 promise.all四.代码设置:在main.js中:import axios from 'axios'import Vue原创 2020-05-25 15:48:30 · 992 阅读 · 0 评论 -
Storage封装
Storage封装一.cookie,localstorage,sessionstorage三者区别:存储大小:Cookie 4K Storage 5M有效期:Cookie拥有有效期,localstorage永久存储,sessionstorage储存在内存中,随浏览器关闭而消失Cookie会发送到服务器端,存储在内存中(为什么浏览器和服务端会认识你呢?张三登录获取张三自己的用户信息,为什么能把张三的用户信息返回给张三呢,因为我们前端把cookie发送给服务器端,告诉他们我是张三)sessions原创 2020-05-25 12:36:32 · 486 阅读 · 0 评论 -
路由的封装注意点
路由的封装注意点每个组件的export default 里面一定要写name,代表这个组件children: [{ path: 'list', name: 'order-list', component: OrderList }设置子路由的时候,path:‘里面不要写/’,父路由要加3. 重定向:path: '/', name: 'home', component: Ho原创 2020-05-24 00:22:23 · 305 阅读 · 0 评论 -
基本插件安装
基本插件安装轮播 :swiper,vue-awesome-swipercss预处理器:(此项目选择sass)node-sass sass-loader图片懒加载:vue-lazyloadelement-uicookie:vue-cookie还有之前安装的axios,vuex,vue-routernpm i vue-lazyload element-ui node-sass sass-loader swiper vue-awesome-swiper vue-axios vue-cookie原创 2020-05-23 21:29:44 · 97 阅读 · 0 评论 -
项目基础架构搭建
项目基础架构搭建一.文件夹和文件插入静态资源文件夹:resource文件夹(后台接口等)public文件夹:存放大图片和mock数据src----assets文件夹:存放小图片,如icon图片,css图片等App.vue为根组件,不动,放一个<router-view></router-view>,嵌套其他组件src----api文件夹----index.js 承载整个项目api请求,把地址统一管理src----util文件夹----index.js 公共机制(金额格式原创 2020-05-23 01:03:07 · 470 阅读 · 0 评论 -
做项目之前前端需要做的需求分析
做项目之前前端需要做的需求分析熟悉文档、查看原型、读懂需求了解前端设计稿-设计前端业务架构了解后台接口文档-制定相关对接规范协调资源搭建前端架构原创 2020-05-22 21:37:02 · 3122 阅读 · 0 评论 -
前端常用的跨域解决方案
前端常用的跨域解决方案跨域是浏览器为了安全而做出的限制策略。浏览器请求必须遵循同源策略:同域名、同端口、同协议。【三种解决方式】:1、CORS跨域; 2、JSONP跨域; 3、代理跨域。一.CORS跨域:(主要修改后端代码实现)服务端设置,前端直接调用(说明:后台允许前端某个站点进行访问)Response Headers中:Access-Control-Allow-Credentials:true 如后端取不到你的Cookie,前端发请求时一定要设置这个选项为true。原创 2020-05-21 22:46:01 · 456 阅读 · 1 评论 -
Vue-DevTools的安装使用
Vue-DevTools的安装使用点击谷歌浏览器右上角更多工具-----扩展程序-----谷歌商店-----找到Vue-DevTools安装即可这种方法必须翻墙,如果可以翻墙很简单,要是不能,我们可以换一种方法https://github.com/vuejs/vue-devtools/tree/master①.可以直接download到本地解压后,到vue-devtools-master文件夹中,执行 npm install 这个过程很慢很慢 要慢慢等 不要着急②.然后 执行 npm r原创 2020-05-21 19:55:12 · 123 阅读 · 0 评论 -
git常见的命令行
git常见的命令行原创 2020-05-19 22:15:05 · 118 阅读 · 0 评论 -
使用vscode操作git的几种方法
vscode操作git一.首先安装两个插件:git history diff (看git操作的历史记录,谁干了什么)vue二.用vscode创建新分支:1.点击左下角分支:2.点击 create new。。然后输入名称(demo2) 就能创建成功3.点击小云朵:点击之后,git仓库 就多出来一个分支三.合并分支:加入要把master 合并到demo2 分支中先使左下角设定为demo2分支,然后ctrl+shift+p 上方弹出命令行点击然后左下角 白色圈圈旁边有个1 点击原创 2020-05-19 21:37:24 · 1275 阅读 · 0 评论 -
git仓库 与vscode连接 与ssh密钥的相关配置
github 与vscode和ssh密钥的相关配置一.vscode 连接github1.首先用vscode打开一个有.git的项目文件,打开编译器设置2.找到git.path 点击 settings.json3.把gitpath路径改为自己git.exe的安装路径4.这样就可以连接了,可以直接推送文件到git仓库中重启一下vscode编译器----------------------------------------------------------------------------原创 2020-05-19 20:31:06 · 9895 阅读 · 0 评论