首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
项目一 :卖茶叶(小鹿线P4 课程 前后端一起的)
外包小前端
创建于2021-07-26
订阅专栏
卖茶叶项目笔记和面试提炼点: github 项目地址:https://github.com/beishzhu/toutiao-m
等 4 人订阅
共39篇文章
创建于2021-07-26
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
卖茶叶 :项目考核文案 面试要用 待梳理成自己的
这是一个电商类项目,功能是比较多的, 从首页开始介绍:首页里面有涉及到插件的滑动,分类页面引入了betterScroll作为上下左右分类数据联动, 用到了keep-alive 和 nextTick n
项目 [ 真机测试 , 打包上线]
一 真机测试 手机浏览器运行项目: 手机和电脑端 使用同一网络 或 同一wifi vue.config.js 文件 添加 host 自己电脑查询 ipconfig 的 ipv4地址 module.ex
token: 过期时间处理:有瑕疵,问题到时候懂了 再解决吧(老师讲课也很恶心,越到后面越不像样,抽个烟都要录在视频里告诉你,那一边讲课一边抽烟就错漏百出)
后端 一 index.js 判断超过 60秒的时间函数 二 在加入购物车接口的时候用了一下getTokenTime 这个函数,并跟 更新数据库的 token 三 userQuery.js 设置toke
路由导航守卫:被限制的 路由地址 【购物车 地址管理 分类】 全局守卫 router.beforeEach((to, from, next) => {}
通过to.name 来限制: // 路由导航守卫 ==>全局守卫 router.beforeEach((to, from, next) => { let nextRoute = ["Cartlist"
(五)支付完之后:在跳转的页面完成判断 交易状态 :请用无痕浏览器测试
请用无痕浏览器测试 状态参考:https://www.cnblogs.com/suiyisuixing/p/7467123.html 开始对接支付宝:返回支付链接(PC 支付接口 参考) https:
(四)支付流程(前端):提交订单,对接沙箱支付宝 nodejs版
前端: // 提交订单: async submitOrder() { let res = await http.$axios({ url: "/api/updateOrderStatus", meth
(四):支付流程(后端):提交订单,对接沙箱支付宝 nodejs版
进入支付宝沙箱环境:用自己的支付宝扫码登录 https://developers.alipay.com/dev/workspace/register?from=http%3A%2F%2Fopenhom
(三)支付流程:提交订单 订单号 和 被选的订单都放在query传参 不友好
前端代码: oriderList 和 orderId 是通过购物车页面 去结算通过query传进来的,传进来的数据 放在兄弟组件中,否则不会实时刷新 购物车页面 去结算传参 接收query参数 后端
(二)支付流程 :地址选择 功能 用了bus 兄弟传值, activated生命周期 并在路由加了 meta标签
问题 this.$router.back() 和 this.$router.go() 返回上一页之前要把当前也的值传递过去,怎么传?看图第2 和 第3 步 利用兄弟之间传值 前端代码 一 提交订单页面
(一)支付流程:去结算(生成定单号)和 解决 提交订单页面 :商品总数 和 商品列表刷新后 数据消失问题
 vant
前端->思路: 1.点击删除按钮:执行删除事件,采用的是vant组件中有删除事件, vant组件删除事件 默认有一个参数content ,就是前端地址相关信息,同时记得传递 token 前端代码 后端
地址管理:编辑地址 (编辑地址 和 添加地址使用的是同一个vue) 使用了 vant mounted处理data中数据相互依赖问题 ,Object.assign
前端->思路: 编辑地址 和 新增地址使用的是同一个vue组件页面, 发送编辑地址请求,编辑成功后 跳转到 我的地址页面 前端完整代码:编辑地址 后端思路 1.获取前端传递过来的参数:token 获取
地址管理 :我的地址 ,渲染后端数据库地址内容到页面
前端思路: 前端代码 后端思路: 后端代码 页面详情地址管理 :我的地址地址管理 :我的地址地址管理 :我的地址地址管理 :我的地址
地址管理 :添加地址 vant 和 扩展运算传参data: { ...content, },
前端->思路: 采用vant插件 的地址编辑模块 + 省市区模块 注意: 1.1 地址编辑模块 data是不包含 省市区数据的,默认为空数组,要自己去 省市区模块 那里复制数据过来 1.2 data中
购物车(当商品数量 改变:增加 或减少 ) 采用 vant 的事件:@change="changeNum($event,item.id)",同步到后端数据库
思路: 这个vant 计步器的加减 ,有一个事件:当绑定值变化时触发的事件,change 前端 后端接口:先根据前端传过来的id, 这里注意一点,多个function里的内容不要写相同的名字,否则容易
购物车(单个删除 和 批量删除)vuex (filter indexOf, findIndex splice,) 有点懵逼 特别是 组合在一起用的时候
购物车(单个删除 和 批量删除)vuex (filter indexOf, findIndex splice,) 有点懵逼 特别是 组合在一起用的时候
购物车:全选 全不选 单选 计算总价和件数(vuex 中用到:state, mutations,getters, actions) (难ε=(´ο`*)))唉)
思路: 前端: 将后端返回的数组 通过循环,将数组的每个对象 都添加一个属性 checked 默认为 true 前端渲染的时候,就可以直接把 第一步添加的 checked属性 动态绑定到 对应的选项标
购物车 列表页(读取自己当前登录用户的 购物车数据 从数据库获取来渲染)
思路 前端: 1.购物车页面一进来要要发送一个请求获取列表数据,传递token过去 将后端返回的数据保存到vuex中,这里新建了一个单独的 购物车的vuex 为:cartlist.js文件 后端 写一
购物车 添加购物车数据到数据库
思路 前端 点击添加购物车数据,发送带token 和 商品id 的请求, 后端 写一个接口,并接收后端传递过来的 商品id 和 token,其中token要进行解析 根据前端传递过来的token解析后
token (后端生产) 用于:商品详情页:点击加入购物车,判断是否登录,没有登录跳转到 登录页
思路: jsonwebtoken:https://www.npmjs.com/package/jsonwebtoken 进入后端服务 执行安装: npm install jsonwebtoken 引入
下一页