---新內(nèi)容開始---
番外
大家周一好呀宰衙，又是元氣滿滿的一個周一呀平道！感謝大家在周一這個著急改Bug的黃金時期，抽出時間來看我的博文哈哈哈供炼，時間真快一屋，已經(jīng)到第十四篇博文了窘疮，也很順順（跌跌）利利 （撞撞）的來到了Vue的講解，群里有小伙伴說冀墨，感覺后端還有很多沒有更新闸衫，是呀！還是有很多東西的在后端诽嘉，只不過想把vue給簡單的搭建出來楚堤，如果大家有后端的一些知識，可以給我留言含懊，我總結(jié)后身冬，在Vue系列之后再繼續(xù)說，再強調(diào)一次岔乔，后端以后還會更新酥筝。
前邊的.net core 文章我會一直在更新中，一直在修改其中的錯誤雏门，或者不是很清晰的地方嘿歌，或者大家提出的問題，我都會放進(jìn)去（因為現(xiàn)在開始了Vue茁影，有的小伙伴在看.Net Core 的時候遇到問題歡迎來群里宙帝，實時給大家解決問題）。大家如果看的時候募闲，可能在文中會不經(jīng)意間看到自己的名字步脓，這里統(tǒng)一說一下，如果你指出了我的錯誤浩螺，或者提出了建設(shè)性的建議靴患，我會把您的相關(guān)問題放到文中，算是一種鼓勵支持我的動力？(要是感覺不適合，可以私信給我立叛，或者咱的QQ群，我去掉)或颊。周末的時候我聽取了@[高海東]的意見，把代碼升級到了.Net Core 2.1版本传于，現(xiàn)在的Git項目里已經(jīng)被2.1版本的覆蓋了囱挑，其實基本上都差不多，只是在Swagger那部分會有一些輕微的不同格了，我也把2.0版本的放到了Git新地址看铆，https://github.com/anjoy8/Blog.Core2.0 想要的可以去下載徽鼎。
前言
好啦盛末，開始今天的講解弹惦，今天呢，大家可以不用關(guān)系Git悄但，或者各種Code了棠隐，因為今天不涉及到代碼，今天主要說的是我的開發(fā)經(jīng)歷檐嚣，然后說明下互聯(lián)網(wǎng)BS開發(fā)下的Web發(fā)展史助泽，然后引出VUE——一個前端分離的較好的前端框架（目前前端三大框架React、Vue嚎京、Angular）嗡贺。大家可以簡單看一下，無論是做BS開發(fā)的鞍帝，還是CS開發(fā)的诫睬。
本VUE系列我大概有以下幾個路線系列（可能以后有增刪），內(nèi)容可能涉及的有些多帕涌，因為要重頭開始講摄凡，如果你感覺是后端沒必要學(xué)習(xí)的話，權(quán)當(dāng)是個樂子了蚓曼，可以看看亲澡，因為我不是專業(yè)講師，大家看看混個臉熟就行纫版，有這回事兒就行床绪，萬一下一個公司要用到呢，是吧其弊。如果你想好好了解下会涎，或者想轉(zhuǎn)前端（全棧，我也在去全棧的路上）瑞凑，可以試一試末秃，自己以后跟著練習(xí)下：
強調(diào)一點：現(xiàn)在的前端已經(jīng)不是以前那種單純的切圖片，畫頁面了籽御，前端框架層出不窮练慕，面向?qū)ο髮懛ǖ囊笕找嬖黾樱壿嬓缘暮袈曉絹碓礁呒继停袁F(xiàn)在的前端已經(jīng)往全棧方向發(fā)展铃将，后端往架構(gòu)師方向發(fā)展。
1哑梳、Web開發(fā)經(jīng)歷哪些時期
2劲阎、JS高級開發(fā)——面向?qū)ο笙盗校ㄈ绻浅跫墸⒁蚕雽W(xué)鸠真，可以單找我悯仙。）
3龄毡、vue開篇，引入vue.js锡垄，基本語法系列
4沦零、Vue生命周期
5、搭建腳手架Vue-cli货岭，安裝node.js路操，npm基礎(chǔ)系列
6、Axios訪問.Net Core Api系列
7千贯、模板-事件屬性-修飾符等系列
8屯仗、webpack打包系列
9、Vue-router路由系列
10搔谴、組件詳解系列
11祭钉、Vuex狀態(tài)模型庫系列
零、今天要實現(xiàn)紅色的部分
注意：以下這只是我個人的經(jīng)歷以及思考己沛，不是百度正版的慌核，有不意見請?zhí)岢鰜?/strong>
先上一個網(wǎng)絡(luò)截圖，很簡單
一申尼、簡潔明快的單頁面時代——沒有前后端的ASP
1垮卓、背景
我接觸到的的第一個項目，那時候還在大學(xué)师幕，就是Asp項目粟按，當(dāng)時第一次用到，感覺真的很神奇霹粥，通過代碼的敲寫灭将，就能動態(tài)的展示出來，還能連接數(shù)據(jù)庫持久化后控，這么多年過去了庙曙，現(xiàn)在再重新看，感覺看到頭都大了浩淘，從網(wǎng)上下載了一套源碼捌朴，大家可以簡單看看，真的神奇张抄，不僅html代碼里有邏輯代碼砂蔽，還有sql連接數(shù)據(jù)庫，嗯署惯。左驾。。可能部分讀者都沒有接觸過這樣的代碼了诡右，不過雖然看著很凌亂安岂，但是在瀏覽器渲染生成了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開發(fā)中，也是獨領(lǐng)風(fēng)騷了一段時間样眠，適合小項目友瘤，不分前后端，大家一起開發(fā)頁面檐束，那個時候大家是按照頁面來分工的辫秧，寫好的頁面直接就可以跑，不需要編譯被丧，有點兒像PHP盟戏，服務(wù)端給什么瀏覽器就展現(xiàn)什么，展現(xiàn)的控制在 Web Server 層甥桂。
優(yōu)點：
1柿究、無需編譯，可在服務(wù)器端直接執(zhí)行黄选。
2蝇摸、容易編寫，可使用普通的文本編輯器編寫办陷，如記事本就可以完成
3貌夕、由腳本在服務(wù)器上而不是客戶端運行，用戶端的瀏覽器不需要提供任何別的支持民镜，這樣大大提高了用戶與服務(wù)器之間的交互速度啡专。
缺點：
1、代碼邏輯混亂制圈，難于管理：由于ASP是腳本語言混合html編程植旧，所以你很難看清代碼的邏輯關(guān)系，并且隨著程序的復(fù)雜性增加离唐，甚至超出一個程序員所能達(dá)到的管理能力病附，各種問題就出現(xiàn)了。
2亥鬓、代碼的可重用性差：由于是面向結(jié)構(gòu)的編程方式完沪，并且混合html，所以可能頁面原型修改一點，整個程序都需要修改覆积，更別提代碼重用了听皿。
3、弱類型造成潛在的出錯可能：只支持兩種非類型的語言：VBScript和JavaScript宽档，盡管弱數(shù)據(jù)類型的編程語言使用起來回方便一些尉姨，但相對于它所造成的出錯幾率是遠(yuǎn)遠(yuǎn)得不償失的。
4吗冤、缺乏完善的糾錯/調(diào)試功能又厉。
這個時期發(fā)展到了后端，真是苦不堪言椎瘟，為了讓前后端分工更合理高效覆致，提高代碼的可維護(hù)性，Asp.Net MVC框架就出現(xiàn)了肺蔚。
注：其實之后是aspx煌妈，也就是asp.net Webfrom開發(fā)，第一次把前后端代碼摘開宣羊，這里就不詳細(xì)說了璧诵。
二、前后端開始分工的時代——MVC
1仇冯、背景
我是前端起家的腮猖，然后轉(zhuǎn)向后端的，當(dāng)2014年接觸MVC的時候赞枕，就深深的被吸引了澈缺，感覺這種整齊的，分工明確的感覺炕婶，讓我耳目一新姐赡，從此就開始了后端程序員之路。當(dāng)時開發(fā)的是公司的一個企業(yè)內(nèi)部管理系統(tǒng)柠掂，是一個中型的項目项滑，地址就不說了。
2涯贞、源代碼就不粘貼了
注意：這里我要說一下枪狂，我曾經(jīng)看到一個朋友自己寫公司框架，是把Controller和Views放到了兩個層里邊宋渔，嗯州疾，就好像把Model層提出了一樣，這三個都提出來了皇拣，這也是一個思路严蓖。
3薄嫡、概要講解
優(yōu)點：
1、較好的解決了單頁面颗胡，或者單純的Code behind的aspx開發(fā)中所出現(xiàn)的問題
2毫深、代碼可維護(hù)性得到明顯好轉(zhuǎn)，每個部分都有自己的應(yīng)該負(fù)責(zé)的職能毒姨。
3哑蔫、為了讓 View 層更簡單強大，還可以選擇aspx或者Razor模板弧呐，甚至可以在里邊書寫C#代碼闸迷。
缺點：
1、前端開發(fā)重度依賴開發(fā)環(huán)境泉懦。在這種模式下稿黍，前端寫 demo疹瘦，寫好后崩哩，讓后端去套模板，有可能套錯言沐，套完后還需要前端確定邓嘹，來回溝通調(diào)整的成本比較大。有時候為了一個前端樣式险胰，需要后端去重新編譯（ eg.由后端動態(tài)生成前端樣式的情況 ）汹押。
2、整個開發(fā)過程中起便，不僅僅是前端和后端相互依賴棚贾，后端控制器和model的糾纏不清，各種剪不斷理還亂榆综，有時候為了處理邏輯而修改model妙痹，有時候修了model還要多處多次修改controller，我的天鼻疮，想想都累心喲怯伊，不過我們卻都是這么做的 [哭笑]。
注：當(dāng)然說的有些夸張判沟，目前MVC模式還是很好的一種框架模式耿芹。
三、異步出現(xiàn)挪哄，單頁面應(yīng)用時代——AJAX吧秕，前端小時代
1、背景
還記得第一次使用異步編程是在2015年迹炼，當(dāng)時使用的時候寇甸，真是整個人都開心壞了，頁面不用再刷新，點擊跳轉(zhuǎn)拿霉，點擊提交吟秩，點擊分頁，點擊任何地方绽淘，都是局部加載涵防，感覺整個人都很輕松，這個時候我也由一個完完全全的后端沪铭，開始慢慢接觸前端壮池，開始寫HTML代碼，開始寫CSS杀怠，還是用Jquery來寫各種接口請求椰憋，各種拼接頁面DOM，各種頁面交互動作等等赔退。開始往前端邁進(jìn)橙依。
2、代碼硕旗，簡單的一個窗骑，基于面向?qū)ο蟮膶懛?/strong>
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、概要講解
優(yōu)點
1漆枚、前后端的分工非常清晰创译，前后端的關(guān)鍵協(xié)作點是 Ajax 接口
2、前端可以自由的開發(fā)了墙基，不受后端開發(fā)環(huán)境的過分約束
缺點
1软族、前端過分依賴接口開發(fā)。如果后端的接口不規(guī)范残制，亂寫立砸，業(yè)務(wù)邏輯不穩(wěn)定，那么前端開發(fā)會很痛苦痘拆。為了解決這個問題仰禽，RESTful接口規(guī)范就出現(xiàn)了，還記得么纺蛆，咱們在.Net Core api框架中使用的吐葵。有了和后端一起沉淀的接口規(guī)則，還可以用來模擬數(shù)據(jù)桥氏，使得前后端可以在約定接口后實現(xiàn)高效并行開發(fā)温峭。相信這一塊會越做越好。
2字支、前端開發(fā)的復(fù)雜度控制凤藏。這個我深有體會奸忽，在這兩年，我有時候開發(fā)接口揖庄，有時候做前端頁面渲染栗菜，有時候還要增加特效，過分的操作DOM蹄梢，真是讓人力不從心疙筹，幾乎每一個頁面依賴的JS代碼都有上千行代，前端頁面渲染越來越慢禁炒，越來越笨重而咆，還記得上次面試的時候，被問到了如何前端優(yōu)化幕袱，嗯~~~都是淚暴备。
四、前后端分離——Node（目前很爭議们豌，我還沒有切身感受到）
1涯捻、背景
今天，全棧這個時代正在到來玛痊，或者已經(jīng)日益成熟汰瘫，只不過很遺憾的是狂打，我還沒有來的及開發(fā)過這種真正的前后端框架（還好的是我負(fù)責(zé)過公司的幾個微信小程序項目）擂煞，因此只能自己動手了，一方面滿足自己的需要趴乡，另一方面也幫助一部分和我一樣學(xué)習(xí)的对省，或者從后端轉(zhuǎn)前端的小可愛們。
不過還是有很多人不喜歡晾捏，或者不想弄懂這個前后端分離技術(shù)
2蒿涎、代碼
是一種全新的體驗，沒有合適的代碼可以概括
3惦辛、概要說明
優(yōu)點
1劳秋、分層開發(fā)，職責(zé)劃分更清晰胖齐，nodejs作為前端服務(wù)器玻淑，由前端開發(fā)人員負(fù)責(zé)，前端開發(fā)人員不需要知道C#后臺是如何實現(xiàn)的呀伙，也不需要知道API接口是如何實現(xiàn)的补履，我們只需要關(guān)心我們前端的開發(fā)工作，并且管理好nodejs前端服務(wù)器剿另，而后臺開發(fā)人員也不需要考慮如何前端是如何部署的箫锤，他只需要做好自己擅長的部分贬蛙，提供好API接口就可以；
2谚攒、獨特的異步阳准、非阻塞I/O的特點，這也就意味著他特別適合I/O密集型操作馏臭，在處理并發(fā)量比較大的請求上能力比較強溺职，因此，利用它來充當(dāng)前端服務(wù)器位喂，向客戶端提供靜態(tài)文件以及響應(yīng)客戶端的請求浪耘，我覺得這是一個很不錯的選擇。
缺點和挑戰(zhàn)也還是很多
這里我先留下空白塑崖，咱們這一系列講完我再添加七冲，希望那個時候大家都很清晰這個什么是前后端分離：
五、結(jié)語
今天呢规婆，沒有講到代碼澜躺，主要交代了下，未來一段時間我們的講解方向和中心抒蚜，然后簡單說了下web開發(fā)的幾個階段掘鄙，我雖然都親身經(jīng)歷過，不過還是由很多錯誤的認(rèn)知嗡髓，和不通順的想法操漠，希望大家多批評指正，明天正式開始咱們的Vue開篇饿这，Js高級概述浊伙。
六、CODE
https://github.com/anjoy8/Blog.Core 2.1版本
https://gitee.com/laozhangIsPhi/Blog.Core
Blog.Core2.0版本 不更新
https://github.com/anjoy8/Blog.Core2.0
QQ群：
867095512 (blod.core)
