從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 計劃書 & 我的前後端開發簡史

阿新 • • 發佈：2018-12-27

---新內容開始---

番外

大家週一好呀，又是元氣滿滿的一個週一呀！感謝大家在週一這個著急改Bug的黃金時期，抽出時間來看我的博文哈哈哈，時間真快，已經到第十四篇博文了，也很順順（跌跌）利利（撞撞）的來到了Vue的講解，群裡有小夥伴說，感覺後端還有很多沒有更新，是呀！還是有很多東西的在後端，只不過想把vue給簡單的搭建出來，如果大家有後端的一些知識，可以給我留言，我總結後，在Vue系列之後再繼續說，再強調一次，後端以後還會更新。

前邊的.net core 文章我會一直在更新中，一直在修改其中的錯誤，或者不是很清晰的地方，或者大家提出的問題，我都會放進去（因為現在開始了Vue，有的小夥伴在看.Net Core 的時候遇到問題歡迎來群裡，實時給大家解決問題）。大家如果看的時候，可能在文中會不經意間看到自己的名字，這裡統一說一下，如果你指出了我的錯誤，或者提出了建設性的建議，我會把您的相關問題放到文中，算是一種鼓勵支援我的動力？(要是感覺不適合，可以私信給我，或者咱的QQ群，我去掉)。週末的時候我聽取了@

高海東的意見，把程式碼升級到了.Net Core 2.1版本，現在的Git專案裡已經被2.1版本的覆蓋了，其實基本上都差不多，只是在Swagger那部分會有一些輕微的不同，我也把2.0版本的放到了Git新地址，https://github.com/anjoy8/Blog.Core2.0 需要2.0版本的可以去下載。

前言

好啦，開始今天的講解，今天呢，大家可以不用關心Git，或者各種Code了，因為今天不涉及到程式碼，今天主要說的是我的開發經歷，然後說明下網際網路BS開發下的Web發展史，然後引出VUE——一個前後端分離的較好的前端框架（目前前端三大框架React、Vue、Angular）。大家可以簡單看一下，無論你是做BS開發的，還是CS開發的。

本VUE系列我大概有以下幾個路線系列（可能以後有增刪），內容可能涉及的有些多，因為要重頭開始講，如果你感覺是後端沒必要學習的話，權當是個樂子了，可以看看，因為我不是專業講師，大家看看對知識點混個臉熟就行，知道有這回事兒，怎麼用，萬一下一個專案要用到呢，是吧。如果你想好好了解下，或者想轉前端（全棧，我也在去全棧的路上），可以試一試，自己以後跟著練習下：

強調一點：現在的前端已經不是以前那種單純的切圖片，畫頁面了，前端框架層出不窮，面向物件寫法的要求日益增加，邏輯性的呼聲越來越高，所以我的感覺就是，現在的前端已經往全棧方向發展，後端往架構師方向發展。

1、Web開發經歷哪些時期

2、JS高階開發 —— 面向物件系列和 ES6（如果想了解js初級，可以單找我。）

3、vue開篇，引入vue.js，基本指令語法系列

4、Vue生命週期系列

5、搭建腳手架Vue-cli，安裝node.js，npm基礎系列

6、Axios訪問.Net Core Api相關

7、模板-事件屬性-修飾符等

8、webpack打包相關

9、Vue-router路由相關

10、元件詳解系列

11、Vuex狀態模型庫系列

12、SSR 服務端渲染，Nuxt.js 專案二講解

零、今天要實現紅色的部分

注意：以下這只是我個人的經歷以及思考，不是百度正版的，有不同意見請提出來

先上一個網路截圖，很簡單

一、簡潔明快的單頁面時代——沒有前後端的ASP

1、背景

我接觸到的的第一個專案，那時候還在大學，就是Asp專案，當時第一次用到，感覺真的很神奇，通過程式碼的敲寫，就能動態的展示出來，還能連線資料庫持久化，這麼多年過去了，現在再重新看，感覺看到頭都大了，從網上下載了一套原始碼，大家可以簡單看看，真的神奇，不僅html程式碼裡有邏輯程式碼，還有sql連線資料庫，嗯。。。可能部分讀者都沒有接觸過這樣的程式碼了，不過雖然看著很凌亂，但是在瀏覽器渲染生成了Html頁面，還是和普通的asp.net mvc是一樣的樣式

2、程式碼樣式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <%'include此行程式碼供安裝外掛用勿刪改%>
    <% Const funpath = "../" Const dbpath = "../" Set ctr_page = New tr_page
    Set ctr_user = New tr_user
    Set ctr_comment = New tr_comment %>
    <%pageno = tr_killstr(request.querystring("pageno"), 1, 8, 1, "", "", "", "", 1) %>
    <%'head此行程式碼供安裝外掛用勿刪改%>
    <title>反饋留言_<%=application(siternd & "55trsitetitle")%></title>
    <link rel="shortcut icon" type="image/x-icon" href="<%=funpath%>favicon.ico"
    <%'headend此行程式碼供安裝外掛用勿刪改%>
</head>
<body>
    <%'body1此行程式碼供安裝外掛用勿刪改%>
    <%if application(siternd & "55tropenguestbook")=1 then%>
    <div class="alert alert-warning alert-dismissible trnotice1" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>

        <%=application(siternd & "55trguestnotice")%>
    </div>
    <form id="form1" name="form1" method="post" action="usersave.asp" target="ifr1" onSubmit="return checkguest(this)">
        <%'body5此行程式碼供安裝外掛用勿刪改%>
        <table class="trsendtb">
        <tr>
        <td align="center" colspan="11"><textarea id="content" name="content" class="trgcontent trinput6"></textarea></td>
        </tr>
        <%'body6此行程式碼供安裝外掛用勿刪改%>
        <tr>
        <td align="left"><img id="codeimg" src="../core/Code.asp?rd=" style="cursor:hand; " title="點選更換" onClick="javascript: this.src = '../core/Code.asp?rd=' + randomString(10) + ''" height="24" border="0" width="70"></td>
        <td align="right">
        <input type="submit" value="立即提交" name="submit1" id="submit1" class="trbt3 trmar1" />
        <input type="hidden" value="guest" name="action" />
        </td>
        </tr>
        <%'body7此行程式碼供安裝外掛用勿刪改%>
        </table>
        <%'body8此行程式碼供安裝外掛用勿刪改%>
    </form>
    <table align="center" border="0" cellpadding="3" cellspacing="1" id="mytable" class="trtable2">
    <% sql = "select id,username,content,addtime,homepage,asuser,answer,astime from tr_comment where types=2 and ispass=1 and isdel=0 order by addtime desc , id desc " page_size = 20 pagei = 0 n = (pageno -1) * page_size
    Call ctr_page.create_rs(sql, rs, conn, page_size, pageno) ' rs.open sql,conn,0,1
    If Not rs.EOF Then
    Do While Not rs.EOF ' and pagei
    <page_size If pagei>
    = page_size Then Exit Do
    pagei = pagei + 1 n = n + 1
    %>
    <p class="trp1">
    <span class="uname">
    <%if trim(rs("homepage"))<>"" then%>
    <%if isweburl(rs("homepage")) then%>
    <a href="#"><%=rs("username")%></a>
    <%else%>
    <%=rs("username")%>
    <%end if%>
    <%else%>
    <%=rs("username")%>
    <%end if%>
    </span> 說： <%=rs("content")%>
    </p>
    <div class="col-lg-3 <%=colbs3%> trrow1199 trlistright trovh" id="trlistright178888">
    <%'body3此行程式碼供安裝外掛用勿刪改%>
    </div>
    </div>
    <div class="trpublicline clearfix "> </div>
</body>
</html>

3、概要講解

這就是Web 1.0 時代，典型的就是ASP，在之前web開發中，也是獨領風騷了一段時間，適合小專案，不分前後端，大家一起開發頁面，那個時候大家是按照頁面來分工的，寫好的頁面直接就可以跑，不需要編譯，有點兒像PHP，服務端給什麼瀏覽器就展現什麼，展現的控制在 Web Server 層。

優點：

1、無需編譯，可在伺服器端直接執行。

2、容易編寫，可使用普通的文字編輯器編寫，如記事本就可以完成

3、由指令碼在伺服器上而不是客戶端執行，使用者端的瀏覽器不需要提供任何別的支援，這樣大大提高了使用者與伺服器之間的互動速度。

缺點：

1、程式碼邏輯混亂，難於管理：由於ASP是指令碼語言混合html程式設計，所以你很難看清程式碼的邏輯關係，並且隨著程式的複雜性增加，甚至超出一個程式設計師所能達到的管理能力，各種問題就出現了。

2、程式碼的可重用性差：由於是面向結構的程式設計方式，並且混合html，所以可能頁面原型修改一點，整個程式都需要修改，更別提程式碼重用了。

3、弱型別造成潛在的出錯可能：只支援兩種非型別的語言：VBScript和JavaScript，儘管弱資料型別的程式語言使用起來回方便一些，但相對於它所造成的出錯機率是遠遠得不償失的。

4、缺乏完善的糾錯/除錯功能。

這個時期發展到了後端，真是苦不堪言，為了讓前後端分工更合理高效，提高程式碼的可維護性，Asp.Net MVC框架就出現了。

注：其實之後是aspx，也就是asp.net Webfrom開發，第一次把前後端程式碼摘開，這裡就不詳細說了。

二、前後端開始分工的時代——MVC

1、背景

我是前端起家的，然後轉向後端的，當2014年接觸MVC的時候，就深深的被吸引了，感覺這種整齊的，分工明確的感覺，讓我耳目一新，從此就開始了後端程式設計師之路。當時開發的是公司的一個企業內部管理系統，是一箇中型的專案，地址就不說了。

2、原始碼就不貼上了

注意：這裡我要說一下，我曾經看到一個朋友自己寫公司框架，是把Controller和Views放到了兩個層裡邊，嗯，就好像把Model層提出了一樣，這三個都提出來了，這也是一個思路。

3、概要講解

優點：

1、較好的解決了單頁面開發，或者單純的Code behind的aspx開發中所出現的問題

2、程式碼可維護性得到明顯好轉，每個部分都有自己的應該負責的職能。

3、為了讓 View 層更簡單強大，還可以選擇aspx或者Razor模板，甚至可以在裡邊書寫C#程式碼。

缺點：

1、前端開發重度依賴開發環境。在這種模式下，前端寫 demo，寫好後，讓後端去套模板，有可能套錯，套完後還需要前端確定，來回溝通調整的成本比較大。有時候為了一個前端樣式，需要後端去重新編譯（ eg.由後端動態生成前端樣式的情況）。

2、整個開發過程中，不僅僅是前端和後端相互依賴，後端控制器和model的糾纏不清，各種剪不斷理還亂，有時候為了處理邏輯而修改model，有時候修了model還要多處多次修改controller，我的天，想想都累心喲，不過我們卻都是這麼做的 [哭笑]。

注：當然說的有些誇張，目前MVC模式還是很好的一種框架模式。

三、異步出現 ——AJAX，前端小時代

1、背景

還記得第一次使用非同步程式設計是在2015年，當時使用的時候，真是整個人都開心壞了，頁面不用再重新整理，點選跳轉，點選提交，點選分頁，點選任何地方，都是區域性載入，感覺整個人都很輕鬆，這個時候我也由一個完完全全的後端，開始慢慢接觸前端，開始寫HTML程式碼，開始寫CSS，還是用Jquery來寫各種介面請求，各種拼接頁面DOM，各種頁面互動動作等等。開始往前端邁進。

2、程式碼，簡單的一個，基於面向物件的寫法

    function(options) {
        options = .extend({ odd: 'odd', even: 'even', selected: 'selected' }, options); ('tbody>tr:odd', this).addClass(options.odd);
        ('tbody>tr:even', this).addClass(options.even); ('tbody>tr', this).click(function () {
            var hasSelected = (this).hasClass(options.selected); (this)hasSelected ? 'removeClass' : 'addClass'
                .find(':checkbox').attr('checked', !hasSelected)
        })

        $('tbody>tr:has(:checked)', this).addClass(options.selected); return this //返回this , 使方法可鏈
    }

})
}) (jQuery);
    $(function () { // $('.red').color('blue');

        $('#table2').alertBgColor({ odd: '', even: 'even', selected: 'selected' }).find('th').css('color', 'green')

    })

3、概要講解

優點

1、前後端的分工非常清晰，前後端的關鍵協作點是 Ajax 介面

2、前端可以自由的開發了，不受後端開發環境的過分約束

缺點

1、前端過分依賴介面開發。如果後端的介面不規範，亂寫，業務邏輯不穩定，那麼前端開發會很痛苦。為了解決這個問題，RESTful介面規範就出現了，還記得麼，咱們在.Net Core api框架中使用的。有了和後端一起沉澱的介面規則，還可以用來模擬資料，使得前後端可以在約定介面後實現高效並行開發。相信這一塊會越做越好。

2、前端開發的複雜度控制。這個我深有體會，在這兩年，我有時候開發介面，有時候做前端頁面渲染，有時候還要增加特效，過分的操作DOM，真是讓人力不從心，幾乎每一個頁面依賴的JS程式碼都有上千行代，前端頁面渲染越來越慢，越來越笨重，還記得上次面試的時候，被問到了如何前端優化，嗯~~~都是淚。

四、前後端分離 ——ＭＶ** 時代

1、背景

今天，全棧這個時代正在到來，或者已經日益成熟，只不過很遺憾的是，我還沒有來的及開發過這種真正的前後端框架（還好的是我負責過公司的幾個微信小程式專案），因此只能自己動手了，一方面滿足自己的需要，另一方面也幫助一部分和我一樣學習的，或者從後端轉前端的小可愛們。

不過還是有很多人不喜歡，或者不想弄懂這個前後端分離技術

2、程式碼

是一種全新的體驗，元件模組的趨勢

<template>//模板樣式 V
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            :router="true"
            active-text-color="#ffd04b">
        <el-menu-item index="/">
            <span class="el-icon-menu"></span>
            MMP Jobmonitor
            <sup>Beta</sup>
        </el-menu-item>
        <el-menu-item index="/a">WatchLists</el-menu-item>
        <el-menu-item index="/b">Jobs</el-menu-item>
        <el-menu-item class="user-info" index="">
            <img id="headImg" src="http://who/Photos/a.jpg" padding="0" margin="0" width="40">
            Hi,MM Team User
        </el-menu-item>
    </el-menu>
</template>

<script>//指令碼資訊 MV
    export default {
        data() {
            return {
                activeIndex2: '/'
            };
        },
        beforeCreate() {
            let pathIndex = this.$route.path;
            this.activeIndex2 = pathIndex;
            console.log(this.activeIndex2);
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>//樣式
    sup {
        top: -0.6em;
        position: relative;
        vertical-align: baseline;
    }

    .user-info {
        float: right !important;
    }
</style>

3、概要說明

優點

1、分層開發，職責劃分更清晰，nodejs作為前端伺服器，由前端開發人員負責，前端開發人員不需要知道C#後臺是如何實現的，也不需要知道API介面是如何實現的，我們只需要關心我們前端的開發工作，並且管理好nodejs前端伺服器，而後臺開發人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API介面就可以；

注意：這裡可能有歧義，感謝@的提醒，應該是這裡吧。是開發的過程中，前程工程師在本地搭建vue+node環境，開發後釋出的時候，已經不依賴Node了。

2、獨特的非同步、非阻塞I/O的特點，這也就意味著他特別適合I/O密集型操作，在處理併發量比較大的請求上能力比較強，因此，利用它來充當前端伺服器，向客戶端提供靜態檔案以及響應客戶端的請求，我覺得這是一個很不錯的選擇。

缺點和挑戰也還是很多

這裡我先留下空白，咱們這一系列講完我再新增，希望那個時候大家都很清晰這個什麼是前後端分離：

五、結語

今天呢，沒有講到程式碼，主要交代了下，未來一段時間我們的講解方向和中心，然後簡單說了下web開發的幾個階段，我雖然都親身經歷過，不過還是由很多錯誤的認知，和不通順的想法，希望大家多批評指正，明天正式開始咱們的Vue開篇，Js高階概述。

六、CODE

Blog.Core2.0版本不更新

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 計劃書 & 我的前後端開發簡史

番外

前言

零、今天要實現紅色的部分

一、簡潔明快的單頁面時代——沒有前後端的ASP

1、背景

2、程式碼樣式

3、概要講解

二、前後端開始分工的時代——MVC

1、背景

2、原始碼就不貼上了

3、概要講解

三、異步出現 ——AJAX，前端小時代

1、背景

2、程式碼，簡單的一個，基於面向物件的寫法

3、概要講解

四、前後端分離 ——ＭＶ** 時代

1、背景

2、程式碼

五、結語

六、CODE

相關推薦