开发者文档

# 前端开发

系统使用了基础前端技术混合开发，页面可以使用纯HTML、jQuery、VUE 等不同的技术快速开发。

# 前端开发实例

# 使用纯HTML静态页面开发

直接在 blade 页面中编写HTML代码即可，如下所示

@extends('modstart::layout.frame')
@section('pageTitle'){{'页面标题'}}@endsection
@section('body')
    <div>
        页面内容
    </div>
@endsection
1
2
3
4
5
6
7

# 使用Vue非编译模式

在 blade 页面中编写 HTML 代码，然后使用 Vue 进行数据绑定，如下所示

@extends('modstart::layout.frame')
@section('pageTitle'){{'Vue非编译模式'}}@endsection
@section('bodyAppend')
    @parent
    <script src="@asset('asset/vendor/vue.js')"></script>
    <script src="@asset('asset/vendor/element-ui/index.js')"></script>
    <script>
        $(function () {
            new Vue({
                el: '#app',
                data() {
                    return {
                        count: 0
                    }
                },
                methods: {
                    doTest() {
                        this.count ++;
                    }
                }
            });
        });
    </script>
@endsection

@section('body')
    <div id="app" v-cloak>
        <el-button @click="doTest">点击测试</el-button>
        <div>点击次数：{{count}}</div>
    </div>
@endsection
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 使用Vue编译模式

在 blade 页面中编写HTML框架代码，使用Vue组件的方式完成页面开发。

blade 文件：module/Xxx/View/test.blade.php

@extends('modstart::layout.frame')
@section('pageTitle'){{'Vue编译模式'}}@endsection
@section('bodyAppend')
    @parent
    <script src="@asset('asset/vendor/vue.js')"></script>
    <script src="@asset('asset/vendor/element-ui/index.js')"></script>
    <script src="@asset('vendor/Xxx/entry/test.js')"></script>
@endsection
@section('body')
    <div id="app"></div>
@endsection
1
2
3
4
5
6
7
8
9
10
11

vue 入口文件 module/Xxx/resources/asset/src/entry/test.js

import {VueManager} from "@ModStartAsset/lib/vue-manager";
VueManager.QuickMount('#app', '<test />', require('./../pages/Test.vue').default)
1
2

vue 页面 module/Xxx/resources/asset/src/pages/Test.vue

<template>
    <div>
        <el-button @click="doTest">点击测试</el-button>
        <div>点击次数：{{count}}</div>
    </div>
</template>
<script>
export default {
    name: "Test",
    data() {
        return {
            count: 0
        }
    },
    methods: {
        doTest() {
            this.count ++;
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

该模式下页面需要实时编译调试，具体可参考前端代码如何编译章节。

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

# 前端代码位置

系统静态资源位置说明

状态 位置
源代码 vendor/modstart/modstart/resources/asset/
编译后 vendor/modstart/modstart/asset/
发布后 public/asset/

模块静态资源位置说明

状态 位置
源代码 module/Xxx/resources/asset/
编译后 module/Xxx/Asset/
发布后 public/vendor/Xxx/

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

  1. 进入源代码目录：module/Xxx/resources/asset/
  2. 安装 nodejs 依赖：npm install
  3. 运行JS打包：webpack
  4. 运行静态资源打包：gulp

通常情况下，如果模块的静态文件（JS、CSS、图片等）不需要打包，可以直接创建文件夹 module/Xxx/Asset/ ，然后将静态文件放入该文件夹即可。 模块安装完成后，静态资源文件会自动发布到 public/vendor/Xxx/ 目录下。

如模块有静态资源结构如图

module
└── Xxx
    └── Asset
        ├── image
        │   └── test.jpg
        └── style
            └── test.css
1
2
3
4
5
6
7

模块安装后静态资源结构为

public
└── vendor
    └── Xxx
        ├── image
        │   └── test.jpg
        └── style
            └── test.css
1
2
3
4
5
6
7

在代码中进行静态资源引用时如下所示

<link rel="stylesheet" href="@asset('vendor/Xxx/style/test.css')" />
<script src="@asset('vendor/Xxx/script/test.js')"></script>
<img src="@asset('vendor/Xxx/image/test.jpg')" />
1
2
3

# 前端代码如何编译

# Windows

  1. 安装 nodejs

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

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

  1. 打开 nodejs 命令窗口

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

  1. 安装 cnpm 和打包依赖

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

安装cnpm

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

安装webpack和gulp依赖

cnpm install -g webpack-cli@4 webpack@4 gulp@4
1
  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
1
2
3
4
5
6
7
8
9
10
11
12

编译模块代码

编译模块前端代码前，请确保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
1
2
3
4
5
6
7
8
9
10
11
12

# OSX / Linux

  1. 安装 nodejs

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

推荐安装 node 14 以上版本

  1. 安装 cnpm 和打包依赖

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

安装cnpm

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

安装webpack和gulp依赖

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

编译ModStart代码

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

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

编译模块代码

编译模块前端代码前，请确保ModStart的静态资源已经安装过依赖（cnpm install）

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

# 前端开发组件

# 弹窗功能

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

<a href="javascript:;" data-dialog-request="/path/to/dialog">弹窗</a>
1

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

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

# Ajax请求

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

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

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

# Ajax表单

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

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

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

# 图片预览

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

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

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

# JS库-介绍

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

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

# JS库-基础

# MS.ready

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

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

# JS库-工具类

参考文档 JS工具类手册

# JS库-组件

# 富文本 editor

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

引入JS

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

初始化富文本


<script id="content" name="content" type="text/plain"><p>初始化HTML</p></script>
<script>
    // 全功能
    MS.editor.basic('content');
    // 精简
    MS.editor.simple('content');
</script>
1
2
3
4
5
6
7
8

# 弹窗选择器 selectorDialog

使用示例

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

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

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

# 前端静态页面开发

前端静态页面通常由前端按照设计稿切图，避免与官方样式冲突，需要使用以下静态模板页面：

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=5, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面标题</title>
    <meta name="keywords" content="Keywords">
    <meta name="description" content="Desiption">
    <link rel="stylesheet" href="https://ms-cdn.modstart.com/asset/vendor/iconfont/iconfont.css">
    <link rel="stylesheet" href="https://ms-cdn.modstart.com/asset/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://ms-cdn.modstart.com/asset/theme/default/base.css">
    <link rel="stylesheet" href="https://ms-cdn.modstart.com/asset/layui/css/layui.css">
    <link rel="stylesheet" href="https://ms-cdn.modstart.com/asset/theme/default/style.css">
    <!-- 引入静态切图页面样式 -->
</head>
<body >
    <!-- 静态页面基础样式 -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

官方样式库可参考：

Last Updated: 5 months ago