# 前端开发 ModStart框架使用了 jQuery 等基础前端技术,页面不限于使用 Vue、React 作为前端技术集成。 ## 前端代码位置 - 源代码 - ModStart基础前端代码位于 `vendor/modstart/modstart/resources/asset/`。 - 不同模块的前端代码位于 `module/Xxx/resources/asset/` - 编译后的代码 - ModStart基础前端代码位于 `vendor/modstart/modstart/asset/`。 - 不同模块的前端代码位于 `module/Xxx/Asset/` 前端代码需要使用 nodejs 构建,需要预先了解前端使用 webpack, gulp 打包的基础知识。 ## 前端代码如何编译 ### Windows 1. 安装 nodejs 进入官网 [http://nodejs.cn/](http://nodejs.cn/) ,下载对应的nodejs安装包下载,完成安装。 > 推荐安装 node 14 ,其他版本未完全测试验证 2. 打开 nodejs 命令窗口 安装完成后,点击windows启动,打开 `Node.js command prompt` 命令窗口 3. 安装 cnpm 和打包依赖 > 安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题,可根据自己的情况自行选择 **安装cnpm** ```shell npm install -g cnpm --registry=https://registry.npmmirror.com ``` **安装webpack和gulp依赖** ```shell cnpm install -g webpack-cli@4 webpack@4 gulp@4 ``` 4. 编译前端代码 **编译ModStart代码** > 通常情况下系统的前端代码无需修改 ```shell # 进入到系统静态资源根目录 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) ```shell # 进入到模块静态资源根目录 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/](http://nodejs.cn/) ,下载对应的nodejs安装包下载,完成安装。 > 推荐安装 node 14 以上版本 2. 安装 cnpm 和打包依赖 > 安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题,可根据自己的情况自行选择 **安装cnpm** ```shell npm install -g cnpm --registry=https://registry.npmmirror.com ``` **安装webpack和gulp依赖** ```shell cnpm install -g webpack-cli@4 webpack@4 gulp@4 ``` 4. 编译前端代码 **编译ModStart代码** > 通常情况下系统的前端代码无需修改 ```shell # 进入到系统静态资源根目录 cd vendor/modstart/modstart/resources/asset/ # 安装依赖 cnpm install # 打包前端CSS、图片等静态资源 gulp # 调试模式:打包前端JS单页静态资源 webpack --env dev # 生产模式:打包前端JS单页静态资源 webpack # 开发模式:打包前端JS单页静态资源,边开发边刷新 webpack --env dev --watch ``` **编译模块代码** > 编译模块前端代码前,请确保ModStart的静态资源已经安装过依赖(cnpm install) ```shell # 进入到模块静态资源根目录 cd module/Xxx/resources/asset # 安装依赖 cnpm install # 打包前端CSS、图片等静态资源 gulp # 调试模式:打包前端JS单页静态资源 webpack --env dev # 生产模式:打包前端JS单页静态资源 webpack # 开发模式:打包前端JS单页静态资源,边开发边刷新 webpack --env dev --watch ``` ## 前端开发组件 ### 弹窗功能 通过增加 `data-dialog-request` 可以快速创建一个弹窗( iframe 模式 )。 ```html 弹窗 ``` > 在弹窗页面通过调用 `parent.layer.closeAll()` 可以关闭操作 具体实现方式可参考 [源代码](https://gitee.com/modstart/ModStartCMS/blob/master/vendor/modstart/modstart/resources/asset/src/lib/convenient.js) ### Ajax请求 构造一个Ajax请求按钮,点击按钮时,会发送一个请求到接口。 ```html 模拟发送一个请求 ``` - `data-ajax-request`:定义一个快速Ajax请求 - `data-ajax-request-loading`:请求时显示 Loading - `data-method` :请求方式,默认为 `post`,可以显式定义为 `get` 或 `post` - `data-confirm`:弹出二次确认弹窗 具体实现方式可参考 [源代码](https://gitee.com/modstart/ModStartCMS/blob/master/vendor/modstart/modstart/resources/asset/src/lib/convenient.js) ### Ajax表单 构造一个Ajax表单,在点击提交时,表单会以Ajax的方式请求到后台接口。 ```html
``` - `data-ajax-form`:表示当前表单是一个Ajax请求表单 具体实现方式可参考 [源代码](https://gitee.com/modstart/ModStartCMS/blob/master/vendor/modstart/modstart/resources/asset/src/lib/form.js) ## 图片预览 构造一个图片预览,点击预览后会弹出图片预览大图。 ```html 预览 ``` 具体实现方式可参考 [源代码](https://gitee.com/modstart/ModStartCMS/blob/master/vendor/modstart/modstart/resources/asset/src/lib/convenient.js) ## 实例参考 Vue单页应用集成: - [Corp模块](https://modstart.com/m/Corp) - [Doc模块](https://modstart.com/m/Doc) Vue普通方式集成: - [Question模块](https://modstart.com/m/Question) ## JS库-介绍 为方便使用,系统内置了部分函数,加速系统的开发。 内置函数默认绑定在全局变量 `MS` 上,有不同的模块。 ## JS库-基础 ### MS.ready 监听 JS 脚本加载完毕事件 (ready) ```js MS.ready(function () { // 页面加载完成 }); ``` ## JS库-弹窗 dialog ### MS.dialog.loadingOn 页面遮罩显示 ```js MS.dialog.loadingOn([msg]) ``` - `msg` 显示文字,可选,默认为 Loading 图标 ### MS.dialog.loadingOff 页面遮罩关闭 ```js MS.dialog.loadingOff() ``` ### MS.dialog.tipSuccess 提示成功信息 ```js MS.dialog.tipSuccess(msg) ``` - `msg` 提示文字 ### MS.dialog.tipError 提示错误信息 ```js MS.dialog.tipError(msg) ``` - `msg` 提示文字 ### MS.dialog.alertSuccess 成功信息模态框 ```js MS.dialog.alertSuccess(msg) ``` - `msg` 提示文字 ### MS.dialog.alertError 错误信息模态框 ```js MS.dialog.alertError(msg) ``` - `msg` 提示文字 ### MS.dialog.confirm 确认信息框 ```js MS.dialog.confirm(msg, callback) ``` - `msg` 提示文字 - `callback` 回调函数 ### MS.dialog.dialogContent 弹出 `HTML` 内容 ```js MS.dialog.dialogContent(content) ``` - `content` HTML内容 ### MS.dialog.dialog 弹出 `URL` 链接 ```js MS.dialog.dialog(url) ``` - `url` 链接 ## JS库-接口 api ### MS.api.post 发送 `post` 请求 ```javascript MS.api.post( url , param, callback ) ``` - `url` `string` 请求地址 - `param` `object` 请求数据 - `callback` 请求完成回调函数 发送请求实例 ```javascript MS.api.post( '/login' , {username:'aa',password:'bb'}, function(res){ // 请求完成 MS.api.defaultCallback(res,{ success:function(res){ // 请求成功 (res.code===0)才会进入这里,如果请求失败自动按照默认规则处理(弹窗、跳转等) } }) }) ``` ## 工具类-其他 util ### MS.util.loadScript 动态加载 `script` ```js MS.util.loadScript(url, callback) ``` - `url` js 链接 - `callback` 加载完成回调函数 ### MS.util.loadStylesheet 动态加载 `CSS` ```js MS.util.loadStylesheet(url, callback) ``` - `url` CSS 链接 - `callback` 加载完成回调函数 ### MS.util.md5 计算字符串MD5值 ```js MS.util.md5(str) ``` - `str` 字符串 ### MS.util.randomString 生成随机字符串 ```js MS.util.randomString(len) ``` - `len`随机 字符串长度 ### MS.util.urlencode 字符串URL编码 ```js MS.util.urlencode(str) ``` - `str` ### MS.util.specialchars 字符串HTML转义 ```js MS.util.specialchars(str) ``` - `str` 字符串 ### MS.util.scrollTo 页面滚动到元素位置 ```js MS.util.scrollTo(target, container) ``` - `target` 元素选择器 - `container` 父容器选择器,为空表示整个页面 ## JS库-组件 ### 富文本 editor 默认使用了UEditor作为富文本编辑 引入JS ```php ModStart::js('asset/common/editor.js') ``` 初始化富文本 ```html ``` ### 弹窗选择器 selectorDialog 使用示例 ```js new MS.selectorDialog({ server: "<弹窗URL>", callback: function (items) { console.log("选择了", items); } }).show(); ``` 在弹出的 Iframe 页面中需要通过以下方法来触发关闭并回调 ```js parent.__selectorDialogItems = items; parent.layer.closeAll(); ```