雲據變網站開發總結

網站中午名稱：雲據變

網站訪問地址：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