最近的項目系列1——core整合SPA

時間 2019-11-19

標籤最近項目系列 core 整合 spa 简体版

原文原文鏈接

一、前言

　　當前，先後端分離大行其道，我本人以前很多項目也是純先後端分離，但總有些場景，春先後端分離整起來比較痛苦，好比我手頭這個公衆號項目吧，它涉及到第三方鑑權，第三方憑證，以及微信憑證這些，都不適合放到前端去作，外加一些自己業務層面的認證受權，這些終歸是放服務端處理合適一些的。另外一層面緣由，是不想系統全部功能全懟到一個SPA中，仍是但願不一樣功能模塊，去拆分到不一樣頁面中的，俗稱的多頁。css

　　但做爲公衆號系統，富客戶體驗，仍是須要一些SPA體驗的，具體來說個人作法是每一個功能模塊一個單頁。這即是爲啥系列文章中有這個core整合SPA這一篇。html

二、邊界上下文

　　core端的不說了，MVC，地球人都清楚，這裏重點說前端整合。具體來說，我但願把前端體驗中SPA、路由、組件等一系列優秀實踐整合到MVC中。這裏以Vue、router、axios爲例來講明。前端

三、實現方式

1) Layout的處理

　　Layout殼子頁，你們都知道，定義整個站點的佈局，以及引入公共前端文件。既然咱們採用Vue系列，那就要把對應的文件引用替換，大體以下：vue

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />
    <title>Fuck Frontend</title>
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/mint-ui/dist/style.min.css" />
        <link rel="stylesheet" href="~/css/main.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdn.staticfile.org/mint-ui/2.2.13/style.min.css"
              asp-fallback-href="~/lib/mint-ui/dist/style.min.css"
              asp-fallback-test-class="box-sizing"
              asp-fallback-test-property="background-color"
              asp-fallback-test-value="border-box"
              crossorigin="anonymous" />
        <link rel="stylesheet" href="~/css/main.min.css" />
    </environment>
    @RenderSection("CSS", required: false)
</head>
<body>
    <div id="app">
        @RenderBody()
    </div>
    <environment include="Development">
        <script src="~/lib/vue/dist/vue.min.js"></script>
        <script src="~/lib/mint-ui/dist/index.js"></script>
        <script src="~/lib/vue-router/dist/vue-router.min.js"></script>
        <script src="~/lib/axios/dist/axios.min.js"></script>
        <script src="~/js/main.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"
                asp-fallback-src="~/lib/vue/dist/vue.min.js"
                asp-fallback-test="window.Vue"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/mint-ui/2.2.13/index.js"
                asp-fallback-src="~/lib/mint-ui/dist/index.js"
                asp-fallback-test="window.MINT"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"
                asp-fallback-src="~/lib/vue-router/dist/vue-router.min.js"
                asp-fallback-test="window.VueRouter"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"
                asp-fallback-src="~/lib/axios/dist/axios.min.js"
                asp-fallback-test="window.axios"
                crossorigin="anonymous">
        </script>
        <script src="~/js/main.min.js"></script>
    </environment>
    @RenderSection("Scripts", required: false)
</body>
</html>

2) 前端JS代碼結構

　　這裏我們不去講webpack中那一套，我們只看在傳統MVC中那一套。上圖：node

　　CSS、img不說，重點說JS文件結構，大概這麼幾個層次：webpack

　　js根目錄下放置公共js文件及其打包&壓縮後的.min.js文件，例如圖中的main.js、main.min.js，以及各功能模塊打包&壓縮後的.min.js，如上圖中order.min.js；ios

　　JS根目錄下的文件夾，對應各個功能模塊，如這裏的order文件夾對應order功能模塊，內置order的各個前端js文件；web

　　功能模塊文件夾內部，對應功能模塊內部的Vue組件，以及模塊內部公共js文件，例如這裏order內部，有index.js和component文件夾，index內主要是order相關的前端路由，視圖掛載，component是order模塊用到的幾個視圖組件。ajax

　　這即是具備後端風格的前端文件組織方式。打包&壓縮暫時不講，在後續系列文章中單獨說。vue-router

3）前端異常處理AOP

　　回到JS根目錄，在mian.js中有這麼一段：

此處全局攔截Axios響應結果，若是非正常響應，如401,403,500等，則根據是否有重定向地址，決定是重定向到對應頁，仍是前端彈框提示錯誤信息。此處的AOP實現是依據node中間件的概念，跟core裏邊的中間件一模一樣。

4）ajax請求標識

　　通常而言，後端須要識別前端過來的請求是頁面請求仍是ajax請求，若是不依賴前端傳遞的特定標識的話，服務端是無法識別這個的，因此在ajax請求中咱們加入特定標頭，這裏仍是在man.js：

相關標籤/搜索

最完整系列

spa