目录

前言

学习NodeJS的意义

01-nodejs搭建静态资源服务器

1.1-nodejs搭建静态资源服务器01

1.2-nodejs搭建静态资源服务器02

02-nodejs接收get请求与post请求

1.1-Nodejs获取get请求参数

1.2-Nodejs获取post请求参数

03-Nodejs使用第三方模块流程(以爬虫模块Crawler为例)

1.1-npm与cnpm介绍

1.2-npm使用流程

1.3-第三方模块使用流程（适合所有第三方模块）

爬虫实战

04-Express框架学习

4.1-Express框架介绍

4.2-Express基本使用

4.3-Express响应客户端数据

4.4-Express托管静态资源

4.5-第三方中间件使用

05:补充

01-跨域

1.1-跨域介绍

1.2-跨域解决方案一： CORS

1-CORS工作原理介绍

2-express使用中间件cors ： 给所有的res添加默认请求头Access-Control-Allow-Origin

1.3-跨域解决方案二：原生jsonp

1.4-跨域解决方案三： jQuery中的jsonp

1.5-跨域解决方案四：谷歌浏览器设置跨域（了解即可）

02-MySQL数据库使用

1.1-mysql数据库介绍

1.2-mysql图形化工具使用流程

1 打开界面

2 新建数据库

3 建表

4-字段

5 插入一条数据

6 建表练习

1.3-SQL语句学习

1 SQL语句介绍

2 增删查改语句

3. 扩展知识

1.4-nodejs实现mqsql数据增删改查

03-MySql实战练习：抓包入库

04.Node.js模块化

4.1CommonJS

4.2自己抽取模块

4.3 发布包到npm

总结

前言

学习NodeJS的意义

  • 1.了解客户端浏览器与服务端后台的交互过程，可以在以后的前端开发工作中与后台人员之间的沟通更加容易理解

    • 虽然以后工作中不一定用的上nodejs，但是通过对服务端开发的了解，能够让你在日常工作中与公司后台人员之间的沟通变得更加轻松

  • 2.了解服务端开发的一些特性，可以在以后的工作中，当我们前端与后台交互出现bug问题时，能够更快速的定位bug是出现在自己的客户端还是别人的服务端。

    • 作为一名前端人员，如果对后台不了解，那么以后在与后台交互的开发中有可能明明是后台的问题，但是由于自身对后台的不了解再加上前期的经验不足，导致解决问题的时间增加（加班）。

  • 3.了解服务端开发的过程，可以为以后的职业发展打下一定的基础（全栈工程师）

01-nodejs搭建静态资源服务器

  • 本小节核心重点

    • 1.html中所有外部资源路径都会变成网络请求

      • 服务器需要根据请求路径响应返回对应的文件

    • 2.静态资源(图片、文件、音视频)一般使用路径拼接的方式来处理

      • 服务端可以直接拼接url来响应对应资源，简化代码

1.1-nodejs搭建静态资源服务器01

/*WEB开发特点1：html中所有外部资源路径都会变成网络请求
*/
​
//1.导入模块
//http模块
const http = require('http');
//fs文件模块
const fs = require('fs');
//path路径模块
const path = require('path');
​
​
//2.创建服务器
let server = http.createServer((req, res) => {console.log(req.url);
​if (req.url == '/') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www',  'index.html'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else if (req.url == '/resource/css/index.css') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www','resource', 'css', 'index.css'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else if (req.url == '/resource/images/01.gif') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www','resource', 'images', '01.gif'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else if (req.url == '/resource/images/01.jpg') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www','resource', 'images', '01.jpg'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else if (req.url == '/resource/video.mp4') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www','resource', 'video.mp4'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else if (req.url == '/resource/favicon.ico') {//读取文件响应给客户端fs.readFile(path.join(__dirname, 'www','resource', 'favicon.ico'), (err, data) => {if (err) {throw err;//如果读取失败，抛出异常} else {res.end(data);//如果读成功，响应给客户端}});} else {res.end('404 not found');};
});
​
//3.开启服务器
server.listen(3000, () => {console.log('服务器启动成功');
});

1.2-nodejs搭建静态资源服务器02

/*WEB开发特点2：静态资源(图片、文件、音视频)一般使用路径拼接的方式来处理
*/
​
//1.导入模块
//http模块
const http = require('http');
//fs文件模块
const fs = require('fs');
//path路径模块
const path = require('path');
​
​
//2.创建服务器
let server = http.createServer((req,res)=>{console.log(req.url);if(req.url == '/'){//读取文件响应给客户端fs.readFile(path.join(__dirname,'www','index.html'),(err,data)=>{if(err){throw err;//如果读取失败，抛出异常}else{res.end(data);//如果读成功，响应给客户端}});}else if(req.url.indexOf('/resource') == 0){//只要路径以/resource开头，直接拼接返回//读取文件响应给客户端fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{if(err){throw err;//如果读取失败，抛出异常}else{res.end(data);//如果读成功，响应给客户端}});}else{res.end('404 not found');};
});
​
//3.开启服务器
server.listen(3000,()=>{
​console.log('服务器启动成功');
});

02-nodejs接收get请求与post请求

1.1-Nodejs获取get请求参数

  • 在http协议中，一个完整的url路径如下图

    • 通过下图我们可以得知，get请求的参数是直接在url路径中显示。

    • get的请求参数在path资源路径的后面添加，以?表示参数的开始，以key=value表示参数的键值对，多个参数以&符号分割

    • hash部分表示的是资源定位符（滚动网页可视区域），由浏览器自动解析处理，它的作用是跳转到对应id的标签的位置

//1.导入模块
const http = require('http');
//url模块：解析url路径得到url协议中的每一部分
const url = require('url');
​
//2.创建服务器
let server = http.createServer((req,res)=>{//req.url:获取整个请求url  包含路径和参数console.log(req.url);//decodeURI():了解即可，默认情况下url中的中文会进行URI编码，使用decodeURI解码可以得到中文console.log(decodeURI(req.url));
​/*1.使用url模块解析get请求 第一个参数：要解析的url第二个参数: 布尔类型  true：推荐使用，得到的参数是一个对象   false：得到参数是字符串返回值：对象类型：将url中的每一部分作为对象的属性*/let urlObjc = url.parse(req.url,true);console.log(urlObjc);
​//2.获取请求的路径let urlPath = urlObjc.pathname;console.log(urlPath);//3.获取请求的参数let query = urlObjc.query;console.log(query);
​//响应客户端请求//服务端不能直接响应js对象，需要转成json对象（后台具有跨平台性，不是只为前端服务）res.end(JSON.stringify({code:10000,list:[10,20,30]}));/*{protocol: null,//协议名slashes: null,//表示 //到第一个/之间都是hostauth: null,//认证host: null,//主机名+ 端口号  hosetname+portport: null,//端口号hostname: null,//主机名  ip地址hash: null,//资源定位符search: '?name=OldFe&age=18',query: { name: 'OldFe', age: '18' },//get请求的参数对象pathname: '/getRequest',//路径path: '/getRequest?name=OldFe&age=18',//路径+请求参数href: '/getRequest?name=OldFe&age=18' }*///console.log(urlObjc);
​
});
​
//3.开启服务器
server.listen(3000,()=>{console.log('success');
});

1.2-Nodejs获取post请求参数

  • post请求特点

    • post请求的参数是在请求体中，无法使用get的方式来接收post请求的参数

    • post请求的参数无法一次获取，有可能是多次 原因：post可以提交大数据，而宽带有网络限制

//1.导入模块
const http = require('http');
//解析post请求的参数
var querystring = require('querystring');
​
//2.创建服务器
let server = http.createServer((req,res)=>{console.log(req.url + ':' + req.method);/*nodejs接收post请求参数* 1.post请求的参数是在请求体中，无法使用get的方式来接收post请求的参数* 2.post请求的特点：post请求的参数无法一次获取，有可能是多次 原因：post可以提交大数据，而宽带有网络限制*///nodejs接收post请求参数的流程//1.给req对象注册一个data事件：表示开始接收post请求参数//客户端没发送一次数据该方法都会执行一次，回调函数的参数就是本次接收到的数据（数据流）//接受的次数不固定：取决于数据的大小和你的宽带的网速let postData = "";req.on('data', function (chuck) {postData += chuck;});//2.给req对象注册一个end事件，表示本次post数据发送完毕req.on('end', function () {//当客户端本次post请求数据发送完毕之后，会执行这个函数console.log(postData);//3.解析post参数得到参数对象//使用querystring模块来解析post请求的参数var postObjc =  querystring.parse(postData);console.log(postObjc);//响应客户端res.end(JSON.stringify(postObjc));});
});
​
​
​
server.listen(3000, ()=>{console.log('success');
});
​

  • 使用form标签默认提交事件模拟ajax发送post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><form id="form" action="http://127.0.0.1:3000/register" method="POST" enctype="application/x-www-form-urlencoded"><div><input type="text" placeholder="用户名" name = "username"></div><div><lable><input type="radio" value="男" name = "gender" checked>男</lable><lable><input type="radio" value="女" name = "gender">女</lable></div><div><input type="password" placeholder="密码" name="password"></div><div><input type="submit"></div></form>
</body>
</html>

03-Nodejs使用第三方模块流程(以爬虫模块Crawler为例)

1.1-npm与cnpm介绍

  • 1.npm

    • 全称node package manager

    • 官方推出的包管理工具

    • 不需要额外安装，安装node之后自带

    • 因为服务器不在国内，所以有时候安装特别慢，甚至无法成功

  • 2.npm指向淘宝镜像

    • 配置npm指向淘宝镜像

      npm config set registry https://registry.npm.taobao.org/

    • 不想用淘宝的，再设置回原来的就可以了： npm config set registry https://registry.npmjs.org

  • 3.cnpm

    • 全称china node package manager

    • 非官方推出的包管理工具

    • 需要额外安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

    • 国内安装特别快，不需要翻墙（如果特殊情况无法安装，也可使用npm）

    • 安装成功之后，通过cnpm -v查看

1.2-npm使用流程

  • 1.初始化：在当前nodejs项目中执行终端命名: npm init -y

    • 作用：生成一个pachage.json文件，帮你记录当前项目安装了哪些第三方模块及对应的版本号

  • 2.安装：在当前nodejs项目中执行终端命名: npm install 模块名

    • 安装之后，你的项目目录会新增两个文件node_modules与package-lock.json

      • node_modules:npm会自动将所有的第三方模块放入这个文件夹中。类似于前端的lib文件夹

      • package-lock.json：npm会自动记录第三方模块的下载地址，下一次安装或更新的时候直接从这个地址下载，速度更快(只是影响以后更新速度，不影响开发)

      • pachage.json:帮你记录当前项目安装了哪些第三方模块及对应的版本号

  • 3.注意点：

    • (1)使用npm文件夹路径不能有中文

    • (2)使用cnpm安装第三方模块得时候需要添加 --save命令。

      • 示例

        • npm安装crawler : npm install crawler

          • npm会自动执行--save，将下载路径保存到package-lock.json文件中

        • cnpm安装crawler : cnpm install crawler --save

    • (3)优先建议使用npm命令来安装。 如果网速很慢导致无法安装第三方模块，建议使用以下两种方式

      • a.优先建议 ： 更改npm镜像源为淘宝服务器

        • npm config set registry https://registry.npm.taobao.org/

        • 查看当前npm得镜像源：npm config list

      • b.使用cnpm命令来安装第三方模块

1.3-第三方模块使用流程（适合所有第三方模块）

  • 1.进npm官网搜索模块:npm

  • 2.按照官方文档要求安装模块npm install 模块名

  • 3.复制粘贴官网代码(别人作者提前写好的)

爬虫实战

  • crawler爬取网页

//1.导入模块
var Crawler = require("crawler");
​
//2.创建爬虫对象
var c = new Crawler({maxConnections : 10,// This will be called for each crawled pagecallback : function (error, res, done) {//爬好之后会执行这个回调函数if(error){console.log(error);}else{//将爬好的数据赋值给juqery对象var $ = res.$;// $ is Cheerio by default//a lean implementation of core jQuery designed specifically for the serverconsole.log($("html").html());//使用jquery的语法来解析页面console.log($('#lg>img').attr('src'));  }done();}
});// Queue just one URL, with default callback
//3.开始爬虫
c.queue('http://www.baidu.com');

  • crawler爬取文件

var Crawler = require("crawler");
var fs = require('fs');var c = new Crawler({encoding:null,jQuery:false,// set false to suppress warning message.callback:function(err, res, done){if(err){console.error(err.stack);}else{//将爬取好的文件通过fs模块写入文件fs.createWriteStream(res.options.filename).write(res.body);}done();}
});//绝大多数网站，都有反爬机制。只有小众网站没有
//浏览器可以下载，但是服务端爬虫无效。反爬：检测你这个请求是通过浏览器发出来，还是服务端（解决方案：让服务端伪装成浏览器来发这个请求）
c.queue({url:"http://upos-hz-mirrorks3u.acgvideo.com/upgcxcode/75/11/112251175/112251175-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq99M=&uipk=5&nbs=1&deadline=1571396695&gen=playurl&os=ks3u&oi=2005998532&trid=a4c624adafe64ababb2a851334eaf87eh&platform=html5&upsig=2a29cd105837278e3b4c92181fe3eb59&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0",filename:"./video/11111.mp4",//写入文件名 默认在根目录headers:{'User-Agent': 'requests'}//让服务端伪装成客户端
});

04-Express框架学习

4.1-Express框架介绍

  • 1.Express是NodeJS开发中一个非常重量级的第三方框架，它对于NodeJS服务端就相当于Jquery对于HTML客户端。

    • 如果连Express都不会用，基本上都不好意思跟别人说你会NodeJS

  • 2.Express官网：

    • Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

    • Express - Node.js web application framework

      • 一般我们学习一个新的技术，都是去官网文档查看它的API，然后多多尝试，熟能生巧

  • 3.Express的github地址:GitHub - expressjs/express: Fast, unopinionated, minimalist web framework for node.

    • Express的原作者TJ在node社区非常的有名，他写过200多个框架，目前他已经将Express交给了朋友维护，宣布不再维护NodeJS框架，转向Go语言https://github.com/tj

  • 4.Express官网是这样介绍自己的:基于 Node.js 平台，快速、开放、极简的 web 开发框架。

    • Express一个非常重要的亮点就是它没有改变nodejs已有的特性，而是在它的基础上进行了拓展

      • 也就是说，使用Express你既可以使用nodejs原生的任何API，也能使用Express的API

  • 5.Express三大核心功能

    • 1.托管静态资源

      • 第二天讲的nodejs实现静态服务器功能在express中只需要一行代码

    • 2.路由

      • express自带路由功能,让Node服务端开发变得极其简单

      • express支持链式语法，可以让代码看起来更加简洁

    • 3.中间件

      • Express最为核心的技术和思想，万物皆中间件

        • 中间件虽然理解起来有点困难，但是使用起来非常方便，类似于jquery的插件一样，由于jquery库自身的功能无法满足开发需求，所以通过插件来拓展功能

4.2-Express基本使用

//1.导入模块
const express = require('express');
​
//2.创建服务器
/* express() 相当于http模块的http.createServer() */
let app = express();
​
​
//3.接收客户端请求
/*（1）express最大的特点就是自带路由功能，我们无需在一个方法中处理所有请求* 路由：一个请求路径对应一个方法(函数)(2)在express中，每一个请求都是一个单独的方法*/
​
app.get('/',(req,res)=>{//响应客户端数据
​//express响应数据 send方法:自动帮我们设置好了响应头,无需担心中文乱码问题res.send('欢迎来到黑马程序员');
​// //以前的做法；如果是中文，需要设置响应头解决乱码问题// res.writeHead(200,{//     'Content-Type':'text/plain;charset=utf8'// });// res.end('欢迎来到黑马程序员');
});
​
app.get('/heroInfo',(req,res)=>{//express自动帮我们解析了get请求参数，我们直接通过req.query获取即可console.log(req.query);
});
​
//4.开启服务器
app.listen(3000,()=>{console.log('服务器启动成功');
});

4.3-Express响应客户端数据

//1.导入模块
const express = require('express');
​
//2.创建服务器
/* express() 相当于http模块的http.createServer() */
let app = express();
​
​
//3.接收客户端请求
​
//文本类型数据
app.get('/',(req,res)=>{//响应客户端数据res.send('欢迎来到黑马程序员');
});
​
//json格式数据
app.get('/info',(req,res)=>{//响应json : express自动帮我们转换res.send({name:'张三'});
​/* 以前的做法使用JSON.stringify() : 将js对象转成json字符串*///res.end(JSON.stringify({name:'张三'}));
});
​
//文件类型数据
app.get('/login',(req,res)=>{//express自动帮我们解析了get请求参数，我们直接通过req.query获取即可console.log(req.query);res.sendFile(__dirname + '/login.html');
});
​
//4.开启服务器
app.listen(3000,()=>{console.log('服务器启动成功');
});

4.4-Express托管静态资源

  • 将第二天的nodejs实现静态服务器功能用Express实现

//1.导入模块
const express = require('express');
​
//2.创建服务器
let app = express();
​
//托管静态资源（相当于我们之前写的一大坨模拟apache服务器功能代码）
/*
1.当请求路径为/时，express会自动读取www文件夹中的index.html文件响应返回
2.当路径请求为www文件夹中的静态资源，express会自动拼接文件路径并响应返回
*/
app.use(express.static('www'));
​
//4.开启服务器
app.listen(3000,()=>{console.log('success');
});

4.5-第三方中间件使用

  • 1.在Express官网，有非常多得第三方中间件，它们可以让我们的Nodejs开发变得极其简单

    • 中间件类似于jquery的插件，使用后就会给express中的req或者res添加成员

    • jqeury插件的原理：给jquery的原型添加成员

  • 2.所有的第三方框架学习套路都是一样的

    • 1.进官网，查文档

    • 2.CTRL+C 与 CTRL+V

  • 3.第三方中间件使用步骤一般都是固定两步

    • 一： 安装 npm i xxxx（官网复制粘贴）

      • 第三方中间件都需要使用npm安装，可以理解为是一种特殊的第三方模块

    • 二: 使用 app.use(xxx)（官网复制粘贴）

  • body-parse第三方中间件：解析post请求参数

    • 安装body-parser : npm install body-parser

//导入模块
const express = require('express');
//创建服务器
let app = express();
​
//使用第三方中间件
/*所有的第三方模块思路都是一样 1.进官网，查文档2.找examples（使用示例），复制粘贴a.安装第三方模块：`npm i body-parser`b.使用中间件: arr.use(具体用法请复制粘贴)
使用body-parser中间件之后，你的req会增加一个body属性，就是你的post请求参数
*/
//（1）导入模块
var bodyParser = require('body-parser');//导入模块
// parse application/x-www-form-urlencoded
//（2）使用中间件
app.use(bodyParser.urlencoded({ extended: false }))
​
​
app.post('/abc',(req,res,next)=>{console.log(req.body);//告诉客户端我收到的参数res.send(req.body);
});
​
app.post('/efg',(req,res,next)=>{console.log(req.body);//告诉客户端我收到的参数res.send(req.body);
});
​
//开启服务器
app.listen(3000, () => {console.log('success');
});

05:补充

get/post 区别

1.get传值是通过url传值的, 而post是通过请求体传递的(querystring)

2.get传递的数据相对比较小, 而post相对而言比较大.

3.get传值由于是url传递的,所以安全性较低.

post传值安全性相对而言较高.

4.get一般用于请求数据/获取数据.

post一般用于提交数据.

01-跨域

1.1-跨域介绍

  • 1.跨域固定报错格式

    • 只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息

      • Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 2.什么是跨域？

    • 浏览器使用 ajax时，如果请求了的接口地址 和 当前打开的页面 地址 不同源 称之为跨域

      • （1）ajax : 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域

      • （2） 接口地址 ： ajax请求的url

      • （3）打开的页面：当前页面的window.location.href

      • （4）不同源 ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问

  • 3.什么是同源？

    • MDN官方文档传送门：浏览器的同源策略 - Web 安全 | MDN

    • 同源定义 ： 两个url地址的 协议 与 主机 与 端口 均一致 (&&)

      • 协议：http , https , file

      • 主机 ： 域名或者ip地址 （127.0.0.1）

      • 端口 ：3000， 4399

    • 不同源定义： 两个url地址，协议 主机 端口任何一个不一致 （||）

      • http:127.0.0.1:3000/abc

      • http:127.0.0.1:3000/efg

      • https:127.0.0.1:3000/efg

      • http:127.0.0.1:3000/hero/add

      • http:127.0.0.1:4399/hero/add

      • http:127.0.0.1:4399/hero/all

  • 4.为什么要有同源与不同源？

    • 出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务器，

    • 不同的服务器中内容是不可控的，不允许访问了

    • 总结说人话： 浏览器为了保护你的电脑安全

      • 举个栗子： 你去肯德基店里点餐，店员只允许你点肯德基的产品（炸鸡，可乐，上校鸡块），如果此时你在肯德基店里面点麦当劳的产品，浏览器会认为你是坏人，就会让保安把你赶出去

  • 5.跨域解决方案介绍

    • 跨域是前端工作中不可避免的问题：我们经常会出现请求不同源接口的情况，为了能够获取数据，解决跨域的问题方案也有很多，但是常用的就两种

    • 第一种 ： CORS

      • 目前的主流方案，也是最简单的方案, 直接让后端设置响应头,允许资源共享就ok.

    • 第二种：JSONP

      • 曾经的跨域杀手，专治各种跨域问题。现在慢慢的淡出历史舞台

      • PS：面试官特别喜欢问这个，因为这个有一定的技术难度，也能体现一个人的实际开发经验

      • jsonp是前后端来配合使用的.

      • 使用原理: 通过动态创建script标签,通过script标签的src请求没有跨域限制来获取资源

<!--
​
1.跨域固定报错格式* 只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息* Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
​
2.什么是跨域* 浏览器使用 ajax时，如果请求了的接口地址 和  当前打开的页面 地址  不同源 称之为跨域* ajax : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域* 接口地址 ： ajax请求的url* 打开的页面：当前页面的window.location.href* 不同源  ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问
​
3.什么是同源？* 同源定义 ： 两个url地址的 协议 与 主机 与 端口 均一致 (&&)* 协议：http , https , file* 主机 ： 域名或者ip地址 （127.0.0.1）* 端口 ：3000， 4399* 不同源定义： 两个url地址，协议 主机 端口任何一个不一致 （||）* 当前页面：http:127.0.0.1:3000/abc* 同源(协议 ip 端口一致)：http:127.0.0.1:3000/efg* 不同源(协议不一致): https:127.0.0.1:3000/efg* 不同源(ip不一致): http:192.0.0.1:3000/efg* 不同源(端口一致): http:127.0.0.1:4399/abc
​
4.为什么要有同源与不同源？* 浏览器为了用户安全 ： 不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务器，
​
5.跨域的几种解决方案* 常用： CORS* 面试官喜欢问：JSONP* 了解即可： 浏览器主动设置允许跨域（需要用户主动设置，只对当前设置浏览器生效）-->

1.2-跨域解决方案一： CORS

  • 注意：CORS技术在实际工作中由后端人员来实现，前端不需要做任何事情

1-CORS工作原理介绍

  • CORS :全称cross origin resource share （资源共享）

  • 工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header

    • res.setHeader('Access-Control-Allow-Origin', '*');

      • 这行代码的意思是：服务器对浏览器说：老铁我是个好人，不要拒绝我！

2-express使用中间件cors ： 给所有的res添加默认请求头Access-Control-Allow-Origin

  • express有一个自带的中间件cors，它的作用是自动给每一个res设置默认请求头

    • 这样就不用我们自己每一个接口都要设置一次了

  • 用法介绍

  • cors中间件是最简单的中间，底层原理如下

app.use((req, res, next) => {//任何请求都会进入这个use中间件res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头next()//执行下一个中间件
})

1.3-跨域解决方案二：原生jsonp

  • 1.JSONP的核心原理：如果script标签的src属性的请求，服务器返回的是一个函数调用。则浏览器会执行这个函数

    • 这是浏览器script标签的一个的漏洞（历史遗留问题）

  • 2.实际开发中JSONP的工作流程

    • （1）设置script标签的src属性，向一个不同源的接口发送一个get请求

      • JSONP只支持get请求，不支持post

    • （2）src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名

      • callback : 这是发明jsonp技术的人提出的一个君子之约，只要是jsonp前端程序员都统一将参数名定义为callback

        • PS：别的参数也行，只要和服务器协商好

      • callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义

    • (3)服务器接收到请求之后，获取callback的参数值

    • (4)服务器将要响应的数据拼接成 函数调用格式，通过传参的方式将响应数据返回给浏览器

  • 3.JSONP与CORS区别

    • CORS：

      • 服务器返回响应头，前端无需任何处理

      • 简单快捷，支持所有请求方式

    • JSONP

      • 浏览器：自定义响应回调函数，使用script标签的src请求

        • 利用浏览器的src属性没有跨域这一限制特点

      • 服务器：接收callback参数，返回函数调用

      • 处理复杂，并且只支持get请求

        • 原因：get请求参数直接在url后面拼接，而post请求参数是放在请求体中

1.4-跨域解决方案三： jQuery中的jsonp

  • 只需要一行代码： dataType:'jsonp'即可

    • 底层原理与原生一致，设置dataType为jsonp，jq会自动动态帮我们创建一个script标签，将url放到src属性中

    • 细节注意点：jq使用jsonp不需要自己设置callback，jq会自动帮我们发送callback参数，参数值就是jq的success回调函数

1.5-跨域解决方案四：谷歌浏览器设置跨域（了解即可）

  • 跨域是浏览器的一个安全限制

  • 可以通过修改一些设置，让被设置的浏览器没有这个同源的限制

  • 修改之后

    • 1.浏览器明确告诉你 不安全 （不安全，一般没人设置）

    • 2.只有设置的浏览器可以跨域（需要用户主动设置）

  • 仅作了解即可：chrome浏览器的跨域设置——包括版本49前后两种设置 - laden666666 - 博客园

02-MySQL数据库使用

数据库: 存放数据的仓库

如果把数据存放在一个文本文件中,有很多的缺点:

a.可以任意修改/删除/新增

b.检索不便

c.信息不安全

数据库系统,就能方便解决上述问题.

常用的数据库系统: MySql Oracle SQLserver.....

图形化管理工具

1.1-mysql数据库介绍

  • 1.什么是数据库？

    • 存储数据的仓库(文件夹)

  • 2.如何学习数据库？

    • 增删改查

      • 衡量你会不会使用一个数据库，就看你能否实现数据的增删改查

  • 3.安装mysql数据库软件

    • 安装phpstudy软件自带mysql数据库

  • 4.数据库存储结构介绍

    • 数据库服务（安装软件）

      • 数据库database（一个数据库服务可以有很多个数据库）

        • 表table(一个数据库下可以有很多张表)

          • 列column:表中要存储哪些数据

          • 行row：具体的某一条数据

1.2-mysql图形化工具使用流程

1 打开界面

  • 打开PHPStudy，然后点 MySQL管理器，在弹出的界面中选 MySQL-Front

  • 如图：

  • 弹出的界面点打开即可

2 新建数据库

  • 打开后，右键localhost，然后依次选新建、数据库。

  • 输入数据库名字，再点确定就好。注意：请使用英文名字。

3 建表

  • 为了更好的对数据进行分类，数据库提供了 数据表 。方便对这些数据归类。可以把 数据表 理解为一个 表格（如下图）。

  • 建表步骤

  • 此处我们新建一个叫student的数据表，专门用来存每个用户的信息。

4-字段

  • 建好表后，我们看到有一块区域叫 字段

  • 字段可以理解为是表格中的列名

  • 添加字段如图：

说明：1. 字段名可以理解为就是列名2. 类型根据实际情况选择对应类型，例如姓名一般是字符串，在数据库中选择VarChar（数据库中字符串类型）3. 长度就是说字符串最多允许多少位，长度越小，占用空间越小。（我们用默认长度即可）

  • 然后我们再依次加 name和 age两个字段。

5 插入一条数据

  • 点中间的 数据浏览器

  • 下图类似表格的界面就是新增数据的地方。

  • 我们只在 name，age，字段下加数据(Id不加，自动生成)

  • 插入新纪录：对着任意记录 右键，再点 插入新纪录 即可

结论：1. Id这个字段里是自动生成的依次递增的整数。2. Id字段的作用就是作为某条数据的身份证,用来区分不同的数据

6 建表练习

  • 新建一个客户表，内容如下：

  • 命名提示

    客户表的名称叫：customer

    字段客户ID叫：cId

    字段客户名称叫：cName

    字段年龄叫：cAge

  • 前端其实将数据库中的数据做的页面酷炫一点

  • 新建一个订单表，内容如下

新建一个订单表，内容如下：

命名提示：

订单表的名称叫：horder

字段订单ID叫：oId
​
字段下单商品叫：goodsName
​
字段价格叫：price
​
所属客户叫：custormId

1.3-SQL语句学习

1 SQL语句介绍

SQL语言，是一种专门对数据库进行操作的语言。

像我们刚刚通过右键就能插入一条数据，但其实它的本质就是执行一条SQL语句

  • sql语句学习传送门：SQL 教程

2 增删查改语句

2.1 增删查改的意思

  • 增：新增记录 insert

  • 删：删除记录 delete

  • 查：查询记录 select

  • 改：修改记录 update

2.2 insert语句

insert语句对应的是“增”，也即新增数据

  • 基本用法：

insert into 表名(字段名) values(值);

  • 例：

insert into student(name,age) values('andy',20);

代表给student表新增一条数据，name的值为andy，age的值为20。

2.3 delete语句

delete语句对应的是“删”，也即删除数据

  • 用法（慎用）：

delete from 表名;

  • 例：

delete from student;

  • 在执行这条语句前我们student表里有两条数据

  • 执行完后，我们发现，数据全没了

结论：delete语句默认会删除表格中的所有数据，要 慎用

  • 按条件删除，用法：（常用）

delete from 表名 where 字段 = 某个值;

  • 例：

delete from student where id = 2;

说明：这代表删除student表下，id为2的那条记录

  • 也可以按范围删除，例：

delete from student where id <= 3;

说明：这代表删除student表下，id小于或等于3的那些记录

2.4 select语句

select语句对应的是“查”，即查询记录

指定查询某些字段

  • 用法：

select 字段 from 表名;

  • 例：

select name,age from student;

说明：这会查询出student表下所有数据，只会包含name和age字段。如果还有其他字段，结果中不会包含。

查询所有字段

  • 用法：

select * from 表名;

  • 例：

select * from student;

默认会查询出表中的所有数据，如果想指定条件查询，也可以在后面加 where

  • 例：

select * from student where id < 10;

说明：只查询出id小于10的数据，不包括10

2.5 update语句

update语句对应的是“改”，也即修改某条数据

  • 用法（慎用）：

update 表名 set 字段 = 新值;

  • 例：

update student set name = '黑马一哥';

说明：把student表中所有数据的name值改为黑马一哥，注意，此操作是修改所有，所以要小心使用！

  • 指定条件修改，例：

update student set name = '黑马一哥' where id = 3;

只修改id为3的这条数据，把name改成黑马一哥

3. 扩展知识

3.1 通配符-->模糊查询

%为通配符，一般搭配 like 关键字使用。

3.2 以什么开头

  • 查询所有 字段 以 关键字 开头的数据

select * from 表名 where 字段 like '关键字%';

  • 例：

  • -- 查询user表中name以j开头的所有数据


select *from student where name like 'j%';

3.3 以什么结尾

  • 查询所有 字段 以 关键字 结尾的数据

select * from 表名 where 字段 like '%关键字'';

  • 例：

-- 查询student表中name以y结尾的所有数据
select *from student where name like '%y';

3.4 包含什么内容

  • 查询所有 字段 包含 关键字 的数据

select * from 表名 where 字段 like '%关键字%';

  • 例:

-- 查询student表中name中包含o的所有数据
select *from student where name like '%o%';

3.5 并且条件

  • 使用and关键字，例：

-- 查询student表中name为jack，并且age为20的数据
select *from student where name='jack' and age='20'

3.6 或者条件

  • 使用or关键字，例

-- 找到student表中age小于10，或者age大于100的数据
select *from student where age < 10 or age > 100;

3.7 连表查询

  • 很多时候同一个页面的数据是从多张表取出

  • 例如：如果想展示所有用户的信息以及它下的订单商品，就需要找到两张表的数据联合起来。

  • 如图：

  • 语法：

select 字段 from 表1 inner join 表2 on 对应关系

  • 例:

-- 找到customer和horder双表结合的结果，只把customer中的cId字段和horder表中custormId字段相等的记录组合在一起
select *from customer inner join horder on customer.cId =  horder.custormId

  • 如果觉得表名太长，可以给表名起别名，例：

select *from customer c inner join horder h on c.cId =  h.custormId

3.8 分页查询

  • 有时候某张表里有大量数据，而我们只需要查中间的某几条，因此可以用下面的分页查询语句

select * from 表名 limit 第几条开始,查几条;

  • 例：

-- 查询student表里第10条到第20条数据（一共查出来10条）
select * from student limit 10,10;

3.9 排序查询

查询的数据可以做排序 ,(deso 降序 aso 升序)

select * from 表名 order by  id  降序/升序

1.4-nodejs实现mqsql数据增删改查

  • 数据库模块mysql介绍

  • mysql - npm

  • npm安装：npm install mysql

  • 使用流程:

    • 导入模块

    • 连接数据库

    • 执行sql语句

    • 关闭数据库

//1.导入模块
var mysql = require('mysql');
//2.连接数据库
var connection = mysql.createConnection({host: 'localhost',//数据库地址port:'3306',user: 'root',//用户名，没有可不填password: 'root',//密码，没有可不填database: 'hm'//数据库名称
});
connection.connect();
//3.执行sql语句
//第一个参数：sql语句  第二个参数：查询回调
connection.query('select * from student', function (error, results, fields) {if (error) throw error;console.log(results);//查询结果 console.log(fields);//表格信息 （表中有哪些字段等信息）
});
//4.关闭连接
connection.end();

03-MySql实战练习：抓包入库

  • 需求：利用crawler模块爬取真实网站游戏CQ战记的数据，使用mysql-ithm存入mysql数据库

    • http://wiki.joyme.com/cq/

04.Node.js模块化

4.1CommonJS

js的模块化规范，node.js刚好遵守了这个规范，node.js中写模块 按照规范来写

  1. 导入模块用require

    1. 类比于 script src=

  2. 暴露出去（导出 ）,exports

    1. (function(window){ let jQuery={}; window.$=jQuery })(window)

传送门

4.2自己抽取模块

  1. 暴露的语法是module.exports

    1. 变量

    2. 对象（最方便）

    3. 函数

  2. 导入的语法:`require

4.3 发布包到npm

总结

以上就是今天要讲的内容，本文仅仅简单介绍了node.js第二章节的使用，欢迎大家留言评论和纠正。

node.js学习-第二章节相关推荐

  1. node.js学习-第一章节

    目录 前言 学习NodeJS的意义 01-nodejs入门 1.2-什么是nodejs 1.3-Node.js环境安装 1.3.1-如何确认当前电脑是否已经安装了Node环境 1.3.2-npm介绍与 ...

  2. node.js学习笔记

    # node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...

  3. Node.js学习笔记8

    Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...

  4. node.js学习笔记5——核心模块1

    node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端 一: 全局对象 Node. ...

  5. 《写给PHP开发者的Node.js学习指南》一2.2　预定义的PHP变量

    本节书摘来自异步社区<写给PHP开发者的Node.js学习指南>一书中的第2章,第2.1节,作者[美]Daniel Howard,更多章节内容可以访问云栖社区"异步社区" ...

  6. node.js学习总结：node.js的内置模块，模块化，npm与包 express，前后端身份认证 JWT认证机制

    node.js学习总结 什么是node.js node.js的内置模块 fs系统模块 path路径模块 http模块 模块化 npm与包 express express路由 express+mysql ...

  7. node.js 学习笔记（二）模板引擎和C/S渲染

    node.js 学习笔记(二)模板引擎和C/S渲染 文章目录 node.js 学习笔记(二)模板引擎和C/S渲染 一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...

  8. 千锋Node.js学习笔记

    千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

  9. node.js学习笔记14—微型社交网站

    node.js学习笔记14-微型社交网站 1.功能分析 微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...

最新文章

  1. Atcoder Grand 011 C - Squared Graph
  2. RealFormer：把残差转移到Attention矩阵上面去
  3. Yoga710笔记本Win10和Ubuntu系统共存
  4. urlrewrite 保持 posturl
  5. 原生js实现jquery库中选择器的功能（jquery库封装一）
  6. 存储器间接寻址方式_8086中的数据存储器寻址模式
  7. 使用Jackson将一个对象转换成一个JSON字符串
  8. php的limit分页,用php数组的array_slice分页和用limit查询分页哪个效率更高？
  9. Hadoop之YARN介绍
  10. onload、onunload 和 onbeforeunload的区别
  11. 不会Netty，你也永远不会熟悉Java
  12. linux下svn安装与版本控制
  13. Node.js使用npm下载第三方模块包步骤
  14. 英文科技论文写作中常见的问题和技巧(自用整理)
  15. 什么是短连接，如何用 Python 生成短连接？
  16. 创建Cocos2dx项目两种方法
  17. VSFTP一键部署脚本
  18. 反射（filed）的理解
  19. 【零基础系列】了解学习 uni-app
  20. 京东探索研究院NLP水平超越微软 织女Vega v1模型位居GLUE榜首

热门文章

  1. python动物书_图灵出品的人气O'Reilly动物书，你更钟意哪本？
  2. 绝世舞姬计算机弹音乐,张晓涵/戚琦《绝世舞姬》[FLAC/MP3-320K]
  3. Excel中计算个人所得税的公式
  4. Django分页，过滤：
  5. 天文学论文绘图注意事项
  6. 来给美剧比个 yeah! ——最最值得一看的科幻
  7. 不跟风，容器技术的真实优、缺点
  8. git checkout到新的分支之后原来未提交的代码找回
  9. 智能优化及其应用——课程设计（粒子群算法）
  10. Mybatis---主键回填 (*^▽^*)