Nodejs&Ajax学习随笔
Node.js
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是国外的，下载速度可能很慢，你希望快一点可以先安装一个cnpm： npm install cnpm -g --registry=https://registry.npmmirror.com
pm 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后端语言的框架两个核心概念(路由和中间件)
express是一个自身功能极简的框架，完全由路由和中间件构成的一个开发框架，从本质来说express就是要各种调用各种中间件 中间件是一个函数，他也可以访问请求对象（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")); -
1、把咖啡的地图改了 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.01 DHTML - 动态的网页，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、个人中心：修改密码+升级为超级vip 2、你书籍搞多点，做一个分页条，一页只显示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、aside 2、增强型表单：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 worker 8、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版本，而且不可以混搭使用
轮播图
posted on 2022-11-19 23:11 Elementinner 阅读(56) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架