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 文件持续更新中