給前端枚舉

㈠ java後端的某個類跟資料庫交互的時候某個欄位是整型的，而跟前端交互的是字元串類型的

如果使用的是mybatis的話，可以通過枚舉類型進行轉換的。

public class EnumTypeHandler<E extends Enum<E>> extends BaseTypeHandler<E> {....｝

使用EnumTypeHandler自動給你轉，然後代碼當中 前端可以直接拿到enum的值（字元串），資料庫儲存的是數字~

給你參考一下，希望對你有幫助~

㈡ vue中使用枚舉enum

由於JavaScript並沒有提供enum關鍵字來建造枚舉對象，所以前端一直有很多硬編碼，這是非常不能令人容忍的，特別是在vue這種本身就代表優雅的框架開發下。

首先說明，目前是不能使用enum關鍵字來聲明枚舉，以下方式是個人自己編寫，也是本人覺得較為優雅的方式，由於ES6的限制，聲明方式也不完全像java中的enum

將如下Enum.js放入項目，隨便想放哪個目錄就放哪個目錄，依據項目結構而定，我的話放在common下

根據個人編碼習慣，我喜歡把枚舉類單獨放在一個文件夾下，這樣便於統一管理，比如我就統一放在項目目錄下的env文件夾下
舉例：創建 UserStatusEnum.js 引入Enum.js，創建UserStatusEnum類並繼承Enum類

這里要注意的是，枚舉對象要使用數組，屬性上下順序對應枚舉中數組內容的順序，比如這里code在desc上面，那麼就分別對應NORMAL中的一二位，這點會java的同學應該一目瞭然，當然，如果有多個填寫多個屬性便是，如果是沒有屬性的記得枚舉那裡也要寫成數組形式，只是不填值便可

打開控制台可以看到枚舉對象已經創建好了，直接食用便可

例：

㈢ 枚舉類型enum用法

枚舉類型enum的用法如下文所示：

㈣ 優雅的實現前端回顯字典枚舉值

Hello 大家好，這里是Anyin。

在我們日常的開發工作當中，肯定會遇到類似狀態、類型等欄位需要以中文的形式返回給前端。例如，在資料庫中性別是存儲man、woman，而在前端界面顯示要求是顯示成男、女。

在實現以上需求會有以下幾種方式

1.業務代碼或者get方法中轉義，即在業務代碼通過判斷然後轉換成對應的中文或者在返回的實體類中get方法中判斷返回對應的中文

2.所有的字典值入庫，通過資料庫left join 實現中文意思查詢，返回的時候添加一個中文的欄位

3.在spring mvc 返回的時候通過序列化轉換，但是需要在返回的實體類添加對應的註解元數據信息

4.前端拉取所有的字典類型和對應的值，在頁面渲染的時候自行處理，會在前端緩存暴露所有的字典數據

在以上4個方法中，第3種方式會比較合適，因為它會統一處理所有的字典值，並且屏蔽對業務代碼的影響，同時在安全性也有一定的保證。

在實現代碼之前，我們梳理下思路。

1.在spring mvc 把實體類序列化的時候我們進行一頓操作

2.以對象的形式返回對應的字典信息，並且欄位名不變，例如： status 欄位，實體類是一個 String 類型，返回前端的時候變為一個對象: status : { code: "enable", text: "啟用" }

3.通過自定義註解來指定是某個類型的字典值

4.通過 @JsonSerialize 註解指定自定義序列化器

根據以上思路，我們可以在 @JsonSerialize 註解上看到一個 using 的屬性，它指定了一個 Class<? extends JsonSerializer 的類型。

所以，我們可以自己定義一個序列化器繼承 JsonSerializer 類。

serialize 方法的 value 參數，就是我們需要轉為字典對象的code值。但是我們還缺少一樣信息，這個code值是屬於那個類型的字典，是屬於 sex 還是 status 類型的字典？

所以，這個類還要實現 ContextualSerializer 介面，從 BeanProperty 屬性中獲取對應的註解。

完整的 StringAsDictSerializer 類的代碼如下：

接著再新增一個自定義註解

這個自定義註解的 type 欄位即表示字典的類型，一般情況下資料庫的字典欄位在代碼都會有一個對應的枚舉類。

最後我們定義下需要返回給前端的字典對象

接下來，我們來測試下我們的代碼。在 controller 返回的實體類中，我們添加上對應的註解配置，如下：

使用postman返回結果：

以上，我們實現了字典枚舉值的前端字典回顯，你學廢了嗎？

相關源碼地址 Anyin Cloud[1]

[1] Anyin Cloud: https://gitee.com/anyin/anyin-cloud

㈤ 枚舉類型運算

enum
Days
{
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
};
enum
Months
:
byte
{
Jan,
Feb,
Mar,
Apr,
May,
Jun,
Jul,
Aug,
Sep,
Oct,
Nov,
Dec
};
默認情況下，枚舉中每個元素的基礎類型是
int。
可以使用冒號指定另一種整數值類型，如前面的示例所示。
有關可能的類型的完整列表，請參見
enum（C#
參考）。
以下是使用枚舉而不使用數值類型的好處：
明確為客戶端代碼指定哪些值是變數的有效值。
在
Visual
Studio
中，IntelliSense
列出定義的值。
如果未在枚舉數列表中指定元素的值，則值將自動按
1
遞增。
在前面的示例中，Days.Sunday
的值為
0，Days.Monday
的值為
1，依此類推。
創建新的
Days
對象時，如果不顯式為其賦值，則它將具有默認值
Days.Sunday
(0)。
創建枚舉時，應選擇最合理的默認值並賦給它一個零值。
這便使得只要在創建枚舉時未為其顯式賦值，則所創建的全部枚舉都將具有該默認值。
如果變數
meetingDay
的類型為
Days，則只能將
Days
定義的某個值賦給它（無需顯式強制轉換）。
如果會議日期更改，可以將
Days
中的新值賦給
meetingDay：

㈥ 枚舉是什麼麻煩告訴我

1.枚舉 (enumeration)  值類型的一種特殊形式，它從 System.Enum 繼承，並為基礎基元類型的值提供備用名稱。枚舉類型有名稱、基礎類型和一組欄位。基礎類型必須是一個內置的有符號（或無符號）整數類型（如 Byte、Int32 或 UInt64）。欄位是靜態文本欄位，其中的每一個欄位都表示常數。所使用的語言給每個欄位都分配一個基礎類型的特定值。 2.枚舉(enum)  枚舉是一個被命名的整型常數的集合, 枚舉在日常生活中很常見。  例如表示星期的SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY,  SATURDAY, 就是一個枚舉。  枚舉的說明與結構和聯合相似, 其形式為:  enum 枚舉名{  標識符[=整型常數],  標識符[=整型常數],  ...  標識符[=整型常數],  } 枚舉變數;  如果枚舉沒有初始化, 即省掉"=整型常數"時, 則從第一個標識符開始, 順  次賦給標識符0, 1, 2, ...。但當枚舉中的某個成員賦值後, 其後的成員按依次  加1的規則確定其值。  例如下列枚舉說明後, x1, x2, x3, x4的值分別為0, 1, 2, 3。  enum Num{x1, x2, x3, x4}x;  當定義改變成:  enum Num  {  x1,  x2=0,  x3=50,  x4,  }x;  則x1=0, x2=0, x3=50, x4=51  注意:  1. 枚舉中每個成員(標識符)結束符是",", 不是";", 最後一個成員可省略  ","。  2. 初始化時可以賦負數, 以後的標識符仍依次加1。  3. 枚舉變數只能取枚舉說明結構中的某個標識符常量。  例如:  enum Num {  x1=5,  x2,  x3,  x4,  };  enum strig x=x3;  此時, 枚舉變數x實際上是7。  3.枚舉（pascal) 隨著計算機的不斷普及，程序不僅只用於數值計算，還更廣泛地用於處理非數值的數據。例如：性別、月份、星期幾、顏色、單位名、學歷、職業等，都不是數值數據。 在其它程序設計語言中，一般用一個數值來代表某一狀態，這種處理方法不直觀，易讀性差。如果能在程序中用自然語言中有相應含義的單詞來代表某一狀態，則程序就很容易閱讀和理解。也就是說，事先考慮到某一變數可能取的值，盡量用自然語言中含義清楚的單詞來表示它的每一個值，這種方法稱為枚舉方法，用這種方法定義的類型稱枚舉類型。]

㈦ Java中枚舉類型怎麼賦值

publicenumPath{
	PATH1("/home/acer/logs1"),
	PATH2("/home/acer/logs2"),
	PATH3("/home/acer/logs3"),
	PATH4("/home/acer/logs4");

	privateStringpath;

	Path(Stringpath){
		this.path=path;
	}

	publicStringgetPath(){
		returnpath;
	}
	
	//測試方法
	publicstaticvoidmain(String[]args){
		System.out.println(Path.PATH1.getPath());
		System.out.println(Path.PATH2.getPath());
		System.out.println(Path.PATH3.getPath());
		System.out.println(Path.PATH4.getPath());
	}
}

㈧ 前端開發的基本方法

CSS部分

盒子邊傾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止點擊事件/滑鼠事件「穿透」

div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }

用來控制元素在移動設備上使用滾動回彈效果

.main{
-webkit-overflow-scrolling: touch;
}

可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況

文字漸變效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

實現圓弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中檢測數組的方法

(1)、typeof操作符

這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符

這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字元串操作

• 字元串轉化toString()

• 字元串分隔split()

• 字元串替換replace()

• 獲取長度length

• 查詢子字元串 indexOf

• 返回指定位置的字元串或字元串編碼 charAt charCodeAt

• 字元串匹配 match

• 字元串拼接concat

• 字元串的切割或提取slice() substring() substr()

• 字元串大小寫轉化 toLowerCase toUpperCase

• 字元串去空格 trim() 用來刪除字元串前後的空格

其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重

• const str = '11122223333'const uniqueStr = [...new Set(str)].join('')



常用的數組操作

1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：

• arr.rece(callback,[initialValue])



• 跳過第一個索引。如果提供initialValue，從索引0開始。



callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，

數組去重：

• const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]



常用對象方法

1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性

• var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})



5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf

• function a(){}


• var b = new a();console.log(a.prototype.isPrototypeOf(b));//true



安卓監聽可視區域變化，讓輸入框移動至可視區域

• if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();


• }, 0);


• }


• });


• };



vue中平滑滾動到某個位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加參數

• /**


• * 向URL追加參數


• * @function stringifyUrlArgs


• * @param {string} url - URL路徑


• * @param {object} params - 參數對象


• * @return {string}


• const stringifyUrlArgs = (url, params) => {


• url += (/?/).test(url) ? '&' : '?'


• url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url


• }



解析URL參數

• /**


• * 解析URL參數


• * @function parseUrlArgs


• * @param {string} url - 字元串


• * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {


• a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a


• }, {}) return args


• }



好用的JavaSrcipt庫與模塊（包）

日期時間處理庫

1、monent.js
2、day.js
day相對於monent要輕量許多

高精度數學運算

number-precision

• NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio



實用工具庫

Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等

㈨ 前端規范一（命名規范）

前端規范一（命名規范）

1、小駝峰命名法（lowerCamelCase） ：第一個單詞以小寫字母開始，第二個單詞的首字母大寫，例如：firstName、lastName。

2、大駝峰命名法（CamelCase） ：每一個單詞的首字母都採用大寫字母，例如：FirstName、LastName。

3、下劃線命名法（snake_case）：下劃線命名法也叫蛇形法，全由小寫字母和下劃線組成，在兩個單詞之間用下滑線連接。例如：first_name。

4、中劃線命名法（kebab-case）：中劃線命名法也叫串式命名法，各個單詞之間通過下劃線「-」連接。例如：first-name。

強制使用：中劃線命名法

命名規則：1、文件名不得含有空格

2、文件名建議只使用小寫字母，不使用大寫字母

3、文件名包含多個單詞時，單詞之間建議連詞線 ( - ) 分隔

4、有復數結構式，要使用復數

示例：login 、 error-page、 icons

強制使用：全部大寫字母

為了醒目，某些說明文件的文件名，可以使用大寫字母

示例：README

補充說明: README 標准

◎ 項目簡介。
◎ 注意事項。
◎ 線上的示例地址（測試、正式）。
◎ 支持運行的環境。
◎ 必要的依賴准備，以及如何搭建。
◎ 項目的安裝指南。
◎ 相關的文檔鏈接。
◎ 相關人員的聯系方式。

README.md 示例：

強制使用：小駝峰命名法

命名規則：前綴為動詞，見名知意

1、onXxx 監聽事件的回調

2、handleXxx 處理事件

3、getXxx 獲取某個值

4、setXxx 設置某個值

常見場景：

a、事件處理：

(1).事件主動監聽採用 onXxx ,被動處理使用handleXxx

示例：onXxxSubmit: '提交表單'
handleXxxSizeChange: '處理分頁頁數改變'
handleXxxPageChange: '處理分頁每頁大小改變'
onXxxKeydown: '按下鍵'

(2). 其他命名：元素+click、 元素+change、select+范圍

示例：selectAllXxx: '選擇所有'
xxxCellClick: '當某個單元格被點擊時會觸發該事件'
xxxSortChange: '當表格的排序條件發生變化的時候會觸發該事件'

b、增刪改查處理：

增: addXxx 添加子項

createXxx 創建大項

刪: deleteXxx 真刪除

removeXxx 偽刪除

改：updateXxx

查: getXxx 獲取原始數據需要修改

fetchXxx 原始數據

示例：getUserList: '獲取用戶列表', fetchToken: '取得Token', deleteUser: '刪除用戶', removeTag: '移除標簽', updateUserInfo: '更新用戶信息', addUser: '添加用戶', createAccount: '創建賬戶'

c、API介面函數：

get: getXxxApi

post: postXxxApi

patch: patchXxxApi

delect: delectXxxApi

域名：xxxUrl

一般屬性變數 強制使用：小駝峰命名法

1、布爾值

命名規則：前綴為判斷性動詞

hasXxx 判斷是否含有某個值。true：含有此值； false：不含有此值

isXxx 判斷是否為某個值。true：為某個值； false：不為某個值

示例：isShow: '是否顯示', isLoading: '是否處於載入中'， hasToken: '是否包含Token',

2、數組命名

命名規則：使用名詞+List組合

示例: userList: '用戶列表'

3、私有屬性變數

命名規則：前綴為下劃線(_)後面和變數命名一樣。

4、枚舉變數 \textcolor{red}{強制使用：大駝峰命名法}

枚舉的屬性使用全大寫字母，單詞間用下劃線隔開。

示例：let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };

5、常量： 強制使用：使用全大寫字母，單詞間用下劃線隔開

強制使用：大駝峰命名法

命名規則： 可參考vue官網風格指南

例如： 1、按照功能來命名

2、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。

3、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。

示例：components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

強制使用: 中劃線命名法

命名規則：

1.class、id 、標簽、屬性的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用中劃線 「-」 連接

2.class必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名。

3.元素 id 必須保證頁面唯一。

4.禁止創建無樣式信息的 class

示例：

1、盡量不要縮寫、簡寫的單詞。除了 template => tmp、message => msg、image => img、property => prop 這些單詞已經被公認的縮寫

2、可讀性強的命名優先於簡短的命名

3、命名長度最好在 20 個字元以內，避免多長帶來的閱讀不便

4、命名要有具體的含義，避免使用一些泛指和無具體含義的詞

5、不要使用拼音，更不要使用中文

6、正則表達式用 Exp 結尾

7、ref：使用Ref結尾

㈩ Spring Boot 前端請求參數自動映射到枚舉，後端響應JSON數據自動解析枚舉

1. 表單請求方式
請求URL： http://xxx.xxx.com/form?type=1
方法form()接收到請求參數為Type[code="1", desc="類型1"]枚舉對象
響應數據：{"testId": 1,"testName": "test1","type": {"code": "1","desc": "類型1"}}

2.JSON請求方式
請求URL： http://xxx.xxx.com/json
請求參數：{"type":"TYPE_1"}
方法json()接收到請求參數為Type[code="1", desc="類型1"]枚舉對象
響應數據：{"testId": 1,"testName": "test1","type": {"code": "1","desc": "類型1"}}

注意：這種比較特殊，沒有特殊配置，參數值需要是枚舉名稱，如果參數值是1，會根據枚舉類的ordinal屬性來關聯，原因應該是解析json用的是jackson，用不到spring的Formatter和Converter之類的機制。
有解決方案的朋友歡迎留言~~ (❤ ω ❤)