nodejs 使用jquery node.js ajax

转载

blueice 2023-11-29 16:32:51

文章标签 nodejs 使用jquery html node.js 中间件 文章分类 jQuery 前端开发

Node.js

Node.js不是JS，但是和JavaScript的语法非常相似，是一种服务器端技术，他的竞争对手PHP/JAVA/C++/C#/PYTHON - 历史上第一次一门语言可以通吃前后端 - 前端崛起原因之一Node：前端 <=桥梁（服务器端）=>数据库的

Node.jsnode.js安装运行模块Node.js中模块的分类*模块化开发(自定义模块)：分工合作、明确责任官方模块mongoDB：DATABASE - 数据库安装&启动步骤：mongo语法：都是运行在mongo客户端的命令行中Node.js操作mongoDAjax- Asynchronous JavaScript And XML - 异步的javascript和xmlAjax如何使用：4步异步对象的属性和方法：XML 数据格式JSON数据格式JavaScript Object Notation：项目：图书管理系统：HTML+CSS+JS+NODE+MONGO：组件库：jQueryUIlayUI.js组件/插件库/框架：网站：jQuery插件库html5 十大新特性：地图：固定步骤轮播图

node.js安装运行

目的：

通过node.js书写代码来搭建一个私网服务器，让我们局域网内的人员可以来进行访问 - 免费
搭配上数据库玩全栈

下载安装：
LTS长效稳定版 - 双击node-v18.12.1-x64.msi，一直点下一步，不要取消任何东西，就装C盘检查自己是否安装成功：打开cmd输入node -v回车如果你能看到版本号则安装成功
运行：
我们安装的node.js其实是一个运行环境，可以让我们的js脱离浏览器运行，但其实已经不是javascript，只是和JavaScript长得很相似的Node.js

交互模式：- 用于临时测试打开cmd输入node回车，就可以开始敲你的"js"语句输入一行执行一行
脚本模式 - 开发常用方式建一个xx.js文件，里面书写您的"js"代码 ,打开cmd输入node 完整的文件绝对路径，回车
随着编辑器慢慢的强大，我们编辑器有了插件：前提：cmd可用，才能安装插件1、HBuilder：node eclipse - 安装好了重启HBuilder，然后对着文件代码处右键运行2、VSCode：code runner - 安装好了重启VSCode，然后对着文件代码处右键第一个选项就可以运行，或者右上有个开始按钮

JavaScript和Node.js区别：

JavaScript：ES+DOM+BOM
Node：ES一切东西都可用，但是没有DOM和BOM，意味着他不是做特效，很成百上千上万个【模块】等待我们学习

模块

一个web项目功能可以分为很多个不同的模块，比如商品模块、用户模块、支付模块、促销模块、商家模块...node.js按照功能的不同，可以将函数、对象分别放到不同的文件/目录下，这些文件/目录在node.js中就称之为是一个模块，暂时可以简单理解为xx.js就是一个模块

Node.js中模块的分类

官方模块 - 不需要下载安装，在你安装node.js环境的时候就已经安好了
第三方模块 - 需要用npm去下载，多的一批：mongoose（数据库）、express（Node的框架，简化原生Node的）
自定义模块：目前说白了就是一个xx.js

*模块化开发(自定义模块)：分工合作、明确责任

node底层其实有一句话，我们虽然看不见：
             (function(exports,require,三个){
                 //exports - {}空对象，放在此空对象里面的，向外部公开自己的成员 - 公开/暴露/导出
                 //require - 函数，引入其实模块 - 引入
                 //你写的代码
             })()

*主模块 - 引入别的模块进行使用var xx=require("./模块文件名");//xx就是别人公开的对象
特殊：./不可以省略
*分支/子模块 - 公开东西给别人使用

第一种方式：exports.属性名=属性值;exports.方法名=function(){};
第二种方式：module.exports={属性名:属性值,方法名:function(){};}

官方模块

官方模块不确定要不要引入，理论来说需要观看官方文档，但是有为师在

global全局对象模块 - 不需要引入的，可以直接使用的，全局对象依然可以省略不写，提供了一些全局的属性和方法

exports：空对象，此对象是可以公开属性和方法的。用于向外导出自己的成员
require：函数，此函数是用于引入其他模块的
__filename：属性，此属性会获得当前模块的完整的绝对路径
__dirname：属性，此属性会获得当前模块的完整的绝对路径，但是不包含模块名，只有路径名 - 对vscode你们有的人有用：你可能在node.js某一处不允许使用相对路径，但是你写绝对路径又怕累，怎么办，就靠__dirname
module：指代当前模块本身！包含着以上4个操作
以下两个人不是当初的人，但是用法和当初一致

console：控制台对象(js里面是window.console.log(); 这里是global.console.log())
定时器：周期性和一次性和瞬间定时器

面试题：

exports可以公开，那module.exports也可以公开，他们的区别在哪里
node.js底层有一句话：var exports=module.exports;意味着两个人其实都可以公开/暴露但是如果你用了这句话： exports={}，就覆盖了上面module.exports这句话，不再具有公开暴露的功能了真正具有公开功能的是module.exports

querystring模块 - 查询字符串：提供了解析查询字符串的API，解析为一个对象，方便你拿到前端传来的查询字符串的各个部分

需要引入：var qs=require("querystring");//官方模块不用加 ./
                     var obj=qs.parse("查询字符串部分");
 缺陷：只能解析查询字符串部分

***url模块 - 解析前端传来的完整的url网址的各个部分

需要引入：var url = require('url');   //官方模块不用加 ./
         var obj=url.parse("完整的url",true);//一旦加了true，则会自动调用querystring模块的parse方法再解析查询字符串部分
 重点：
                 *获取路由：obj.pathname;
                 *获取请求消息：obj.query.键名;

buffer模块 - 缓冲区，本质是一块内存区域，用于暂存以后可能用到的数据（数字、字符串、二进制图片、视频、音频），该区域就称之为缓存。不需要引入的直接使用可以给想要的数据分配缓冲区，变成一个我们不认识的十六进制的一串数字

var buf=Buffer.from("hello world");

注意：buffer我们可以简单理解为是一个node.js新提供的数据类型，但不方便我们认识/看懂，此方法我们绝对不会手动使用，但是node中的别的API可以执行了某个操作过后，就会返回我们一个buffer类型，也别怕，因为node中大部分API是支持直接使用buffer

**fs模块 - 全称filesystem - 文件系统 - 重点！
fs模块提供了对象文件系统中的文件进行读写的功能

需要引入：
         var fs=require("fs");
 
         //异步：不会卡住后续代码的，这块代码就算再耗时也无所谓，后续代码先跑了，我们慢慢做 - 异步才能发挥我们node.js的特点/优点
         //*读取文件：
             fs.readFile("文件路径",(err,buf)=>{
                 buf - 就是你读取到的东西，只不过自动转为了buffer类型
             })
         
         //写入文件：
             fs.writeFile("文件路径","新内容"/buf,(err)=>{
                 //用于你写入完毕后要做什么
             })
         
         //追加文件：
             fs.appendFile("文件路径","新内容"/buf,(err)=>{
                 //用于你写入完毕后要做什么
             })
 
         注意：vscode的部分同学可能不能再此处书写相对路径，只能写绝对路径__dirname

***http模块 - 代码搭建http服务器 - 大重点
http：请求和响应模式，有请求才有响应，一个请求一个响应

功能：

可以接受前端发来的请求消息的
解析前端发来的请求消息
根据前端的需求我们回去去读请求到的文件，响应给他看

使用：固定用法：

搭建一个私网服务器（局域网访问）
 //引入http、url、fs模块
 var http=require("http");
 var url=require("url");
 var fs=require("fs");
 //创建服务器应用
 var app=http.createServer();
 //设置服务器的监听端口号
 app.listen(80);
 //为服务器绑定请求监听事件 - request：请求，想要触发请求事件，那必须前端来发起请求，我们都没有接收到请求自然不会执行
 app.on("request",(req,res)=>{
     //req - request:请求对象，有一个非常重要的属性，req.url可以得到前端传来的路由和请求消息！解析req.url,单独得到路由部分，通过判断前端的路由的不同的，做不同的响应
     var objUrl=url.parse(req.url,true);
     //单独获取路由部分
     var router=objUrl.pathname;
     //判断你的路由给你响应不同的内容
     if(router=="/index.html" || router=="/"){
         //res - response:响应对象，有一个非常重要的方法：res.end("后端想要给前端东西")，前端就不会一直转圈圈了
         fs.readFile("./public/html/index.html",(err,buf)=>{
             res.end(buf);
         })
     }else if(router.match(/html/)!=null){//响应其他的html
         fs.readFile("./public/html"+router,(err,buf)=>{
             res.end(buf);
         })
     }else if(router.match(/css|js|jpg|png|gif|woff|woff2|ttf/)!=null){//响应其他的资源
         fs.readFile("./public"+router,(err,buf)=>{
             res.end(buf);
         })
     }
 })
     特殊：
         1、有的同学，可能写不了相对路径，必须书写绝对路径
         2、一旦搭配服务器端不允许出现中文路径
         3、以后会有更多的路由可能是跟数据库挂钩的
         4、补充str.macth() 用法和str.indexof('关键词')一样。不过macth里面可以放正则

自定义模块：两种形式
学了这个你就知道为什么有的模块要加./引入，有的模块不用加./引入

*文件模块创建一个xx.js，导出需要公开的数据，主模块想要引入必须写为require("./文件路径")
目录模块方式1：创建一个文件夹，名为m1，其中再创建一个名为index.js的文件导出需要公开的数据，主模块想要引入必须写为require("./文件夹路径")方式2：创建一个文件夹，名为m2，其中再创建一个名为xx.js的文件导出需要公开的数据，但是需要再创建一个必须名为package.json的配置文件写入：{"main":"xx.js"}，主模块想要引入必须写为require("./文件夹路径")*方式3：创建一个文件夹，必须名为node_modules，再在其中创建一个文件夹：名为m3，其中再创建一个名为index.js的文件导出需要公开的数据，主模块想要引入必须写为require("m3")第三种方式看上去最屌，但是操作起来最麻烦，而且这个玩意儿根本不是给人用的，给机器自动生成的，理论上来说我们正式开发自己会使用的是文件模块

NPM：Node Package Manager：Node.js的第三方模块包/模块管理器：可用于下载、更新、删除、维护包的依赖关系npm不需要下载安装，再你安装node.js的时候就已经安装好了检查一下是否有npm：打开cmd：输入npm -v 如果有版本号出现说明你电脑里已经有了npm打开npm官网：www.npmjs.org，搜索我想要的模块下载：npm i 包名;更新：npm up 包名;删除：npm un 报名;
npm install cnpm -g --registry=https://registry.npmmirror.compm install -g cnpm --registry=http://registry.npm.taobao.org下载：cnpm install 包名更新：cnpm sync 包名
清屏命令：cls
express模块：

目的：1、express搭建服务器&文件系统2、前端->后端（表单、ajax - get、post）
使用：

第三方框架，下载：npm i express
写服务器代码引入：var express=require("express")
固定步骤：

var express=require("express");
             //创建服务器
             var app=express();
             //绑定端口
             app.listen(80);
             //不需要绑定请求事件，有一个方法：直接判断路由，然后你要干什么
             app.get("/",(req,res)=>{
                 //获取到前端发来的请求消息：ajax、表单（get）             
                 req.query.键名
 
                 //响应数据给前端
                 res.send(数据库的数据)
 
                 //读取静态资源发送给用户观看
                             res.sendFile(__dirname+"/public/html/index.html");
             })
         
             
             //post如何操作？要麻烦一些，需要加上两句中间件操作，帮助我们解析post提交的东西，因为post不是显示提交，而是隐式提交
             app.use(express.json())
             app.use(express.urlencoded({ extended: false }))
 
             app.post("/",(req,res)=>{
                 //获取到前端发来的请求消息：ajax、表单（get）             
                 req.body.键名
 
                 //响应数据给前端
                 res.send(数据库的数据)
 
                 //读取静态资源发送给用户观看
                 res.sendFile(__dirname+"/public/html/index.html");
             })

// // get用法：
 // // var path=require('path')
 // var express = require("express")  //引入第三方
 // var app = express() //创建服务器
 // app.listen(80)  //监听端口
 
 
 // //加载其他静态资源:
 // // app.use(express.static("public"));
 // // app.use('/public', express.static( '/public'))
 // // app.use('/public', express.static( './public'))
 // // app.use('/public',express.static(path.join(__dirname,'/public')))
 // app.use(express.static(__dirname + '/public'));
 
 // app.get("/", (req, res) => {
 //     // console.log(req.query);  //得到表单提交的东西
 //     res.sendFile(__dirname  + "/public/html/express.html") //读取文件，传给前端
 // })
 
 // app.get("/login",(req,res)=>{
 //     // console.log(req.query);  //得到表单提交的东西
 //     res.send("I get") //向前端传送数据
 // })
 
 // app.get("/Ajax", (req, res) => {
 //     console.log(req.query.talk);  //得到表单提交的东西
 //     res.send("我是后端响应") //向前端传送数据
 // })
 
 
 
 
 // post用法：
 var express = require("express")  //引入第三方
 var app = express() //创建服务器
 
 app.use(express.json())  //post需要加上这两句中间件，用于解析post提交的东西
 app.use(express.urlencoded({ extended: false }))
 
 app.listen(80)  //监听端口
 
 
  app.use(express.static(__dirname + '/public')); // 中间件加载其他静态资源
 
 app.get("/", (req, res) => {
     // console.log(req.query);  //得到表单提交的东西
     res.sendFile(__dirname + "/public/html/express.html") //读取文件，传给前端
 })
 
 app.post("/login", (req, res) => {
     console.log(req.body);  //得到表单提交的东西
     res.send("I get") //向前端传送数据
 })
 
 app.post("/Ajax", (req, res) => {
     console.log(req.body.talk);  //得到表单提交的东西
     res.send("我是后端响应") //向前端传送数据
 })

中间件: Node.js后端语言的框架两个核心概念(路由和中间件)

中间件是一个函数，他也可以访问请求对象（req），响应对象（res）。和web应用中处于请求 - 响应循环流程的中间部分，一般被命名为next的变量

中间件的功能包含：执行任何代码修改请求和响应对象终止请求 - 响应循环，不会一直转圈圈了调用下一个中间件
中间件的语法：

app.use("url",(req,res,next)=>{
				//....中间件要执行代码
				//next(); 放行：调用下一个中间件 或 路由
			})

最大的作用：

1、除了post这两句话：
	app.use(express.json())
	app.use(express.urlencoded({ extended: false }))

2、加载其他静态资源:
	app.use(express.static("public"));

2、无缝轮播3、使用express搭建服务器&文件系统&前端<=>后端4、图书管理系统5、博客

mongoDB：DATABASE - 数据库

学习mongo语句的目的，是为了和node.js（桥梁）进行搭配

mongo是非关系型语言

安装&启动步骤：

解压呆老湿提供的mongodb-win32-x86_64-2008plus-ssl-3.6.11，放到哪里都可以
我们得到了一个bin文件夹里面有：mongo.exe（客户端）和 mongod.exe（服务器端）
如何启动：

打开命令行：输入：.\mongod.exe --dbpath=你想要保存的绝对文件地址- mongo数据库的服务器已经启动成功 .\mongod.exe --dbpath=D:\mongoyx

千万不要关闭此命令行

再打开一个命令行：输入：.\mongo.exe - 再检查上一个命令行看看连接是否成功 - mongo数据库的客户端已经启动成功；也可以通过mongoDBCompass打开连接

mongo语法：都是运行在mongo客户端的命令行中

数据库操作：

查询数据库：show dbs
创建/切换数据库：use 数据库名称;
查看当前选中的数据库：db
创建数据表：db.createCollection("表名") - 一定要先创建表后，才能看到自己创建的数据库，不做限制
删除数据库：db.dropDatabase(); - 不要记忆，删除公司的数据库会坐牢3年起步

数据表操作：

创建数据表：db.createCollection("表名",{size:5242880,capped:true,max:5000}) - 最大存储空间为5mb，存储最多5000个数据，意味着做了一个限制，我不推荐
查看目前所有的数据表：db.getCollectionNames();
删除数据表：db.表名.drop();

数据操作：

增：db.表名.save({键值对,...}) - 一次只能插入一条数据
db.表名.save([{},{},{},{}]) - 一次插入多条数据

举例：
db.user.save([{"name":"猎魔人","age":18,"pwd":"666666","email":"zqh@qq.com"},{"name":"袍哥","age":19,"pwd":"999999","email":"pg@qq.com"},{"name":"袍哥","age":20,"pwd":"999999","email":"pg@qq.com"},{"name":"袍哥","age":21,"pwd":"999999","email":"pg@qq.com"},{"name":"袍哥","age":22,"pwd":"999999","email":"pg@qq.com"}])

删：db.表名.remove({}) - 会删除数据表中所有的数据，不推荐（数据库中一切的删除都要小心：一旦删除就回不来）
db.表名.remove({pwd:"123123"}) - 只会删除数据库中pwd:123123的数据
改：db.表名.update({pwd:"999999"},{$set:{name:"xxx"}}) - 找到pwd为999999的，修改name为xxx
查：

db.表名.find() - 所有表格中的数据
db.表名.find({age:18}) - 找到所有年龄为18的
db.表名.find({age:{$gt:19}}) - 找到所有年龄大于19的  gte大于等于19
db.表名.find({name:/正则/}) - 甚至可以写正则进行模糊查询         	
db.表名.find({},{name:1,pwd:1}) - 只需要name和pwd，其余的不要，1和0都相当于是开关（只要登录必拿用户名和密码）
db.表名.find().sort({age:1}) - 按照age升序排列，-1为降序（后端数据库排序了，前端就不必了）
db.表名.find().skip(2).limit(2) - 跳过前2条，再拿2条，可以立即理解为2-4条数据（只要做分页条）
db.表名.find().count() - 获取此表有多少条数据（只要做分页条，拿到总数据/每页数据=多少分页）

安装mongodb-compass-1.33.1-win32-x64 数据库图形化界面 - 一般只用于查看，方便我们观看即可，以后我们就不用打开cmd了

Node.js操作mongoD

安装mongoose第三方模块 --npm安装
使用步骤：

引入：var mongoose = require('mongoose');
服务器端【连接】数据库：mongoose.connect("mongodb://127.0.0.1/h52205");
创建/选择一个数据表的同时，设置数据类型的控制，防止用户乱输

//创建数据类型
   			const userSchema=mongoose.Schema({  //schema 计划的纲要
   				name: String,
   				age: Number,
   				pwd: String
   			})
   			//创建数据表以及设置数据类型
   			//		            模型名称
   			var User=mongoose.model("User",userSchema,"数据表名");

新增：

//使用模型/构造函数 - 创建出我们需要新增的对象
   			var user=new User({
   				name:"dy1",
   				age:20,
   				pwd:"123123"
   			})
   			//把创建好的对象，放到数据库中
   			user.save((err)=>{//回调函数：
   				console.log(err);//检查错误或者返回东西给前端
   			})

删除：

User.remove/deleteOne/deleteMany({age:18},(err)=>{//不推荐remove再mongoose第三方模块中已经被淘汰了，会有一个警告
   				console.log(err);//检查错误或者返回东西给前端
   			})

修改:

User.update/updateOne/updateMany({条件},(err)=>{//不推荐update再mongoose第三方模块中已经被淘汰了，会有一个警告
   				console.log(err);//检查错误或者返回东西给前端
   			})

查找：

User.find({条件-上午教你的},(err,result)=>{
   				console.log(result);
   			})
   			
例：
			User.find({ name: "yxx" }, (err, result) => { //result是找到的值
				console.log(result);
			})
			User.find({},{ name:1,pwd:1,_id:0}, (err, result) => { //筛选
   				 console.log(result);
			})
			User.find({}, (err, result) => { //跳过第一个数据，选中后面的2个数据
    			console.log(result);  //result，找到的数据
			}).skip(1).limit(2)

Ajax- Asynchronous JavaScript And XML - 异步的javascript和xml

目的：【没有表单的情况下】，也能和服务器端进行沟通 - 前端技术：有没有表单无所谓了；

同步和异步交互：

同步交互客户端向服务器发起请求，直到服务器端响应的全过程，用户是不可以做其他事情的（等）典型：网址请求、表单请求，这两种请求都会导致整个页面跳转执行速度相对较慢，响应完整的HTML网页
异步交互客户端向服务器发起请求，直到服务器端响应的全过程，用户是可以做其他事情的（不等）典型：ajax请求，不严格的定义：客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为ajax，局部发生了变化执行速度相对较快，响应部分的HTML网页

Ajax如何使用：4步

创建核心对象xhr

var xhr=new XMLHttpRequest();

连接服务器：

xhr.open("GET/POST","随便路由");

发送请求消息：

xhr.send("key=value&pwd=value&...");

特殊：

如果你是GET请求方式，那么send失效，但是还不能省略必须写为send(null)，你必须把你的请求消息放到url?后面

xhr.open("GET","随便路由key=value&pwd=value&..."); //向后端传送数据
				xhr.send(null);
				//找别人拿东西都用get

Node.js目前不允许使用POST，而且ajax的POST也麻烦 - 不准用

xhr.open("POST","随便路由")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头部
xhr.send("随便路由key=value&pwd=value&...")

绑定监听状态事件（发生任何状态改变时的事件控制对象）

xhr.onreadystatechange=()=>{
			if(xhr.readyState==4&&xhr.status==200){
				console.log(xhr.responseText);//表单做不到，只有ajax可以做到 - 最难的点就在于，你拿到了数据，要干什么？  得到后端传来的数据
			}
		}

异步对象的属性和方法：

readyState 请求的状态 =>后端状态

0 尚未初始化
1 正在发送请求
2 请求完成
3 请求成功，正在接受数据
4 *数据接受成功

status 常用的服务器返回的请求响应值 =>前端状态

200 *请求成功
202 请求被接受但处理未完成
400 错误请求
404 资源未找到
500 内部服务器错误，如asp代码错误等

responseText 服务器返回的文本
responseXML 服务器返回的xml，可以当作DOM处理

XML 数据格式

面试题：HTML\XHTML\DHTML\XML分别是什么？HTML - 网页XHTML - 更严格的网页，现在用到版本是HTML5，HTML5之前的版本就是XHTML，在之前才是HTML4.01DHTML - 动态的网页，D：Dynamic - 不是新技术、新概念，只是将现有技术的整合统称：HTML+CSS+JS(dom)，让我们的网页在离线版依然具有动态特效（依然是静态网页：不去修改的前提下，页面永远不会变化）XML - 配置文件|【数据格式】其实保存数据有两种方式：1、把数据放到数据库中2、把数据保存在一个文件之中.xml文件 - 老土的、过时的
如何使用xml ：未知的标记语言，一切的标签需要我们自行定义，没有任何预定义标签，目的：数据格式，不需要样式1、创建xx.xml文件2、必须写上一个声明标签：<?xml version="1.0" encoding="utf-8"?>version - 版本号：目前有1.0和1.1，但是1.1升级不理想，市场上没人使用，学完过后以后也不需要在学了，他不会更新，淘汰了！被JSON格式代替了3、必须写上【一个根标签】，必须是一个双标签，因为双标签才可以包含别的标签，标签名你随意，想写什么就写什么4、里面随你，你想放什么就放什么

<?xml version="1.0" encoding="utf-8"?>
<h52205>
	<people>
		<name>程海峰</name>
		<age>18</age>
		<salary>3500</salary>
	</people>
	<people>
		<name>吴航</name>
		<age>19</age>
		<salary>4500</salary>
	</people>
	<people>
		<name>沈杨程</name>
		<age>35</age>
		<salary>1800</salary>
	</people>
</h52205>

依然玩全栈：需要使用node.js搭建好服务器&静态资源（文件系统），根据前端请求读取你存储好的xml文件，响应给前端：前端依然使用ajax去访问node.js，接住响应的XML数据：xhr.responseXML，得到一个DOM对象，可以使用核心DOM（既可以操作HTML又可以操作XML）来进行解析这也就是最恶心的一点，核心DOM本来就是最麻烦的

1、根据我提供的XML生成一个表格2、根据我提供的XML生成一个多级联动3、根据我提供的XML生成一个选项卡

JSON数据格式JavaScript Object Notation：

JS对象表示法，本来就属于JS的一部分，只不过现在火了，单独脱离出来让各大语言所支持文本（字符串）数据格式，作用XML类似：更快、更简洁、更容易【解析】

哪些东西可以说是一个JSON字符串：- 认识哪些是JSON即可1、'[1,2,3,4,5]';2、'{"属性名":属性值}'3、'[{},{},{},{}]' - 最常见的JSON就是它4、'{"names":[张三,李四,王麻子],ages:[18,19,20]}'

Node.js后端要负责穿衣服：JSON.stringify(obj)

前端真的拿到了这个JSON字符串，并不方便我们获取里面的数据，学会JSON字符串脱衣服1、eval（"("+JSON字符串+")");2、JSON.parse(JSON字符串);

项目：图书管理系统：HTML+CSS+JS+NODE+MONGO：

要求：1、个人中心：修改密码+升级为超级vip2、你书籍搞多点，做一个分页条，一页只显示4条，要5页，至少20条数据
扩展：1、免费设计logo：U钙网，免费有点丑2、sessionStorage：【客户端】存储技术，其实就是一个预定义对象，你可以往里面添加你想要放的东西 - 好处：只要浏览器不关闭，任何一个html页面都可以使用sessionStorage里面得东西 session一节storage储存添加：sessionStorage.属性名=属性值;获取：sessionStorage.属性名;其实和查询字符串传输差不多，但是查询字符串传入解析麻烦，而且查询字符串只能传到下一个页面，除非每个页面单独穿一次
3、复杂思路删除按钮：点击不会跳转页面，直接发ajax删除对应的那一本书籍，前端也要跟着一起删除查看按钮：点击要先保存住书名再跳转到详情页，再详情页发起ajax拿去对应的那一本书籍的书名和内容，进行渲染展示 - 新闻更新按钮：点击要先保存住书名再跳转到更新页，再详情页发起ajax拿去对应的那一本书籍的所有东西，渲染到各个input上点击更新按钮的时候表单提交到后端，后端再去修改数据库4、以后开发不像现在这个繁琐：1、框架2、模块化3、好习惯：封装函数

组件库：

jQueryUI

打开jQueryUI中文网
下载jQueryUI插件库，引入到你的项目之中：

<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.2.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

挑选你喜欢的组件/插件：
个人推荐：

标签页/选项卡菜单
折叠面板/手风琴
自动完成/模糊搜索
特效：$( "#div" ).toggle( "特效名称", 动画的时长 );
其余的特效可以自行玩玩

源代码可以复制过来：HTML+CSS+JS
根据设计图修改样式 - 如果你改了样式发现没生效，一定是因为优先级权重不够
使用ajax去获取数据库中的数据，然后来渲染此插件，最后再去调用jQueryUI提供的JS代码

layUI.js组件/插件库/框架：

使用方式几乎和jQueryUI一致：下载、引入、查看示例DEMO，但是比jQueryUI更漂亮1、日期选择器2、轮播

网站：jQuery插件库

（登陆账号，一天可以免费下载两次）和 jQuery之家（免费），jQuery插件库网站

下载后解压，里面放着HTML和CSS和JS，复制到你的项目即可

目前为主：简化了各种各样的特效，网上一抓一大把，插件库（elementUI，VantUI）； - 量大

html5 十大新特性：

html5其实是一个概念，里面不光包含了标签，甚至还有一些js操作 - 老IE都是不支持的1、新的语义化标签：header、footer、nav、section、aside2、增强型表单：type="range/date/week/month/email/tel/url/color/number"3、音频和视频4、webStorage：客户端存储技术（sessionStorage和localStorage）设置/添加：xxxStorage.属性名="属性值" 或者 xxxStorage.setItem("属性名","属性值")获取/得到：xxxStorage.属性名或者 xxxStorage.getItem("属性名")删除一个：xxxStorage.removeItem("属性名");清空所有：xxxStorage.clear();5、canvas画图 - 用于做数据可视化（统计图），不会学习如何画图，因为我们程序员大部分人，没有学过美术，你画出来不会好看，三阶段会学习chart.js和echart.js框架6、svg画图 - 几乎同上，用于画矢量图、实现小图标7、web worker8、web socket - 搭配上node.js的框架express：websocket直播、在线聊天、机器人、股票走势图实时应用9、地图 - 百度地图、高德地图10、拖拽事件 - jQueryUI一句话稿定

地图：固定步骤

1、打开百度：搜索百度地图开放平台2、注册、登录：百度账号3、拉到最下面，立即注册为开发者4、百度地图控制台，点击应用管理->我的应用->创建应用 - 需要实名认证5、创建应用：名称无所谓，应用类型选择浏览器端，白名单不做任何网站限制：写为0.0.0.0/0，提交，得到了密钥（AK）6、鼠标放到导航条开发文档上，点击JavaScriptAPI，点击示例DEMO，挑选你喜欢的地图7、百度地图有两个版本：普通版和 webGL版本，而且不可以混搭使用