认识web体系
服务端
- 服务端是为客户端服务的,服务的内容诸如向客户端提供资源,保存客户端数据。是实现游戏特色化的重要途径,也是最直接可以通过游戏表现出来的技术,比如你要修改某个NPC的参数,重加载后,在客户端内立刻体现出来
客户端
- 客户端(Client)或称为用户端,是指与服务端相对应
- 常见客户端有: DNS客户端 web客户端 游戏客户端 移动客户端
- Web客户端主要指web浏览器(Browser)。其主要功能是将用户向服务器请求的Web资源呈现出来,显示在浏览器窗口中。资源通常有html、pdf、image及其他格式
web服务器
- web服务器也称为www服务器(world wide web)
- web服务器一般指网站服务器,是指驻留于Internet上某种类型计算机的程序,让全世界浏览,可以放置数据文件,让全世界下载,目前世界上最主流的web服务器有三个: Apache、Nginx、IIS
HTTP
- http是一个简单的请求-响应协议,它通常运行在tcp之上。指定了客户端可能发送给服务器什么样的消息以及会得到什么样的响应,请求和响应的头以ASCII码的形式给出,而消息内容则具有一个类似MIME的格式
- http是基于客户/服务器模式且面向连接的,典型的http事务处理有以下过程
- 客户与服务器建立连接
- 客户向服务器提出请求
- 服务器接受请求,并根据请求返回相应的文件作为应答
- 客户与服务器关闭连接
web工作原理
- http处理流程:建立连接->客户端浏览器发送请求信息->web浏览器解析请求并找到相应文件以及其他信息组成http响应返回客户端->关闭连接
URL
web基础架构
web server
基本定义
- web server,web服务器,一般指网站服务器,是指驻留在因特网上某种类型计算机上的程序,可以向浏览器等web客户端提供文档,也可以放置网站文件,让全世界浏览,放置数据文件,让全世界下载
- Web服务器存放一些资源(文件、数据等),可以通过因特网的形式进行访问,资源的展现形式是Web Server内部确定好的
- Web服务器维持可达性,即通过IP(域名)和端口可以访问到Web服务器,并获取Web Server提供的资源
- 常见的Web Server有nginx、lighttpd,apache,IIS、jetty、Tomcat等
流程介绍
- web server同客户端之间通过某些协议进行数据交互,常见的有http、ftp等
- 协议是客户端和服务器进行数据连接、交互的一种规范,只有按照这个规范才能解析相应的数据。
- 一般的,客户端与服务器交互示意图如下
- 过程:
- 客户端发送一个Web请求,如在浏览器输入www.sogou.com
- 通过Internet传输,请求传递到Web服务器,Web服务器按照一定的协议(如http)对请求进行解析
- Web服务器处理请求,寻找资源,如果成功找到资源,则将状态码及文档内容回传至客户端,如果未找到,则返回状态码及其他信息,告知客户端资源未找到,如常见的404页面
- 客户端接收数据,进行相应的处理,如浏览器展现页面
认识NodeJs
- Node.js 是2009的时候由大神 Ryan Dahl 开发的。Ryan 的本职工作是用 C++ 写服务器,后来他总结出一个经验,一个高性能服务器应该是满足“事件驱动,非阻塞 I/O”模型的。C++ 开发起来比较麻烦,于是 Ryan 就想找一种更高级的语言,以便快速开发
- 可以说有两点促成了 Nodejs 的诞生。首先第一点,Ryan 发现 JS 语言本身的特点就是事件驱动并且是非阻塞 I/O 的,跟他的思路正是绝配。第二点,Chrome 的 JS 引擎,也就是 V8 引擎是开源的,而且性能特别棒。于是 Ryan 就基于 V8 开发了 Node.js ,注意 Node.js 听名字好像是个 JS 库,其实不是的,Node.js 是 C++ 开发的
- 所以说 Node.js 不是库,是一个运行环境,或者说是一个 JS 语言解释器
node应用环境
- 用JS做服务器: Express / EggJS / HAPI / Koa
- 用JS做移动端混合应用:PhoneGap / Cordova / Ionic
- 用JS做移动端原生应用:React-Native / NativeScript / WEEX
node对于前端的应用
- 目前NodeJS大多被用于前端开发的开发环境。以Webpack作为例子,webpack是一个运行在 NodeJS 端的打包工具,它帮你把你写的 a.js, b.js, c.js ... 打包成一个 bundle.js。而这种打包的第一步是读取(文件读取能力)你的a.js, b.js, c.js ...,所以只能在 NodeJS 环境下做
- vue-cli,react-cli 和 ng-cli 都是运行在 NodeJS 环境下的脚手架。也就是说我们不可以直接在浏览器里运行 vue-cli。因为有了文件读写的能力,所以 vue-cli 可以帮我们集成(或者打包)vue核心模块,并将我们的代码转义,压缩
- 所以 vue-cli 是 运行在 NodeJS 环境下 帮助我们开发 基于Vue框架的项目 的脚手架
- Node也是是现代前端工程化和自动化的基石
node作为服务端
- nginx、apache、tomcat ,都是服务器,nginx 是轻量级 http服务器和反向代理服务器,,apache也是http服务器,nginx和apache 也都可以作为静态文件服务器来使用
- tomcat 可以认为是apache 的一个扩展,apache如果要运行java,就需要tomcat的支持,tomcat也可以独立运行。他们都属于应用服务器
- node.js 其实需要分开理解,js 是javascript 是一门语言,node是js的一个运行平台 或者运行环境,是对chrome v8引擎的一个封装(chrome浏览器运行js就是v8引擎)
- 由于NodeJS的最底层是Chrome的V8引擎,然后libuv封装了一些I/O的线程池管理 以及 网络的I/O操作,这部分是C/C++写的。简单来说NodeJS可以控制系统文件的读写,网络的输入输出。所以NodeJS又可以被单纯的认为是一个可以运行 JavaScript 的服务器
服务端的特性对比
- apache 请求:多进程,如果每个进程达到线程上限,会开辟新的进程。线程是阻塞的,一个线程处理结束(请求数据库等等)才会回收,不然新的请求只能开辟新的线程
- nginx 请求:为异步非阻塞,抗并发,适合做负载分发请求
- nodejs 单线程、非阻塞,抗并发请求能力大,转发给底层C++ 处理。适合大并发、静态文件请求密集、i/o密集、聊天室、blog、(cpu密集、解压缩、模板渲染加密、解密等,不适合nodejs)等
- Tomcat是应用(Java)服务器,它只是一个Servlet(JSP也翻译成Servlet)容器,可以认为是Apache的扩展,但是可以独立于Apache运行
命令行工具和NPM包管理工具
命令行工具
- CMD全称command,即命令提示符,是微软Windows系统的命令行程序(可解释为Commander.exe),类似于微软的DOS操作系统
- CMD基础命令
- cd /? #获取使用帮助
- cd \ #跳转到硬盘的根目录
- cd C:\WINDOWS #跳转到当前硬盘的其他文件
- d: #跳转到其他硬盘
- cd /d e:\software #跳转到其他硬盘的其他文件夹(注意此处必须加/d参数。否则无法跳转)
- cd.. #跳转到上一层目录
- ipconfig #展示当前TCP/IP协议设置值 主要用来查看IP地址 子网掩码 网关
- dir #查看查看当前目录下的文件与文件夹信息
- edit 文件名 #修改文件中的内容(英文模式)
- notepad 文件名 #修改文件中的内容(中文模式)
- copy 文件名 文件夹名 #复制文件到指定文件夹
- del 文件名 #删除文件
- move 文件名 文件夹名 #移动文件到指定文件夹(剪切)
- mkdir/md 文件夹名 #建立新的文件夹
包管理工具NPM
- npm,全称【node package management】,是nodejs内置的软件包管理器。毫无疑问,npm是用来管理软件包的
- 它是世界上最大的软件注册表,每星期约有30亿次的下载量,包含超过600000个包(即代码模块)。来自各大洲的开源软件开发者使用NPM互相分享和借鉴.包的结构使您能够轻松跟踪依赖项和版本
- 因为nodejs软件内置了npm,所以windows系统在安装nodejs后,打开cmd即可使用npm下载资源
配置npm 环境变量
- 查看npm安装信息与默认下载路径:npm config ls
- 查看全局默认目录:npm root -g
- 修改全局与缓存地址
- 在D盘nodejs目录下创建两个目录,分别是node_cache和node_global,这是用来放安装过程的缓存文件以及最终的模块配置位置。配置完成后,cmd中执行下面这两个命令
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
- 修改环境变量
- 配置npm的环境变量和nodejs的环境变量。在计算机图标上点右键,选属性,然后点击高级系统配置,弹出来的新窗口右下角有个环境路径,点击去,就能看到环境路径的配置界面,我们点击新建。然后在弹出来的窗口里,变量名填:NODE_PATH,变量值填:D:\Program Files\nodejs\node_modules\
- 编辑Path变量:找到npm项修改为D:\Program Files\nodejs\node_global\
- 修改仓库地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
或者
npm config set registry https://registry.npm.taobao.org
- registry_url指的是国内提供的一些npm仓库地址,常用的有:
npm常用命令
- 安装包(如果没有指定版本号,那么安装最新版本):
npm install -g 包名称(全局安装)
npm install包名称(本地安装)
- 安装包的时候可以指定版本
- 卸载包
- 更新包(更新到最新版本)
- 查看全局模块列表
- 查看包所依赖的Node的版本
- 查看包源文件地址
npm view 包名称 repository.url
开发环境与生产环境
- 开发环境:平时开发使用的环境
- --save-dev 向开发环境添加依赖 devDependencies
- 生产环境:项目部署上线之后的服务器环境
- --save 向生产环境添加依赖 dependencies
- 区别
- npm install xxx 命令会将包安装到项目目录的node_modules文件夹下,但是不会添加任何依赖(依赖写在package.json文件中)
- npm install xxx -g 全局安装,安装到你安装npm的磁盘目录下
- npm install xxx --save 安装到项目目录的node_modules文件夹下,添加到dependencies的依赖下(生产环境中:项目发布到服务器上必须要使用的包)
- npm install xxx --save-dev 安装到项目目录的node_modules文件夹下,添加到devdependencies的依赖下(开发环境中:测试、管理,只在程序员模式下需要)
npm init | 初始化一个简单的package.json文件,执行该命令后终端会依次询问 name, version, description 等字段 |
---|
npm init --yes或-y | 作用同上,偷懒不用一直按enter |
npm inistall packageName | 本地安装,安装到项目目录下,不在package.json中写入依赖 |
npm inistall packageName -g | 全局安装,安装在Node安装目录下的node_modules下 |
npm inistall packageName --save | 安装到项目目录下,并在package.json文件的dependencies中写入依赖,简写为-S(从开发到上线都需要用到的包) |
npm inistall packageName --save-dev | 安装到项目目录下,并在package.json文件的devDependencies中写入依赖,简写为-D(工具包,上线时不需要使用) |
测试环境
测试node环境
- 目录A下新建app.js文件
- 在终端中执行node app.js
测试npm环境
- cmd中npm init
- package name: 你的项目名字
- version: 版本号
- description: 对项目的描述
- entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
- test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
- git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址(这里就不写地址了)
- keywirds: 项目关键字
- author: 作者的名字
- license: 发行项目需要的证书
- 然后会生成package.json文件
//package.json
{
"name": "node-demo",
"version": "1.0.0",
"description": "我的第一个node项目",
"main": "app.js",
"dependencies": {
},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node app.js", //自定义命令
"sass-compiler": "node-sass --watch src/scss/input.scss dist/css/output.css" //监听sass文件实时编译
},
"author": "lemon",
"license": "ISC"
}