ModStart前端开发
Alan008 -前端开发
ModStart框架使用了 jQuery 等基础前端技术,页面不限于使用 Vue、React 作为前端技术集成。
前端代码位置ModStart基础前端代码位于vendor/modstart/modstart/resources/asset/
。不同模块的前端代码位于 module/Xxx/resources/asset/
前端代码需要使用 nodejs 构建,需要预先了解前端使用 webpack, gulp 打包的基础知识。
前端代码如何编译Windows安装 nodejs进入官网 http://nodejs.cn/ ,下载对应的nodejs安装包下载,完成安装。
推荐安装 node 14 ,其他版本未完全测试验证打开 nodejs 命令窗口安装完成后,点击windows启动,打开 Node.js command prompt
命令窗口
安装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进入官网 http://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
:请求时显示 Loadingdata-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模块 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
php介绍
PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。
上一篇: 微信小程序根据url生成二维码
下一篇: 微信小程序云开发配置