从壹开始先后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 个人先后端开发简史
---新内容开始---javascript
番外
你们周一好呀，又是元气满满的一个周一呀！感谢你们在周一这个着急改Bug的黄金时期，抽出时间来看个人博文哈哈哈，时间真快，已经到第十四篇博文了，也很顺顺（跌跌）利利 （撞撞）的来到了Vue的讲解，群里有小伙伴说，感受后端还有不少没有更新，是呀！仍是有不少东西的在后端，只不过想把vue给简单的搭建出来，若是你们有后端的一些知识，能够给我留言，我总结后，在Vue系列以后再继续说，再强调一次，后端之后还会更新。css
前边的.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版本的能够去下载。html
前言
好啦，开始今天的讲解，今天呢，你们能够不用关心Git，或者各类Code了，由于今天不涉及到代码，今天主要说的是个人开发经历，而后说明下互联网BS开发下的Web发展史，而后引出VUE——一个先后端分离的较好的前端框架（目前前端三大框架React、Vue、Angular）。你们能够简单看一下，不管你是作BS开发的，仍是CS开发的。前端
本VUE系列我大概有如下几个路线系列（可能之后有增删），内容可能涉及的有些多，由于要从头开始讲，若是你感受是后端不必学习的话，权当是个乐子了，能够看看，由于我不是专业讲师，你们看看对知识点混个脸熟就行，知道有这回事儿，怎么用，万一下一个项目要用到呢，是吧。若是你想好好了解下，或者想转前端（全栈，我也在去全栈的路上），能够试一试，本身之后跟着练习下：vue
强调一点：如今的前端已经不是之前那种单纯的切图片，画页面了，前端框架层出不穷，面向对象写法的要求日益增长，逻辑性的呼声愈来愈高，因此个人感受就是，如今的前端已经往全栈方向发展，后端往架构师方向发展。java
一、Web开发经历哪些时期node
二、JS高级开发 —— 面向对象系列 和 ES6（若是想了解js初级，能够单找我。）react
三、vue开篇，引入vue.js，基本指令语法系列webpack
四、Vue生命周期系列ios
五、搭建脚手架Vue-cli，安装node.js，npm基础系列
六、Axios访问.Net Core Api相关
七、模板-事件属性-修饰符等
八、webpack打包相关
九、Vue-router路由相关
十、组件详解系列
十一、Vuex状态模型库系列
十二、SSR 服务端渲染，Nuxt.js 项目二讲解
系列包含的知识点大概是这些：
零、今天要实现红色的部分
注意：如下这只是我我的的经历以及思考，不是百度正版的，有不一样意见请提出来
先上一个网络截图，很简单
1、简洁明快的单页面时代——没有先后端的ASP
一、背景
我接触到的第一个项目，那时候还在大学，就是Asp项目，仍是当地政府的，当时第一次用到，感受真的很神奇，经过代码的敲写，就能动态的展现出来，还能链接数据库持久化，这么多年过去了，如今再从新看，感受看到头都大了，从网上下载了一套源码，你们能够简单看看，真的神奇，不只html代码里有逻辑代码，还有sql链接数据库，嗯。。。可能部分读者都没有接触过这样的代码了，不过虽然看着很凌乱，可是在浏览器渲染生成了Html页面，仍是和普通的asp.net mvc是同样的样式
二、代码样式
<!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>
三、概要讲解
这就是Web 1.0 时代，典型的就是ASP，在以前web开发中，也是独领风骚了一段时间，适合小项目，不分先后端，你们一块儿开发页面，那个时候你们是按照页面来分工的，写好的页面直接就能够跑，不须要编译，有点儿像PHP，服务端给什么浏览器就展示什么，展示的控制在 Web Server 层。
优势：
一、无需编译，可在服务器端直接执行。
二、容易编写，可以使用普通的文本编辑器编写，如记事本就能够完成
三、由脚本在服务器上而不是客户端运行，用户端的浏览器不须要提供任何别的支持，这样大大提升了用户与服务器之间的交互速度。
缺点：
一、代码逻辑混乱，难于管理：因为ASP是脚本语言混合html编程，因此你很难看清代码的逻辑关系，而且随着程序的复杂性增长，甚至超出一个程序员所能达到的管理能力，各类问题就出现了。
二、代码的可重用性差：因为是面向结构的编程方式，而且混合html，因此可能页面原型修改一点，整个程序都须要修改，更别提代码重用了。
三、弱类型形成潜在的出错可能：只支持两种非类型的语言：VBScript和JavaScript，尽管弱数据类型的编程语言使用起来回方便一些，但相对于它所形成的出错概率是远远得不偿失的。
四、缺少完善的纠错/调试功能。
这个时期发展到了后端，真是苦不堪言，为了让先后端分工更合理高效，提升代码的可维护性，Asp.Net MVC框架就出现了。
注：其实以后是aspx，也就是asp.net Webfrom开发，第一次把先后端代码摘开，这里就不详细说了。
2、先后端开始分工的时代——MVC
一、背景
我是前端起家的，而后转向后端的，当2014年接触MVC的时候，就深深的被吸引了，感受这种整齐的，分工明确的感受，让我耳目一新，今后就开始了后端程序员之路。当时开发的是公司的一个企业内部管理系统，是一个中型的项目，地址就不说了。
二、源代码就不粘贴了
注意：这里我要说一下，我曾经看到一个朋友本身写公司框架，是把Controller和Views放到了两个层里边，嗯，就好像把Model层提出了同样，这三个都提出来了，这也是一个思路。
三、概要讲解
优势：
一、较好的解决了单页面开发，或者单纯的Code behind的aspx开发中所出现的问题
二、代码可维护性获得明显好转，每一个部分都有本身的应该负责的职能。
三、为了让 View 层更简单强大，还能够选择aspx或者Razor模板，甚至能够在里边书写C#代码。
缺点：
一、前端开发重度依赖开发环境。在这种模式下，前端写 demo，写好后，让后端去套模板，有可能套错，套完后还须要前端肯定，来回沟通调整的成本比较大。有时候为了一个前端样式，须要后端去从新编译（ eg.由后端动态生成前端样式的状况 ）。
二、整个开发过程当中，不只仅是前端和后端相互依赖，后端控制器和model的纠缠不清，各类剪不断理还乱，有时候为了处理逻辑而修改model，有时候修了model还要多处屡次修改controller，个人天，想一想都累心哟，不过咱们却都是这么作的 [哭笑]。
注：固然说的有些夸张，目前MVC模式仍是很好的一种框架模式。
3、异步出现 ——AJAX，前端小时代
一、背景
还记得第一次使用异步编程是在2015年，当时使用的时候，真是整我的都开心坏了，页面不用再刷新，点击跳转，点击提交，点击分页，点击任何地方，都是局部加载，感受整我的都很轻松，这个时候我也由一个完彻底全的后端，开始慢慢接触前端，开始写HTML代码，开始写CSS，仍是用Jquery来写各类接口请求，各类拼接页面DOM，各类页面交互动做等等。开始往前端迈进。
二、代码，简单的一个，基于面向对象的写法
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') })
三、概要讲解
优势
一、先后端的分工很是清晰，先后端的关键协做点是 Ajax 接口
二、前端能够自由的开发了，不受后端开发环境的过度约束
缺点
一、前端过度依赖接口开发。若是后端的接口不规范，乱写，业务逻辑不稳定，那么前端开发会很痛苦。为了解决这个问题，RESTful接口规范就出现了，还记得么，我们在.Net Core api框架中使用的。有了和后端一块儿沉淀的接口规则，还能够用来模拟数据，使得先后端能够在约定接口后实现高效并行开发。相信这一块会越作越好。
二、前端开发的复杂度控制。这个我深有体会，在这两年，我有时候开发接口，有时候作前端页面渲染，有时候还要增长特效，过度的操做DOM，真是让人力不从心，几乎每个页面依赖的JS代码都有上千行代，前端页面渲染愈来愈慢，愈来愈笨重，还记得上次面试的时候，被问到了如何前端优化，嗯~~~都是泪。
三、在Json返回的数据量比较大的状况下，渲染的十分缓慢，会出现页面卡顿的状况，并且资源消耗严重，在业务复杂的状况下，一个页面可能要发起屡次HTTP请求才能将页面渲染完毕。
四、这种仍是属于办分离，为何说是半分离的？由于不是全部页面都是单页面应用，在多页面应用的状况下，前端由于没有掌握controller层，前端须要跟后端讨论，咱们这个页面是要同步输出呢，仍是异步Json渲染呢？并且，即便在这一时期，一般也是一个工程师搞定先后端全部工做。所以，在这一阶段，只能算半分离。
4、先后端分离 ——ＭＶ** 时代
一、背景
今天，全栈这个时代正在到来，或者已经日益成熟，只不过很遗憾的是，我尚未来的及开发过这种真正的先后端框架（还好的是我负责过公司的几个微信小程序项目），所以只能本身动手了，一方面知足本身的须要，另外一方面也帮助一部分和我同样学习的，或者从后端转前端的小可爱们。
不过仍是有不少人不喜欢，或者不想弄懂这个先后端分离技术
二、代码
是一种全新的体验，组件模块的趋势
<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>
三、概要说明
优势
一、分层开发，职责划分更清晰，nodejs做为前端服务器，由前端开发人员负责，前端开发人员不须要知道C#后台是如何实现的，也不须要知道API接口是如何实现的，咱们只须要关心咱们前端的开发工做，而且管理好nodejs前端服务器，然后台开发人员也不须要考虑如何前端是如何部署的，他只须要作好本身擅长的部分，提供好API接口就能够；
注意：这里可能有歧义，感谢@SoarNo1的提醒，应该是这里吧。是开发的过程当中，前程工程师在本地搭建vue+node环境，开发后发布的时候，已经不依赖Node了。
二、独特的异步、非阻塞I/O的特色，这也就意味着他特别适合I/O密集型操做，在处理并发量比较大的请求上能力比较强，所以，利用它来充当前端服务器，向客户端提供静态文件以及响应客户端的请求，我以为这是一个很不错的选择。
三、适配性提高；咱们其实在开发过程当中，常常会给PC端、mobile、app端各自研发一套前端。其实对于这三端来讲，大部分端业务逻辑是同样的。惟一区别就是交互展示逻辑不一样。若是controller层在后端手里，后端为了这些不一样端页面展现逻辑，本身维护这些controller，模版没法重用，徒增和前端沟通端成本。
四、性能获得提高；你们应该都知道单一职责原则。从该角度来看，咱们，请求一个页面，可能要响应不少个后端接口，请求变多了，天然速度就变慢了，这种现象在mobile端更加严重。采用node做为中间层，将页面所须要的多个后端数据，直接在内网阶段就拼装好，再统一返回给前端，会获得更好的性能
----------------- 这里有网上其余网友的总结，也不错 --------------------
一、能够实现真正的先后端解耦，前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还能够css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快总体响应速度。（这里须要使用一些前端工程化的框架好比nodejs，react，router，react，redux，webpack）
二、发现bug，能够快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，所有由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，所有由后端工程师来解决。双方互不干扰，前端与后端是相亲相爱的一家人。
三、在大并发状况下，我能够同时水平扩展先后端服务器，好比淘宝的一个首页就须要2000+台前端服务器作集群来抗住日均多少亿+的日均pv。（去参加阿里的技术峰会，听他们说他们的web容器都是本身写的，就算他单实例抗10万http并发，2000台是2亿http并发，而且他们还能够根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）
四、减小后端服务器的并发/负载压力。除了接口之外的其余全部http请求所有转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。
五、即便后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
六、也许你也须要有微信相关的轻应用，那样你的接口彻底能够共用，若是也有app相关的服务，那么只要经过一些代码重构，也能够大量复用接口，提高效率。（多端应用）
七、页面显示的东西再多也不怕，由于是异步加载。
八、nginx支持页面热部署，不用重启服务器，前端升级更无缝。
九、增长代码的维护性&易读性（先后端耦在一块儿的代码读起来至关费劲）。
十、提高开发效率，由于能够先后端并行开发，而不是像之前的强依赖。
十一、在nginx中部署证书，外网使用https访问，而且只开放443和80端口，其余端口一概关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。
十二、前端大量的组件代码得以复用，组件化，提高开发效率，抽出来！
缺点和挑战也仍是不少
这里我先留下空白，我们这一系列讲完我再添加，但愿那个时候你们都很清晰这个什么是先后端分离：
5、传统开发与先后端分离的比较
今天呢，没有讲到代码，主要交代了下，将来一段时间咱们的讲解方向和中心，而后简单说了下web开发的几个阶段，我虽然都亲身经历过，不过仍是有不少错误的认知，和不通顺的想法，但愿你们多批评指正，明天正式开始我们的Vue开篇，Js高级概述。
一、传统开发的工做流程
6、CODE
https://github.com/anjoy8/Blog.Core 2.2版本
https://gitee.com/laozhangIsPhi/Blog.Core
Blog.Core2.0版本 不更新
https://github.com/anjoy8/Blog.Core2.0
参考资料：