JavaScript

0x01-介绍:作用:在不重新加载整个页面时,对网页的局部进行刷新。这里的刷新,可以理解为:当前页面向服务端发起了一个请求,然后服务端将数据返回给当前页面,当页面接收到数据之后,通过DOM操作,将新的内容,把旧内容替换了。0x02操作:使用AJAX一共需要4个步骤!请务必记住这4个步骤!1:创建XMLHttpRequest对象。2:使用open()方法,建立联系。3:使用send()方法,将请求发出。4:接收服务端返回的数据。1、创建对象:需要用一个变量来接收实例化返回的对象,然后后续所有的内容,都是由接收的该变量来进行调用!varxhr=newXMLHttpRequest();2、建立联系:可以将这个步骤理解为:我要通过GET请求方式还是POST请求方式向这个url发起请求呢?由以上那段话得知,我们需要为open()方法传入一个请求方式的参数,还有一个目标url的参数。注意:在主域名前面,必须加上http:////xhr.open("请求方式","目标url");xhr.open("GET","http://localhost/api/get_comment");3、将请求发送出去:在open()写好了之后,我们则需要将请求发送出去,使用send()方法。xhr.send();4、获取服务端返回的数据[重要]:在接收数据时,需要使用onreadystatechange这个监听事件。我们可以试着将这个单词分开一下,然后理解一下它的意思。on:事件的意思,想一想JQuery中的$.on()方法。readystate:ready的意思是:准备,state的意思是:状态码,合并起来就是准备的状态码。change:变化、改变的意思。合并起来的意思就是:监听状态码的变化。它的后面,有一个匿名函数,每当状态码发生变化时,就会调用一次这个匿名函数。xhr.onreadystatechange=function(){}在xhr对象下,有一个readyState属性,这个属性就是准备的状态码,注意:onreadystatechange事件,监听的就是它的值,请不要混淆。readyState一共有5个状态码,分别为:01234。当准备的状态码为4时,才说明返回的数据已经是完整的了,那么我们则可以在匿名函数中,使用if语句来判断xhr对象下的readyState的值是否为4。xhr.onreadystatechange=function(){if(xhr.readyState==4){}}这个时候,如果readyState==4了,则可以获取数据了,但是如果返回的是一个404呢?那岂不是没有意义了,所以,我们可以在这里判断一下,HTTP的状态吗,如果是200,则说明是返回没有问题的,在这里,我们使用xhr对象下的status属性来判断。xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){}}我保证,这时候真的可以获取返回的数据了!我们使用xhr对象下的response属性,来获取返回的内容。xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(xhr.response);}}这时候,可以在控制台查看获取到的数据,然后您可以自定义进行DOM的操作了~0x03-返回的是JSON数据:现在返回的都是JSON格式的数据,返回到客户端之后,它成为了一个字符串形式的JSON,注意,他不是对象,无法通过对象.键名的形式来调用。那么,我们需要在前端进行处理一下,使用JSON.parse()方法,将字符串形式的JSON,转换成对象形式的JSON,这时,才是真正的完毕!varjson1="{"name":"甄雨锋"}";varjson2=JSON.parse(json1);此时,json2就变成了对象形式的JSON,可以通过对象.键名的方式调用了~

2021-11-22 145 0
Node.js

0x01path模块方法:返回路径中的最后一部分:path.basename(p,[ext]);//p:路径//ext:输入一个文件后缀名,如果匹配到该路径中有该后缀名,则省略该后缀名,只显示文件名。path.basename("c:a/b/index.js",[ext]);//index.jspath.basename("c:a/b/index.js",".js");//index返回路径中代表文件夹的部分:path.dirname(p);path.dirname("c:a/b/index.js");//c:a/b返回路径中文件的后缀名:path.extname(p);path.dirname("c:a/b/index.js");//.jspath.dirname("c:a/b/index.");//.path.dirname("c:a/b/index");//返回空字符串判断参数是否一个绝对路径:path.isAbsolute(path);path.isAbsoulute("c:/a/b/index.js");//true-绝对路径path.isAbsoulute("./c/index.js");//false-相对路径将路劲解析为一个对象:path.parse(pathString);path.parse("c:/a/b/index.js");//解析出来的对象{root:'c:/',dir:'c:/a/b',base:'index.js',ext:'.js',name:'index'}路径拼接:path.join();0x02dirname和filename下面这两个属性是Node中的全局变量:__dirname获取当前该文件,所在目录的,绝对路径,(不包含自己)__filename获取当前该文件,所在的,绝对路径,(包含自己)在文件操作中,使用相对路径是不可靠的,因为在Node中,操作的路径被设计为,相对于执行node命令所处的路径。例如:这个文件夹中有一个app.js,还有一个public文件夹,里面有一个a.txt。需要在app.js中将a.txt中的数据读出来。如果使用相对路径,那么当我退出32593这个文件夹,跳转到上一级目录:Users文件夹,执行node32593/app.js那么这个时候就会在Users这个文件中中找a.txt。为了解决这个问题,只需要将把相对路径更改为绝对路径就可以了。这个时候就可以使用__dirname来动态获取该文件现在所在的目录。补充:模块中的标识路径(require)和这里的路径没关系,不受影响。constfs=require("fs");constpath=require("path");fs.readFile(path.join(__dirname,"./public/a.txt"),"utf8",function(err,data){if(err){returnconsole.log("读取失败!",err);}console.log(data);});

2021-8-17 73 0
Node.js

0x01什么是中间件?在默认情况下,当客户端发送请求时,服务器会进行依次到下的匹配,匹配成功就不再向下匹配。而中间件可以拥有继续向下匹配的权限,这需要在参数中添加一个参数:nextnext是一个封装好的方法,它可以控制是否继续向下匹配。向下匹配的前提是:该中间件没有返回给客户端数据,否则就会报错了。这就相当于一个生产线,当手机进入第一个工序时,这个工序对它进行加工,加工完成后继续向下流(这就相当于next),如果这个工序检测到了这个产品不合格,那么就不让它流入下一个了。在下面这个案例中,首先匹配到第一个get。这个get并没有结束返回,而是调用next()方法继续向下匹配。然后匹配到第二个get,在同一次请求中,req对象时同一个,然后返回给客户端req对象中的foo属性,执行完毕。app.get("/admin",function(req,res,next){req.foo="bar";next();});app.get("/admin",function(req,res,next){res.send(req.foo);});0x02app.use()中间件用法:在Express框架中,提供了app.use()这个方法,这个方法不区分到底是get还是post请求,它会匹配所有请求方式。它可以传入一个请求地址,然后这个中间件只针对这个请求地址有效。也可以不传入请求地址,就只写一个回调函数,然后它会不管你是什么请求地址,都会经过这个中间件。该中间件只针对/admin地址有效,然后向下匹配第二个中间件。app.use("/admin",function(req,res,next){//处理内容next();//向下匹配});该中间价不管是什么请求,都会经过这里。app.use(function(req,res,next){//处理函数next();});0x03错误处理中间件:在程序执行的过程中,不可避免的会出现一些无法预料的错误,比如文件读取失败,数据库连接失败,错误处理中间件是一个集中处理错误的地方。它一共有四个参数:err、req、res、nextapp.use(function(err,req,res,next){res.status(500).send("服务器发生未知错误:",err.message);})//当发生错误时,会执行这个错误处理中间件。错误处理中间件只能捕获到同步代码出错(thrownewErroe(“错误信息”))。如果在异步代码中出现了错误,这时需要手动触发错误处理中间件,这时调用next()方法并且将错误信息当作参数即可。app.get("/index",function(req,res,next){thrownewError("出现错误了.");next("出现错误了.");//同步代码可以手动抛出一个异常让错误处理中间件来捕获,也可以手动调用next()。})app.get("/index",function(req,res,next){fs.readFile("./a.txt","utf8",function(err,data){if(err){next(err);//在异步代码中只能通过next()来调用错误处理中间件。}})})注意:错误处理中间件一般写在最后面。

2021-8-17 88 0
Node.js

导入:使用{{include‘./文件路径’}}可以导入网页,例如:页头和页脚是单独的文件,然后通过模板引擎将它引入。{{include'./header.html'}}//引入页头<div><h1>Hi~</h1></div>{{include'./footer.html'}}//引入页脚继承:1、首先需要创建一个模板文件(layoyt.html),在该文件中留好坑。使用{{block‘名称’}}来留一个坑。{{block'名称'}}<h1>我是h1标题</h1><!--这里可以写也可以不写,写了就是默认内容-->{{/block}}2、然后在子文件中继承这个模板文件,然后填坑(相当于重写)。{{extend'./layout.html'}}<!--继承这个文件-->{{block'名称'}}<!--这里可以重写继承过来的内容-->{{/block}}模板文件:<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><!--模板继承:css开始-->{{block'css'}}{{/block}}<!--模板继承:css结束--></head><body><!--引入页头开始-->{{include'./header.html'}}<!--引入页头结束--><!--模板继承:主体内容开始-->{{block'content'}}{{/block}}<!--模板继承:主题内容结束--><!--引入页脚开始-->{{include'./footer.html'}}<!--引入页脚结束--><!--模板继承:script开始-->{{block'script'}}{{/block}}<!--模板继承:script结束--></body></html>首页:<!--继承layout这个布局-->{{extend'./layout.html'}}<!--该页面的css-->{{block'css'}}<style>body{background-color:aqua;}</style>{{/block}}<!--该页面的主体内容-->{{block'content'}}<div><h1>fda</h1></div>{{/block}}<!--该页面的script-->{{block'script'}}<script>alert("我是index页面");</script>{{/block}}

JavaScript

0x01async:在普通函数定义前面加上async关键字,普通函数就变成了异步函数。该异步函数默认的返回值是Promise对象。在该函数中return的内容等价于:returnPromise.resolve("内容");//或者reruennewPeomose(function(resolve){resolve("内容");})实例:asyncfunctiontest(){return"内容";//返回的是一个Promise对象}如何使用reject()提供错误信息:如果需要像reject()一样提供报错信息,那么需要使用throw抛出一个异常。注意:如果出现并抛出了异常,那么就无法在return内容。asyncfunctiontest(){throw"我是错误信息";}0x02await:await它只能出现在异步函数中,它可以暂停自己这个异步函数的执行,等待promise对象返回结果后再向下执行。通常返回promise对象后,需要使用.then方法来接收异步函数传过来的值。在该函数前面加上await关键字,返回的值就是resolve中的值,别忘了使用变量接收~如果需要捕获错误信息,需要使用.catch方法来捕获。//变为异步函数asyncfunctionas(){throw"错误信息";//抛出异常return"返回的内容";//返回成功信息}//因为await需要出现在异步函数中,所以定义asyncasyncfunctionrun(){//接收promise返回的结果,catch用来捕获错误consta=awaitas().catch(function(err){console.log("错误信息为:",err);//错误信息为:错误信息});console.log(a);//返回的内容}run()实战案例-检查数据库是否存在相同的昵称和账号,并返回客户端,错误代码://注册请求:进入后获取表单提交的数据,并判断数据库是否有此昵称和账号admin.post("/register",function(req,res){//查询数据库是否有此昵称User.findOne({username:req.body.username}).then(function(ret){/*如果ret不等于null,说明就是该昵称已经存在了,将这个消息就要告诉客户端*/if(ret!=null){/*在这里其实就出问题了,这里的return我们期望它起一个终结的作用,但是,它最终返回给了这个回调函数,并不起终结作用。首先要知道,res.send()只能在同一个路由里返回一次。那么如果昵称和账号都存在了,这就是返回了两次,这显然就报错了。*/returnres.send({code:1,message:"该昵称已经存在!"});}})})实战案例-检查数据库是否存在相同的昵称和账号,并返回客户端,正确代码://由于里面需要使用await,所以在这个回调函数外写一个asyncadmin.post("/register",asyncfunction(req,res){//使用await等待返回的结果,然后将结果赋值给username这个变量。constusername=awaitUser.findOne({username:req.body.username});//接下来判断这个变量是否是nullif(username!=null){//这样才是真正的终结了returnres.send({code:1,message:"该昵称已经存在!"});}//然后在判断账号是否存在,如果昵称存在了,就不会执行这里了,更不会res.send两次})

2021-8-17 101 0
JavaScript

then方法是Promise原型对象中的方法,可以通过Promise实例对象调用。参数:then方法一共有两个参数,这两个参数都是函数,其实就是resolve()和reject()的回调函数。当Promise状态为fulfilled时,执行第一个函数(resolve)。当Promise状态为rejected时,执行第二个函数。(reject)返回值:then的返回值是一个Promise对象。获取数据:首先要从resolve()或者reject()中写好实参,然后该对象的then方法中对应的回调函数会接收形参。constp=newPromise(function(resolve,reject){resolve(data);//例如这里是文件中的数据reject(err);//这里就是读取文件失败的错误信息});p.then(function(value){console.log(value);//这里就是传过来的data数据},function(err){console.log(err);//这里就是传过来的err错误信息});注意:如果Promise对象的状态是pending(也就是没有调用resolve和reject),那么它实例的then方法是不会执行的。返回实例的状态改变:then方法返回的是一个Promise对象,它默认是一个pending状态,也就是说不会执行。可以通过return关键字可以将状态改为fulfilled。constp=newPromise(function(resolve,reject){resolve("成功调用");//改变该对象的状态,否则不会执行then方法//reject("失败调用");});constt=p.then(function(data){console.log(data);//输出resolve的实参//t现在的状态是pending状态,那么t的then方法是不会执行的returndata;//通过return改变t的状态,而这里return的值会被t实例中的then接收。},function(err){console.log(err);returnerr;//当p实例失败时,调用reject,才会执行这里,否则不会执行这里。});t.then(function(data){console.log("成功",data);},function(err){console.log("失败",err);});如果代码出错时,会将then方法返回的实例的状态修改为rejected。链式调用:当前then函数return的结果,可以被下一个then中的第一个function参数接收到。如果return的是一个变量,接收到的就是变量值。如果return的是一个Promise对象,那么后面then中的回调函数就是return传递过来Promise对象中的resolve函数。

2021-8-17 85 1