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. 接口測試 前端聯調中，一大部分時間作了接口測試的工做，但願可以找到好的接口測試工具和測試流程。

才疏學淺，若有問題懇請斧正。