4.4. 前端开发

1.0

1.0

ModStart开发者文档 /

前端开发#

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#

安装 nodejs

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

推荐安装 node 14 ，其他版本未完全测试验证

打开 nodejs 命令窗口

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

安装 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

编译前端代码

编译 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#

安装 nodejs

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

推荐安装 node 14 以上版本

安装 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

编译前端代码

编译 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 单页应用集成：

Vue 普通方式集成：

Question 模块

JS 库 - 介绍#

为方便使用，系统内置了部分函数，加速系统的开发。

内置函数默认绑定在全局变量 MS 上，有不同的模块。

JS 库 - 基础#

MS.ready#

监听 JS 脚本加载完毕事件 (ready)

MS.ready(function () {
    // 页面加载完成
});

JS 库 - 弹窗 dialog#

MS.dialog.loadingOn#

页面遮罩显示

MS.dialog.loadingOn([msg])

msg 显示文字，可选，默认为 Loading 图标

MS.dialog.loadingOff#

页面遮罩关闭

MS.dialog.loadingOff()

MS.dialog.tipSuccess#

提示成功信息

MS.dialog.tipSuccess(msg)

msg 提示文字

MS.dialog.tipError#

提示错误信息

MS.dialog.tipError(msg)

msg 提示文字

MS.dialog.alertSuccess#

成功信息模态框

MS.dialog.alertSuccess(msg)

msg 提示文字

MS.dialog.alertError#

错误信息模态框

MS.dialog.alertError(msg)

msg 提示文字

MS.dialog.confirm#

确认信息框

MS.dialog.confirm(msg, callback)

msg 提示文字
callback 回调函数

MS.dialog.dialogContent#

弹出 HTML 内容

MS.dialog.dialogContent(content)

content HTML 内容

MS.dialog.dialog#

弹出 URL 链接

MS.dialog.dialog(url)

url 链接

JS 库 - 接口 api#

MS.api.post#

发送 post 请求

MS.api.post( url , param, callback )

url string 请求地址
param object 请求数据
callback 请求完成回调函数

发送请求实例

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

MS.util.loadScript(url, callback)

url js 链接
callback 加载完成回调函数

MS.util.loadStylesheet#

动态加载 CSS

MS.util.loadStylesheet(url, callback)

url CSS 链接
callback 加载完成回调函数

MS.util.md5#

计算字符串 MD5 值

MS.util.md5(str)

str 字符串

MS.util.randomString#

生成随机字符串

MS.util.randomString(len)

len 随机字符串长度

MS.util.urlencode#

字符串 URL 编码

MS.util.urlencode(str)

str

MS.util.specialchars#

字符串 HTML 转义

MS.util.specialchars(str)

str 字符串

MS.util.scrollTo#

页面滚动到元素位置

MS.util.scrollTo(target, container)

target 元素选择器
container 父容器选择器，为空表示整个页面

JS 库 - 组件#

富文本 editor#

默认使用了 UEditor 作为富文本编辑

引入 JS

ModStart::js('asset/common/editor.js')

初始化富文本


<script id="content" name="content" type="text/plain"><p>初始化HTML</p></script>
<script>
    // 全功能
    MS.editor.basic('content');
    // 精简
    MS.editor.simple('content');
</script>

弹窗选择器 selectorDialog#

使用示例

new MS.selectorDialog({
    server: "<弹窗URL>",
    callback: function (items) {
        console.log("选择了", items);
    }
}).show();

在弹出的 Iframe 页面中需要通过以下方法来触发关闭并回调

parent.__selectorDialogItems = items;
parent.layer.closeAll();

本文章首发在 LearnKu.com 网站上。

Markdown 文本

ModStart开源

360 声望

一个基于 Laravel 模块化快速开发框架。基于 Apache 2.0 开源协议发布，...

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

4.4. 前端开发 1.0 1.0

前端开发#

前端代码位置#

前端代码如何编译#

Windows#

OSX / Linux#

前端开发组件#

弹窗功能#

Ajax 请求#

Ajax 表单#

图片预览#

实例参考#

JS 库 - 介绍#

JS 库 - 基础#

MS.ready#

JS 库 - 弹窗 dialog#

MS.dialog.loadingOn#

MS.dialog.loadingOff#

MS.dialog.tipSuccess#

MS.dialog.tipError#

MS.dialog.alertSuccess#

MS.dialog.alertError#

MS.dialog.confirm#

MS.dialog.dialogContent#

MS.dialog.dialog#

JS 库 - 接口 api#

MS.api.post#

工具类 - 其他 util#

MS.util.loadScript#

MS.util.loadStylesheet#

MS.util.md5#

MS.util.randomString#

MS.util.urlencode#

MS.util.specialchars#

MS.util.scrollTo#

JS 库 - 组件#

富文本 editor#

弹窗选择器 selectorDialog#

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

4.4. 前端开发

1.0

1.0