给前端枚举

㈠ 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之类的机制。
有解决方案的朋友欢迎留言~~ (❤ ω ❤)