番外
大家周一好呀，又是元气满满的一个周一呀！感谢大家在周一这个着急改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 想要的可以去下载。
前言
好啦，开始今天的讲解，今天呢，大家可以不用关系Git，或者各种Code了，因为今天不涉及到代码，今天主要说的是我的开发经历，然后说明下互联网BS开发下的Web发展史，然后引出VUE——一个前端分离的较好的前端框架（目前前端三大框架React、Vue、Angular）。大家可以简单看一下，无论是做BS开发的，还是CS开发的。
本VUE系列我大概有以下几个路线系列（可能以后有增删），内容可能涉及的有些多，因为要重头开始讲，如果你感觉是后端没必要学习的话，权当是个乐子了，可以看看，因为我不是专业讲师，大家看看混个脸熟就行，有这回事儿就行，万一下一个公司要用到呢，是吧。如果你想好好了解下，或者想转前端（全栈，我也在去全栈的路上），可以试一试，自己以后跟着练习下：
强调一点：现在的前端已经不是以前那种单纯的切图片，画页面了，前端框架层出不穷，面向对象写法的要求日益增加，逻辑性的呼声越来越高，所以现在的前端已经往全栈方向发展，后端往架构师方向发展。
1、Web开发经历哪些时期
2、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状态模型库系列
零、今天要实现红色的部分
image
注意：以下这只是我个人的经历以及思考，不是百度正版的，有不意见请提出来
先上一个网络截图，很简单
image
一、简洁明快的单页面时代——没有前后端的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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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、概要讲解
image
这就是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、源代码就不粘贴了
image
注意：这里我要说一下，我曾经看到一个朋友自己写公司框架，是把Controller和Views放到了两个层里边，嗯，就好像把Model层提出了一样，这三个都提出来了，这也是一个思路。
3、概要讲解
image
优点：
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、概要讲解
作者：SAYLINING
链接：https://www.jianshu.com/p/1175efbdb3e3
共同学习，写下你的评论
评论加载中...
作者其他优质文章
