Magicodes.WeiChat——后台JS框架封装

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装。我们先来说说主要的框架JS——mwc.js和mwc_elements.js。这两个JS文件位于Scripts目录下的app目录: · mwc:前端框架定义,可以理解为接口定义 · mwc_elements:基于前端框架定义的具体实现 主要API功能如下: 1日志 日志函数用于向浏览器控制台输出日志信息,比如调试信息、警告信息、错误信息、灾难信息等等,兼容主流的浏览器。

Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装。我们先来说说主要的框架JS——mwc.js和mwc_elements.js。这两个JS文件位于Scripts目录下的app目录:

· mwc:前端框架定义,可以理解为接口定义

· mwc_elements:基于前端框架定义的具体实现

主要API功能如下:

1日志

日志函数用于向浏览器控制台输出日志信息,比如调试信息、警告信息、错误信息、灾难信息等等,兼容主流的浏览器。后续还会增强相关函数,目前只做了简单的封装。

1.1 定义

目前封装了5个日志记录函数,分别是:

方法名

参数

描述

mwc.log.debug

logObject:object

输出debug日志

mwc.log.info

logObject:object

输出info日志

mwc.log.warn

logObject:object

输出warn日志

mwc.log.error

logObject:object

输出error日志

mwc.log.fatal

logObject:object

输出fatal日志

1.2 使用示例:

mwc.log.debug('记录调试日志')

mwc.log.info('记录信息日志')

mwc.log.warn('记录警告日志')

mwc.log.error('记录错误日志')

mwc.log.fatal('记录灾难日志')

1.3 效果图

image

2 通知

通知函数用于向用户提示相关业务信息。默认显示在用户窗口的右上角,然后在一定时间后会自动消失。

不同函数显示的颜色和图标不同,通常用于显示业务成功操作提示,警告提示,错误提示等信息。

2.1 定义

函数定义如下:

方法名

参数

描述

mwc.notify.success

message(消息正文):string,

title(消息标题):string

显示success提示

mwc.notify.info

message(消息正文):string,

title(消息标题):string

显示info提示

mwc.notify.warn

message(消息正文):string,

title(消息标题):string

显示warn提示

mwc.notify.error

message(消息正文):string,

title(消息标题):string

显示error提示

2.2 使用示例

mwc.notify.success('这是成功提示!','消息提示')

mwc.notify.success('这是成功提示!')

mwc.notify.info('这是信息提示!','消息提示')

mwc.notify.info('这是信息提示!')

mwc.notify.warn('这是警告提示!','消息提示')

mwc.notify.warn('这是警告提示!')

mwc.notify.error('这是错误提示!','消息提示')

mwc.notify.error('这是错误提示!')

2.3 效果图

image

3 弹窗

弹窗信息(提示)用于向用户显示需要用户确认的信息或内容,主要用于弹窗显示信息确认、成功确认、警告确认、错误确认、操作确认等。

3.1 定义

方法名

参数

描述

mwc.message.info

message(消息正文):string,

title(消息标题):string

显示Info信息

mwc.message.success

message(消息正文):string,

title(消息标题):string

显示success信息

mwc.message.warn

message(消息正文):string,

title(消息标题):string

显示warn信息

mwc.message.error

message(消息正文):string,

title(消息标题):string

显示error信息

mwc.message.confirm

message(消息正文):string,

title(消息标题):string

显示confirm信息

3.2 使用示例

mwc.message.info('图片删除成功!','温馨提示')

mwc.message.success('图片删除成功!','温馨提示')

mwc.message.warn('图片删除失败!','温馨提示')

mwc.message.error('图片删除出现错误,该图片不存在!','温馨提示')

mwc.message.confirm('确定需要删除此项目么?','温馨提示')

mwc.message.confirm('确定需要删除此项目么?','温馨提示',function(){alert('删除成功!')})

3.3 效果图

Info:

image

Success:

image

Warn:

image

Error:

image

Confirm:

image

4 UI阻塞

UI阻塞会显示遮罩层以阻碍用户的操作,通常用于Ajax请求处理或者时间比较长的业务处理,以提高用户体验并且防止在处理过程中用户进行其他操作。

4.1 定义

方法名

参数

描述

mwc.ui.block

elm(jq选择器):string

阻塞UI

mwc.ui. unblock

elm(jq选择器):string

取消阻塞

4.2 使用示例

mwc.ui. block ()

mwc.ui. unblock ()

mwc.ui. block ('#newUsers')

mwc.ui. unblock ('#newUsers')

4.3 效果图

image

image

5 忙碌状态

忙碌状态用于阻塞UI并且显示加载动画,通常用于Ajax请求处理或者时间比较长的业务处理,以提高用户体验并且防止在处理过程中用户进行其他操作。

5.1 定义

方法名

参数

描述

mwc.ui.setBusy

elm(jq选择器):string,

optionsOrPromise(设置):object

设置为忙碌状态

mwc.ui.clearBusy

elm(jq选择器):string

清除或关闭忙碌状态

5.2 使用示例

mwc.ui.setBusy()

mwc.ui.clearBusy()

mwc.ui.setBusy('#newUsers')

mwc.ui.clearBusy('#newUsers')

mwc.ui.setBusy('#newUsers',{finally:function(){alert('终于搞完了!')}})

5.3 效果图

image

image

6 弹出窗口

弹出窗口用于在当前页面弹窗以Iframe的形式加载其他页面并显示,以便用户在一个界面里完成所有的操作或者查看所有内容,以便提高用户体验。

6.1 定义

方法名

参数

描述

mwc.window.show

title(窗口标题):string,

url(url地址):string,

width(宽度,可省略):int,

height(高度,可省略):int

弹出窗口。

注意:该函数支持多级弹窗,如果没有设置弹窗大小,子级弹窗的高宽会被自动设置比父级窗口稍小,以更好的呈现。

mwc.window.closeSeft

 

从当前窗口的内容页关闭自身(即关闭当前窗口)

mwc.window.closeAll

 

关闭所有弹窗

6.2 使用示例

//将clicktype='modal'属性的链接均用弹窗打开

$("a[data-clicktype='modal']").on('click', function () {

var url = $(this).data('url');

var title = $(this).data('title');

mwc.window.show(title, url);

});

mwc.window.closeSeft()

mwc.window.closeAll()

6.3 效果图

image

image

image

7 Ajax请求处理

本框架封装了对象restApi用于处理Ajax请求。主要用于使用Ajax请求REST风格的Web Api,并且根据状态码处理请求结果,回调成功或错误函数。

7.1 HTTP状态码处理

mwc.restApi封装了对Ajax请求的通用处理。其定义了get、put、post、delete等4个函数,能够很方便的访问REST API接口。默认已支持以下类型的HTTP状态码处理:

HTTP状态码

描述

处理

对应WebApi方法

200

成功响应

调用success函数,并传递jsonData

Ok

201

创建成功

调用success函数,并传递jsonData

Created

401

需要验证

弹出“登陆失效,请重新登陆!”提示,调用error函数,并跳转到登录窗口

Unauthorized

204

成功响应,无内容返回

调用success函数

StatusCode(HttpStatusCode.NoContent)

404

资源或对象不存在

弹出“您访问的资源已被删除或不存在!”提示,调用error函数,并传递错误消息

NotFound

400

请求失败

调用error函数,并传递失败对象消息

BadRequest

500

服务器错误

调用error函数,并传递错误消息对象

InternalServerError

配置说明,在Ajax默认的配置项上,增加对以下属性的支持:

属性名称

类型

说明

success

function

业务处理成功后执行的回调函数

error

function

业务处理失败后执行的回调函数

isBlockUI

bool

请求时是否阻碍UI(会显示遮罩层以及加载动画),默认为true

blockUI

string

Jquery选择器表达式

7.2 定义

方法名

参数

描述

mwc.restApi.get

setting(ajax设置):object

使用Http GET发起Ajax请求

mwc.restApi.delete

setting(ajax设置):object

使用Http DELETE发起Ajax请求

mwc.restApi.put

setting(ajax设置):object

使用Http PUT发起Ajax请求

mwc.restApi.post

setting(ajax设置):object

使用Http POST发起Ajax请求

7.3 使用示例

7.3.1 GET

示例1:

mwc.restApi.get({
                    url: '/api/Menus',
                    success: function (data) {
                        $.each(data, function (i, v) {
                            if (v.sub_button) {
                                $.each(v.sub_button, function (i1, v1) {
                                    v.sub_button[i1] = $.extend(self.getModelTpl(), v1);
                                })
                            }
                            data[i] = $.extend(self.getModelTpl(), v);
                        });
                        self.Menus(ko.mapping.fromJS(data));
                    }
                });

示例2:

mwc.restApi.get({
            //请求地址
            url: '/api/News/' + newValue,
            //是否锁定UI
            isBlockUI: true,
            //可选,锁定元素
            blockUI: componentInfo.element,
            //成功函数
            success: function (data) {
                self.Name(data.Title);
                self.Url('/MediaFiles/thumb/' + data.ThumbMediaId + '.jpg');
            }
        });

示例3:

//加载数据
    this.loadData = function () {
        mwc.restApi.get({
            //请求地址
            url: '/api/News/' + self.currentPageIndex() + '/' + self.pageSize(),
            //是否锁定UI
            isBlockUI: true,
            //可选,锁定元素
            blockUI: componentInfo.element,
            //成功函数
            success: function (data) {
                self.dataRows(data.DataRows);
                self.totalCount(data["TotalItemCount"]);
                self.pages(self.getPagesArr());
                self.showLoader(false);
            }
        });
};

7.3.2 POST

示例1:

mwc.restApi.post({
                    url: "@Model.TemplateNo",
                    contentType: "application/x-www-form-urlencoded",
                    data: dataJson,
                    success: function (data) {
                        if (data.Success && data.Result)
                            location.href = '/WeiChat_MessagesTemplateSendLog?templateNo=@Model.TemplateNo&batchNumber=' + data.Result;
                        else
                            mwc.message.warn('操作失败,具体原因请查看系统日志!');
                    }
                });

7.3.3 PUT

mwc.restApi.put({
                    url: '/api/Menus',
                    data: { menu: { button: data } }
                });

7.3.4 DELETE

mwc.restApi.delete({
                    url: "/api/images/" + $(this).data("id"),
                    success: function (data) {
                        mwc.notify.success("操作成功!");
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                });

已经在封装微信H5 UI框架的脚本了,请关注后续更新。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
2月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
223 1
crypto-js中AES的加解密封装
|
28天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
24天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
63 41
|
1天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
7天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
27 3
|
14天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
38 1
|
1月前
|
前端开发 JavaScript 关系型数据库
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用,前端基于SoybeanAdmin二次开发,后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈,以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计,包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时,也提供了项目运行所需的环境和依赖,以及如何拉取代码、安装依赖和启动项目的方法。最后,文章展示了项目的演示图,并对项目进行了总结,指出项目未经严格测试,仅供学习交流使用。
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
|
1月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
35 12
|
2天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
4天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
10 0