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