jQuery 前后端分离项目总结

简介:

文档目录

  • 前言
  • 设计阶段
    1. 文档
    2. Restful api
    3. 技术选型
  • 开发阶段
    1. 本地开发与联调
    2. 路径、接口状态、登录超时、服务器报错
    • 统一处理返回结果 登录超时、字符串错误、其他字符串
  • 部署测试阶段
    1. 项目根目录
    2. 自动部署
  • 待解决问题
    1. 路由问题
    2. 状态共享
    3. 接口测试

前言

近两年尝试了一些前后端分离的项目,开发流程和效率上并不是顺风顺水,效率与质量没有特别显著的提升,不过大部分是一些旧项目的维护和二期开发,架构上很难按照单页面应用的开发模式实现,期间也遇到很多问题,最近在旧的项目上用jquery做了一个小模块的前后端分离,并做了一下记录和总结。希望多学习多提升,如果有好的实现方法大家能多多指点。

设计阶段

1. 文档

在之前的开发与本次的开发,总会遇到的一个问题就是文档,前端用的是淘宝开源的RAP可视化接口管理工具, 搭建在我们自己的服务器上,前端定义接口是按照页面来划分,一个页面对应的有几个接口全部列在页面名称下,

但是经过几个项目的实践下来,发现java团队的分工与前端不同,是按照功能实现来分的,前端开发一个购买的流程,会分几个页面,第一步,第二步,第三步,再根据每个页面功能调用接口,编表单、校验等业务逻辑开发,而后端是按照功能划分,比如前端的第一步、第二步、第三步这个三个页面都有获取对应A\B\C列表的接口,开发上仅仅是从库里查一下这个字段再返回给你,那么类似的功能,就会分给一个java工程师来做,对于后端效率高,接口实现上不会太分散。

所以导致接口文档有两份,后端用Excel维护一份,前端用RAP维护一份,前端开发开始前要根据后端提供的接口文档按照页面划分接口定义mock数据。开发期间偶尔接口一个字段的变更就需要维护两份,很不方便,效率反而下来了。

2. Restful api

定义接口要考虑到多种情况,同时要做好规则约束,我们遇到的仅仅几个,简单列一下。

状态码: 接口报错有很多种情况,数据格式、服务器出错等,要设计好对应提示的信息和状态码。

提交数据类型 ajax提交数据时一般都为json,属性不能是数组,我们内部约定,文档可写数组,提交时统一将数组转为字符串。

属性与数组 文档内所有返回值,标为list的即返回数组,没有标识的即返回属性。

返回数据类型 我们没有做的特别细,所以返回的类型都是字符串,前端需要统一处理成自己需要用的格式。

所有入参增加params 见代码

$.ajax({
        url: "separationCommon/getDic.gsp",
        type: "POST",
        dataType: "JSON",
        baseUrl: true,
        async: false,
        data: {
            "params.dicCode": !code ? "DIC_EB_APPNTPROVINCE": code,
            "params.searchType": 1
        },
        success: function (data) {
            if(data.status == 200) {
                var ARR = data.data.dicList;
                window.STR = provinceSelect(ARR, code);
            }
        }
    });
复制代码

3. 技术选型

考虑到开发完以后要交给java团队自己来维护,我们之前有用过vue和avalon,但是后端人员维护起来很麻烦,就直接用jquery+jquer.tmpl了。jquer.tmpl学习成本几乎可以忽略不计,另一方面因为是旧的项目,前端几乎成型,左侧是树菜单,右侧是load进来的jsp页面,我们就直接使用jquery的load来加载HTML文件了。

开发阶段

1. 本地开发与联调

mock工具有请求拦截的插件,可以直接实现返回数据,RAP官网文档

但是后期联调也需要转发和拦截,而且还有登录模拟,就没有用,直接用express+http-proxy-middleware做的本地转发

const express = require('express');
const timeout = require('connect-timeout');
const proxy = require('http-proxy-middleware');
const request = require("request");
const cheerio = require("cheerio");
const app = express();

// 超时时间
const TIME_OUT = 30 * 1e3;

// 设置端口
app.set('port', '8080');

// 设置超时 返回超时响应
app.use(timeout(TIME_OUT));
app.use((req, res, next) => {
  if (!req.timedout) next();
});

proxyOption = {
    target: 'http://ipaddress/mockjsdata/6',
	// target: 'http://ipaddress:9527/eb/',
	pathRewrite: {
        '^/api/' : '/'  // 重写请求,api/解析为/
    },
    changeOrigin: true,
    headers:{
        'Cookie': ''
    }
};


// 静态资源路径
app.use('/', express.static('src/page'));

request('http://192.168.180.87:9527/eb/syEdor/moniLongin.gsp', function(err,res,body){
    // 获取cookie
    var str = res.headers['set-cookie'][0];
    // 设置cookie
    proxyOption.headers = {
        'Cookie':str
    };

    if (!err && res.statusCode == 200) {

        // 反向代理
        app.use('/api/*', proxy(proxyOption));

    }else{
        console.log('登录失败')
    }
});


// 监听端口
app.listen(app.get('port'), () => {
  console.log(`server running @${app.get('port')}`);
});

复制代码

2. 路径、接口状态、登录超时、服务器报错

统一项目根路径 添加部分ajax拦截,判断条件为options.baseUrl;

 // 项目路径拦截
    $.ajaxPrefilter(function (options) {
        if(options.baseUrl) {
            if(options.url.indexOf('/eb/') != -1) {
                options.url = options.url;
            } else {
                options.url = '/eb/' + options.url;
            }
            options.crossDomain = false;
        }
    }); 
复制代码

接口状态、登录超时、服务器报错 因为报错有很多种情况,正常的接口返回的状态码判断,如果非200则统一提示, 登录目前没有用单页token机制,部分还是会跳转到jsp,部分接口报错如500错误也会返回jsp,jsp的返回结果是html,也要增加判断,请求头内会携带session超时信息。

//ajax请求结束
    $(document).unbind('ajaxComplete').bind('ajaxComplete', function(e,xhr,opt){

        if(opt.baseUrl){
            var str = xhr.responseText;
            try {

                var obj = JSON.parse(str);
                if(obj.status != 200) {
                    popUp(obj.msg);
                }

            } catch(e) {
                // 通过XMLHttpRequest取得响应头,sessionstatus
                var sessionstatus = xhr.getResponseHeader('sessionstatus');
                if(sessionstatus == "timeout"){

                    popUp('登录超时,请重新登录', function(){
                         window.location.reload();
                    });
                }else if(sessionstatus == "perror"){

                     popUp('请求的链接地址可能存在非法字符', function(){
                         window.location.reload();
                    });
                }else{
                    popUp('404,服务器出错!')
                }
            }
        }
      
    });
复制代码

部署测试阶段

1. 项目根目录

本地开发和调试与测试服务器的静态资源链目录不一致,页面中有一些图片和html文件的路径,用gulp打包替换。

 gulp.task('prod:narrowImg', ['prod:narrowJs'], function () {
        return gulp.src(Config.html.htmlProphaseLoad)
            .pipe(replace(/src=\"\.\.\/images/g, "src=\"\/eb\/static\/images"))
            .pipe(replace(/\/api\//g, "\/eb\/"))
            .pipe(replace(/load\(\$\(\"#loadjsp\"\)/g, 'load("\/eb"+$("#loadjsp")'))
            .pipe(rename({dirname: ''}))
            .pipe(gulp.dest(Config.html.distProphaseLoad)); // 替换三期load图片路径
    });
复制代码

2. 自动部署

gulp-sftp 很好用,直接配置一个任务就可以了。

gulp.task('ftp', function () {
        return gulp.src('dist/一二期/三期/load/*.*')
            .pipe(sftp({
                host: 'ipaddress',
                user: 'user01',
                pass: 'password',
                remotePath: '/application/apache9527/apache/htdocs/eb/load'
            }));
    })
复制代码

待解决问题

  1. 路由问题 本来想使用jQuery Hashchange或jqueryRouter来实现的,考虑到之前的模式和开发时间,就没有来替换。
  2. 状态共享 目前左右跨页面的状态都放在隐藏域的value和div的attr上,后期考虑引入Mbox做状态管理
  3. 接口测试 前端联调中,一大部分时间做了接口测试的工作,希望能够找到好的接口测试工具和测试流程。

才疏学浅,如有问题恳请斧正。


原文发布时间:2018-6-20
原文作者: 愚坤
本文来源 掘金如需转载请紧急联系作者
相关文章
|
JavaScript 前端开发 Java
bootsrap+jquery+组件项目引入文件的常见报错
bootsrap+jquery+组件项目引入文件的常见报错
78 0
|
3月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
177 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
JavaScript 前端开发 开发者
解决Vue项目中使用原生/jquery插件无法获取DOM的问题
解决Vue项目中使用原生/jquery插件无法获取DOM的问题记录。
305 1
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
80 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
90 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
350 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 算法 前端开发
jQuery第二天,笔记总结(二)
jQuery第二天,笔记总结(二)
124 0
jQuery第二天,笔记总结(二)
|
JavaScript
vue项目中如何使用jquery?
vue项目中如何使用jquery?
vue项目中如何使用jquery?
|
移动开发 缓存 JavaScript
jQuery第二天,笔记总结(一)
jQuery第二天,笔记总结
106 0
jQuery第二天,笔记总结(一)
|
JavaScript 前端开发
jQuery第一天,笔记总结(二)
jQuery第一天,笔记总结(二)
165 0
jQuery第一天,笔记总结(二)