AngularJS引導(dǎo)程序

gularJS的首選樣式表是Twitter Bootstrap，Twitter Bootstrap是目前的的前端框架。

引導(dǎo)程序

你可以在你的AngularJS應(yīng)用中加入Twitter Bootstrap，你可以在你的<head>元素中添加如下代碼：

<link rel =“ stylesheet” href =“ // maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

如果站點(diǎn)在國內(nèi)，建議使用百度靜態(tài)資源庫的Bootstrap，代碼如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

Bootstrap類解析

元素	引導(dǎo)類	定義
<div>	容器	內(nèi)容容器
<表格>	表	表格
<表格>	表?xiàng)l紋	帶條紋背景的表格
<按鈕>	btn	按鈕
<按鈕>	btn成功	成功按鈕
<span>	甘草	字形圖標(biāo)
<span>	甘草鉛筆	鉛筆圖標(biāo)
<span>	glyphicon用戶	用戶圖標(biāo)
<span>	Glyphicon保存	保存圖標(biāo)
<表格>	水平形式	水平表格
<div>	形式組	表單組
<標(biāo)簽>	控制標(biāo)簽	控制器標(biāo)簽
<標(biāo)簽>	col-sm-2	跨越2列
<div>	col-sm-10	跨越10列

JavaScript代碼解析

范圍屬性	用途
$ scope.fName	模型變量（用戶名）
$ scope.lName	模型變量（用戶姓）
$ scope.passw1	模型變量（用戶密碼1）
$ scope.passw2	模型變量（用戶密碼2）
$ scope.users	模型變量（用戶的數(shù)量）
$ scope.edit	當(dāng)用戶點(diǎn)擊創(chuàng)建用戶時設(shè)置為true。
$ scope.error	如果passw1不等于passw2設(shè)置為true
$ scope.incomplete	如果有一個主軸為空（length = 0）設(shè)置為true
$ scope.editUser	設(shè)置模型變量
$ scope.watch	監(jiān)控模型變量
$ scope.test	驗(yàn)證模型變量的錯誤和初步

者：徐小夕

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/2Bk8lkRCNyaTWYtIB0oYVg

ue3 PC端頁面開發(fā)規(guī)范

1.開發(fā)環(huán)境

Vue開發(fā)環(huán)境：

軟件	版本
node.js	v16.14.0
vue	@vue/cli 5.0.1

UI 框架：

UI框架	版本
Element Plus	^2.0.5
PrimeVue	^3.12.1

其他組件：

其他組件	版本
axios	^0.26.1
moment	^2.29.1
sweetalert	^2.1.2

以上列出的是開發(fā)所需要的重要部分的軟件及其版本號。

項(xiàng)目依賴代碼：（package.json）

"dependencies": {
    "@element-plus/icons-vue": "^1.1.1",
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.0.5",
    "jsencrypt": "^3.2.1",
    "mitt": "^3.0.0",
    "moment": "^2.29.1",
    "primeflex": "^3.1.3",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.1",
    "sweetalert": "^2.1.2",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-vue-components": "^0.17.21"
  }

2.名稱解釋

多頁面開發(fā)

多頁面開發(fā)是指項(xiàng)目經(jīng)過構(gòu)建后生成的是多個頁面，也就是 Vue 的多入口開發(fā)。

頁面

組件的容器。

組件

頁面組成的一部分，可以多個頁面復(fù)用的代碼。

路由組件

通過路由來展現(xiàn)的組件，只有把一個頁面當(dāng)作一個SPA應(yīng)用的情況下，才會存在路由組件。

3.開發(fā)規(guī)范

3.1原則

1.PC端項(xiàng)目全部采用多頁面方式；

2.UI組件以使用 PrimeVue 為主，使用 Element Plus為輔，其他 UI 一律不允許使用；

3.2設(shè)計(jì)原則

1.字體家族

font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

2.字體規(guī)范

參照如下表格：

位置	加粗	顏色	大小
主標(biāo)題	加粗	#666	16px
次級標(biāo)題	加粗	#666	14px
小標(biāo)題	加粗	#666	12px
正文		#666	14px
輔助文字		#999	12px
失效文字		#ccc	12px
鏈接文字		#2db7f5	12px

3.全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。

在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語言，常用的全局邊距有32px、30px、24px、12px。

4.內(nèi)容邊距

頁面中不同的內(nèi)容之間的間距。

由于我們使用開源UI組件進(jìn)行開發(fā)，在內(nèi)容邊距的設(shè)置上保持開源UI組件自身的默認(rèn)設(shè)置即可。

3.3工程目錄結(jié)構(gòu)

工程目錄結(jié)構(gòu)示意圖

說明：

1.module 目錄中存放業(yè)務(wù)的對應(yīng)頁面，要嚴(yán)格按照業(yè)務(wù)系統(tǒng)的模塊劃分進(jìn)行管理。

2.一個頁面至少由三個文件構(gòu)成：html、js、vue，如果把該頁面作為SPA應(yīng)用來開發(fā)，則需要在對應(yīng)的模塊中增加頁面名稱的目錄，并建立 components、router 目錄用于存放組件和路由。

3.在 module 目錄下只能存在兩個頁面：登錄頁 index 和登錄后首頁（導(dǎo)航框架頁）major。

構(gòu)建腳本示例：

vue.config.js

pages: {
    index: {
      // 入口文件，相當(dāng)于單頁面的 main.js
      entry: 'src/module/index.js',
      // 模板文件
      template: 'src/module/index.html',
      // 編譯后 dist 目錄下輸出的文件，可以包含子目錄
      filename: 'index.html'
    },
    major: {
      entry: 'src/module/major.js',
      template: 'src/module/major.html',
      filename: 'major.html'
    },
    頁面名稱: {
      entry: 'src/module/模塊名稱/頁面名稱.js',
      template: 'src/module/模塊名稱/頁面名稱.html',
      filename: '/模塊名稱/頁面名稱.html'
    },
    ......
  }

說明：

子頁面一定要將 filename 項(xiàng)設(shè)置為帶有模塊名稱的路徑名，否則會構(gòu)建到根目錄下

3.4注釋

1.必須進(jìn)行注釋的情況：

公共組件使用說明
各組件中重要函數(shù)或者類說明
復(fù)雜的業(yè)務(wù)邏輯處理說明
特殊情況的代碼處理說明，對于代碼中特殊用途的變量、使用了某種算法或思路等需要進(jìn)行注釋描述

2.單行注釋普通方法一般使用單行注釋// 來說明該方法主要作用 3.多行注釋組件使用說明，和調(diào)用說明

示例：

<!--公用組件：組件名稱
/**
* 組件名稱
* @module 組件存放位置
* @desc 組件描述 
* @author 組件作者
* @date 2017年12月05日17:22:43
* @param 參數(shù)說明
* @param 參數(shù)說明
* @emit 觸發(fā)事件
* @return 返回值
* @example 調(diào)用示例
* 
*/
-->

3.5編碼規(guī)范

盡量按照ESLint格式要求編寫代碼

使用ES6風(fēng)格編碼源碼

定義變量使用let
定義常量使用const

使用export,import 模塊化

避免 this.$parent

無需將 this 賦值給 component 變量

調(diào)試信息console.log() 使用完及時刪除

3.6命名規(guī)范

本規(guī)范使用駝峰式命名(camelCase)和下劃線命名法(UnderScoreCase)

普通變量	駝峰式命名
類變量	駝峰式命名	itemOf[數(shù)據(jù)表名]oldItemOf[數(shù)據(jù)表名]
類屬性	下劃線命名	與數(shù)據(jù)表字段名保持一致
查詢類變量	駝峰式命名	queryFieldOf[數(shù)據(jù)表名]
查詢類屬性	駝峰式命名	query[字段名]
表格列表	駝峰式命名	tableDataOf[數(shù)據(jù)表名]
數(shù)據(jù)分頁	駝峰式命名	totalOf[數(shù)據(jù)表名] currentPageOf[數(shù)據(jù)表名] pageSizeOf[數(shù)據(jù)表名]
對話框	駝峰式命名	titleOf[數(shù)據(jù)表名] dialogVisibleOf[數(shù)據(jù)表名]
選項(xiàng)	駝峰式命名	[業(yè)務(wù)關(guān)鍵字]Options
函數(shù)	下劃線命名法
事件函數(shù)	下劃線命名法	[UI組件名]_[UI組件類型]_[事件]ed 如：city_select_changed
函數(shù)參數(shù)	駝峰式命名
組件封裝	駝峰式命名	須根據(jù)封裝的類型進(jìn)行合理命名對話框采用Dialog，彈出框采用Popover等；格式：[動作][業(yè)務(wù)][類型]，如：EditorContractDialog
路由path	下劃線命名法	全部使用小寫字母
路由name	駝峰式命名

數(shù)據(jù)表名：是數(shù)據(jù)表設(shè)計(jì)時命名的，在此處的數(shù)據(jù)表名不包含前綴。

3.7數(shù)據(jù)校驗(yàn)與刪除

1.數(shù)據(jù)校驗(yàn)一律不允許使用任何校驗(yàn)框架來實(shí)現(xiàn)，采用if語句硬編碼方式來實(shí)現(xiàn)，不符合條件的數(shù)據(jù)彈出對話框進(jìn)行提示；

2.數(shù)據(jù)刪除一律彈出確認(rèn)對話框要求用戶確認(rèn)后執(zhí)行刪除動作；

3.彈出提示信息或確認(rèn)信息一律使用 sweetalert 組件進(jìn)行操作，主要原因是其代碼量比較小；

彈出提示信息示例：

// 帶有確認(rèn)按鈕
swal('錯誤', '請選擇要編輯的數(shù)據(jù)!', 'error')
// 停留1秒后自動消失
swal({title: "提示!", text: "操作成功!", icon: "success", button: false, timer: 1000});
swal({title: "提示!", text: "操作失敗!", icon: "error", button: false, timer: 1000});

彈出確認(rèn)信息示例：

swal({
        title: "確認(rèn)",
        text: "確實(shí)要刪除您選擇的數(shù)據(jù)嗎？",
        icon: "warning",
        buttons: ["取消", "確定"],
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          // ...
        }
      });

3.8日期數(shù)據(jù)

在數(shù)據(jù)提交時，日期時間型數(shù)據(jù)必須轉(zhuǎn)換為字符串，格式：

日期格式：YYYY-MM-DD

時間格式：HH24:MI:SS

時間戳格式：YYYY-MM-DD HH24:MI:SS

日期格式轉(zhuǎn)換可以直接使用封裝好的 utils.js 中的函數(shù)進(jìn)行處理：

dateToString (date, format)
stringToDate (sDate, format)

3.9Rest請求

產(chǎn)品的Rest請求只使用Post和Get，Get請求只適用于文件下載，其余一律使用Post請求。

前端在進(jìn)行Rest請求時，一律調(diào)用封裝號的 utils.js 中的postRequest函數(shù)進(jìn)行請求。

postRequest (url, data)

對于無輸入?yún)?shù)的請求，一律將data設(shè)置為{tmp: null}進(jìn)行請求

3.10表單數(shù)據(jù)（類屬性）初始化

數(shù)組初始化為[]；

Boolean類型初始化為true|false；

其他類型均須初始化為null

3.11組件封裝

公共組件必須封裝為獨(dú)立的組件；

對于既可以采用封裝的方式來實(shí)現(xiàn)，也可以在一個獨(dú)立的vue文件中實(shí)現(xiàn)的，視業(yè)務(wù)邏輯復(fù)雜度進(jìn)行開發(fā)，如果預(yù)計(jì)的代碼量超過500行，則進(jìn)行拆分，將列表、對話框、彈出框、Tab頁內(nèi)容等進(jìn)行獨(dú)立開發(fā)。

組件封裝規(guī)范：

原則上不使用組件屬性，如果需要屬性進(jìn)行分類則可以使用屬性，但需要注意，組件屬性不能修改其值，只負(fù)責(zé)單項(xiàng)傳遞數(shù)據(jù)，原則上不使用組件屬性雙向傳遞數(shù)據(jù)

組件封裝需實(shí)現(xiàn)一個初始化函數(shù)和0個或n個回調(diào)事件：

初始化函數(shù)命名：

init([組件參數(shù)])

回調(diào)事件命名：

call_back_[事件結(jié)果名稱]

如果只有一個單一的回調(diào)事件必須省略[事件結(jié)果名稱]，只使用call_back

組件調(diào)用：this.$refs.[ref_name].init()

觸發(fā)回調(diào)：emit('call_back')

3.12服務(wù)代理

服務(wù)代理規(guī)定訪問后端接口的配置方法；使用webpack配置中的proxy項(xiàng)來實(shí)現(xiàn)，不允許將訪問地址寫成固定的字符串捆綁到請求中；