学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
3. 如果想按照价格排序,可以定义一个新的数组,存储
(1)将购物车静态界面放到Cart.vue中
(2)✨✨✨使用vuex管理购物车数据✨✨✨
- 在store中新建index.js,并在main中引入
- 在store文件夹下新建state.js(数据)、mutations(同步操作)、mutations-type(约束名称)、actions(异步操作)、getters(与state中数据相关的计算属性)。将vuex进行拆分。
并在index.js中进行汇总输出
- 在state.js中定义购物车商品对象
- 在mutations-type中定义方法名称
- 在mutations中实现添加方法
- 在界面上进行操作,调用ADD_GOODS添加商品方法
① 向购物车中添加的事件很多地方都要调用,因此借助消息订阅(pubsub-js),在组件中跨级通信。
② 安装pubsub-jsnpm install pubsub-js -S
③ 在Home.vue中,监听添加到购物车消息
④ 在YourLikeItem.vue中发布消息
⑤ 其他需要添加到购物车的地方操作相同
(3)借助vant中的反馈组件Toast文字提示,提示用户添加成功
- 在vant.js中引入
- 在需要提示的地方使用
(4)定义购物车数据本地化的接口
(5)因为购物车有一个数量标志要试试变化,所以在初始DashBoard的时候,就应该调用INIT_SHOP_CART初始化购物车
(6)增加计算属性,通过计算shopCart每个shop的num和,利用vant的tabbar的info属性,控制购物车数量商标
(7)在购物车界面遍历shopCart并在界面上显示
(8)购物车数量加减操作
- 首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作
- 在Cart.vue中配置删除商品的方法
(9)直接将ADD_GOODS引入到Cart.vue中进行商品数量的 增加
(10)商品单选事件处理
-
首先在mutations中定义单选事件
-
在Cart.vue中对单选a标签进行事件绑定
(11)商品全选事件处理
-
首先在mutations中定义全选事件
-
在cart中使用计算属性selectedAll标识是否全选,并通过改属性控制是否全选点击事件
(12)总价计算
利用计算属性,通过shopCart中checked为true的数据,计算商品总价
(13)去结算数量
通过计算属性,计算选中的商品数量
(14)清空购物车
- 在mutations中定义清空购物车方法
- 在Cart.vue中引入并使用清空购物车方法
(1)配置填写订单路由
-
填写订单界面应该是和dashboard平行的,所以在views目录下新建order子文件夹,并在order文件夹下新建Order.vue
-
在router文件夹内的index.js中配置路由
-
在购物车中点击去结算的时候,转到订单界面
将去结算的a标签改为router-link
标签,并用tag标识其原本标签名,并用to表示其跳转路由
- 引入NavBar实现导航栏
① 在vant.js中引入NavBar
② 在Order.vue中进行引入配置
- 引入ContactCard 实现收货地址
① 在vant.js中引入ContactCard
② 在Order.vue中进行引入配置
(2)配置我的地址界面
- 在order文件夹下,新建children文件夹,children文件夹下新建MyAddress.vue
- 配置路由
- 在我的订单中,实现点击选择收货地址跳转路由
- 引入vant组件AddressList实现我的地址
① 在vant.js中引入AddressList
② 在MyAddress.vue中进行引入配置
③ MyAddress.vue中,对div进行绝对定位,结合Order.vue中的transition,形成动画效果
(3)配置地址编辑界面和配置新增地址界面
- 在MyAddress.vue同级目录下,新建children文件夹,并在children文件夹内新建AddAddress.vue和EditAddress.vue
- 在index.js中配置路由
- 借助AddressEdit实现编辑地址和新增地址
① 引入AddressEdit
② 在EditAddress.vue中配置并实现编辑地址(添加地址类似)
③ 在我的地址中增加路由跳转
(4)配置下方Cell单元格 —— 借助vant中Cell组件
- 在vant.js中引入Cell和CellGroup
- 在Order.vue中进行定制
① 送达时间
② 商品展示
③ 支付方式
④ 备注
⑤ 商品金额、配送费
(5)配置下方提交栏——SubmitBar 提交订单栏
- 引入SubmitBar
- 在Order.vue中使用
(1) 导航 —— vant的nav-bar
(2)头像及其他信息 —— vant的cell
(3)我的订单、查看所有订单 —— vant的cell
(4)待支付、待收货、待评价、售后/退款 —— vant的Grid, GridItem
-
引入
-
使用
(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell
(1)建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由
views新建文件夹login,并在子文件夹login中新建Login.vue和SelectLogin.vue,并将静态界面配置好
(2)在vuex的state中存储用户数据,并存储在本地
首先在state中,在vuex中声明userInfo数据。通过判断本地userInfo中是否存在token数据,来判断是否需要登录。
(3)在购物车中进行判断是否显示选择登陆方式界面
(4)在我的中进行判断是否显示选择登陆方式界面
(5)给Login.vue登录界面配置独立路由
(6)在选择登陆方式界面,给手机登录配置路由跳转,并设置tag
(7)通过属性及时间控制登录界面方式及密码显示方式
(1)短信验证码、手机验证码登录
-
在service/api/index.js中,实现接口
-
在Login.vue中调用接口
-
调用登录接口
- 登录成功后,将用户信息保存到本地
① 在vuex中实现将用户信息保存到本地以及获取用户信息的方法
(2)🎡🎡🎡🎡🎡异步操作不可以使用mutations了,需要使用actions是🎡🎡🎡🎡🎡
手机号码验证登录的时候是异步操作了,不能直接通过mutations操作vuex,必须通过actions异步转同步。
- 在actions中定义同步方法,并调用mutations中的异步方法
- 在Login.vue中,使用异步方法
-
页面配置数据与input绑定
-
点击登录判断有没有值
- service/api/index.js中实现pwdLogin用户名、密码登录方法
- Login中调用方法
-
新增界面
-
配置路由
-
界面中引用,配置转场动画
-
在service/api/index中实现自动登录/退出登录实现
- 在mutations中实现重置用户数据
-
在UserCenter中实现退出登录
-
在dashBoard中对用户数据进行同步
① 在actions中实现获取用户信息自动登录接口
② 在DashBoart.vue中实现自动登录
(1)设置登录后才能向购物车中添加数据
(2)商品添加到购物车后,首先将商品同步到服务器,再存储到本地
-
定义添加到购物车接口
-
在添加购物车的时候,将商品存放在本地之前,首先将商品同步到服务器
(3)退出登录的时候清空购物车
(1)自动登录
从服务器获取用户购物车数据,进行本地化并在购物车中显示
(2)商品修改从服务器同步修改
(3)清空购物车
(1)地址相关接口
(2)选择地址获取账户地址并显示
(3)新增地址
(4)编辑地址
- 在改变路由的时候,通过拼接url传递参数
获取的时候通过this.$route.query获取参数
-
将传递过来的信息在编辑界面显示——通过addressInfo绑定
-
修改地址
-
删除地址
(5)选择地址后放到填写订单界面
(1)商品选中、删除生成订单商品等接口的实现
(2)购物车中单选、全选等与服务器同步
(1)根据总额度判断能否点击去支付
(2)商品清单页面配置
-
新建OrderDetail.vue组件
-
配置路由
-
结合vant——Cart组件实现商品清单展示
(3)其他细节处理
(1)订单接口以及支付接口慎用
(2)提交订单
(3)生成支付二维码——借助vue-qriously
(4)验证用户是否支付成功
(5)后续处理
25. 待支付、待收货——借助vant的tab、tabs实现
- 配置路由
- 界面实现
- 在config文件夹下新建rem.js
// 设置基准
const BASE = 15;
(function (doc, win) {
let docEl = doc.documentElement,
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
recall = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = BASE * (clientWidth / 320) + ‘px’;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recall, false);
doc.addEventListener(‘DOMContentLoaded’, recall, false);
})(document, window);
- 在main.js中引入
在配置swiper轮播图选中样式的时候,始终不生效。
在样式上,加上/deep/或者>>>即可
在请求数据的时候,可能组件已经加载完成,此时可能就会导致一些BUG(比如轮播图跳转到最后一页后不再继续跳转、轮播图刚开始在最后一页)。这时候可以加上一个正在加载功能,当数据全部请求完成后再加载组件。
- 在vant.js中引入vant的Loading组件
- 在需要显示加载中的界面(Home.vue)中进行配置
- vant.js中引入Image组件
- 配置图片
- 在config文件夹下新建文件夹filters,配置全局过滤器
- 在main.js中引入全局过滤器
- 在全局中使用
| moneyFormat
即可使用过滤器
有些页面不需要每次进入的都是都重新加载,可以keep-alive,当下拉的时候进行刷新重新加载即可。
针对首页和分类进行页面缓存
- 在router中的index.js配置路由的时候,给需要添加缓存的界面增加一个meta属性,并在其中配置keepAlive:true
- 这这两个路由的出口——DashBoard.vue中增加一个keep-alive标签,里面存放需要进行缓存的路由,外面放不需要进行缓存的路由。是否需要缓存根据meta中的keepAlive属性进行判断。
-
安装集成
npm install better-scroll -S
-
滚动原理:外层嵌套div,上下预留空间,监听点击滚动等事件
-
使用方法:
① 在需要使用的地方引入组件
② 初始化better-scroll(等到数据完全请求完成后,再初始化better-scroll)。一般初始化滚动框架的时候,是在下一个周期执行(使用this.$nextTick(()=>{})
)确保在下一个执行周期前初始化。
③ 在父组件上进行初始化
在刷新界面的时候,不应该每次都回到首页
解决方法:进行本地缓存
在config文件夹下的global.js中,写三个方法
-
在项目根目录新建文件
vue.config.js
-
在vue.config.js中写入以下代码
其中’/api’路由中被匹配到的路径,target是存在跨域的目标路径,changeOrigin为设置允许跨域,pathRewrite是重写路径,因为目标路径中原本就存在/api,所以将路径中第一个/api重写为空
加时间戳确保请求不同
37. 借助pubsub.js实现消息的发布订阅的时候,一定要注意发布、订阅信息的销毁
一定要及时销毁,不然在调用发布订阅的时候,消息队列中所有的消息都会被执行
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
M6Ly9ibG9nLmNzZG4ubmV0L0thaVNhckg=,size_16,color_FFFFFF,t_70#pic_center)
其中’/api’路由中被匹配到的路径,target是存在跨域的目标路径,changeOrigin为设置允许跨域,pathRewrite是重写路径,因为目标路径中原本就存在/api,所以将路径中第一个/api重写为空
加时间戳确保请求不同
37. 借助pubsub.js实现消息的发布订阅的时候,一定要注意发布、订阅信息的销毁
一定要及时销毁,不然在调用发布订阅的时候,消息队列中所有的消息都会被执行
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-FHYxuFsS-1715461748455)]