0.9.5 • Published 2 years ago
lysoft.template.layuiadmin v0.9.5
LayuiAdmin工程化项目模板 ver 0.9.5 —— ReadMe
更新说明
0.9.5
- 添加创建表格的快捷方法,createTableOption
0.9.2
- 添加大量 layui 表单组件,在
./src/component
文件夹中 - 将 utils 重写,实现扩展属性,需要在主入口文件中导入
./src/utils
- 修复了当页面 hash 变化时,menu 不跟着改变的 bug
0.9.1
- 在根目录下添加一个 api-init.exe 文件,可以自动处理网页上生成的api客户端代码,包含在每个文件上方添加禁用ts检查,自动替换enum文件,会遍历每一个
./src/api
文件夹,运行环境为.net framework 4.5.2。 - 运行 api-init.exe 的方法有如下几种,可以将此文件拖拽至终端窗口中然后单击回车,或者安装 exe Runner 插件,然后在 api-init.exe 文件上右键选择 Run Executable,或者在资源管理器中运行,也支持注册到全局环境变量中,然后可直接在终端窗口中输入
api-init .
0.9.0
- 经历完整项目实战,更新内容较多,版本变更为待发布(0.9.0)
- 简化 layui 表单验证方法,全部验证在
./src/utils/layui/verify.ts
文件中,不再需要编写form.verify
方法 - 简化 layui 表格的表头工具模板和行工具模板(按钮组)的使用,不再需要在 html 文件中编写模板,使用 createToolbar 方法可创建包含相应按钮组的模板,使用 createToolbarCol 方法可创建工具列,使用 createToolbarColLeft 方法可创建固定在左侧的工具列,使用 createToolbarColRight 方法可创建固定在右侧的工具列,这三个方法会自动计算宽度,并将 title 设置为操作,使用方法如下
typescript
table.render({
elem: 'template[lay-filter=table-children]',
toolbar: createToolbar('添加'),
data: data.filter(x => x.parentId === id),
defaultToolbar: [],
cols: [[
{ fixed: 'left', title: '操作', toolbar: createToolbar('编辑'), width: 70 },
createToolbarColLeft('编辑'), // 等同于上一行
{ title: '名称', field: 'content', width: 100 },
{ title: '状态', width: 80, templet: d => d.status === CommonStatus.Enable ? '已启用' : '已禁用' },
{ title: '备注', field: 'note' },
]],
page: false,
})
- 添加简化 layui 弹窗的函数,pop 和 popview
- 添加用于在 popview 弹窗中使用的 web components 组件 lay-form-view,和针对 lay-form-view 的对象赋值方法 renderPopView,使用方法如下
html
<template pop-view-ver>
<form class="layui-form" style="padding: 20px;">
<lay-form-view title="序号" field="xh"></lay-form-view>
<lay-form-view title="版本创建时间" field="bbcjsj"></lay-form-view>
<lay-form-view title="标准名称" field="bzmc"></lay-form-view>
<lay-form-view title="标准编号" field="bzbh"></lay-form-view>
<lay-form-view title="资料大类名称" field="zldlmc"></lay-form-view>
<lay-form-view title="资料子类名称" field="zlzlmc"></lay-form-view>
<lay-form-view title="购置原因" field="gzyy"></lay-form-view>
</form>
</template>
typescript
popview('pop-view-ver', {
title: `查看版本 - ${getMaterialAddVersionNumber(currentApply!.id!)} - ${getMaterialAddVersionNumber(data!.versionId!)}`,
success: () => {
const field = JSON.parse(data!.content!)
renderPopView({
...field,
cjsj: dateFormat(new Date(data.time!), 'yyyy-MM-dd HH:mm:ss'),
zldlmc: options.find(x => x.id! === parseInt(field.zldlmc))!.content!,
zlzlmc: options.find(x => x.id! === parseInt(field.zlzlmc))!.content!
})
},
})
/styles/types/layuiadmin.d.ts
更新
0.6.0
- 模板 header 和 menu 部分实现 web components 组件化,可以使用
./src/components
里面的组件编写html页面 - axios 重写,拦截请求和响应,默认所有带 export 字样的 url 都会被解析成下载,如不需要,可修改
./src/api/index.ts
文件 - 不再需要在请求后写
.then(checkAuth).then(checkRes)
- 移除 0.5.8 中的下载,实现自动下载,如不需要,可修改
./src/api/index.ts
文件 /styles/types/layuiadmin.d.ts
更新
0.5.9
- 添加了文件上传 demo,位于
./dist/src/views/component/upload/demo2.html
中的选完文件后不自动上传
部分 /styles/types/layuiadmin.d.ts
更新
0.5.8
- 更新 api 调用库,使用 axios 调用 api,支持通过
https://editor.swagger.io
在线生成的符合 OpenAPI 3.0.1 规范的接口文档 - api 的调用方式
api.getData().then(checkRes).then(s => { ... })
- 下载文件的调用方式
api.export(undefined, undefined, downloadOption).then(download)
/styles/types/layuiadmin.d.ts
更新
0.5.7
- 添加内置配置项
<meta name="config" content="maintenance">
,将系统设置为维护状态,所有页面都会跳转至/tips/maintenance
- 修改了 layui 底层样式,表单 label 能显示的文字增加至6个,表单控件整体左移10px
/styles/types/layuiadmin.d.ts
更新
0.5.6
- 修复一个菜单路由(menu)的 bug
- 修复一个状态管理(store)的 bug
/styles/types/layuiadmin.d.ts
更新
0.5.5
- 添加了路由的身份验证拦截。在请求视图时,如果身份不满足路由上的身份限制,则会被拦截并强制跳转至登录页面或执行指定操作,在
./src/index.ts
文件中
0.5.2
- 菜单从layuiadmin模板语法中剥离出来单独成模块,在
src/views/layout/menu.ts
文件中,可配合src/views/layout/index.ts
文件进行菜单权限控制等操作 - 状态管理放在
src/store
文件夹中,内置提供了三种状态管理方法 - 通用样式库移出项目,进一步减小体积,layui样式库移至
styles/layui
处。相应的,服务器上也要使用此目录结构
0.5.0
- 解决了执行 init 代码比渲染 html 页面更早的问题
- 更改为中文 npm 脚本名
初始化和运行
- 打开终端,执行
npm run 项目设置_还原依赖项
命令,初始化项目 - 打开终端,执行
npm run 项目设置_生成
命令,生成项目 - 打开终端,执行
npm run 项目设置_启动并监视
命令,生成项目并启动 webpack 监视,会在项目文件变更后保存时自动编译,配合 Live Server 可实时更新浏览器页面
项目文件
node_modules
目录中存放所有依赖项,分发项目源代码时不要包含此目录,执行npm install
命令会根据 package.json 文件中的配置自动生成该目录dist
目录中存放编译后的文件和静态文件,不要在dist
目录中编写 ts 脚本dist/src/views
目录中的所有 html 页面要和src/views
目录中的 ts 文件一一对应- 将
dist/src/views
目录中html文件的脚本移至src/views
目录中对应的 ts 文件中,并且不需要在html页面中使用js引入 - 路由放在
src/router
文件夹中 - 状态管理放在
src/store
文件夹中,内置提供了三种状态管理方法 - 工具类放在
src/utils
文件夹中 - 项目配置在
src/config
文件夹中,在dist/index.html
文件中可切换配置方案 - 布局信息放在
src/layout
文件夹中,包含菜单和header栏等信息 - api放在
src/api
文件夹中,通过src/api/index.ts
文件统一导出所有api
开发说明
- ts 脚本中页面自动执行的过程固定要使用 init 函数执行初始化并导出该函数
function init(args: LayPageArgs) {
...
}
export default { init }
- 每一个目录都要由 index.ts 使用如下代码统一包装
import xxx1 from './xxx1'
import xxx2 from './xxx2'
// 如包含 index 页面,需要在 index.ts 文件中添加 init 函数并导出
function init(args: LayPageArgs) {
...
}
// 如包含 index 页面,需要添加 init 函数
export default { xxx1, xxx2, init }
↑↑↑↑
- 项目配置在
src/config/config.ts
文件中,在dist/index.html
文件中可切换配置方案,参考以下代码
<html>
<head>
...
<meta name="config" content="配置方案三">
...
</head>
<body>
...
</body>
</html>
- 先访问
$baseurl$/dist/#/user/login
,通过登录操作跳转至$baseurl$/dist/#/home/homepage2/test=123
,配合src/views/user/login.ts
及src/views/home/homepage2.ts
两个脚本中的代码可了解状态管理和路由管理相关用法 - 服务器中也要使用
/styles/layui
目录存放layui基础库
/styles/types/layuiadmin.d.ts
文件持续更新中
0.9.5
2 years ago