5.前端基於react,后端基於.net core2.0的開發之路（5） 配置node層，session設置、獲取，請求攔截

1.總結一下

今年，2月份從深圳來到廣州，工作到現在，回頭看，完成的項目4-5個，公司基本沒有懂技術的領導，所以在技術選型上，我們非常的自由，所以內心一直都不滿足現狀，加上一起工作的小伙伴給力（哈哈哈，我們一共就2個人），填坑能力不錯，所以敢於把新技術，新架構用於項目當中，反正一切都可控，怎么開心怎么來。

小項目不說了，基本都是面向服務在做，架構也是以前技術積累下來的一個腳手架項目，直接套進去用。

雲課堂2個人一共開發了4個月，然后投入使用，包含了商品購買，視頻點播，視頻直播，題庫和部分實操功能，支付也集成了微信和支付寶，支持PC和手機瀏覽器。開發效率還是很快的。因為架構比較輕。本來想徹底實施事件驅動的，然后試了一下，寫一個功能還是太麻煩了，然后架構刪刪減減，基本來說和.netCore項目一樣，不過多了T4模板，自動生成了某些部分類，減少編碼時間。前端項目，也僅僅使用了seajs實現了下模塊化管理，用了bootstrap這個UI框架，基本也還是JQuery打天下的模式。

js代碼也從以前的

var bTop = $(window).scrollTop(); var isShow = false; $(window).scroll(function () { if ($(this).scrollTop() - bTop > 0) { if ($(this).scrollTop() >= 337) { if (!isShow) { $(".flot-menu").show(); isShow = true; } } } else { if ($(this).scrollTop() < 337) { if (isShow) { $(".flot-menu").hide(); isShow = false; } } } bTop = $(this).scrollTop();  }); $(".cg-menu").on(mParams.click, function () { $(".pb-hide").hide(); var classid = $(this).data("showclass"); $("." + classid).show(); });

這種形式，完成了一丟丟的進化，變成了這樣

 var jsEvent = {
        Init: function () {
            this.GetHotCommodity();
        },
        InitEvent: function () {
            $(".pagec").off(mParams.click).on(mParams.click, function (event) {
                var index = $(this).data("index");
                jsEvent.PageChange(NowType, index, PageSize);
            });
        },
        GetHotCommodity: function () {
         //do
        },
        PageChange: function (Commodity, PageIndex, PageSize, NowText) {
        }
    }
    $(function () {
        jsEvent.Init();
    });

然后這個項目進入了維護階段。

后來陸續做了2個小項目（小程序）。

今年來廣州3-4個月后，以前在深圳的同事就跟我說，發現了一個超厲害的UI框架（antd），喊我去看看，因為當時還在開發雲課堂，所以忙的很，只是稍微瞄了一眼，發現現在的項目並不能使用上，然后擱置到8月份，比較閑的時候，才去看，然后發現需要學習大名鼎鼎的react,從此入了前端的坑。

花了1個月時間，完成了學習，並弄了一個腳手架項目的前端工程化項目，然后9月份的時候，公司說原來的管理系統太卡（基於NH），非常的吃內存和帶寬，然后服務器成本劇增。要重新搞一個，把數據遷移過來，然后腦子一抽，直接上react,上.netcore,1個半月開發了第一期，目前的需求是基礎信息模塊，權限模塊，潛在學員模塊，學籍管理模塊，書籍管理模塊，教務模塊，財務模塊，然后第一期完成了基礎信息模塊，權限模塊，潛在學員模塊，學籍管理模塊和部分教務模塊。現在已經經過測試，馬上要試點使用了。

2017年過去了，我將react投入了生產環境，學習了react-native,ts等等等

2018年，我要使用react-native做一個APP，要從一個后端程序員，轉型為一個前端程序員，換一個環境，換一個工作性質，想想就賊開心。

 

2.配置Node層

好了，閑話少說，開始搞項目，先配置下node層，實現請求攔截

接着上一節的項目，

現在src里面建一個node文件夾，命名先這樣，

建一個index.js

require('babel-register');
require('./server');

建一個server.js

import express from 'express';
import session from 'express-session';

const app = express();
const server = app.listen(8080, () => {
    const { port } = server.address();
    console.info(`Listened at http://localhost:${port}`);
});

然后引入express-session包，如果express也沒裝，可以裝一下

cnpm i express-session --save-dev

然后在根目錄加一個文件.babelrc

{
    "presets": [
        "es2015"
    ]
}

看一下現在整個項目的目錄

package.json加一個命令

"private": true,
  "scripts": {
    "start": "roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint",
    "nstart": "node ./src/node/index"
  },
  "engines": {
    "install-node": "6.11.1"
  },

然后啟動

這樣就啟動成功了，node層就配置好了

PS，如果出現 Cannot find module 'xxxx'這樣的錯，如下圖

解決方式很簡單：cnpm i xxxx --save就可以了

 

3.攔截請求，記錄session

express的相關知識自己去看，這里就不說了，同樣的框架還有很多，自行百度

好，先加一個api的攔截器

node文件夾下->apiMiddleware.js

export default function (req, res, next) {
    console.log('我進來了' + req.url);
    next();
}

server.js

import express from 'express';
import session from 'express-session';
import apiMidddleware from './apiMiddleware';

const app = express();

app.use(apiMidddleware);

const server = app.listen(8080, () => {
    const { port } = server.address();
    console.info(`Listened at http://localhost:${port}`);
});

然后改下/src/serivces/home.js

import request from '../utils/request';

export function GetHomeInfo() {
  return request('http://localhost:8080/api/getHomeInfo');
}

 

啟動前端：

npm run start

開一個新的cmd啟動后端

npm run nstart

刷新前端

然后看啟動后端的控制台

攔截成功！

我們先說說攔截有啥用，攔截可以記錄session,然后轉發請求（不用代理和cors，就可以跨域請求服務），還可以加鹽，到后端驗證等等好處。

具體實現可以看看這個鏈接https://gitee.com/teambp/ScaffoldClient/blob/master/src/server/apiMiddleware.js

好，咱們來記錄session看看

改寫下utils->request.js

export default function request(url, values) {
  let options = { method: "Post", body: JSON.stringify(values), //請注意，這個位置，應該填寫的是same-origin，但是由於項目太簡單，所以我使用了一刀切的方式 //如果需要了解這個東西，請自行百度 credentials: 'include' }; return fetch(url, options) .then(checkStatus) .then(parseJSON) .then((data) => { return { data }; }) .catch(err => ({ err })); }

上面的代碼只是模擬代碼，請勿在項目里這么用，哈哈哈，具體可以看git的項目。

該寫下node->server.js

import express from 'express';
import session from 'express-session'; import apiMidddleware from './apiMiddleware'; import bodyParser from 'body-parser'; const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(session({ name: 'test', secret: 'sjhkv343jkkj@jjk', cookie: ({ maxAge: 120 * 60000 }), resave: true, saveUninitialized: false })); app.use(apiMidddleware); app.disable('x-powered-by');  const server = app.listen(8080, () => { const { port } = server.address(); console.info(`Listened at http://localhost:${port}`); });

bodyParser 報錯的，請自行安裝,cnpm i xxx --save-dev

改寫 apiMiddleware.js

export default function (req, res, next) {
    console.log('我進來了' + req.url);
    console.log(req.session)
    if (!req.session.user) {
        console.log('我賦值了');
        req.session.user = { username: 'admin' };
    }
    res.send({ message: '記錄成功！', success: true });
}

 

然后啟動2個端

刷新下2次前端

看node啟動cmd里面的console.log

OK,記錄成功！

 

本篇文章到此結束！！！

文章目錄在：http://www.cnblogs.com/Ambre/p/7825527.html

文章的項目源碼在：https://gitee.com/dissucc/learnreact