nodejs学习
安装
https://nodejs.org
升级
下载新版本,直接安装
降级
在安装旧版本之前,需要先卸载当前版本的Node.js,以免两个版本之间出现冲突。
在Windows系统中,通过控制面板的程序卸载功能来卸载Node.js。
在Linux和Mac系统中,我们可以使用以下命令来卸载:
sudo npm rm -g n sudo rm -rf /usr/local/n sudo rm -rf /usr/local/bin/n
历史版本下载
https://nodejs.org/zh-cn/download/releases/
为什么前端开发需要安装nodejs
1 热更新,打包配置需要webpack,语法转换需要babel,webpack打包以及npm工具需要基于node环境运行
2 基于webpack等前端构建工具建立的应用,这些工具最基本的特点就是通过webpack-dev-server搭建小型Express服务器(基于node的一个后端框架),将你的页面动态的显示在浏览器中
3 webpack打包的本质就是文件整合,同时提供一些代理服务、热更新,而这些东西在浏览器端做不到。
4.可以不用node,其他服务端语言亦可
5.nginx下不需要node,是因为你已经打包成静态文件了,本质上前端产出的代码都是静态文件式存在,也就是所谓的生产环境。
开发时你发现改一个文件,热更新就直接刷新页面了,比你手动刷新方便多了。
问题是为什么会自动刷新,那是因为监听了文件的变化,那么怎么监听文件变化,那得需要对文件操作有权限。
所以要依靠服务器语言,所以node可以,java也可以,只是在开发的时候提升效率。
最后打包上线的还是静态资源,你可以放在nginx下,或者node下,java下
常用框架
express
路由
中间件
1 中间件本质是函数
比路由处理函数多了一个参数next
const express = require('express') const app = express() const mw = (req,res,next) => { console.log("你好") next() // 把流转关系,转交给下一个中间件或路由 } app.use(mw) app.get('/',(req,res) => { res.send('你好') }) app.listen(80,() => { console.log("server at http://127.0.0.1") })
2 中间件的作用
多个中间件之间,共享同一份 req 和 res。基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用。
3 全局生效的中间件
客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件。
通过调用 app.use(中间件函数),即可定义一个全局生效的中间件。
4 定义多个全局中间件
定义了多个中间件并use后,客户端请求到达服务器会按照定义的先后顺序来依次进行调用
5 局部中间件
不使用 app.use() 定义的中间件,叫做局部生效的中间件
// 应用级别的中间件(全局中间件) app.use((req,res,next)=>{ next(); }); // 应用级别的中间件(局部中间件) app.get('/',xx1,(req,res)=>{ res.send('Home Page.'); });
6 路由级别的中间件
绑定到 express.Router() 实例上的中间件,叫做路由级别的中间件。
var app = express(); var router = express.Router(); // 路由级别的中间件 router.use(function(req,res,next){ console.log('Time:',Date.now()); next(); }); app.use('/',router);
7 错误级别的中间件
专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。
const express = require('express'); const app = express(); app.get('/', (req, res) => { throw new Error('服务器内部发生错误!'); res.send('Home page.'); }); app.use((err, req, res, next) => { console.log('发生了错误:' + err.message); res.send('Erroe:' + err.message); }); app.listen(80, () => { console.log('错误中间件启动成功!'); })
Express内置的中间件
自 Express 4.16.0 版本开始,Express 内置了 3 个常用的中间件,极大的提高了 Express 项目的开发效率和体验:
① express.static 快速托管静态资源的内置中间件,例如: HTML 文件、图片、CSS 样式等(无兼容性)
② express.json 解析 JSON 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用)
③ express.urlencoded 解析 URL-encoded 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用)
// 配置解析 application/json 格式数据的中间件 app.use(express.json()); // 配置解析 application/x-www-form-urlencoded 格式数据的内置中间件 app.use(express.urlencoded({extended:false}));
注意事项
1.除了错误级别的中间件,其他中间件一定要在路由前注册中间件
2.next()函数不要忘
3.next()函数之后不要再去书写代码
4.连续调用多个中间件时,共享req.res
5 错误级别的中间件,必须注册在所有路由之后
第三方的中间件
非 Express 官方内置的,而是由第三方开发出来的中间件,叫做第三方中间件。
例如:在 express@4.16.0 之前的版本中,经常使用 body-parser 这个第三方中间件,来解析请求体数据。使用步骤如下:
①运行 npm install body-parser 安装中间件
②使用 require 导入中间件
③调用 app.use() 注册并使用中间件
const express = require('express') const app = express(); // 1.导入解析表单数据的中间件 body-parser const parser = require('body-parser'); // 2.使用app.user()注册中间件 app.use(parser.urlencoded({ extended: false })); app.post('/user', (req, res) => { console.log(req.body); res.send('嗨~第三方插件!'); }); app.listen(80, () => console.log(`Example app listening on port port!`));
注意:Express 内置的 express.urlencoded 中间件,就是基于 body-parser 这个第三方中间件进一步封装出来的。
一、Web 开发模式
1 服务端渲染的 Web 开发模式
服务端渲染的概念:服务器 发送给客户端的 HTML 页面,是 在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用 Ajax 这样的技术额外请求页面的数据。
优点:
前端耗时少。因为服务器端负责动态生成 HTML 内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
有利于SEO。因为服务器端响应的是完整的 HTML 页面内容,所以爬虫更容易爬取获得信息,更有利于SEO。
缺点:
占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
不利于前后端分离,开发效率低。使用服务器端渲染,则 无法进行分工合作,尤其对于 前端复杂度高的项目,不利于项目高效开发。
2 前后端分离的 Web 开发模式
前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛应用。简而言之,前后端分离的 Web 开发模式,就是 后端只负责提供 API 接口,前端使用 Ajax 调用接口 的开发模式
优点:
开发体验好。前端专注于 UI 页面的开发,后端专注于api 的开发,且前端有更多的选择性。
用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。
缺点:
不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方案:利用 Vue、React 等前端框架的 SSR (server side render)技术能够很好的解决 SEO 问题!)
如何选择 Web 开发模式
不谈业务场景而盲目选择使用何种开发模式都是耍流氓。
比如 企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的 SEO,则这时我们就需要使用 服务器端渲染;
而 类似后台管理项目,交互性比较强,不需要考虑 SEO,那么就可以使用 前后端分离的开发模式。
另外,具体使用何种开发模式并不是绝对的,为了 同时兼顾了首页的渲染速度和前后端分离的开发效率,一些网站 采用了首屏服务器端渲染 + 其他页面前后端分离的开发模式 。
Session 认证
了解 Session 认证的局限性
Session 认证机制 需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问,所以,当涉及到 前端跨域请求后端接口 的时候,需要做很多额外的配置,才能实现跨域 Session 认证。
JWT 认证机制
当前端请求后端接口 不存在跨域问题 的时候,推荐使用 Session 身份认证机制。
当前端需要跨域请求后端接口的时候,不推荐使用 Session 身份认证机制,推荐使用 JWT 认证机制。
什么是 JWT
JWT(英文全称:JSON Web Token)是目前 最流行的跨域认证解决方案。
JWT 的工作原理
总结:用户的信息通过 Token 字符串的形式,保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用户的身份。
JWT 的组成部分
JWT 通常由三部分组成,分别是 Header(头部)、Payload(有效荷载)、Signature(签名)。三者之间使用英文的 "." 分隔
Header.Payload.Singature
-
Payload 部分 才是真正的用户信息,它是用户信息经过加密之后生成的字符串。
-
Header 和 Signature 是 安全性相关 的部分,只是为了保证 Token 的安全性。
问题
node链接数据库报错
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
https://blog.csdn.net/TangYuanTuoHai/article/details/134683270
或者使用mysql2
const mysql = require('mysql2')