云据变网站开发总结

网站中午名称：云据变

网站访问地址：www.yunjubian.com

业务简介：用户能够购买大数据包，也能够后台编写代码，生成数据包供用户购买。

技术栈：VUE + Element-UI

参与人员：产品+设计+后端+前端（4人）

网站功能简单介绍：

前台：

（1）：用户基本功能【注册、登陆，修改密码，找回密码】

（2）：业务功能【自动化部署、采集模板、API即便、数据包集市，会员套餐】

后台：

（1）：用户基本功能【头像上传与修改、充值（ps：可支付宝充值，微信充值、银行卡充值）、提现】

（2）：业务功能【个人套餐、个人模板、个人API、个人数据包、私人定制】

开发过程：

万事开头难，搭建vue框架，先跑起来。项目目录有：【config、node_modules、project_static、public、store、utils】

# 工程目录文件说明

config # 打包配置文件

| |--utils # 打包工具方法，暂时只有获取本机ip地址方法

| |--webpack.base.js # webpack基本配置文件

| |--webpack.dev.js # 开发环境webpack配置文件

| |--webpack.prod.js # 生产环境webpack配置文件

release # 打包文件输出目录，会根据项目名及当前日期自动生成文件夹

node_modules # node模块目录

source_code # 工程源码目录。

|--product # 项目目录，每个文件夹对应一个单独的项目

| |--demo(以demo为例说明具体用法)

| | |--assets # 本次活动资源目录，目前为图片资源目录

| | |--components # 本次活动公共组件目录

| | |--config # 本次活动公共配置目录

| | |--pages # 本次活动路由对应页面目录

| | |--router # 路由配置目录

| | |--static # 本次活动静态资源，编译时不进行处理的资源都放这里

| | |--store # 基于vuex的状态管理模块

| | | |--index.js # 入口及store初始化

| | | |--mutation-types.js # mutation名称定义

| | | |--state.js # 根state

| | | |--mutations.js # 根mutation

| | | |--getters.js # 根getter

| | | |--actions.js # 根action

| | | |--modules # 子模块的store对象

| | |--App.vue # 本次活动根视图

| | |--main.js # 本次活动项目入口文件

| | |--index.html # 本次活动html模板文件

|--assets # 工程资源目录，目前为工程图片资源目录

| |--icon # icon图片存放目录

|--business # 工程公共业务目录

|--components # 工程公共组件库

|--config # 公共配置文件，如经常使用连接地址

|--project_static # 项目静态资源，编译时不进行处理的资源都放这里

|--public # 项目公共样式目录，统一使用.css文件，可使用PreCSS语法

|--utils # 公共库函数

| |--core # 工程核心层目录，底层文件，请勿随意更改

| |--addSecretVconsole.js # 动态增长vconsole文件

| |--dateFormat.js # 时间格式化处理

| |--encrypt.js # 网络传输加密处理

| |--Http.js # 网络请求服务，实现了对fetch的二次封装

| |--init.js # 项目初始化操做

| |--mockAction.js # 关于mock文件行为的处理

| |--Native.js # 与客户端操做封装处理

| |--setRem.js # rem单位初始化的处理

| |--utils.js # 其余零散功能

| |--vueExtend.js # vue扩展处理

| |--WeChat.js # 微信相关操做

.babelrc # babel配置文件（删除会出错）

package.json # package依赖配置

projectConfig.js # 项目配置文件（新建项目之后，首先须要配置这个文件）

README.md # 项目说明文件

webpack.config # webpack配置入口文件

开发中遇到的坑：

（1）图形验证码

问题：在用fetch获取后端接口，发送成功，请求成功，可是一直获取不到图片地址。

解决：后端须要跨域和带上cookie，fetch请求头配置mode: 'cors',credentials: 'include'

（2）代码编辑器

问题：引入的js文件过多，致使加载慢，打包大（我用的是codemirror代码编辑器）

解决：按需动态引入js文件模块和css模块,npm安装codemirror包

(3)充值问题

问题：微信须要生成二维码，用户扫描充值，支付宝须要跳转到生成的支付宝链接扫描支付

解决：微信须要用到qrcode.js，拿到后端返回的url地址，生成一个二维码图片展现在页面上，定时刷新，发送请求，根据后端返回的字段判断用户是否已经充值或者二维码失效等

支付宝充值，须要用到支付宝的 mapi.alipay.com/gateway.do? 拼接咱们的参数地址造成一个新的地址，跳转到这个地址便可。

微信代码：

$('#qrcode').qrcode({

render: "canvas", //也能够替换为table

width: 220,

height: 220,

text: code_url

});

支付宝代码：

this.out_trade_no = res.body.out_trade_no;

let URL = ' mapi.alipay.com/gateway.do?…;

let obj = res.body;

let url="";

for(let item in obj){

if( (item == 'notify_url') || (item == 'return_url')){

url+='&'+item+'='+encodeURIComponent(obj[item])

}else{

url+='&'+item+'='+obj[item]

}

}

URL +=url.substr(1);

window.location.href = URL