文檔管理
1.1 文檔信息
| 文檔名稱 |
|
||
| 保密級別 |
|
文檔版本編號 |
|
| 制作人 |
|
制作日期 |
2018.1.19 |
| 復審人 |
|
復審日期 |
|
1.2 修改記錄
| 時間 |
版本 |
說明 |
修改人 |
|
|
|
|
|
|
|
|
|
|
內容摘要
接手項目參考文檔，輔助入門。
目的
熟悉並掌握
l 智慧農業開發流程
l 智慧農業開發規范
l 通過做簡單的示例完成頁面流程的開發
前提條件
項目是用vue搭建的，前端vue打開項目是需要一個環境運行的。
1.3 軟件環境
1、 開發環境：node
開發規范
一、 目錄結構
1、H5頁面文件位於E:\webapp\xingyaokeji\intelligent_agr目錄下;
目錄結構
├── index.html 入口頁面
├── build 構建腳本目錄
│ ├──build.js 生產環境構建（編譯打包）腳本
│ ├──check-versions.js 版本驗證工具
│ ├──utils.js 主要用來處理css類文件的loader
│ ├──vue-loader.conf.js 處理vue中的樣式
│ ├── webpack.base.conf.js webpack基礎配置
│ ├── webpack.dev.conf.js webpack開發環境配置
│ └── webpack.prod.conf.js webpack生產環境配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── dist 打包好的項目
│ ├── html 靜態問件
│ ├── conf nginx配置文件
│ └── 其他 nginx需要的文件
├── node_modules 項目依賴模塊
├── src 項目源碼目錄
│ ├── main.js 入口js文件
│ ├── app.vue 根組件
│ ├── components 公共組件目錄
│ ├── assets 資源目錄，資源會被wabpack構建
│ │ └── css 第三方css文件，全局css文件
│ │ └── font 字體
│ │ └── less 全局less
│ │ └── images 圖片
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── pages 前端頁面文件
│ │ └── index.vue
│ ├── vuex 應用級數據（state）
│ │ └── store.js 分組數據存貯
│ ├── service 公共服務文件
│ │ └── service.js 處理公共請求，響應數據
│ │ └── util.js 處理公共js操作方法
├── static 純靜態資源，不會被wabpack構建。
二、 文件名要求
文件名以小寫開頭，取有意義的英文名字，H5文件名與對應的JS文件名相同，命名以模塊名開頭加數字（該模塊第幾個文件），加一杠，以內容名結尾，如live1-ctrol.vue。
三、 文件格式
UTF-8格式
四、 頁面中id命名要求
除入口頁外，一個頁面就是一個Page，每個Page有唯一ID，該ID命名以模塊名開頭加一杠，以內容名結尾，如login-wrap
五、 H5文件內容要求
1、功能模塊的入口頁，需要包含基本類庫，以及入口頁對應的JS腳本，其他子頁面只有一個Page內容。
2、對沒有任何業務邏輯控制的頁面，可以直接跳轉。
3、對於有業務邏輯控制的頁面，應綁定鏈接事件方式，在事件中需要顯示loading層，轉到目標頁面后，再隱藏loading層。
4、彈框、select等需要大量代碼去實現，要以組件的方式引入。
六、 JS內容要求
1、需要用請求和公共方法的文件，要用import引入：
import store from '@/vuex/store'
import {_SendData,_SendDataRes} from '@/service/service.js';
2、子組件引入方式：
A.公共組件經常使用如： header,footer等會一起打包到公共js文件。
先import {xyHeader,xySide} from '@/components';
再暴露components: {xyHeader,xySide};
B.單獨組件，不是經常使用的，會單獨打包出來，需要引入自己加載出來。
'xyDrowDown': () => import('component/drowDown.vue')
3、暴露出去的部分，要按順序：
export default {
name: 'index', 名稱
components: {}, 組件
data() {return{}}, 數據
methods: {}, 操作方法
watch: {'checkboxModel': {}}, 監聽
computed : {"val" : function() {return "123";}} 計算屬性
beforeCreate: function () {}, 創建之前
created: function () {}, 創建完成
beforeMount: function () {}, 掛載之前
mounted: function () {}, 掛載完成
beforeUpdate: function () {}, 更新之前
updated: function () {}, 更新完成
beforeDestroy: function () {}, 銷毀之前
destroyed: function () {} 銷毀完成
}
七、 Css要求
1、css用less寫，.vue以局部css來寫<style lang="less" scoped></style>只作用於當前vue文件。
2、遇到經常公用的，比如百分比計算，一定要寫在全局var.less里面。
@theme：1800px;
.server-wrap>.footer{
bottom: @theme/24;
}
3、公共使用的css要單獨放在一個文件夾里（less.css）。
八、 Css字體要求
1.網頁采用百度字蛛的方式，根據需要查詢加入字體。
http://font-spider.org/
使用例子：
安裝完之后-到相應文件直接：font-spider index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'SourceHanSansCN-Light';
src: url('KaiGenGothicSC-Light.ttf');
/*src: url('src/css/font/SourceHanSansCN-Light.ttf');*/
/*src:*/
/*url('/src/css/font/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.woff') format('woff'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.ttf') format('truetype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.svg') format('svg');*/
font-weight: normal;
font-style: normal;
}
/*2.然后對元素正常使用font-family就可以：*/
body{
font-family: 'SourceHanSansCN-Light';
}
</style>
</head>
<body>
<div>
核心團隊
</div>
</body>
</html>
接口請求
1、請求用Axios ，Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
2、看后台需要配置post、get請求，目前只用這兩種,一個是取一個是貼，只需要讀取文件，put（PUT 往服務器上上傳文件）、delect（刪除）直接對數據進行操作相對不安全 。
設計概要
1、sessionStorage存貯token
使用sessionStorage只存一個會話，當瀏覽器關閉重新打開輸入時會重新保存token。
2、登錄安全（雙重驗證）
前端路由驗證：首先全局路由攔截router.beforeEach，看sessionStorage是否存在驗證。
http請求和響應驗證：看后台返回token是否過期，不過期就執行刪除sessionStorage 操作，並重新登錄。
....
頁面流程圖
