最近的项目系列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：