网站项目开发学习手册

前言

这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.

全栈开发自学笔记 已开源

本文阅读建议
1.一定要辩证的看待本文.
2.本文仅代表个人片面观点,如有不同观点,还往及时指出.
3.本文主要是经过网站项目的第一轮全方位学习以后,对网站项目的整体看法,并对个人的看法进行总结.
4.本文所表达观点并不是最终观点,还会更新,因为本人还在学习过程中,有什么遗漏或错误还望各位指出.
5.本文当中的网络项目进化史,会详细的为你阐述当前网站和之前的网站趋势.让你在进行网站项目学习之前,拥有整体的概念去进行学习.
6.觉得哪里不妥请在评论留下建议~
7.觉得还行的话就点个小心心鼓励下我吧~

目录
1.网站项目概述
2.前端前景
3.网站项目进化史
4.网站项目学习体系

网站项目概述

网站项目大致分为前端+后端开发,学习网站项目的开发与建设,不等同于任何一种单一语言的学习,例如苹果App开发其重心是围绕着Objective-C语言进行开发,只有使用到了其他语言的框架或者第三方库才会进行学习.

而网站项目开发,需要进行前端页面代码的编写,后端服务器的架设,服务器脚本语言的编写等.

随着互联网时代的发展,目前的趋势已经是前后端分明,所以各位可以根据自己的想法选择性学习,不一定全都要精通,但一定要都了解,不然出了问题很难解决.

前端前景

• 什么是前端?前端的发展流程
  • 前端的HTML到HTML5 等一些基础知识,在这里推荐阅读图解HTTP和HeadFirst HTML & CSS书籍进行了解.我将着重阐述重点.
  • 14年因为培训机构的兴起,大量培训了iOS开发和安卓开发.导致iOS开发这个行业 在短短两年时间,从底部窜到顶部,再摔下来,17年4月,各大培训机构决定停止对iOS和安卓开发的培训,才使得18年的iOS和安卓行业渐渐回暖,暂居平稳.
  • 15年后半年,因为iOS和安卓开发的集中培训,大部分培训机构转战HTML5前端开发的培训.因为集中培训导致H5也行情不稳.
  • 16年后半年,大数据行业的兴起.
  • 17年的人工智能,机器学习,增强现实.
  • 那么为什么H5能在培训浪潮中依然坚挺?
  • 这就要说说H5发展历程上的重大事件
    • 刚开始火的原因便是因为革命性的HTML5发布.
    • 初次出现在大众面前便是Flash被HTML5和CSS3代替.
    • HTML5小游戏,见缝插针等.
    • 淘宝页面的混合开发
    • 微信小程序 & 微信公众号.
    • Node.js
    • 前端工程化 & 组件化 & 插件化
    • 其中两次爆炸性的发展 无异于是 小程序的出现,和Node.js的出现.
  • 前端工程师 就由原来 最早的切图工程师->网页工程师->大前端工程师
  • 而大前端工程师的诞生 还是和移动端脱离不了关系.
  • 大前端工程师一般都要会 网页开发+混合开发+移动端开发+小程序开发
  • Nodejs开发目前是一个拓展技能,但它绝对是大前端发展的趋势.

网站项目进化史

静态网页

刚开始学习网站项目时,都会先从最基础的HTML+CSS静态网页学起.

其针对方向为了解什么是HTML作为网页结构标签,CSS负责渲染网页.

交互网页

静态网页并不能满足用户需求,于是交互网页因此诞生,为了减少服务器请求次数,以及服务器负担,JavaScript诞生.

JavaScript根据用户需求,执行不同操作,其中不乏修改网页结构和渲染样式的操作.

例如:注册登录时,将不合理的请求通过JavaScript拦下来.

发布网页

写好了交互网页,想让别人访问,便需要服务器进行发布,服务器是属于后端开发工程师掌握的,在大型公司里还会有运维工程师,专门负责线上服务器的维护.

通过服务器配置,将网页发布到指定站点,用户访问指定URL便可请求到你发布的网页.

数据网页

别人访问了你的网页,可你的网页并没有数据.网页数据不会凭空产生,没有数据的网页也就没有灵魂,即便拥有了交互,也是没有生命的.

数据库是用来存放数据的,也是属于后端开发工程师掌握的,通过服务器脚本语言,根据业务需求存储或读取数据库中的数据,分发给各个发送到服务器请求的客户端.

客户端、服务器、数据传递请阅读图解HTTP一书.

到这里大致就是一个基本的网站项目基本要拥有:静态网页/交互网页、数据库&数据、服务器、服务器脚本语言文件.

异步请求网页

在异步请求网页出现之前,每次每个发送的请求,都要返回整个网页给客户端,使得服务器压力,以及数据传递量剧增.

为了解决这个问题Ajax诞生,Ajax是前端工程师需要掌握的必备技能.根据业务需求刷新部分网页,例如:登录注册时,输入的用户名已被注册,可以直接提示出来,而不是跳转到新的页面弹出提示.

美观的网页

网站仅仅有了功能性是不行的还得有美观性,不能所有的网站的风格都一个样子,所以jQuery、EasyUI等各种第三方封装好的框架诞生.

jQuery、EasyUI有着大量的成熟的框架,可以直接使用,打造出美观的网页.是前端工程师必备的技能.

移动端网页/响应式布局

随着安卓手机和苹果手机的普及,仅仅开发电脑端网页已经不能满足互联网公司的需求,还需要开发移动端的网页.

为了不让移动端的网页再写一个项目的代码,Bootstrap诞生,它是由推特公司开源出来的框架,用来开发既能在网页端展示的网页,也能在移动端完美显示的网页.

目前移动端网页比较多的使用Vue.js进行开发,因为其自带的大部分都是苹果端的控件效果.

小程序/公众号开发

随着微信的用户量激增,以及其平台的绝对地位,小程序的免安装特性,小程序也随之崛起.

很多中小型公司是不会专门开设"小程序开发工程师"的职位的,一般小程序开发都是由公司里的前端工程师来干.所以也是前端工程师需要掌握的.

目前还没有接触到这里,好像是要学习wxml和wxss的.

前后端分离网站项目

目前的网站项目趋势,就是有后端开发工程师,开发网站API文档,通过JSON进行数据传递,前端工程师访问指定接口,拿到数据,刷新页面.

其中前后端分离的项目,并不需要前端工程师会后端技能,但要求双方都能良好的解决数据传递等问题.

工程化开发/Node.js

随着前端行业的发展,JavaScript的发展,Nodejs诞生,JavaScript不再是只能写客户端的脚本语言,而是可以用来写服务端语言,也是一个往全栈发展的趋势.

目前没有接触工程化开发,个人了解是有一些基于Nodejs开发的工程化工具,可以大幅度提升工作效率.更好的体现前后端分离.

其因为Nodejs的特性和优点,大大减少了前后端交流成本,用Nodejs直接开发一整个网站项目.

在学习Nodejs之前还要先学会ES2015、ES6、ES7,其都是JavaScript的标准,不用头疼,只是每个版本更新了更好更容易的写法.

总结

就目前个人看法:目前前端的趋势就是通过对一些基础知识的学习,渐渐向Nodejs靠拢,并围绕Nodejs进行优雅的前端开发.

网站项目学习体系

下面简单阐述一下,自己对各个技能栈的理解.

HTML

• HTML文档
• 结构标签语言,用来描述整个网站的结构
• 其由各种不同 各种样式的HTML标签

CSS

• CSS负责 标签选择器 和样式渲染
• 负责网页的渲染.
• 通过标签选择器 选择HTML标签 进行样式渲染.

JavaScript

• 浏览器脚本语言,在浏览器运行的脚本语言
• 其负责 浏览器对象BOM和HTML文档对象DOM 的修改
• 以及 网页的事件处理, 例如数据校验, 登录注册,刷新,跳转等.
• BOM (浏览器对象)
  • 通过JS获取浏览器对象,进行一些内定函数(方法)的执行,例如 添加书签,
• DOM
  • 通过JS获取HTML文档对象 ,对网页中一些不需要再显示的模块进行删除,或者增加 刷新 数据.

HTTP协议

• HTTP协议,让你懂得一个网站项目的 数据是如何使用服务器进行发布,传递,到每个客户端进行展示.
• 其遵循的规则以及协议.
• 一个网站的主要角色的职能:服务器 + 服务器脚本语言 + 数据库 + 网页/文件等.
• 请求和响应
• 服务端和客户端

Ajax

• 异步请求
• 其存在的意义是革命性的,可以使网页局部刷新,而不用频繁的传递整个页面,可以根据网页功能 业务需求,在任何位置 发送请求

jQuery

• 高效的JavaScript
• 基于JavaScript的框架.可以快速高效的执行JavaScript所能执行的DOM和BOM操作
• 其还封装了Ajax,可以更加方便的使用Ajax进行异步请求

JSON

• 目前流行的数据格式,可以描述复杂的对象类型,大型数据传递

JSONP

• 常用于解决跨域获取数据的问题,因为服务器不受同源策略的影响,故使用请求js的方式,进行跨域请求.

Apache

• 服务器
• 其主要负责 站点配置,文件分发,响应请求.

PHP

• 服务器脚本语言
• 其主要负责,处理请求, 返回指定的数据,
• 需要数据的进行数据库操作,从数据库拿数据,然后返回数据

MySQL

• 数据存储
• 开源免费
• 其可以满足中小型公司,网络项目的开发.

API

• 网站API文档
• 该文档由后端开发工程师放出,上面罗列了你请求什么接口,他返回什么数据.

RESTful API

• 一种设计模式
• 将数据的操作体现在API上,更能实现前后端分离,常用于移动端App的API设计上,和部分的网页端API设计.

路由

• 目前没有进行系统学习,后期更新这里.

ECMAScript 6

• 其是下一代JavaScript的标准
• 其实并不用恐惧,我一开始以为学习完JavaScript还要学ES6,好难受,其实是一个东西了.
• 在会JavaScript(这里指ES5标准)的基础上,ES6增加了一些功能函数和简写形式函数.可以使你的JavaScript更加高效.

JavaScript高级

• 目前没有进行系统学习,后期更新这里.

Node.js

• 革命性的存在,其事件处理 I/O的性能等.
• Nodejs使得JavaScript不再是一门只存在于浏览器的脚本语言,在Nodejs这两年社区和开源插件的开发,已经可以成熟的担任 前端工程化开发,前端组件化开发,进行后台服务器开发.
• 也可以将Node.js看成一个整体,其集成了各种框架插件以后,可以做很多事情
• Express
  • 其依赖于Node.js环境

Vue.js

国内开发的框架,非常流行的移动端网络框架.

目前没有进行系统学习,后期更新这里.

Angular.js

我知道它封装了jQuery和Ajax.

目前没有进行系统学习,后期更新这里.

React.js

Facebook开源的框架.

目前没有进行系统学习,后期更新这里.

总结

目前还在根据自己学习的东西做一个小Demo,等到我学习到上面没有提及的知识点以后,我会再更新的.

前端学习路漫漫,加油

结束语

如果您对这篇文章有什么意见或者建议,请评论与我讨论. 如果您觉得还不错的话~可以点个喜欢鼓励我哦. 如果您想和我一起学习,请毫不吝啬的私信我吧~ 介个是我的个人博客,欢迎参观哦~