搭建框架
新建项目
(跳过的之后需要补上:wx登录,好评中评差评,添加商品数量的防抖83,购物车角标,优惠券,级联选择地址)
目录结构
刚创建好是这样子的:
自己添加一些:
- api
- common
- components
- utils
- store
集成uView
uni里没有npm,所以要自己配置,配置方法参考官网
集成vuex
- token
- 平台(多终端)
- 用户id
在main引入
集成样式文件
集成网络请求插件
uni.request —> request插件 -> 配置
底部tabbar
工具类封装
- 封装了一个对页面跳转的方法
- 分为导航栏跳转
- 和页面中点击的一些跳转
- 还加了对参数的处理
- 提示框
插播一条思考
我不知道一个项目真正开发过程中,是这么多东西都准备好再进行开发的,还是说,先搭架子,然后再一步一步来,你看这个老师讲的,页面还没有呢,已经建了这么多东西了,有的并且是暂时都用不到的,我觉得这样不ok,我是想学怎么样一步步搭好的
开发页面咯
首页网络获取数据
首页组件动态化展示
轮播图-》注意那获取图片真实动态高度
组件拆分
搜索界面
页面级别组件,放在page里,记得要配置路径
搜索之后的商品列表页
搜索之后,就要跳到商品列表页
集成mescroll.js
商品排序
商品详情页
商品详情页
sku组件的使用、
商品评价页
商品列表页
二级分类
“我的”页面
user 已登录-未登录 login和register 登录页面
用户登录
注册登录登陆后操作携带token token状态管理
退出登录清空缓存
jwt
处理购物车
- 判断有没有东东
- 进入页面先获取购物车数据
- 模式切换
- 选中取消选中
- 加入前验证是否已存在
- 计算选中的金额
订单页面
checkout
我的服务好多页面
收货地址页面 表单验证
创建订单表order
踩坑,表名写了order
后台管理
vite安装项目
yarn create @vitejs/app demoname
架子
一开始不要考虑太复杂, 先做登录
目录结构
集成路由
yarn add vue-router@4
集成vuex
install 创建入口文件(分模块 在全局引入
less
yarn add less less-loader
views
封装axios
token存本地
安装store库
路由
检查登录 没登录就重定向到登录页
路由抽出来,方便权限管理
主页
做个主页,然后搭建登录页,在做登陆注册
权限
没有登录,重定向到登陆界面
安装nprogress
登录
把登录放在store里面,还有那些操作巴拉巴拉
- 登录 -》 权限(检查token) -》
开始自己的尝试,我发现能登陆成功,但是怎么都不跳转
然后就想到,是token没有写进去
然后检查之后,顺利解决!!!
proxy
api baseURL
404
神奇的bug
火狐不被卡,chrome被找不见的debugger卡住
主页面了
layout
菜单
点击路由要发生跳转,绑定点击事件
二级菜单阻止事件冒泡
主面板
集成echarts
table
(注意插槽写法!)
(角色列表:略)
到23课了,现在把管理员列表ok了