Vue电商项目大体流程

Vue项目笔记

1.前期的准备工作

数据库采用的是mongodb

通过包资源安装下载 我们经常用的包资源库有 npm cnpm yarn

后端语言采用的 node.js 以及打包的软件为 gulp

前端采用 布局：vw+rem VueUi库 sass

2.创建express的项目

通过cnpm i express-generator -g 安装express
express 项目名 --view=ejs 创建项目
进入 项目的下 安装node-modules的插件
通过cnpm run start 来运行项目
通过安装 supervisor 来避免修改代码多次的启动服务器 修改package.json中的script 的选项

3.准备接口文件

在项目的根目录下创建api的文件夹
对主要的页面进行划分 address.js/banner.js/cart.js/order.js/pro.js/search.js/user.js
在文件夹中 导入express 的文件夹 导入express.Router

4.在app.js中注册接口使接口生效

引入模块要记得在下方来使用模块
通过localhost：3000 来测试端口是否有效果

3.链接数据库以及封装的增删改查封装

在sql的目录下 创建db.js的的文件夹 采用mongoose 的语句 对数据库进行连接，
在index.js文件夹中 对操作数据库的方法进行封装 采用promise的方法来解决数据的操作

4.创建数据的集合

在sql的目录下 创建文件夹 collection 该文件夹下创建 对应的主页面的数据库的集合 文件 在文件里链接数据库拿到数据库的集合 定义数据库的集合 在数据库中创建或者找到该集合

5.安装需要的软件以及编写后端接口

安装需要的cnpm i node-xlsx -S / cnpm i node-uuid -S 的模块
封装上传插入数据库的方法
后端封装获取数据的方法

6.生成后端的接口文档

cnpm i apidoc -g 来安装依赖
在package.json 的文件夹中 编写接口的文档 之后要重新启动服务器
在接口的文档中编写接口的特殊的文档
通过 apidoc -i api/ -o public/apidoc 来生成文档
通过localhos:3000/apidoc/

7.封装banner上传的接口

编写数据库的集合
封装图片的插入的地址
采用base64 的方法来转化数据库 返回前端的是一个base64 的图片的地址
设置上传轮播图的页面

vue前端的快速的原型的开发

1.安装架手架

cnpm install -g @vue/cli-service-global
cnpm i @vue/cli -g

2.创建项目

vue create 项目名
Manually select features 选择自己搭配
选中所需要的配置开发的项目为vue2.0 选中为sass / Standardconfig / In dedicates config fikes /
切换到 项目的目录下 cnpm run server 运行项目
访问localhost:8080 查看效果

3.项目的目录

public 页面的模版
src 前端的主场
assets 静态资源文件
components 自定义的组件
router 路由
store 状态管理器
views 页面
App.vue 主页面
main.js 入口文件

4.准备各个页面

首页+分类+购物车+我的 ---- views

5.配置页面的路由

我们使用vue + Vue Router创建单页面的应用 非常的简单 我们通过组合组件的程序 将组件映射到路由的 然后告诉vue router 我们在那么渲染他们

6.将组件映射到路由

使用Vue 的命名路由的方法 以及采用重定向的原理

7.设置基本的样式

基本的css 样式采用的是vw+rem 以及node.js的布局的方法

8.底部选项卡的切换

通过使用 router-link 来完成导航 通过传入 to 的属性来指定链接 他会默认的渲染成一个 a 标签 有时候需要将它渲染成标签的话 可以通过tag 的属性来设定

9.主页面的设定

在routers 中来设定他的路由
将底部的组件进行抽离 需要在抽离的组件的里定义一个顶级的标签 通过组件的各种父子的传参的方法
配置引入UI库 cnpm i babel-plugin-import -D cnpm i van -S
在babel.config.js文件中匹配文件
添加轮播图的组件 NAV导航 列表的组件

10.数据的操作

使用axios 来定义 他本身是基于promise 的 可以设定拦截器 以及请求的超时的设定
在页面中请求数据的时候 会遇到跨域的问题 可以使用axios 来处理他的跨域的问题
在页面中对数据进行渲染 通过Vue的双向绑定的原则

11.上拉加载的功能实现

当滚动条距离底部一定距离的时候 自动去渲染加载下一页的内容 通过Vue 的loading 和faished 的俩个变量来实现 当组件滚动的时候 出发load 的事件 将loading的设置为true 现在可以发起异步的请求并加载页面 数据更新以后将loading设置为false即可 如果数据全部加载完成后 直接将finshed 的值改为true 即可 注意⚠️因为页面布局的原因会产生高度塌陷的问题 要通过审查元素来解决

12.下拉刷新加载第一页的数据以及返回顶部

当下拉刷新的时候 重新加载主页的内容即可
通过v-show 和v-if 的方法来返回顶部
⚠️可以通过 ref 的来代替 dom 的操作在Vue 的世界中尽量不去使用dom 的操作

13.详情页面

每一个产品都需要一个详情的页面 详情的页面需要传一个id 唯一的字段 用来判断是哪一个数据 可以通过vue 的动态路由来实现 在开发者的工具中可以观察当前路由中携带的参数
跳转到详情的方法有俩种 声明条状 和编程式的跳转 我们采用声明式的跳转的方法
当你匹配一个路由的时候 参数会被设定到this.$route.params中 可以在每一个组件中来使用它
通过使用UI库来完成页面的布局

14.购物车

当用户想要加入购物车的时候
判断用户有么有登陆
如果用户没有登陆 直接跳转到登陆的页面，登陆成功后再次返回到详情的页面
当用户已经登陆了先判断当前的库存是不是为0 如果为0 那直接弹窗警告
如果有库存调用购物车的接口
如果要登陆 先要有账号 没有请先注册
注册成功后跳动登陆 并且存储用户的登陆的信息 id token 的值

15.注册

设计数据的集合 需要的字段为 userid username nickname password tel email avatar sex
发送短信验证码的 该项目采用的是阿里云的短信服务
注册密码时 短信需要进行加密 我们使用的 md5 的加密组件 cnpm i md5 -S
在所有的字段以及 信息填写完成后注册按钮才可以被点击

16.登陆

封装登陆的接口文档 添加token的信息 通过验证token 来验证用户的登陆的信息
cnpm i jsonwebtoken -S 生成token 的信息 ⚠️ token 的信息为秒
验证token 的信息 获取用户的token 的信息
验证短信登陆

17.订单

添加订单的地址 新用户的地址默认为添加地址 新增地址自动设定为默认的地址
如果用户没有默认的地址 那么预先起选中订单的地址 如果没有订单的地址 选择默认的地址 没有默认的地址 去让用户去新添加地址
地址是可以重复添加相同的数据的 不要判断它的唯一的值

18.支付

务流程说明：

（1）商户后台系统根据用户选购的商品生成订单。

（2）用户确认支付后调用微信支付【统一下单API】生成预支付交易；

（3）微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。
（4）商户后台系统根据返回的code_url生成二维码
（5）用户打开微信“扫一扫”扫描二维码，微信客户端将扫码内容发送到微信支付系统。

（6）微信支付系统收到客户端请求，验证链接有效性后发起用户支付，要求用户授权。

（7）用户在微信客户端输入密码，确认支付后，微信客户端提交授权。

（8）微信支付系统根据用户授权完成支付交易。

（9）微信支付系统完成支付交易后给微信客户端返回交易结果，并将交易结果通过短信、微信消息提示用户。微信客户端展示支付交易结果页面。

（10）微信支付系统通过发送异步消息通知商户后台系统支付结果。商户后台系统需回复接收情况，通知微信后台系统不再发送该单的支付通知。

（11）未收到支付通知的情况，商户后台系统调用【查询订单API】。

（12）商户确认订单已支付后给用户发货。

前端需要订单的基本的信息 产品信息 产品的id 交易的金额
期间需要安装随机的字符串的模版 cnpm i andomstring -S

签名生成的通用步骤如下：

第一步，设所有发送或者接收到的数据为集合M，将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串stringA。

特别注意以下重要规则：
◆ 参数名ASCII码从小到大排序（字典序）；
◆ 如果参数的值为空不参与签名；
◆ 参数名区分大小写；
◆ 验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
◆ 微信接口可能增加字段，验证签名时必须支持增加的扩展字段

第二步，在stringA最后拼接上key得到stringSignTemp字符串，并对stringSignTemp进行MD5运算，再将得到的字符串所有字符转换为大写，得到sign值signValue。
◆ key设置路径：微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置

将拿到的数据需要进行整合
微信支付的格式为xml 的格式 需要转化 cnpm i xml-js -S
生成二维码的地址 cnpm i qrcode -S
注意支付的订单的最长为32
点击支付的页面 跳转到支付的页面 那么对购物车的数据进行删除的操作
当用户支付完成后返回到支付成功的页面
会出现待发货 已发货 代签收 已签收 已收货 带评价的几种情况 就是数据多个平台之间的交互
当用户取消订单时 提醒用户是否要取消 返回的页面应该是购物车的页面
未完成的订单可以在订单的数据中查看

19.分类的页面

在分类中其实就是对数据库进行搜索的功能
默认的情况下是加载第一个分类的数据

20.状态管理器

vue 的状态的管理器符合单项数据流设计思想 - 结局了组件间耦合度的问题
多个视图依赖于同一个状态
来自不同组件的行为需要变更同一个状态
共享的状态存在于一个单一的数据源
唯一改变数据的方式就是显示的提交mutations
异步操作发生在组件，取得结果，提交mutations

state - 管理的状态
getters - state的计算属性
mutations - 唯一改变数据的方式
actions - 组件的异步操作，提交mutations
modules - 分模块