前端源码分析

李鹏军2024/4/17大约 4 分钟开源教程文档

前端源码分析

前端使用hplus风格主题。

页面源码分析

下面分析系统参数相关前端代码，包括数据列表、查询、新增、编辑、删除等功能，掌握了这部分内容，再开发其他前端页面，就会得心应手，界面如下：

列表查询

下面的这段代码，用来展示数据列表的，定义了数据列表ID为jqGrid，分页ID为jqGridPager

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

下面的代码，就是具体的数据列表Grid

$(function () {
    $("#jqGrid").Grid({
        url: '../sys/config/list',
        colModel: [
            {label: 'ID', name: 'id', key: true, hidden: true},
            {label: '参数名', name: 'key', index: 'key', width: 60},
            {label: '参数值', name: 'value', index: 'value', width: 100},
            {label: '备注', name: 'remark', index: 'remark', width: 80}
        ]
    });
});

上面这些代码，就实现了数据列表的功能，下面就来看看，查询的实现，页面代码如下

<div v-show="showList">
    <Row :gutter="16">
        <i-col span="4">
            <i-input v-model="q.key" @on-enter="query" placeholder="参数名"/>
        </i-col>
        <i-button @click="query">查询</i-button>
    </Row>
</div>

我们定义了查询参数key，点击查询，就会调用vue的query方法，其中一定要定义key变量，不然页面会报错，代码如下：

var vm = new Vue({
    el: '#rrapp',
    data: {
        q: {key: null},
        showList: true,
        title: null,
        config: {},
        ruleValidate: {
            key: [
                {required: true, message: '参数名不能为空', trigger: 'blur'}
            ],
            value: [
                {required: true, message: '参数值不能为空', trigger: 'blur'}
            ]
        }
    },
    methods: {
        query: function () {
            vm.reload();
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {'key': vm.q.key},
                page: page
            }).trigger("reloadGrid");
        },
        reloadSearch: function () {
            vm.q = {
                confKey: ''
            }
            vm.reload();
        }
    }
});

新增、修改、删除功能

<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <div class="buttons-group">
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="config" :rules="ruleValidate" :label-width="80">
            <Form-item label="参数名" prop="key">
                <i-input v-model="config.key" placeholder="参数名"/>
            </Form-item>
            <Form-item label="参数值" prop="value">
                <i-input v-model="config.value" placeholder="参数值"/>
            </Form-item>
            <Form-item label="备注" prop="remark">
                <i-input type="textarea" v-model="config.remark" placeholder="备注"/>
            </Form-item>
            <Form-item>
                <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px">返回</i-button>
                <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
            </Form-item>
        </i-form>
    </Card>
</div>
<script>
    var vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                key: null
            },
            showList: true,
            title: null,
            config: {},
            ruleValidate: {
                key: [
                    {required: true, message: '参数名不能为空', trigger: 'blur'}
                ],
                value: [
                    {required: true, message: '参数值不能为空', trigger: 'blur'}
                ]
            }
        },
        methods: {
            query: function () {
                vm.reload();
            },
            add: function () {
                vm.showList = false;
                vm.title = "新增";
                vm.config = {};
            },
            update: function () {
                var id = getSelectedRow("#jqGrid");
                if (id == null) {
                    return;
                }
                Ajax.request({
                    url: "../sys/config/info/" + id,
                    async: true,
                    successCallback: function (r) {
                        vm.showList = false;
                        vm.title = "修改";
                        vm.config = r.config;
                    }
                });
            },
            del: function (event) {
                var ids = getSelectedRows("#jqGrid");
                if (ids == null) {
                    return;
                }
                confirm('确定要删除选中的记录？', function () {
                    Ajax.request({
                        url: "../sys/config/delete",
                        params: JSON.stringify(ids),
                        contentType: "application/json",
                        type: 'POST',
                        successCallback: function () {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        }
                    });
                });
            },
            saveOrUpdate: function (event) {
                var url = vm.config.id == null ? "../sys/config/save" : "../sys/config/update";
                Ajax.request({
                    url: url,
                    params: JSON.stringify(vm.config),
                    contentType: "application/json",
                    type: 'POST',
                    successCallback: function () {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    }
                });
            },
            handleSubmit: function (name) {
                handleSubmitValidate(this, name, function () {
                    vm.saveOrUpdate()
                });
            },
            handleReset: function (name) {
                handleResetForm(this, name);
            }
        }
    });
</script>

表单验证

<i-form ref="formValidate" :model="user" :rules="ruleValidate" :label-width="80"><Form-item label="用户名" prop="username">

自定义字段验证

请参照以下例子

富文本编辑器Froala Editor

Froala Editor编辑器是一款有史以来最强大的JavaScript富文本编辑器之一。它采用了最新的技术，并利用jQuery和HTML5的巨大优势，创造了出色的编辑体验。拥有非常多的示例让你轻松集成，让你的用户爱上它清晰的设计。它能和Ruby On Rails，Django，Angular.js，Meteor，Symgony.CakePHP等集成，具有如下特点。

微小 - 只需添加您需要的插件(30+ 官方插件)
客户端框架集成
可以向如 PHP, Node.JS, .NET, Java, 和 Python提供服务端开发工具包
代码注释精美
在线文档更新
简单可扩展- 良好的插件注释使你更容易使用和开发自己的插件
良好的维护 - 持续更新
很好的支持 - 帮助中心

项目中的使用

导入到项目中 header.html

<!--富文本-->
<link rel="stylesheet" href='m/statics/plugins/froala_editor/css/froala_editor.min.css'/>
<script src='/statics/plugins/froala_editor/js/froala_editor.min.js'></script>

初始化

$(function () {
    $('#goodsDesc').editable({
        inlineMode: false,
        alwaysBlank: true,
        height: '500px', //高度
        minHeight: '200px',
        language: "zh_cn",
        spellcheck: false,
        plainPaste: true,
        enableScript: false,
        imageButtons: ["floatImageLeft", "floatImageNone", "floatImageRight", "linkImage", "replaceImage", "removeImage"],
        allowedImageTypes: ["jpeg", "jpg", "png", "gif"],
        imageUploadURL: '../sys/oss/upload',
        imageUploadParams: {id: "edit"},
        imagesLoadURL: '../sys/oss/queryAll'
    })
});

赋值

$('#goodsDesc').editable('setHTML', '');

获取文本内容

$('#goodsDesc').editable('getHTML');

Vue官方API

https://cn.vuejs.org/v2/api/

iView官方API

https://v4.iviewui.com/docs/introduce