PHPer快速上手VUE——边学边练2

忘记保存了，损失了写好的文章。痛哭流涕中。。。

项目简单描述：通过微信分享一款商品，让用户能够订购下单。并且分享可以获得一定的奖励。采用团购形势。

项目需求：

A、非登录用户，能够查看到用户列表。【需要的知识：aiox vue-resource通过api获取商品信息】

B、点击订购后，如果没有登录，跳转到登录，使用微信或者手机验证码登录。【需要的知识：微信sdk 短信sdk】

C、用户输入或者选择地址。【需要的知识：js-cookie vuex状态管理】

D、用户提交订单，进行支付。【需要的知识：crypto xxtea】

E、用户登录行为。【需要的知识：jwt token】

F、用户分享。【需要的知识：二维码生成】

首先，我们把这些知识点罗列出来，进行系统架构的设计。其中A、B、D、E、F都是独立功能模块，就是C，状态管理【就理解为文件存储变量值处理，session】这一块需要仔细的规划。

jwt参阅文章：

http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html

https://baijiahao.baidu.com/s?id=1608021814182894637&wfr=spider&for=pc

vuex状态参阅文章：

https://blog.csdn.net/qq_33599109/article/details/79392520

vue组件参阅文章：

https://baijiahao.baidu.com/s?id=1611840038337425724&wfr=spider&for=pc

https://cn.vuejs.org/v2/guide/components.html

组件快速理解：就相当于php的类，只是涉及到传值及监听

因为是速成，我自己也不去探究太深的东西。我就简单的实现软件规划如下：

A、api调用：\api

B、静态文件: \assets

C、组件： \components

E、常量： \const

F、页面： \page

G、路由: \router

H、服务器交互： \server

I、状态管理： \store

J、第三方及扩展: \moment

以上目录接口参阅了ecshop的h5版。