网站项目开发学习手册

前言

这里筑梦师,是一名正在努力学习的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,等到我学习到上面没有提及的知识点以后,我会再更新的.

前端学习路漫漫,加油


结束语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

前端工程——基础篇

https://github.com/fouber/blog/issues/10#issuecomment-271133674

12820
来自专栏GA小站

Adwords转化跟踪跟新方案

这是谷歌官方提供的ADwords转化跟踪方案,如果你的部署有ADwords转化跟踪,建议尽快更改,数据收集缺失。

16240
来自专栏腾讯Bugly的专栏

《腾讯大家》小程序开发总结

腾讯大家小程序与公众号精密结合运营,通过传播引发网友关注,扩大腾讯大家内容的出口。

2.7K110
来自专栏BestSDK

从初创到BAT,都必须遵守的4个用户体验设计细节

启动页 当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得...

32040
来自专栏IMWeb前端团队

RAIL简介:一个以用户为中心的性能模型

本文作者:IMWeb huscot 原文出处:IMWeb社区 未经同意,禁止转载 web性能优化,这是大家耳熟能详的东西了。 一说到性能优化,大家可能...

27170
来自专栏王二麻子IT技术交流园地

一、VueJs 填坑日记之基础概念知识解释

概述 在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs。...

23980
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(三):iOS 技术 (上)

20460
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化中阶思考与实践

UI自动化中阶思考与实践 活动时间:2017年4月17日 QQ群视频交流 活动介绍:TMQ在线沙龙第十九期分享活动 本次分享的主题是:UI自动化中阶思考与实践 ...

31590
来自专栏小程序·云开发专栏

《腾讯大家》小程序开发总结

《腾讯大家》是公司推出的中文互联网专栏写作服务产品。由于寻找有效信息的成本是非常大的,一些真正具有传播价值的内容,却往往淹没于信息洪流之中。如何将最有价值的信息...

50230
来自专栏SAP最佳业务实践

SAP最佳业务实践:无变式配置按订单生产(148)-5产成品的技术变更

image.png 1、CSKB客户请求技术变更 客户请求作技术变更。步骤的目的是更改产品的配置(添加物料 R20)。 在BOM 浏览器中,用户参数设置是用来...

41540

扫码关注云+社区

领取腾讯云代金券