nodejs复习笔记

node复习笔记

第一天

• 前端向后台服务器发送请求的类型
  • get: 用来获取数据
  • post: 用来提交数据
• 前端发送请求的方式
  • 地址栏中直接输入地址；
  • form表单请求：
    • 可以跨域进行提交数据，跨域指的是自己创建的服务器；
    • 缺点：只能提交数据，不能对服务器响应的数据进行处理；
  • jQuery中的ajax请求：
    • 能进行跨域提交数据，只能跨域获取百度服务器中的数据；不能获取自己创建的服务器中的数据；
    • 自己服务器中必须设置跨域请求的设置；
  • 自己封装的myAjax.js请求：
    • 本质和jQuery中的ajax请求一样；
  • jsonp发送请求：通过script标签中src发送get请求，可以进行跨域请求；
• 服务器获取前端请求的数据
  • 获取get请求的数据：get请求的数据在地址栏中
    • 接收get请求的方式有三种：
    • 原生node方法：通过req.url来获取地址字符串，通过split切割多次切割，先通过"?"切割，再通过"&"切割，获取数组，遍历，切割赋值对象；
    • node自带的系统模块querystring和url模块：1）模块querystring；代码：querystring.parse("key=val&key=val")获得一个参数对象；2）模块url；代码url.parse(req.url,true).query获取到一个参数对象；
  • 获取post提交的数据：post请求的数据在请求头中，相当于把大块数据拆分成多个小块数据；
    • 原生node方法：字符串拼接
      • 创建空字符串；
      • 通过on绑定两个事件，data和end事件；
      • 在data事件匿名函数中，通过字符串拼接，会执行多次，直到将所有小块数据拼接完整；
      • 在end事件匿名函数中，可以获取str为post提交的数据；只执行一次；

       const http=require("http");
       const server=http.createServer(function (req, res) {
           if(req.url==="/favicon.ico"){
               return;
           }
           console.log("server is running");
           res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
           var str="";
           req.on("data",function (val) {
               str+=val;
           });
           req.on("end",function () {
               console.log(str);
               res.end(str);
           })
       });
       server.listen(8888);
      

    • 第三方模块formidable
      • 下载模块并引入模块；
      • 新建form对象：var form=new formidable.IncomingForm();
      • 解析上传的数据：form.parse(req,function(err,fields,files){})；其中fileds获取的post提交的数据；对象类型；
  • get和post请求共存方式
    • 将get请求获取参数的代码，放在post请求的绑定事件end中，因为end只触发一次；
• 服务器进行的跨域设置
  • 原生node：
    • 设置响应头：res.setHeader("Access-Control-Allow-Origin","域名");
  • express中的跨域请求
    • cors跨域问题链接;
• 地址路径解析
  • req.url获得的地址为：带斜杠和后面的所有参数，如：/01.html?name=xxx&age=18;
    • 其中pathname为：/01.html，包含斜杠；
    • 其中search为：?name=xxx&age=18，包含问号；不包括哈希值；
• 知识点
  • 在for循环中，存在异步操作时，需要等循环结束来输出数据，可以通过判断i的值，来判断循环是否结束，条件判断时，可以设置i<=ary.length，在循环中判断i===ary.length时，循环结束；因为条件判断为同步，会先于异步操作进行判断，所以不能设置ary.length-1；

第二天

• node模块分类
  • 分为三大类：
    • 1）node自带的模块：如http,fs,querystring,url,path等；
    • 2）引入第三方模块：nodejs天生自带一个包管理器npm；
    • 3）自定义模块：自己创建的JS文件
      • 通过require引入自定义模块，必须设置相对路径，./也不能省略，后缀.js可以省略；
      • 引入自定义模块后，获取的变量取决于被引入模块输出的变量；
      • 被引入模块通过module.exports={xxx:fn}输出对象变量；
  • 三大类的加载顺序：当通过require引入模块后，先在系统自带的模块中查找，查找不到，在第三方模块中查找，即在node_modules文件夹中查找，若再找不到，就通过相对路径在自定义模块中查找；
• 项目开发步骤：
  • 命令行进入文件夹
  • git init：文件夹初始化；
  • npm init：项目初始化，按照顺序设置，生成package.json文件；
    • 通过npm init --y快速创建文件；
  • npm install xxx -g：安装到全局；
  • npm i xxx --save-dev: 安装到当前目录下；会在devdependencies中出现，指的是开发过程中的依赖；
  • npm i xxx --save：安装到当前目录下，会在dependencies中出现，指的是在上线过程中的依赖；
  • npm uninstall xxx：卸载模块；
• 登录注册功能实例：
  • 登录注册页面加载：
    • 通过地址栏发送get请求，设置pathname为html文件名；
    • 服务器中通过系统模块url，获取pathname，然后通过fs.readFile(path,function(err,data){})来读取文件，其中path为html的相对路径，通过res.end(data)来将读取的数据渲染到前端页面中，进而使页面呈现；
  • 页面加载后，通过script的src引入的jquery.js文件，会再次发送一次get请求，请求的地址pathname为引入的相对路径，也必须通过fs.readFile读取渲染到页面，页面的jquery.js功能才能使用；

第三天

• 第三方模块mime：
  • 通过npm i mime进行安装
  • 用处：页面在加载文件时，如css,html,js等,需要设置Content-Tyep类型；所以可以通过mime.getType(".css")来获取对应的类型，进而设置；
  • 给页面设置代码fs.writeHeader(200,{"Content-Type":mime.getType(extname));
  • 配合path系统模块使用，获取后缀名；
• 第三方模块formidable
  • 用于在服务器端获取form表单post提交的file文件数据；
  • fs.rename(oldPath,newPath,function(err){})：用来将相对路径下的文件名修改为新的路径下的文件名；
• 第三方模块silly-datetime
  • 用于将当前时间转化为具体格式的时间；
  • 代码：sd.format(new Date(),"YYYY-MM-DD HH:mm:ss");
• 知识点：
  • fs.readFile(path,callback)中的path里的./public代表的是根目录下的public文件夹，./代表的根目录，与js文件的位置无关；
  • form表单通过submit自动提交数据，不涉及跨域的情况，如html文件在63342端口号下打开，而form表单中action设置的域名端口号为8888，提交数据到8888的服务器，不会出错，服务器8888中无需设置跨域请求代码；
  • jQuery中的ajax发送请求，若不在同一域名下发送请求，必须在服务器中设置跨域请求代码；否则无法拿到服务器响应的数据；
• express框架
  • 设置静态资源目录：用于放置静态文件，如css,js等；
    • 代码：app.use(express.static("./static"))；其中./代表的是根目录；相当于app.use("/",express.static("./static"));
  • 若请求的pathname为正则表达式；那么可以通过req.params来获取小分组的数据；为对象，属性名从0开始，0对应第一个小分组的数据；
  • express自带的正则功能：未定的用:xxx替代，通过req.params.xxx获取；、
    • 若有严格匹配的，执行严格匹配，不执行正则功能匹配；
    • 若想执行非严格匹配，可以在严格匹配中设置next();
• ejs模板
  • 服务器中必须设置默认模板引擎为ejs;
    • 代码：app.set("view engine","ejs");
  • express在使用ejs模板时，可以不引入ejs模块，但必须下载ejs第三方模块；
  • 必须将ejs文件放在views文件夹下；

第四天

• express创建的服务器中接收请求：
  • 接收get请求数据：
    • 代码：req.query;
    • 获取类型为对象；
  • 接收post请求数据：
    • 普通数据：body-parser第三方模块；既可以获取表单提交的数据，也可以获取ajax表单提交的数据；
      • 引入模块：const bodyParser=require("body-parser")
      • 设置中间件：

       //针对提交类型为:application/x-www-form-urlencoded
       app.use(bodyParser,urlencoded({extended:false})
       //针对提交类型为：application/json；
       app.use(bodyParser,json())
      

      • 通过req.body拿到前端通过post请求提交的数据；
    • 大文件：formidable模块；
• express中use设置路由请求：
  • use请求可以扩充地址；地址不严格；可以用作接盘侠；
    • 格式代码：app.use("/admin",function(req,res){})
    • req.originalUrl：拿到的是：包括基本地址的所有请求地址；
    • req.baseUrl:拿到的是：基本地址/admin"，如路由地址相同；
    • req.path：拿到的是：不包括基本地址，也不包括参数的其余地址；
    • req.url：拿到的是：不包括基本地址的所有请求地址；
    • 代码：

     app.use("/admin",function (req, res) {
         //地址栏请求地址：http://localhost:8080/admin/aaa/bbb/index.js?name=guo&age=26
         //1.req.url拿到的是/admin后面的地址；
         console.log(req.url);//打印结果：/aaa/bbb/index.js?name=guo&age=26
         //2.req.originalUrl拿到真正的请求地址和传给后台的参数；
         console.log(req.originalUrl);//打印结果：/admin/aaa/bbb/index.js?name=guo&age=26
         //3.req.baseUrl拿到的是基本的地址，与路由地址一致；
         console.log(req.baseUrl);//打印结果：/admin
         //4.req.path拿到的是除了基本地址的其他子子孙孙的路径地址；（不包含基本地址，也不包含参数）
         console.log(req.path);//打印结果：/aaa/bbb/index.js
         res.send("ok");
     });
    

• 请求中的回调函数参数
  • next:当同一个请求格式满足多个同类型请求时，会按着自上向下执行，当需要执行第二个或下面的请求时，可以在第一个中设置next()，这样就会再执行下面代码；

第五天

• 相册集实例
  • 知识点：
    • 在ejs模板中引入css,js等静态文件时，必须加上斜杠"/"；
    • 在app.js路由设置中，严格的路由必须写在非严格的路由前面；
    • 服务器中可以设置两个静态资源目录；
    • 在router.js文件中所有请求的匿名函数；均要设置next,当err情况下，设置next(),并阻断程序执行；
    • 利用use来充当接盘侠的角色；
  • fs系统模块
    • fs.unlink(path,function(err){}):删除指定路径下的文件；不能是文件夹；
  • 注意：
    • return：阻断程序执行，不能放在异步操作中，否则不能阻断下面程序的执行，必须放在外面；如果放在异步操作的后面，不会阻止该异步操作；

第六天

• cookie
  • 作用：将信息存储在浏览器端，在服务器中携带信息传递；
  • 没有跨域限制；
  • 插件：cookie-parser express;
  • 设置：
    • res负责设置存储信息：res.cookie("xxx","xxx",{});
      • maxAge设置存储时间，httpOnly设置是否只允许http协议请求；
      • 设置signed:true，防止篡改；
    • req负责识别存储信息；req.cookies.xxx;
  • 删除cookie：res.clearCookie("xxx");
  • 查找：在控制台Application中Cookies中查找;
  • 密钥四步：secret："密钥"；app.use(cookieParser("密钥"))；signed:true；req.signedCookies;
• session
  • 优点：
    • 乱码显示，安全性比cookie高；
    • 在浏览器中通过设置一个乱码id，然后在服务器中设置session数据；
  • 依赖：
    • 依赖cookie，如果用户在浏览器中禁用cookie后，session存储的数据失效；
    • 依赖express模块
  • 使用模块：express-session模块
  • 需要设置中间件
  • 设置和获取：
    • 设置：req.session.xxx;
    • 获取：req.session.xxx;
    • 删除：delete req.session;
• webStorage；分为：localStorage和sessionStorage
  • localStorage：本地存储在浏览器中；不能传递给服务器端；
    • 生命周期：只要通过setItem()设置后，在同一个浏览器中，就已经存储上，不会消失，只能通过removeItem()或clear()来删除；注意：同一个浏览器中不同的文件中，都可以拿到存储数据，并对其进行操作；
    • localStorage:是类函数Storage的实例，类的原型上存在多个方法，进行本地存储的操作；
    • 私有属性：length，指绑定key的个数；
    • 方法：setItem(key,value);getItem(key);removeItem(key);clear();key(索引值)
    • 调用方法：window.localStorage.setItem();，其中window可以省略；
  • sessionStorage：本地存储在一个会话中，即一个页面中；
    • 生命周期：储存在本窗口中，其他窗口不能获取，关闭窗口后，存储的数据会销毁；
    • sessionStorage:也是类函数Storage的实例，存在私有属性和调用类函数的公共方法；
    • 调用方法：windos.sessionStorage.setItem();;
• mongodb数据库知识
  • 下载安装mongdb时，连接超时，原因可能是防火墙关闭27017端口，可以短暂关闭防火墙或设置防火墙中允许访问27017端口；
  • mongodb与nodejs配合使用时，下载不同版本的mongodb模块，使用不同的方式连接数据库和获取数据库数据信息；
  • mongodb新建本地数据库
    • 代码：mongod --storageEngine mmapv1 --dbpath 数据库存储地址;新建一个mmapv1格式的数据库；
    • 开机：mongod --dbpath 数据库存储地址;
  • 数据库插入多个数据的shell命令
    • 代码：mongoimport --db 数据库名字 --collection 集合 --drop --file 要导入的json数据的地址
    • 注：导入的json文件数据，每个对象之间不需要连接，报红是正常的；
  • 封装mongodb库时的注意点：
    • 查找数据时，可以对数据进行排序和分页，参数格式为：{"sort":{"age":-1},page,pageamount};
    • 获取数据总个数时，通过col.countDocuments(function(err,count){});其中count为number类型，使用res.send(count)会报错，因为send中不能设置数字类型，可以通过toString()方法，转化为字符串；
• mongoose知识
  • mongoose为mongodb的进化版，相当于原生JS和jQuery的关系；

第七天

• 登录注册项目
  • 知识点：
    • 表单序列化：$("form").serialize();获取表单提交的数据；
    • MVC：models views controllers
• 留言板项目
  • 知识点
    • 删除按钮时，通过获取数据的_id值，来进行删除；
      • 模块：通过mongodb中的模块ObjectID；引入模块const ObjectID=require("mongodb).ObjectID;
      • 查找数据filter：{"_id":ObjectID(id);
      • 删除数据成功后进行重定向跳转页面：res.redirect("/xxx");

第九天

• 图片裁切功能
  • 软件 GraphicsMagick
    • 功能：可以修改图片的类型和裁切大小
    • 下载和安装：安装后配置环境变量，在全局下可以使用gm命令；
  • 通过第三方模块gm来对指定文件夹下的图片进行裁切处理，前提是必须下载GraphicsMagick，才能使用gm
    • 模块：第三方模块gm
  • 代码：

   var gm=require("gm");
   gm("./img/p1.jpg")
       .crop(550,450,400,5)//裁切图片中的宽、高、左边距、上边距；
       .resize(200, 200, "!")//其中"!"作用为:强制变为200*200的文件；
       .write("./img/meinv2.jpg",function (err) {
           if(err){
               console.log(err);
           }else{
               console.log("ok");
           }
       });
  

• 图片裁切实例
  • 在网站上扒代码；
  • 可以通过设置事件onSelect，在匿名函数中获取参数c，为一个对象，对象中的数据为选中区域在原图片中的宽，高，左边距，上边距等数据；注：是比例变化前的大小位置；
  • 必须设置全局变量，才能获得私有作用域中的数据；
  • 预留的API接口：
    • getBounds()：获取图片实际尺寸；
    • getWidgetSize()：获取图片显示尺寸；
    • getScaleFactor()：获取图片缩放的比例；
  • 网站链接：jQuery Jcrop 图像裁剪;

第十天

• 论坛项目
  • 知识点：
    • session的设置
      • 判断登录与未登录状态；
      • 携带session在路由中间传递数据；
      • session设置的位置：登录成功后，设置session；
      • session的运用：通过判断session是否设置，来显示导航栏中的元素；
      • 设置：
        • login: 布尔值；决定登录和未登录状态，通过if条件判断来显示不同的元素；
        • username: 用户名，用于在数据库中查找数据；和显示用户名；
        • imgsrc：头像的地址；显示该用户名实时的头像地址；
    • 本地数据库中存储数据： 数据库：myforums
      • 集合：users
        • 内容：1）用户名；2）密码；3）头像图片名；
      • 集合：contents
        • 内容：1）用户名；2）评论；3）头像图片名；4）发表时间；
    • 设置404页面
      • 只要是通过get请求提交的路由，都要注意，是否需要设置404页面；
      • 404页面可以通过判断req.session.login是否存在，来进行判断，当不存在时，设置next();
      • 通过use来设置接盘侠，渲染404页面；
    • 设置静态资源目录
      • 简易方式：app.use(express.static("/public"))，等同于app.use("/",express.static("./public"))
      • 设置指定路由：app.use("/avater",express.public("./mass"));即想要访问静态资源目录，必须加"/avater"前缀；
  • 注意点：
    • 修改头像后，必须更新数据库中两个集合中的头像地址数据；更新成功后，必须更新session中设置的imgsrc;