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

    |     2019年5月4日   |   学习偶记   |     评论已关闭   |    299

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

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

项目需求:

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版。

 

噢!评论已关闭。