專案技術點總結

vue專案列表

pc端：工業雲官網

主要用的是element-ui元件庫，有兩種引入方式：一種時候全域性引入，還有一種是cdn 引入。

一、vue技術點

1、註冊登入頁面：

a、slot的運用；

b、vue一些屬性的運用，後端渲染的時候用v-html；

c、表單驗證，引入vue-validator， element-ui 配套的驗證外掛程式；

d、正規表示式：

定義全域性過濾器：

//

過濾非法字元
vue.filter('validate', function
(val) ,\/;' ]/im
if(reg.test(val)) 
else
})定義全域性方法validate 

//

name
export function
checkname (rule, value, callback) 
else
/.test(value))) 
else
}}//mobile
export function
checkmobile (rule, value, callback) 
else
$/g.test(value))) 
else
}}//email
export function
checkemail (rule, value, callback) 
else
else
}}//密碼
export function
checkpsw (rule, value, callback) 
else
$/.test(value))) 
else
}}//驗證碼
export function
checkverifycode (rule, value, callback) 
else}//
中文姓名
export function
checkchinaname (rule, value, callback) 
else
$/.test(value))) 
else
}}

主要是sass 的運用；

f、vuex

vuex的核心是store，store 是乙個大的容器，其中有大量的狀態state。vuex 其實就是狀態管理器，當其中的狀態發生改變的時候，相應的vue元件也會得到高效的更新。

vuex一般分為四個部分：

//

state檔案：index.js 
import actions from './actions'import mutations from './mutations'import getters from './getters'
//初始化state狀態
const state =,
baseinfodata: ,
homerequeststatus: 
}export 
default

// mutations_types.js  type檔案

//獲取首頁資料
export const get_home_data = 'get_home_data'export const get_home_data_ceshi = 'get_home_data_ceshi'export const loading_home_data = 'loading_home_data'
//獲取首頁資料成功
export const get_home_data_success = 'get_home_data_success'
//獲取首頁資料失敗
export const get_home_data_failed = 'get_home_data_failed'

//

處理同步邏輯
import * as type from './mutations_types'import storage from '../../../config/storagehelp'export 
default
, [type.get_home_data_success](state, data) 
else
},[type.get_home_data_failed](state, data) 
}

//

主要處理非同步邏輯
import * as type from './mutations_types'
//import moment from 'moment'
import from '../../../service/home'export 
default
, data) 
})}).
catch((ex) =>
})})
} else
})}, 1000);}},
[type.get_home_data_ceshi] (context, data) 
}

//

store 的計算屬性
//import state from '../../../store/state'
export 
default
, homedata: (state, getters, rootstate) =>,
homerequeststatus: (state, getters, rootstate) =>
}

g、生命週期

其中想提下this.$nexttick  dom渲染完後呼叫。例如新聞列表的渲染，在created中獲取了，但需要對渲染後的列表進行操作。

updatemessage() )

}

不建議使用！

g、元件間的傳值

WeChat 開源專案技術點總結整理

專案目錄結構圖 目錄 1.專案 build.gradle 檢視專案主要涉及到哪些第三方庫 2.將html文字轉換成能正常顯示的 3.啟動定時服務 一 專案 build.gradle 檢視專案主要涉及到哪些第三方庫 dependencies二 將html文字轉換成能正常顯示的text string d...

專案框架技術點概述

做高效專案經歷了兩次迭代，每次都有不一樣的收貨，每一次也都會有更深的認識。專案中整體採用了mvc客戶端呼叫wcf服務端的技術，類圖如下所示 以上的類圖相信有一定基礎的人是可以看懂的，這裡說一下涉及到的新的知識點 wcfwcf是由微軟開發的一系列支援資料通訊的應用程式框架，可以翻譯為windows 通...

工作專案技術總結

工作專案技術總結 1 超融合部分 hyperplatform 1 openstock 基礎與原理 2 資料中心部分 data center platform 1 資料中心網路架構 2 資料中心安全策略 3 資料中心資料標準建設總結 4 統一身份認證總結 原理，介面 5 服務匯流排部分建設總結 ebs...