1.代码规范(wish)
变量名清晰
函数方法功能注释:函数必须要写注释表明功能点
1. HTML 规范
语义化标签：优先使用语义化标签（如 <header>、<footer>、<main> 等），提高代码的可读性和SEO友好性。
缩进：使用两个或四个空格进行缩进，保持代码结构清晰。
属性顺序：按照特定顺序书写HTML属性，如 class、id、name、data-*、src、alt、type、href 等。
自闭合标签：对于自闭合标签（如 <img>、<br>），可以选择是否在结尾处加上 /，但要保持一致。
2. CSS/SCSS 规范
命名规范：使用BEM（Block Element Modifier）命名法，确保CSS类名具有描述性和层次性。
缩进：使用两个或四个空格进行缩进。
分号：每条规则后使用分号结尾。
空行：在规则之间留一个空行以提高可读性。
颜色、尺寸变量：使用变量（如在Sass中）来定义颜色、尺寸等，以便于维护和修改。
<div class="person-card person-card--featured">
<img class="person-card__avatar person-card__avatar--large" src="avatar.jpg" alt="Avatar">
<h2 class="person-card__name">John Doe</h2>
</div>
3. JavaScript/TypeScript 规范
变量命名：使用驼峰式命名（camelCase）进行变量和函数命名，使用帕斯卡命名（PascalCase）进行类命名。
缩进：使用两个或四个空格进行缩进。
分号：在每条语句后使用分号。
单引号/双引号：字符串使用单引号或双引号，但要保持一致。
箭头函数：优先使用箭头函数表达式。
ES6+：优先使用ES6及以上版本的语法特性。
4. 代码风格工具
ESLint：用于JavaScript/TypeScript的代码质量和风格检查工具。
Prettier：用于代码格式化的工具，支持多种语言。
Stylelint：用于CSS/SCSS的代码质量和风格检查工具。
5.Git 提交规范
按功能模块提交
1.接口封装与调用
所有的接口都必须封装到apis目录下,根据项目模块分类,示例如下
post封装
export const sandSampleQuery = (data = {}) => {
let url = '/api/sand/sandSample/query'
return postData(url, data)
}
引用
import {
sandSampleSave
} from '@/apis/sandApi.js'
使用
sandSampleSave(params).then((res) => {
if (res.code === 1) {
this.$message.success(res.content)
} else {
this.$message.error(res.content)
}
})
.catch((error) => {
this.$message.error(error)
})
get封装
export const getStSection = (data = {}) => {
let url = '/api/common/load/config/getStSection'
return getData(url, data)
}
使用与post一样
2.pdf显示调用
1.有typeNum
<viewPdf
style="width: 100%; height: 600px"
:dataObj="formData"
:dataObjId="formData.stcd"
:typeNum="'10'"
:url="'/api/pdf/generate'"
></viewPdf>
2.无typeNum
<viewPdf
style="width: 100%; height: 600px"
:requestType="'post'"
:Params="{
type: 105,
id: this.formData.id,
stcd: this.formData.stcd.toString()
}"
:url="'/api/pdf/generateFromExcel'"
></viewPdf>
3.页面构建
以index页面为基础，再创建其他页面，秉持着低耦合的开发理念，模块化开发，最好按照功能点构建独立组件，便于维护，公共组件要封装，便于复用
弹窗公共组件
<Dialog/>
标题公共组件
<leeTitleLine/>
数学公式公共组件
<leMathJax/>
步骤条公共组件
<leStep/>
批量上传公共组件
<leBatchUpload/>
handsontable封装组件
<handsontableWrapper/>
4.页面布局
如果ui稿没有出多端适配的情况下(没有多版ui稿),尽量使用百分比布局
按钮的类型:wish蓝色type='lee',其他的按照element-ui的就行
2.handsontable表格使用
官网地址handsontable
<hot-table
:key="componentKey"
ref="hotTableComponent2"
:settings="hotSettings"
></hot-table>
hotSettings: {
width: '100%',//宽度
height: '100%',//高度
stretchH: 'all',
language: 'zh-CN', // 语言设置
licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
allowInvalid: false, // 不允许无效的值
data: [],//数据
columns: [//数据字段绑定
{
data: 'column1',
type: 'text',
title: '起点距',
readOnly: false
},
{
data: 'depth',
type: 'text',
title: '水深',
readOnly: false
},
{
data: 'pointDepth',
type: 'text',
title: '测点深',
readOnly: false
},
{
data: 'column2',
type: 'text',
title: '信号数',
readOnly: false
},
{
data: 'column3',
type: 'text',
title: '总转速',
readOnly: false
},
{
data: 'column4',
type: 'text',
title: '总历时(s)',
readOnly: false
},
{
data: 'column5',
type: 'text',
title: '测点流速(m/s)',
readOnly: false
},
{
data: 'column6',
type: 'text',
title: '信号数',
readOnly: false
},
{
data: 'column7',
type: 'text',
title: '总转速',
readOnly: false
},
{
data: 'column8',
type: 'text',
title: '总历时(s)',
readOnly: false
},
{
data: 'column9',
type: 'text',
title: '测点流速(m/s)',
readOnly: false
},
{
data: 'column10',
type: 'text',
title: 'V`/ V - 1',
readOnly: false
},
{
data: 'remark',
type: 'text',
title: '备注',
readOnly: false
},
{
data: '',
title: '操作',
type: 'text',
readOnly: true,
renderer: (instance, td, row, col, prop, value, cellProperties) => {
const rowHstData = this.hotSettings.data[row]
// 创建一个删除按钮
if (this.btnType === 'view') {
const deleteButton = document.createElement('p') // 使用 <a> 标签
deleteButton.textContent = '-'
// 将按钮添加到单元格
td.innerHTML = ''
td.appendChild(deleteButton)
td.style.textAlign = 'center'
td.style.lineHeight = '38px'
td.style.cursor = 'pointer'
} else {
const deleteButton = document.createElement('a') // 使用 <a> 标签
deleteButton.textContent = '删除'
// 添加链接样式
deleteButton.style.textDecoration = 'none' // 去掉下划线
deleteButton.style.color = '#253ec8' // 链接颜色
deleteButton.addEventListener('click', () => {
if (row >= 0 && row < instance.countRows()) {
// 获取被点击按钮所在行的数据
const rowData = instance.getDataAtRow(row)
// 在数据源中删除该行数据
this.hotSettings.data.splice(row, 1)
// 重新加载数据
instance.loadData(this.hotSettings.data)
// 在这里可以执行其他删除行后的操作，例如向服务器发送请求
}
})
// 将按钮添加到单元格
td.innerHTML = ''
td.appendChild(deleteButton)
td.style.textAlign = 'center'
td.style.lineHeight = '38px'
td.style.cursor = 'pointer'
}
}
}
],
// colHeaders: true,
rowHeaders: true,
nestedRows: true, // 是否开启多级表头
nestedHeaders: [表头
[
'起点距',
'水深',
'测点深',
{ label: '备用流速仪测速记录', colspan: 4 },//合并列
{ label: '常用流速仪测速记录', colspan: 4 },
'',
''
],
[
'(m)',
'(m)',
'(m)',
'信号数',
'总转速',
'总历时(s)',
'测点流速(m/s)',
'信号数',
'总转速',
'总历时(s)',
'测点流速(m/s)',
'V`/ V - 1',
'备注',
'操作'
]
],
rowHeights: 40,
cells: (row, col, prop, cellProperties2) => {
const rowHstData = this.hotSettings.data[row]
const cellProperties = {}
cellProperties.className = 'htCenter htMiddle' //水平垂直居中
if (this.btnType === 'view') {
cellProperties.readOnly = true
}
return cellProperties
},
mergeCells: [],
afterChange: (changes, source) => {
// 判断是否发生了合并单元格的操作
if (changes == null) {
return
} else {
if (changes[0][3] == null) {
return
} else {
changes?.forEach(([Row, prop, oldValue, newValue]) => {
let row = this.hotSettings.data[Row]
// if (prop === "new_date") {
// if (row.new_time) {
// row.voltime = newValue + " " + row.new_time;
// } else {
// this.$message.warning("请输入处理时间");
// }
// }
// if (prop === "new_time") {
// if (row.new_date) {
// row.voltime = row.new_date + " " + newValue;
// } else {
// this.$message.warning("请输入处理日期");
// }
// }
})
}
}
}
}
3.nvm的下载与使用
前端需要安装软件与环境:
1.nvm,并使用nvm下载node-v 12链接
2.编译器:vscode链接
3.代码提交软件sourcetree或其他链接
4.git链接
5.apifox链接
所用组件(可提前了解)
1.elementui链接
2.eCharts链接
3.handsontable链接
