前端开发

ModStart框架应用了 jQuery 等根底前端技术，页面不限于应用 Vue、React 作为前端技术集成。

前端代码地位

  • ModStart根底前端代码位于 vendor/modstart/modstart/resources/asset/。
  • 不同模块的前端代码位于 module/Xxx/resources/asset/

前端代码须要应用 nodejs 构建，须要事后理解前端应用 webpack, gulp 打包的基础知识。

前端代码如何编译

Windows

  1. 装置 nodejs

进入官网 http://nodejs.cn/ ，下载对应的nodejs安装包下载，实现装置。

举荐装置 node 14 ，其余版本未齐全测试验证
  1. 关上 nodejs 命令窗口

装置实现后，点击windows启动，关上 Node.js command prompt 命令窗口

  1. 装置 cnpm 和打包依赖
装置 cnpm 次要是为了解决国内拜访 npm 速度太慢的问题，可依据本人的状况自行抉择

装置cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

装置webpack和gulp依赖

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

编译ModStart代码

通常状况下零碎的前端代码无需批改
# 进入到零碎动态资源根目录cd c:\xxx\vendor\modstart\modstart\resources\asset\# 装置依赖cnpm install# 打包前端CSS、图片等动态资源gulp# 调试模式：打包前端JS单页动态资源webpack --env dev# 生产模式：打包前端JS单页动态资源webpack# 开发模式：打包前端JS单页动态资源，边开发边刷新webpack --env dev --watch

编译模块代码

编译模块前端代码前，请确保ModStart的动态资源曾经装置过依赖（cnpm install）
# 进入到模块动态资源根目录cd c:\xxx\module\Xxx\resources\asset\# 装置依赖cnpm install# 打包前端CSS、图片等动态资源gulp# 调试模式：打包前端JS单页动态资源webpack --env dev# 生产模式：打包前端JS单页动态资源webpack# 开发模式：打包前端JS单页动态资源，边开发边刷新webpack --env dev --watch

OSX / Linux

  1. 装置 nodejs

进入官网 http://nodejs.cn/ ，下载对应的nodejs安装包下载，实现装置。

举荐装置 node 14 以上版本
  1. 装置 cnpm 和打包依赖
装置 cnpm 次要是为了解决国内拜访 npm 速度太慢的问题，可依据本人的状况自行抉择

装置cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

装置webpack和gulp依赖

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

编译ModStart代码

通常状况下零碎的前端代码无需批改
# 进入到零碎动态资源根目录cd vendor/modstart/modstart/resources/asset/# 装置依赖cnpm install# 打包前端CSS、图片等动态资源gulp# 调试模式：打包前端JS单页动态资源webpack --env dev# 生产模式：打包前端JS单页动态资源webpack# 开发模式：打包前端JS单页动态资源，边开发边刷新webpack --env dev --watch

编译模块代码

编译模块前端代码前，请确保ModStart的动态资源曾经装置过依赖（cnpm install）
# 进入到模块动态资源根目录cd module/Xxx/resources/asset# 装置依赖cnpm install# 打包前端CSS、图片等动态资源gulp# 调试模式：打包前端JS单页动态资源webpack --env dev# 生产模式：打包前端JS单页动态资源webpack# 开发模式：打包前端JS单页动态资源，边开发边刷新webpack --env dev --watch

前端开发组件

弹窗性能

通过减少 data-dialog-request 能够疾速创立一个弹窗（ iframe 模式 ）。

<a href="javascript:;" data-dialog-request="/path/to/dialog">弹窗</a>
在弹窗页面通过调用 parent.layer.closeAll() 能够敞开操作

具体实现形式可参考 源代码

Ajax申请

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

<a href="javascript:;" data-ajax-request="/path/to/url" data-ajax-request-loading data-method="get" data-confirm="确定申请？">    模仿发送一个申请</a>
  • data-ajax-request：定义一个疾速Ajax申请
  • data-ajax-request-loading：申请时显示 Loading
  • data-method ：申请形式，默认为 post，能够显式定义为 get 或 post
  • data-confirm：弹出二次确认弹窗

具体实现形式可参考 源代码

Ajax表单

结构一个Ajax表单，在点击提交时，表单会以Ajax的形式申请到后盾接口。

<form data-ajax-form action="/path/to/url" method="post">  <input name="username" value="" />  <button type="submit">提交</button></form>
  • data-ajax-form：示意以后表单是一个Ajax申请表单

具体实现形式可参考 源代码

图片预览

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

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

具体实现形式可参考 源代码

实例参考

Vue单页利用集成：

  • Corp模块
  • Doc模块

Vue一般形式集成：

  • Question模块