精华内容
下载资源
问答
  • axios 模块化管理接口

    千次阅读 2019-10-29 15:34:41
    // 引入qs模块,用来序列post类型的数据 import QS from 'qs' import { Http2SecureServer } from 'http2'; // 环境的切换 // 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹...
    // Http.js
    // 在http.js文件中,处理axios
    import axios from 'axios'
    // 引入qs模块,用来序列化post类型的数据
    import QS from 'qs'
    import { Http2SecureServer } from 'http2';
    // 环境的切换
    // 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。
     
        axios.defaults.baseURL = 'aaa/aaa/';
        // 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s,就会告知用户当前请求超时,请刷新等。
        axios.defaults.timeout = 10000
        // post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置,即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
        // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
        withCredentials:true 
    // 请求拦截器
    axios.interceptors.request.use(
        config => {
            // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
            // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断 
            config.headers = {
                'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
            }
            // debugger
            const token = 'abcdefg';
            token && (config.headers.Authorization = token);
            return config;
        },
        error => {
            return Promise.error(error);
        },
    
        // 响应拦截器
        response => {
            console.log(23131)
            // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据     
            // 否则的话抛出错误
            if (response.status === 200) {
                return Promise.resolve(response);
            } else {
                return Promise.reject(response);
            }
        },
        // 服务器状态码不是2开头的的情况
        // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
        // 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
        // 下面列举几个常见的操作,其他需求可自行扩展
        error => {
            if (error.response.status) {
                switch (error.response.status) {
                    case 404:
                        console.log('未找到')
                        break;
    
                    // 401: 未登录
                    // 未登录则跳转登录页面,并携带当前页面的路径
                    // 在登录成功后返回当前页面,这一步需要在登录页操作。                
                    case 401:
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                        break;
    
                    // 403 token过期
                    // 登录过期对用户进行提示
                    // 清除本地token和清空vuex中token对象
                    // 跳转登录页面                
                    case 403:
                        Toast({
                            message: '登录过期,请重新登录',
                            duration: 1000,
                            forbidClick: true
                        });
                        // 清除token
                        localStorage.removeItem('token');
                        store.commit('loginSuccess', null);
                        // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面 
                        setTimeout(() => {
                            router.replace({
                                path: '/login',
                                query: {
                                    redirect: router.currentRoute.fullPath
                                }
                            });
                        }, 1000);
                        break;
    
                    // 404请求不存在
                    case 404:
                        Toast({
                            message: '网络请求不存在',
                            duration: 1500,
                            forbidClick: true
                        });
                        break;
                    // 其他错误,直接抛出错误提示
                    default:
                        Toast({
                            message: error.response.data.message,
                            duration: 1500,
                            forbidClick: true
                        });
                }
                return Promise.reject(error.response);
            }
        }
    
    
    )
    
    
    
    export function get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        });
    }
    
    export function post(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, QS.stringify(params))
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    
    // api.js
    // 用于统一管理我们的接口
    
    import { get, post } from './http'
    
    export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
    
    created (){
            // console.log(this.$store.state.count)\
            
              //发送请求return new Promise((resolve, reject) => {
                 apiAddress({                    
                    type: 0,                    
                    sort: 1                
                }).then(res => {
                    // 获取数据成功后的其他操作
                   console.log(res)              
                })            
    
              
           
        },
    
    展开全文
  • 什么是模块化模块化的好处是

    万次阅读 2019-07-15 20:25:43
    所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数。模块化开发使用代码耦合度降低,模块化的意义在于最大化的设计重用,以最少的模块、零...

    什么是模块化,模块化的好处是?

    模块化是一种处理复杂系统分解为更好的可管理模块的方式。

    所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数。模块化开发使用代码耦合度降低,模块化的意义在于最大化的设计重用,以最少的模块、零部件,更快速的满足更多的个性化需求。

    模块化的好处

    优点:

    a .  可维护性

    1、灵活架构,焦点分离

    2、方便模块间组合、分解

    3、方便单个模块功能调试、升级

    4、多人协作互不干扰

    b .  可测试性

    可分单元测试

     

    拓展:

    缺点:

    性能损耗

    1、系统分层,调用链会很长

    2、模块间发送消息会很耗性能

     

    补充:

    内聚度

    内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处很明显。当把相关的任务分组后去阅读就容易多了。设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。

    耦合度

    耦合度则是指模块之间的关联度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。

    展开全文
  • Maven模块化开发,无法注入其它模块中的接口,无法扫描到jar文件中的接口

    需求描述:

    使用Maven构建模块化项目,分为web,service,dao模块,web依赖service,service依赖dao模块

    问题描述:

    在web模块中可以引用service模块的中接口或者类,但是无法注入(可以确定:Spring的配置文件扫描包路径是没有问题的。)。


    web模块截图:


    Service模块截图:


    解决方案:

    <plugins>
    			<!-- jar插件 -->  
    			<plugin>  
    				<groupId>org.apache.maven.plugins</groupId>  
    				<artifactId>maven-jar-plugin</artifactId>  
    				<version>2.3.1</version>  
    				<configuration>  
    					<archive>  
    						<manifest>  
    							<addDefaultImplementationEntries>true</addDefaultImplementationEntries>  
    							<addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>  
    						</manifest>  
    					</archive>  
    				</configuration>  
    			</plugin>
    		</plugins>



    展开全文
  • 1. 准备工作 编辑器vscode,需要安装liveServer插件...由于公司业务比较复杂,并且有很多重复性的功能,所以尽量采用高可复用的原则,该系统采用完全分离的开发方式,所有数据采用接口调用,所以由于功能模块较...

    代码地址如下:
    http://www.demodashi.com/demo/13362.html

    1. 准备工作

    编辑器vscode,需要安装liveServer插件在前端开启静态服务器
    或者使用hbuilder的自带服务器

    概述

    由于公司业务比较复杂,并且有很多重复性的功能,所以尽量采用高可复用的原则,该系统采用完全分离的开发方式,所有数据采用接口调用,所以由于功能模块较多,为了维护容易,采用api分模块管理,不同模块api彼此隔离,按需引用,这避免了之前将所有api接口放到一个文件中不好维护的问题,由于系统列表比较多,单独抽离出table模块,将datatable进行二次封装,尽量采取约定大于配置的思想,尽可能将通用的配置设为默认,如果有个性的需求,则通过传配置的方式进行变更,同时也封装了一些其他模块,也是同样的思想

    代码结构

    代码讲解

    目录介绍

    js/modules

    这里存放公用的模块化工具,模块化思想,这里主要包括以下模块

    简要讲解一下
    #### api
    api包存放后台的接口,采用模块化管理api,一个功能模块建一个xxx-api.js,页面引用的时候,按需引用,依赖那几个模块的api就用哪几个api

    优点

    避免众多模块如果写在一个js中进行管理,难以维护,因为页面用的时候是根据api对象的key值获取对应url,写在一起需要各个模块起名要避免重复,分模块管理可以不同模块key值相同,起名时候方便

    代码解释

    首先是base-url.js,所有api都继承于这个模块,baseurl主要存放公用的url和获取url的方法,比如请求下拉框接口一般会通用一个接口,这样的就可以放在baseurl中,其他模块继承于他,获取下拉框url时候就直接调用getUrl(‘getKeyValue’)就可以,而没有必要再在相应的api模块中在定义一遍
    以下是base-url的代码:

    
    /**
     * 基类配置api,其他的api全继承于此
     * @author nabaonan
     */
    layui.define(function(exports) {
        var AjaxUrlConfig = {
    
            baseUrl:window.top.getWebName()+ "/json/", //根目录
            "datatables/language": {
                url:"../frame/datatables/language/chs.json"//这个url是相对baseUrl的
            },
            //下拉框和radio,checkbox接口
            "getKeyValue": {
                url: "../key-value.json"
            },
    
            getUrl: function(urlKey) {
                var url, type;
                try {
                    url = this[urlKey].url;
                    type = this[urlKey].type;
                } catch(e) {
                    console.log("urlkey错误,请配置:", urlKey);
                }
                var namespace = this.namespace||'';
                return {
                    url: (this.baseUrl + namespace + url),
                    type: type || "get"
                };
    
            },
            getAbsoluteUrl:function(urlKey){
                return this[urlKey].url;
            }
    
    
        };
    
        exports("base-url", AjaxUrlConfig);//这个输出的key相当于是应用的时候的名字
    });
    

    为了便于理解,只上一个简单的登录模块api,

    /**
     * 登录api
     */
    var requireModules =[
        'base-url'
    ];
    window.top.registeModule(window,requireModules);//这个方法是为了解决不同页面可能多次引用相同模块报错,方法的效果就是如果引用了就不再次引用
    
    layui.define(requireModules, function(exports) {
    
        var $ = layui.jquery;
        var baseApi = layui['base-url'];
        var url = {
            namespace:'login/',
            'validLogin': {
                url: '../true.json'
            },
            'login': {
                url: 'login.json'
            },
            'logout': {
                url: '../true.json'
            },
            'getValidImg': {
                url:'../../image/v.png'
            }
        }
    
        var result = $.extend({},baseApi, url);
    
        exports('login-api', result);
    
    });
    页面使用api
    var webName = getWebName();
    
    layui.config({
        base: webName + '/js/modules/' //这个路径以页面引入的位置进行计算
    });
    
    var requireModules = [
        'request',
        'role&authority-api',
    ];
    
    //参数有顺序
    layui.use(requireModules, function(
        ajax,
        authorityApi,// 这个名字可以自定义,就是一个形参
    ) {
                ajax.request(authorityApi.getUrl('updateAuthority'), data,  function() {
    
                });
    })

    js/controller

    该模块下对应页面的js,命名和页面相同,用来操作页面

    views

    存放所有页面

    frame

    存放公共类库,比如datatables,ztree,jquery

    css

    公共样式

    json

    本地模拟数据

    组件化思想

    由于本项目页面有许多页面需要公用,比如查看分中心页面,一个页面需要有好几部分,历史记录,基本信息,审核记录,而且这些信息其他页面也有涉及,所以采用组件化加载,就是把他们拆分成一个个小页面,通过jquery的load进行加载页面,拼成一个完整的页面
    上代码:
    这个

      renderPage: function() {
                this.loadBranchCenterInfo();
                this.loadContractInfo();
                e.tabChange('auditList', 'audits-1');
                e.tabChange('recordsList', 'records-1');
            },
    

    以下是加载相应页面,通过jquery.load

       //本期合同记录
            loadContractRecords: function($container) {
                window.isHistory = false;
                window.layFilter = 'recordsList';
                var url = ajax.composeUrl(webName + '/views/contract/contract-records-list.html', data);
                $container.load(url);
            },

    界面预览

    权限管理

    权限列表

    更新权限


    权限分为菜单和按钮两种类型,首先添加菜单,和子菜单,在最后一级子菜单添加按钮,然后在角色配置相应的权限,进行显示,按钮分为行内按钮和页面按钮,行内按钮就是,列表每一行的操作按钮,行内按钮分为开关类型和普通的按钮

    角色管理

    如果有什么需要补充的,欢迎指正

    基于layui的框架模版,采用模块化设计,接口分离,组件化思想

    代码地址如下:
    http://www.demodashi.com/demo/13362.html

    注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

    展开全文
  • 本人最近在边学边做一个j2ee的项目,主要目的是为Android客户端服务。使用的框架是SpringMVC + Spring +Hibernate 。在这样的框架下,虽然MVC的概念比较清晰,但是我们开发的时候该如何来实现分块开发呢? 比如,这...
  • 什么是模块化模块化的好处

    千次阅读 2019-07-15 21:16:37
    什么是模块化 ...所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数。模块化开发使代码耦合度降低,模块化的意义在于最大化的设...
  • 将过程放在模块中创建显示接口: module mm contains subroutine abc(a) implicit none integer :: a(:) a(1)=1 a(2)=2 end subroutine end module program main use mm implicit none integer :: ...
  • 模块化开发

    千次阅读 2015-03-30 22:23:57
    模块化是个一般概念,这一概念也适用于软件开发,可以让软件按模块单独开发,各模块通常都用一个标准化的接口来进行通信。实际上,除了规模大小有区别外,面向对象语言中对象之间的关注点分离与模块化的概念基本一致...
  • 上一篇《我所理解的Android模块化(一)》笔者讲到了Android模块化的基本知识和模块化跳转路由的基本用法,解决了模块化中跳转的问题,下面就来讲讲如何实现模块化之间的通信和跨模块方法调用。 有这样一个场景,...
  • 问题背景: product 服务作为服务端,提供了一个 对外通信Fegin接口 ProductClient,放在了com.imooc.product.client jar包下 order 服务作为客户端,... 多模块化时,应该在order主类上添加下面圈出来的注解,这...
  • maven模块化

    千次阅读 2018-10-08 17:02:06
    我们为什么要进行模块化开发? 在多人使用Maven协作开发项目时,尤其是稍微上点规模的项目,每个RD的工作都细分到具体功能和模块,有些模块甚至还要单独部署。 我们假设有这样一个商城项目,包括以下几个模块: ...
  • Python接口自动-requests模块之post请求

    千次阅读 多人点赞 2020-04-13 07:30:00
    ——————·今天距2021年262天·——————这是ITester软件测试小栈第111次推文在上一篇Python接口自动测试系列文章:Python接口自动-requests模块之...
  • 前端模块化详解(完整版)

    万次阅读 多人点赞 2019-02-16 19:13:46
    前言 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很...本文内容主要有理解模块化,为什么要模块化模块化的优缺点以及模块化规范,并且介绍下开发中...
  • CSS模块化(一) CSS模块化的背景

    千次阅读 2014-03-21 10:36:38
    模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体,完成整个系统所要求的功能。模块具有以下几种基本属性:...
  • Java9模块间的服务化详解

    千次阅读 2017-12-05 16:06:31
    Jdk9模块化实战入门 本章我们来到了Jdk9新增的最重要的一块内容——模块化。...模块化的程序提供了更高级的封装性与服务化特性。本章我们将学习:什么是模块化 jdk9 的模块化特性 如何构建模块化程序 面
  • Android 开发:由模块化到组件化(一)

    万次阅读 多人点赞 2016-12-15 01:43:15
    当你看到这的时候,想必心理一阵恶寒:模块化?组件化?到底是什么鬼?有啥区别. 有这种感觉才是对的,模块化和组件化本质思想是一样的,都是"大化小",两者的目的都是为了重用和解耦,只是叫法不一样.如果非要说区别,那么...
  • WebKit模块化分析

    万次阅读 热门讨论 2013-01-03 22:51:17
    模块化  软件的首要技术使命是管理复杂度(Complexity)。这是>中的一个标题。软件本质性困难的根源都在于复杂性。Dijkstra指出没有谁的大脑能容得下一计算机程序。正如社会进步催生社会分工一样,软件行业也...
  • Java模块化

    千次阅读 2019-07-23 00:46:18
    项目---模块---包---类 模块间的调用 两个模块模块一 test01、模块二test02): test01、test02都在src下创建配置文件:module-info.java 普通调用 test01配置文件 配置导出:exports module test01 { ...
  • 使用阿里ARouter路由实现组件化(模块化)开发流程

    万次阅读 多人点赞 2017-12-08 17:05:20
    Android平台中对页面、服务提供路由功能的中间件,我...模块化的要解决的问题 模块间页面跳转(路由); 模块间事件通信; 模块间服务调用; 模块的独立运行; 模块间页面跳转路由拦截(登录) 其他注意事项; ...
  • js模块化进程

    千次阅读 2017-08-11 16:03:45
    js的模块化进程现在前端技术日新月异,对于同一个问题痛点,各个时段有各自的解决方案,这就带来了很大差异。今天我就打算梳理js模块化的历史进程,讲一讲这些方案要做什么,怎么做。
  • ES6中的模块化编程

    千次阅读 多人点赞 2020-11-29 20:55:51
    ES6中的模块化编程为什么使用模块化ES6模块化实现export 命令import命令完整实例export default 命令 为什么使用模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,...
  • 写这篇博客的初衷首先一句话概括:我想把这几个月做的事情记录下来,并且希望尽量详细,希望读者读了这篇文章能够知道模块化具体每个步骤都做什么,而不是大致的了解。 现在很多人都在谈模块化,网上有一大堆的...
  • 2019 Python接口自动测试框架实战开发(一)

    万次阅读 多人点赞 2019-06-28 15:55:25
    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!...整个项目分为四个部分:接口基础丶接口开发丶Unittest与接口测试结合以及接口自动框架从设计到开发 接口基础包括:H...
  • CSS模块化基本思想

    千次阅读 2016-03-14 17:48:30
    模块化的基本概念1.什么是模块模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。 模块化用来分割,组织和打包软件。每个模块完成一个特定的子功能,所有的模块按某种方式组装起来,成为一个...
  • JS模块化编程

    千次阅读 2015-07-14 22:29:29
    然而由于出身的缘故,JS本身在大规模应用上存在着很多问题,比如模块化编程。本文以浏览器端模块化编程为内容,重点介绍AMD规范和CMD规范。在服务器端,NodeJS遵守的Common规范我们这里暂不讨论。  对于计算机语言...
  • C语言模块化程序设计

    千次阅读 2017-09-07 22:29:29
    C语言模块化程序设计 模块划分 C语言模块化程序设计需理解如下概念:  (1) 模块即是一个.c文件和一个.h文件的结合,头文件(.h)中是对于该模块接口的声明;  (2) 某模块提供给其它模块调用的...
  • 什么是模块化模块化开发如何实现? 那么什么是模块化呢,时下流行的库与框架又有哪些在利用模块化进行开发呢? 今天我从以下两个方向来进行描述,如果描述不够准确,还请各位多多指正。 1.什么是模块化? ...
  • 对于组件化,有的人也喜欢称之为模块化开发,我也比较喜欢称之为模块化开发。使用模块化开发也已经有一段时间了,特此总结一下模块化开发的心得,防止以后忘记。 什么是模块化开发 对于模块化开发的概念,有的人...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 653,537
精华内容 261,414
关键字:

服务接口模块化