前端开发规范
前端开发规范
前端代码规范
Front Standard Guide
前端 JS 项目开发规范
规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。
引自《阿里规约》的开头片段：
----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
一、编程规约
(一)命名规范
1.1.1 项目命名
全部采用小写方式， 以中划线分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem
1.1.2 目录命名
全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例： script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名
正例： head-search / page-loading / authorized / notice-icon
反例： HeadSearch / PageLoading
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名page-one / shopping-car / user-management
反例： ShoppingCar / UserManagement
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式， 以中划线分隔
正例： render-dom.js / signup.css / index.html / company-logo.png
反例： renderDom.js / UserManagement.html
1.1.4 命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即音命名使纯拼方式也要避免采用
正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
杜绝完全不规范的缩写，避免望文不知义：
反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。
(二)HTML 规范 （Vue Template 同样适用）
1.2.1 HTML 类型
推荐使用 HTML5 的文档类型申明： .
规定字符编码
IE 兼容模式
规定字符编码
doctype 大写
正例：
Page title
1.2.2 缩进
缩进使用 2 个空格（一个 tab）
嵌套的节点应该缩进。
1.2.3 分块注释
在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式
正例：
1.2.4 语义化标签
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
正例
反例
1.2.5 引号
使用双引号(" ") 而不是单引号(’ ') 。
正例： ``
反例： ``
(三) CSS 规范
1.3.1 命名
类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称
不推荐：
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推荐:
.heavy {
font-weight: 800;
}
.important {
color: red;
}
1.3.2 选择器
1)css 选择器中避免使用标签名
2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。
不推荐:
.content .title {
font-size: 2rem;
}
推荐:
.content > .title {
font-size: 2rem;
}
1.3.3 尽量使用缩写属性
不推荐：
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推荐：
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
1.3.4 每个选择器及属性独占一行
不推荐：
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推荐：
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
1.3.5 省略0后面的单位
不推荐：
div{
padding-bottom: 0px;
margin: 0em;
}
推荐：
div{
padding-bottom: 0;
margin: 0;
}
1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式
不推荐：
#header{
padding-bottom: 0px;
margin: 0em;
}
推荐：
.header{
padding-bottom: 0px;
margin: 0em;
}
(四) LESS 规范
1.4.1 代码组织
1)将公共less文件放置在style/less/common文件夹
例:// color.less,common.less
2)按以下顺序组织
1、@import;
@import "mixins/size.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
1.4.2 避免嵌套层级过多
将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
不推荐：
.main{
.title{
.name{
color:#fff
}
}
}
推荐：
.main-title{
.name{
color:#fff
}
}
(五) Javascript 规范
1.5.1 命名
1) 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
反例： _name / name_ / name$
2) 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
正例： localValue / getHttpMessage() / inputUserId
****其中 method 方法命名必须是 动词 或者 动词+名词 形式****
正例：saveShopCarData /openShopCarInfoDialog
反例：save / open / show / go
****特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）****
add / update / delete / detail / get
附： 函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
3) 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。
正例： MAX_STOCK_COUNT
反例： MAX_COUNT
1.5.2 代码格式
1) 使用 2 个空格进行缩进
正例：
if (x < y) {
x += 10;
} else {
x += 1;
}
2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。
说明：任何情形，没有必要插入多个空行进行隔开。
1.5.3 字符串
统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：
正例:
let str = 'foo';
let testDiv = '
';
反例:
let str = 'foo';
let testDiv = "
";
1.5.4 对象声明
1)使用字面值创建对象
正例： let user = {};
反例： let user = new Object();
2) 使用字面量来代替对象构造器
正例：
var user = {
age: 0,
name: 1,
city: 3
};
反例：
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;
1.5.5 使用 ES6,7
必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。
必须强制使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等
1.5.6 括号
下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
正例：
if (condition) {
doSomething();
}
反例：
if (condition) doSomething();
1.5.7 undefined 判断
永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。
正例：
if (typeof person === 'undefined') {
...
}
反例：
if (person === undefined) {
...
}
1.5.8 条件判断和循环最多三层
条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。
1.5.9 this 的转换命名
对上下文 this 的引用只能使用’self’来命名
1.5.10 慎用 console.log
因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能
二、Vue 项目规范
(一) Vue 编码基础
vue 项目规范以 Vue 官方规范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。
请仔仔细细阅读 Vue 官方规范，切记，此为第一步。
2.1.1. 组件规范
1) 组件名为多个单词。
组件名应该始终是多个单词组成（大于等于 2），且命名规范为KebabCase格式。
正例：
export default {
name: 'TodoItem'
// ...
};
反例：
export default {
name: 'Todo',
// ...
}
export default {
name: 'todo-item',
// ...
}
2) 组件文件名为 pascal-case 格式
正例：
components/
|- my-component.vue
反例：
components/
|- myComponent.vue
|- MyComponent.vue
3) 基础组件文件名为 base 开头，使用完整单词而不是缩写。
正例：
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
正例：
components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整单词）
反例：
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了缩写）
5) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。
正例：
|
反例：
|
6) 组件的 data 必须是一个函数
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。
正例：
export default {
data () {
return {
name: 'jack'
}
}
}
反例：
export default {
data: {
name: 'jack'
}
}
7) Prop 定义应该尽量详细
必须使用 camelCase 驼峰命名
必须指定类型
必须加上注释，表明其含义
必须加上 required 或者 default，两者二选其一
如果有业务需要，必须加上 validator 验证
正例：
props: {
// 组件状态，用于控制组件的颜色
status: {
type: String,
required: true,
validator: function (value) {
return [
'succ',
'info',
'error'
].indexOf(value) !== -1
}
},
// 用户级别，用于显示皇冠个数
userLevel：{
type: String,
required: true
}
}
8) 为组件样式设置作用域
正例：
X
反例：
X
9) 如果特性元素较多，应该主动换行。
正例：
反例：
2.1.2. 模板中使用简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
正例：
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
反例：
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
2.1.3 指令都使用缩写形式
指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)
正例：
反例：
2.1.4 标签顺序保持一致
单文件组件应该总是让标签顺序保持为 `
正例：
...
反例：
...
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。
2.1.7 script 标签内部结构顺序
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods
2.1.8 Vue Router 规范
1) 页面跳转数据传递使用路由参数
页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。
正例：
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
2) 使用路由懒加载（延迟加载）机制
{
path: '/uploadAttachment',
name: 'uploadAttachment',
meta: {
title: '上传附件'
},
component: () => import('@/view/components/uploadAttachment/index.vue')
},
3) router 中的命名规范
path、childrenPoints 命名规范采用kebab-case命名规范（尽量vue文件的目录结构保持一致，因为目录、文件名都是kebab-case，这样很方便找到对应的文件）
name 命名规范采用KebabCase命名规范且和component组件名保持一致！（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
// 动态加载
export const reload = [
{
path: '/reload',
name: 'reload',
component: Main,
meta: {
title: '动态加载',
icon: 'icon iconfont'
},
children: [
{
path: '/reload/smart-reload-list',
name: 'SmartReloadList',
meta: {
title: 'SmartReload',
childrenPoints: [
{
title: '查询',
name: 'smart-reload-search'
},
{
title: '执行reload',
name: 'smart-reload-update'
},
{
title: '查看执行结果',
name: 'smart-reload-result'
}
]
},
component: () =>
import('@/views/reload/smart-reload/smart-reload-list.vue')
}
]
}
];
4) router 中的 path 命名规范
path除了采用kebab-case命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。如下示例
目的：
经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件
{
path: '/file',
name: 'File',
component: Main,
meta: {
title: '文件服务',
icon: 'ios-cloud-upload'
},
children: [
{
path: '/file/file-list',
name: 'FileList',
component: () => import('@/views/file/file-list.vue')
},
{
path: '/file/file-add',
name: 'FileAdd',
component: () => import('@/views/file/file-add.vue')
},
{
path: '/file/file-update',
name: 'FileUpdate',
component: () => import('@/views/file/file-update.vue')
}
]
}
(二) Vue 项目目录规范
2.2.1 基础
vue 项目中的所有命名一定要与后端命名统一。
比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！
2.2.2 使用 Vue-cli 脚手架
使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。
2.2.3 目录说明
目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。
src 源码目录
|-- api 所有api接口
|-- assets 静态资源，images, icons, styles等
|-- components 公用组件
|-- config 配置信息
|-- constants 常量信息，项目所有Enum, 全局常量等
|-- directives 自定义指令
|-- filters 过滤器，全局工具
|-- datas 模拟数据，临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口，临时存放
|-- plugins 插件，全局使用
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- themes 自定义样式主题
|-- views 视图目录
| |-- role role模块名
| |-- |-- role-list.vue role列表页面
| |-- |-- role-add.vue role新建页面
| |-- |-- role-update.vue role更新页面
| |-- |-- index.less role模块样式
| |-- |-- components role模块通用组件文件夹
| |-- employee employee模块
1) api 目录
文件、变量命名要与后端保持一致。
此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
api 中的方法名字要与后端 api url 尽量保持语义高度一致性。
对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。
正例：
后端 url： EmployeeController.java
/employee/add
/employee/delete/{id}
/employee/update
前端： employee.js
// 添加员工
addEmployee: (data) => {
return postAxios('/employee/add', data)
},
// 更新员工信息
updateEmployee: (data) => {
return postAxios('/employee/update', data)
},
// 删除员工
deleteEmployee: (employeeId) => {
return postAxios('/employee/delete/' + employeeId)
},
2) assets 目录
assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case
|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles
3) components 目录
此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase
|components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case
4) constants 目录
此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)
目录结构：
|constants
|-- index.js
|-- role.js
|-- employee.js
例子： employee.js
export const EMPLOYEE_STATUS = {
NORMAL: {
value: 1,
desc: '正常'
},
DISABLED: {
value: 1,
desc: '禁用'
},
DELETED: {
value: 2,
desc: '已删除'
}
};
export const EMPLOYEE_ACCOUNT_TYPE = {
QQ: {
value: 1,
desc: 'QQ登录'
},
WECHAT: {
value: 2,
desc: '微信登录'
},
DINGDING: {
value: 3,
desc: '钉钉登录'
},
USERNAME: {
value: 4,
desc: '用户名密码登录'
}
};
export default {
EMPLOYEE_STATUS,
EMPLOYEE_ACCOUNT_TYPE
};
5) router 与 store 目录
这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。
router 尽量按照 views 中的结构保持一致
store 按照业务进行拆分不同的 js 文件
6) views 目录
命名要与后端、router、api 等保持一致
components 中组件要使用 PascalCase 规则
|-- views 视图目录
| |-- role role模块名
| | |-- role-list.vue role列表页面
| | |-- role-add.vue role新建页面
| | |-- role-update.vue role更新页面
| | |-- index.less role模块样式
| | |-- components role模块通用组件文件夹
| | | |-- role-header.vue role头部组件
| | | |-- role-modal.vue role弹出框组件
| |-- employee employee模块
| |-- behavior-log 行为日志log模块
| |-- code-generator 代码生成器模块
2.2.4 注释说明
整理必须加注释的地方
公共组件使用说明
api 目录的接口 js 文件必须加注释
store 中的 state, mutation, action 等必须加注释
vue 文件中的 template 必须加注释，若文件较大添加 start end 注释
vue 文件的 methods，每个 method 必须添加注释
vue 文件的 data, 非常见单词要加注释
2.2.5 其他
1) 尽量不要手动操作 DOM
因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。
2) 删除无用代码
因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。
你可能感兴趣的:(前端开发规范)
day15｜前端框架学习和算法
universe_01
前端 算法 笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
vue element 封装表单
影子信息
vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天
浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）
笙囧同学
java 前端 状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：
[email protected] 各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能
孤寒者
Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？
web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码
秋千码途
架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）
岫珩
Java 后端 java 开发语言 学习 Java 时间安排 学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
大厂都在用的前端缓存策略，你掌握了吗？
AI架构全栈开发实战笔记
前端 缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
26. 什么是雪碧图，作用和原理了解吗
yqcoder
前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
H5UI微信小程序前端框架实战指南
ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Ubuntu安装LAMP
L_h1
测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！
coding随想
JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析
代码简单说
2025开发必备(限时特惠) 架构 人工智能 Coze Studio 架构 AI Agent 开发平台 全栈 AI 工程化 图解架构
CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
页面开发样式和布局入门：Vite + Vue 3 + Less
页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
推客系统小程序机构版开发上线全攻略（2025年最新版）
vx_qutudy
推客小程序 推客系统开发 推客系统源码
一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
网络安全第14集
不灭锦鲤
web安全 安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
怎么判断一个DAPP是否真正去中心化
判断一个DAPP（去中心化应用）是否真正去中心化，需要从多个维度进行考察。以下是关键评估标准：1.区块链依赖程度✅真正去中心化：核心逻辑和数据处理完全依赖智能合约，运行在区块链上（如以太坊、Solana等）。❌伪去中心化：依赖中心化服务器处理关键数据或业务逻辑，仅前端去中心化。2.智能合约控制权✅去中心化：合约代码开源，无管理员密钥（adminkey）或可升级后门，治理由DAO（去中心化自治组织）
Web前端交互利用Python跟大模型操作
哥本哈士奇
前端 交互 python
Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
尚硅谷微服务尚医通前端npm报错
尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0，弹幕里说降级npm到6.多就能安装，经过许久挣扎还是各种报错，最后通过一下办法解决解决办法:不需要降低npm版本，办法如下这里需要使用到cnpm：1.导入下载好到的项目2.安装cnpm：npminstallcnpm-g3.安装node-sass：cnpminstallnode-sass4.继续安装：cnpminode-sass-D5.删除
Layui核心语法快速入门指南
bemyrunningdog
layui 前端 javascript 开发语言
Layui基本语法学习指南Layui是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法：一、模块加载机制（核心基础）//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
Vue 工程化开发入门
dawn191228
前端学习 vue.js 前端 javascript 前端框架
文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
Python,C++,go语言开发社会犯罪人群回归社会跟踪与辅助管理APP
Geeker-2025
python c++ golang
开发一款用于**社会犯罪人群回归社会跟踪与辅助管理**的App，结合Python、C++和Go语言的优势，可以实现高效的数据处理、实时的跟踪监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python+Go）-**编程语言**：-**Python**：用于数据处理、机器学习（如风险评估、行为预测）、脚本编写等。-**Go**：用
java线程的无限循环和退出
3213213333332132
java
最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。
突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。
希望帮助刚学java线程的童鞋
package thread;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date
tomcat 容器
BlueSkator
tomcat Web servlet
Tomcat的组成部分 1、server
A Server element represents the entire Catalina servlet container. (Singleton) 2、service
service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。
3、connector
一个connector
php递归,静态变量,匿名函数使用
dcj3sjt126com
PHP 递归函数 匿名函数 静态变量 引用传参
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Current To-Do List</title>
</head>
<body>
属性颜色字体变化
周华华
JavaScript
function changSize(className){
var diva=byId("fot")
diva.className=className;
}
</script>
<style type="text/css">
.max{
background: #900;
color:#039;
将properties内容放置到map中
g21121
properties
代码比较简单：
private static Map<Object, Object> map;
private static Properties p;
static {
//读取properties文件
InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
[简单]拼接字符串
53873039oycg
字符串
工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：
import java.util.HashMap;
import java.uti
Struts2学习
云端月影
最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。
配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。
使用Convention插件，你需要将其JAR文件放
Java新手入门的30个基本概念二
aijuans
java 新手 java 入门
基本概念: 1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。 2.OOP中最重要的思想是类,类是模板是蓝图,
jedis 简单使用
antlove
java redis cache command jedis
jedis.RedisOperationCollection.java
package jedis;
import org.apache.log4j.Logger;
import redis.clients.jedis.Jedis;
import java.util.List;
import java.util.Map;
import java.util.Set;
pub
PL/SQL的函数和包体的基础
百合不是茶
PL/SQL编程函数 包体显示包的具体数据 包
由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,
函数;
函数:PL/SQL中的函数相当于java中的方法;函数有返回值
定义函数的
--输入姓名找到该姓名的年薪
create or re
Mockito(二)--实例篇
bijian1013
持续集成 mockito 单元测试
学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。
比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
精通Oracle10编程SQL(7)编写控制结构
bijian1013
oracle 数据库 plsql
/*
*编写控制结构
*/
--条件分支语句
--简单条件判断
DECLARE
v_sal NUMBER(6,2);
BEGIN
select sal into v_sal from emp
where lower(ename)=lower('&name');
if v_sal<2000 then
update emp set
【Log4j二】Log4j属性文件配置详解
bit1129
log4j
如下是一个log4j.properties的配置
log4j.rootCategory=INFO, stdout , R
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appe
java集合排序笔记
白糖_
java
public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{
private static final long serialVersionUID = -2958090810811192128L;
private int id;
private String nam
java导致linux负载过高的定位方法
ronin47
定位java进程ID
可以使用top或ps -ef |grep java
![图片描述][1]
根据进程ID找到最消耗资源的java pid
比如第一步找到的进程ID为5431
执行
top -p 5431 -H
![图片描述][2]
打印java栈信息
$ jstack -l 5431 > 5431.log
在栈信息中定位具体问题
将消耗资源的Java PID转
给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数
bylijinnan
函数
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class RandNFromRand5 {
/**
题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。
解法1：
f(k) = (x0-1)*5^0+(x1-
PL/SQL Developer保存布局
Kai_Ge
近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：
&n
[未来战士计划]超能查派[剧透,慎入]
comsci
计划
非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........
虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....
&nbs
Google Map API V2
dai_lm
google map
以后如果要开发包含google map的程序就更麻烦咯
http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html
找到篇不错的文章，大家可以参考一下
http://blog.sina.com.cn/s/blog_c2839d410101jahv.html
1. 创建Android工程
由于v2的key需要G
java数据计算层的几种解决方法2
datamachine
java sql 集算器
2、SQL
SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。
成熟度：5星。最成熟的。
Linux下Telnet的安装与运行
dcj3sjt126com
linux telnet
Linux下Telnet的安装与运行 linux默认是使用SSH服务的 而不安装telnet服务 如果要使用telnet 就必须先安装相应的软件包 即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
PHP中钩子函数的实现与认识
dcj3sjt126com
PHP
假如有这么一段程序：
function fun(){
fun1();
fun2();
}
首先程序执行完fun1()之后执行fun2()然后fun()结束。
但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。
我们可以在fu
EOS中的WorkSpace密码修改
蕃薯耀
修改WorkSpace密码
EOS中BPS的WorkSpace密码修改
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201
SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】
hanqunfeng
SpringSecurity
SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：
applicationContex
ie 9 kendo ui中ajax跨域的问题
jackyrong
AJAX跨域
这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序，
浏览起来是没问题的，但把应用放到公网上的一台服务器，
却发现如下情况：
1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
不要让别人笑你不能成为程序员
lampcy
编程 程序员
在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。
说实话，我感觉我的脑细胞像被轰炸过一样。
手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？
难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？
我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
马皇后的贤德
nannan408
马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。
有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以）
Rainbow702
sql group by 最大值 max 最大的那条记录
好久好久不写SQL了，技能退化严重啊！！！
直入主题：
比如我有一张表，file_info，
它有两个属性（但实际不只，我这里只是作说明用）：
file_code, file_version
同一个code可能对应多个version
现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录，
SQL如下：
select
*
VBScript脚本语言
tntxia
VBScript
VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。
VB家族语言简介
Visual Basic 6.0
源于BASIC语言。
由微软公司开发的包含协助开发环境的事
java中枚举类型的使用
xiao1zhao2
java enum 枚举 1.5新特性
枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.
1.定义一个简单的枚举类型
public enum Sex {
MAN,
WOMAN
}
枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.
2.常用方法
静态的values()方
