前端开发

    • ModStart基础前端代码位于 。
    • 不同模块的前端代码位于 module/Xxx/resources/asset/

    前端代码需要使用 nodejs 构建，需要预先了解前端使用 webpack, gulp 打包的基础知识。

    1. 安装 nodejs

    进入官网 http://nodejs.cn/ (opens new window) ，下载对应的nodejs安装包下载，完成安装。

    1. 打开 nodejs 命令窗口

    安装完成后，点击windows启动，打开 Node.js command prompt 命令窗口

    1. 安装 cnpm 和打包依赖

    安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题，可根据自己的情况自行选择

    安装cnpm

    安装webpack和gulp依赖

    1. cnpm install -g webpack-cli@4 webpack@4 gulp@4
    1. 编译前端代码

    编译ModStart代码

    通常情况下系统的前端代码无需修改

    1. # 进入到系统静态资源根目录
    2. cd c:\xxx\vendor\modstart\modstart\resources\asset\
    3. # 安装依赖
    4. cnpm install
    5. # 打包前端CSS、图片等静态资源
    6. gulp
    7. # 调试模式：打包前端JS单页静态资源
    8. webpack --env dev
    9. # 生产模式：打包前端JS单页静态资源
    10. webpack
    11. webpack --env dev --watch
    1. # 进入到模块静态资源根目录
    2. cd c:\xxx\module\Xxx\resources\asset\
    3. # 安装依赖
    4. cnpm install
    5. # 打包前端CSS、图片等静态资源
    6. gulp
    7. # 调试模式：打包前端JS单页静态资源
    9. # 生产模式：打包前端JS单页静态资源
    10. webpack
    11. # 开发模式：打包前端JS单页静态资源，边开发边刷新
    12. webpack --env dev --watch
    1. 安装 nodejs

    进入官网 ，下载对应的nodejs安装包下载，完成安装。

    推荐安装 node 14 以上版本

    1. 安装 cnpm 和打包依赖

    安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题，可根据自己的情况自行选择

    安装cnpm

    安装webpack和gulp依赖

    1. cnpm install -g webpack-cli@4 webpack@4 gulp@4
    1. 编译前端代码

    编译ModStart代码

    1. # 进入到系统静态资源根目录
    2. cd vendor/modstart/modstart/resources/asset/
    3. # 安装依赖
    4. cnpm install
    5. # 打包前端CSS、图片等静态资源
    6. gulp
    7. # 调试模式：打包前端JS单页静态资源
    8. webpack --env dev
    9. # 生产模式：打包前端JS单页静态资源
    10. webpack
    11. webpack --env dev --watch

    编译模块代码

    1. # 进入到模块静态资源根目录
    2. cd module/Xxx/resources/asset
    3. # 安装依赖
    4. cnpm install
    5. # 打包前端CSS、图片等静态资源
    7. # 调试模式：打包前端JS单页静态资源
    8. webpack --env dev
    9. # 生产模式：打包前端JS单页静态资源
    10. webpack
    11. # 开发模式：打包前端JS单页静态资源，边开发边刷新
    12. webpack --env dev --watch

    通过增加 data-dialog-request 可以快速创建一个弹窗（ iframe 模式 ）。

    在弹窗页面通过调用 parent.layer.closeAll() 可以关闭操作

    具体实现方式可参考 源代码 (opens new window)

    构造一个Ajax请求按钮，点击按钮时，会发送一个请求到接口。

    1. <a href="javascript:;" data-ajax-request="/path/to/url" data-ajax-request-loading data-method="get" data-confirm="确定请求？">
    2.     模拟发送一个请求
    3. </a>
    • data-ajax-request：定义一个快速Ajax请求
    • data-ajax-request-loading：请求时显示 Loading
    • data-method ：请求方式，默认为 post，可以显式定义为 get 或 post
    • data-confirm：弹出二次确认弹窗

    具体实现方式可参考

    构造一个Ajax表单，在点击提交时，表单会以Ajax的方式请求到后台接口。

    1. <form data-ajax-form action="/path/to/url" method="post">
    2.   <input name="username" value="" />
    3.   <button type="submit">提交</button>
    4. </form>
    • ：表示当前表单是一个Ajax请求表单

    具体实现方式可参考 源代码 (opens new window)

    构造一个图片预览，点击预览后会弹出图片预览大图。

    1. <a href="javascript:;" data-image-preview="图片地址">预览</a>

    具体实现方式可参考

    Vue普通方式集成：