Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……
天呐,好多……
小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框架大概都摸了摸看了看,趁着五一假期有点时间,做个总结。
本文提到的前端,是指通俗语义下web开发的前端,主要内容是视图层的开发,包括UI布局、用户交互及后端数据请求展示。
本文提到的后端,是指web开发的后端,内容包括模块路由和数据库存取。注意,这里的后端不是指大数据开发领域的Hadoop、Storm那些。
前端
JavaScript(后文统称为js)、css、HTML是前端开发的语言基础,如果想能将前端框架用好还是需要将水平提高到大概能用的程度。html负责网页的内容和基本结构,css负责UI样式,js负责将用户请求传送到后端并将后端数据在html页面中展示。
前端的框架分两类,UI样式库和js库。有些UI样式为了实现动态效果,会使用js库如jQuery。
前端开发的编程工作JS为主,还有近几年出的TypeScript(JS的超集)。
奇怪的是,最近各官网下载的开发包里都不带jQuery库,如有专业人士路过请稍作指点。
UI样式库
前端框架中有很大一部分是UI样式库。这些样式库的关注点是视图。对于纠结(患有强迫症)的开发者,不建议使用UI样式框架,真的是哪哪都看着不爽,到最后还不如自己css造轮子来的爽快。自己css造,不一定好看,但可以满足强迫症。
Bootstrap
小编认为Bootstrap是一个非常好的入门选择,教程示例非常丰富,颜值也还过得去。
栅格布局自带响应式,常用的颜色都有类可以直接调用。
Bootstrap中文网:http://www.bootcss.com/
用法示例:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">导航</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
</ul>
</div>
</nav>
示例代码可以看出,引入类的方式来定义控件样式,使用方便而且语义清晰。
Layui
和Bootstrap差不多的东西,个人感觉色系看起来稍显寡淡。
Layui官网:https://www.layui.com
Amaze-UI
俗称妹子UI,也是一款样式框架。
妹子官网:http://amazeui.org/
Font Awesome
图标字体库和CSS框架,毕竟只有图标字体和CSS,所以一般配合其他的样式框架使用。
Font Awesome官网:http://fontawesome.dashgame.com/
js库
js库是实现功能的主要手段。常规的js库中都会包含DOM(或虚拟DOM)操作、ajax异步get和post请求封装实现、页面渲染刷新等。
相比原生js,使用库优点在于方便,缺点在于js库文件通常动辄数百kb,在带宽紧张的环境会拖慢页面的加载速度。
小编现在喜欢用vue.min.js,轻快又方便。为啥不用vue-cli方式呢?讲真,对于php流个人业余全菜开发者来说,npm run dev带来的不方便比方便更多些。
这年头,不用npm都不好意思说自己是前端框架,不信请看vue、React、AngularJS,全都是这套玩法。
jQuery
对于传统开发者来说,js为主的前端框架与其说是框架像是库。对C/C++开发者来说,就像是
#include <stdio.h>
……
jQuery最具特色的操作是 $(“yixzm”) 等价于 document.getElementById(“yixzm”),以及ajax,就像这样:
$.ajax({ url: "/api", context: document.body, success: function(){
console.log("test");
}});
DOM操作真的很方便。
jQuery官网:http://jquery.com/
vue
只需要用一下下,就会很爽的库。
职业玩家都使用npm的方式,业余玩家嘛用用link引入也就可以了。vue对开发者最大的便利是不用频繁的DOM操作,数据只需要赋值给定义的对象元素即可同步刷新页面内容。
据jsp玩家讲,和jsp差不多?据php玩家讲,和 <?php 差不多?
但小编感觉方便程度上还是差很多的,毕竟请求到的数据可以直接进页面,写在js里怎么看都更好些。
vue-cli模式开发,可以让js代码工程化。或许,这时候的前端工程师需要调整鄙视链层级。(C >> C++ >> java >> php >> js?)
小编说,js主要负责请求交互和动态刷新,但有人不讲规矩。比如vue中的vue-element,不仅能处理交互,还能生成UI的组件模块。
vue-cli模式开发,有个叫做模板的东西,文件后缀格式如filename.vue,这玩意将每一个独立的HTML模块连同CSS和JS代码一起封装在一个文件里,用的时候直接引入,相当方便。
用法示例代码:
<div id="app">
<ul>
<template v-for="key in objs">
<li>{{ obj.txt }}</li>
<li v-html="obj.html">--------------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
objs: [
{ txt: 'yixzm', html: '<h1>yixzm</h1>' },
{ txt: 'dream', html: '<h2>dream</h2>' },
{ txt: 'stone', html: '<h3>stone</h3>' },
]
}
})
</script>
怎么样?够方便吧~
v-for 这玩意,小编第一次看到时被惊呆了,还能这么写页面?用起来好舒服~
vue官网:https://cn.vuejs.org/
React
这玩意和vue的类似之处是也能工程化的管理js开发项目。既能引入的方式使用,也能npm方式构建项目。
用法示例代码:
<div id="example"></div>
<script type="text/babel">
function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
return <h1>请先注册。</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);
</script>
通过示例代码中的这两句:
document.getElementById('example')
return <h1>请先注册。</h1>;
可以发现,React的开发渲染风格和原生JS相似度很高,和vue区别很大。
React官网:https://reactjs.org/
AngularJS
AngularJS和vue代码相似度很高。
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
和vue相比,几乎就是换了各变量名…… 当然,hello world 只是表象,更多区别还需要深入使用才能感受到。
AngularJS官网:https://angularjs.org/
AngularJS中文网:http://www.angularjs.net.cn/
后端
除了专注视图活跃在用户面前的前端框架,还有一些默默在后台奉献的后端框架。web后端框架做的事一般来说,是提供http请求服务接口,实现请求路由、数据存取、模块后台功能实现等。
新时代的前端框架如vue和React,本身自带路由功能,大家将其叫做前端路由。前端路由一般使用在开发SPA(单页应用)的场景,路由时会异步加载数据渲染至页面但不会重新加载整个页面。而后端路由会重新向服务端提交请求。
后端框架一句话总结:存取数据分模块,各种语言都能用。
Php有ci、tp、Yii和laveral,java有springMVC,Python有Django,JS有node,可谓百家争鸣、百花齐放。
这时候,C/C++出身的小编秉着不靠天不靠地轮子自己造的精神,对各框架普遍采取读源码试用而不用的态度。了解、学习,但写写东西还是喜欢自己撸。强撸和借鉴(抄袭)有益理解别人的闪光点。
php框架
ci和tp上手极快,Yii和Laravel稍微有点学习成本。
ci
ci即优雅的CodeIgniter,很mini的一款框架,相对容易入门。
CI中文网:https://codeigniter.org.cn/
thinkphp
传说中的培训班神器,据说上手极快?
官网:http://www.thinkphp.cn/
Yii
没啥好说的,看起来和ci、tp貌似差不多…… 好久没翻Yii源码,记得貌似是传统的<?php code ?>的方式写模板?没啥特别的映象。
Yii中文网:https://www.yiichina.com/
Laravel
本菜感觉上手好麻烦,夹杂的东西太多。(正在使用laravel的大神请尝试理解小编着重提到的“菜”字)
Composer安装模块效率很高,据说是冲锋枪?学习成本还是蛮高的。
Laravel中文网:https://www.golaravel.com/
Python框架
Django
Python版的Laravel……
Django小编写自动化、爬虫的时候也会用到,但拿来写web总感觉不习惯…… 谁让Php是世界上最好的语言呢~
Django官网:https://www.djangoproject.com/
Java框架
Spring MVC,额,没写过Java,小编如果说这是Java的web开发框架,不知是否有专家会留言批评呢?
HTTP服务
以上后端框架关注应用和数据,对HTTP服务监听关注的并不多。服务监听工作一般由Apache或者Nginx来承担,负责请求响应、并发和数据返回。关于HTTP服务,小编除了Apache用的比较多,Nginx搭过几个系统外,了解的并不多。所以,小编暂且总结接触过的这三个。
对于apache和nginx的比较,网上有很多帖子有讲而且很详细。比如这篇:Apache和Nginx的区别 就讲的很好
后端流的JS
node-js,额,只用node写过一个socket server,没啥可总结的。node写在这里是否合适也有待学习。
nodejs中文网:http://nodejs.cn/
apache
老牌的HTTP服务提供者。在小编写C++的时代,传说中的LAMP、WAMP犹如迷雾中的灯塔一般,在知识的海洋里引领着小编。
apache动态请求响应效率高,httpd.conf配置也极其方便。
apache官网:http://www.apache.org/
nginx
据说更擅长静态文件响应?需要配置反向代理才能正常使用Php、Python等语言开发的工程,小编个人感觉有些麻烦,不怎么喜欢用。
nginx官网:http://nginx.org/
数据库
存数据,mysql很方便。redis在内存里,数据请求时加载超级快!
mysql VS redis?
关系型和非关系型,索引方便和响应快速……
一起用吧,就像硬盘和内存。
不过,现在mysql一般用MariaDB来替代。
mariadb官网:https://mariadb.org/
mysql官网:https://www.mysql.com/
redis中文网:http://www.redis.cn/
开发环境及工具
vscode
这玩意写前端代码还不错,良心工具。
vscode官网:https://code.visualstudio.com/
……
还有很多,小编这次先总结这些。
#写在最后
web开发内容很多,也很有趣。
小编将求索以图成长。