Vue

在了解Vue中的数据代理之前,我们首先了解一下Object对象下的definePropert()方法。0x01-Object.defineProperty()方法:Object.defineProperty()方法可以用来为对象增加属性,并且被添加属性很特殊,可以设置是否允许值被更改,或者如果访问这个属性的时候,它可以执行什么操作,这个属性的值被更改时,它可以执行什么操作,非常的NB!!1.1-注意:它应该是直接使用Object调用该方法,而不是一个Object类型的实例调用。//错误-不应该使用object类型的实例来调用varobj={};obj.definePropert();//正确-应该使用Object构造对象调用此方法Object.defineProperty();1.2-参数:obj:要定义属性的对象.prop:要添加属性的名称.descriptor:配置项.1.3-配置项:value:1.默认值:undefined。2.描述:被添加属性的值,可以是任何JS中的值。enumerable:1.默认值:false。2.描述:在遍历时,只有enumerable为true,被添加的属性才会出现,否则不出现。writable:1.默认值:false。2.描述:1.只有writable为true时,value的值才可以有效的被更改。2.为false时,修改也不会报错,但是打印该对象会发现值并未修改。get:1.默认值:undefined。2.说明:1.它的值应该是一个函数,当访问被添加的属性时,就会调用该方法。2.该函数的返回值会用作被添加属性的值。set:1.默认值:undefined。2.说明:1.它的值应该是一个函数,当被添加的属性的值发生修改时,就会调用该方法。2.该方法接收一个参数,值就是被新赋予的值。1.4-案例:问题:1.将num变量的值,添加到person对象的age属性中。2.当我们修改num这个变量值时,访问person.age,使它的值也随着num发生改变。3.当我们修改person.age时,使num也随着person.age改变。思路:1.我们只需要为在配置项中添加一个get,每次访问该属性时,都会去访问num这个变量,从而每次输出的都是num的值。2.我们还可以添加set,当修改person.age属性时,将value的参数值赋值给num,使它的值也随其改变。letnum=19;letperson={};Object.defineProperty(person,"age",{//每当访问person.age时,就会执行该方法.//return回的内容,就会当做person.age的值.get(){returnnum;},//当person.age被修改时,就将新值赋予给num.//从而在通过getter访问num时,还是同步的数据.set(value){num=value;}});0x02-Vue数据代理:Vue就用到了数据代理,在我们操作vm.属性时,它就用到了set和get方法,最终操作的就是_data中的数据,(后面仅仅是我猜想)->而_data也用到了代理,当它的值发生变化时,也会通过set方法去修改Dom元素的值,否则怎么会如Vue所介绍,数据驱动视图呢?

2021-12-24 91 0
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 125 0
杂类

在logs文件中查看,报的是以下错误:2021-11-1617:49:210[Note]InnoDB:Mutexesandrw_locksuseWindowsinterlockedfunctions2021-11-1617:49:210[Note]InnoDB:Useseventmutexes2021-11-1617:49:210[Note]InnoDB:Compressedtablesusezlib1.2.112021-11-1617:49:210[Note]InnoDB:Numberofpools:12021-11-1617:49:210[Note]InnoDB:UsingSSE2crc32instructions2021-11-1617:49:210[Note]InnoDB:Initializingbufferpool,totalsize=16M,instances=1,chunksize=16M2021-11-1617:49:210[Note]InnoDB:Completedinitializationofbufferpool2021-11-1617:49:210[Note]InnoDB:128outof128rollbacksegmentsareactive.2021-11-1617:49:210[Note]InnoDB:Creatingsharedtablespacefortemporarytables2021-11-1617:49:210[Note]InnoDB:Settingfile'C:\xampp\mysql\data\ibtmp1'sizeto12MB.Physicallywritingthefilefull;Pleasewait...2021-11-1617:49:210[Note]InnoDB:File'C:\xampp\mysql\data\ibtmp1'sizeisnow12MB.2021-11-1617:49:210[Note]InnoDB:Waitingforpurgetostart2021-11-1617:49:210[Note]InnoDB:10.4.21started;logsequencenumber300610;transactionid1702021-11-1617:49:210[Note]Plugin'FEEDBACK'isdisabled.2021-11-1617:49:210[Note]InnoDB:Loadingbufferpool(s)fromC:\xampp\mysql\data\ib_buffer_pool2021-11-1617:49:210[Note]ServersocketcreatedonIP:'::'.解决办法:在一个cmd窗口中,输入以下命令:mysqld–-console–-skip-grant-tables–-skip-external-locking然后不要关闭刚刚打开的那个cmd窗口,接着在打开一个cmd窗口,输入以下命令:mysqlcheck-r--databasesmysql--use-frm接着,将两个cmd窗口全部关闭,重新在xmapp中开启mysql。

Node.js

大纲:小组介绍作品名称小组名称小组成员指导教师作品介绍前端:各个板块以及设计思路、实现方式。后端:各个功能、模块的介绍、设计思路。采用技术前端采用的各个库后端采用的各个库该程序如何运行程序下载小组介绍:作品名称:石家庄财经职业学院-新校区小组名称:True不会写网页组小组成员:甄雨锋、郑泽田、贾龙涛指导教师:刘天宇作品介绍:前后端都实现了响应式布局。0x01前端:欢迎页设计思路:JS:生成400个div,将它添加到父盒子中,并且它们都有一个相同的类名,并且为每个盒子设置一个随机的动画完成周期,以及延迟多少秒后进行动画。css:为js生成带标签的盒子,设置动画,在2000px外的距离,归属到它自身的位置(0px)。js:在14秒之后,差不多动画特效完成了,为父盒子添加一个类名。css:执行父盒子指定的特效,从0px在归属到2000px外的位置(弹出特效)。网站首页设计思路:使用art-template模板引擎,先设计一个模板,那么这里的公共模板为顶部导航栏以及页脚。在首页中,继承父类模板,在父类的body中,添加了轮播图等内容。学院新闻:后端读取到数据库内容后,渲染给客户端,并且在底部添加了分页功能,每页只展示3个文章。校园风光设计思路:这里使用了fullpage这个js库,一共有5个大页,每个大页后有两个子页,每一页展示的是同一个校园角落。校园风光设计思路:这里使用了svg,基于图片之上,通过坐标轴点缀的圆形,点击该按钮,即可弹出该位置的名称以及图片。留言板设计思路:这里的留言内容数据库中的留言内容,在发表时,采用了axios向后端发起请求,在后端接收到请求后,会将该评论添加到数据库中,如果添加成功,服务端则返回一个成功码,然后通过jQuery将表单中的val值,添加到评论展示中,如果后端添加失败,则提示添加失败。404页设计思路:如果所有的路由都不匹配,则将404页返回客户端,并且在5秒后返回首页。0x02后端:登录页设计思路:这里的背景有白天和夜晚两张图片,进行轮流轮播,在登录时,如果账号正确,那么则添加session信息,并且进入后台,如果不正确,则提示账号密码错误。登录拦截如果在没有登录的情况下,直接访问后台的管理页面,是不允许的,它会重定向到登录页,如果在已经登录的情况下(客户端有cookie信息),那么在访问后台,是免登陆的。文章管理设计思路:该页面可以进行增删改操作,点击编辑,会基于现在文章内容之上,进行修改。并且可以自定义封面,如果不选择封面,那么会使用默认的封面,编辑器采用的是富文本编辑器,比较简介,而且功能全。发布文章页面,和该页面类似,只不过是发布文章。评论管理设计思路:该页面可以删除已经发布的评论。前端设置设计思路:该页面可以更改欢迎页的封面图。实现思路:直接将上传的文件,更改名称,并移动到目标文件夹,替换掉原有的文件。采用技术:该网站为动态网站,可通过后端操作,设置前端内容,接下来详情介绍。0x01前端:运用技术:cssjsBootstrapBootstrapAnimatejQuerywowart-templateaxiosfullpage0x02后端:后端语言为:node,用的是Express框架。运用技术:第三方库第三方库Expressexpress-sessionmongooseformidablemongoose-sex-pagemomentaxiosart-template0x03数据库:数据库为:MongoDB,使用的是Mongoose封装后的。如何运行该网站?1.安装Node.js环境2.安装MongoDB数据库,并且将其配置完成后使用mongod命令打开数据库。3.第一次运行将以下代码取消注释4.将终端定位到项目首级,输入nodeapp命令,终端显示添加成功的信息后,按两次Ctrl+C将程序停止运行。5.然后将刚刚取消的注释在注释掉。6.直接使用nodeapp命令运行程序即可。源码下载:http://yq2048.cn/web/21web/web.zip

Node.js

官网文档:https://github.com/sideway/joi/blob/v13.6.0/API.md注意:该文章只适用于13.6.0版本,最新版本语法已经变了,所以安装时需要指定版本。作用:它是一个验证器,可以验证传入的值是否合法,验证格式可以自定义,它提供了很多方法,可以直接调用方法来验证。0x01使用:1、下载Joi模块npminstalljoi@13.6.02、引入Joi模块constJoi=require("joi");3、定义验证规则:声明一个变量(schema),这个变量的值是一个对象,在对象内部定义的就是验证规则。属性:表单传过来的name名称值:验证内容,例如最小长度,最大长度…如果被验证的对象中出现规则以外的内容,验证就会失败。constschema={username:Joi.string().min(2).max(20).required().error(newError("传入的数据不合法!")),//...}注意:必须将类型写在最前面,不同类型有不同的验证规则。使用规则验证表单传过来的数据:使用Joi.validate(被验证的对象,验证规则)方法来验证。Joi.validate(req.body,schema);它返回一个Promise对象。如果验证通过:返回被验证的表单数据对象(req.body这个对象)。如果验证失败:抛出一个异常。asyncfunctionrun(){try{constt=awaitJoi.validate(req.body,schema);console.log(t);}catch(e){console.log(e.message)}}run();0x02方法:string():字符串类型。alphanum():只能包含az、A-Z、0-9,不能包含其他特殊字符。regex():这个方法接收一个正则表达式,用这个参数来验证这个字段。min():字符串的小长度。max():字符串的最大长度。required():这个属性是必填属性。[Joi.string(),Joi.number()]:这两种类型都可以,如果不是这两种,则不通过。email():必须符合邮箱格式。error(newError("错误信息")):如果不符合验证规则,则会抛出这个错误。valid('a','b'):只能是这个参数内中的值,不能是其他的。number():数值类型。integer():必须是整数。min():数值最小数(注意:不是长度)max():数字最大数(注意:不是长度)

2021-8-17 77 0
2021-8-17 69 0
Node.js

该模块为加密模块:加密方式:哈希加密(hash)。哈希加密是单程加密方式,只可以加密,不可以解密。注意:该方法都是异步API,需要使用await来等待一下,不要忘记await需要配合async使用哦!!0x01密码加密步骤:1、首先下载bcrypt这个库。npminstallbcrypt2、然后导包。constbcrypt=require("bcrypt");3、使用genSalt()方法生成‘盐’。参数:加密复杂程度,越大越复杂。默认为:10,当然,越大也越慢。letsalt=awaitbcrypt.genSalt(10);4、使用hash()方法对密码进行加密。第一个参数:用户输入的明文密码。第二个参数:使用genSalt()生成的‘盐’。letpass=awaitbcrypt.hash("明文密码",salt);0x02密码比对:虽然不能解密,但是它提供了一个密码比对的方法,可以判断密码输入的是否正确。方法:awaitbcrypt.compare('明文密码','加密密码');明文密码就是用户现在输入的密码。加密密码是从数据库中读取出来的已经被加密的密码。返回值:返回一个Boolean值。比对正确:true比对错误:false//查询数据库User.findOne({//只查询用户输入的账号account:req.body.account})//由于bcrypt.compare使用了await,所以这里使用async。.then(asyncfunction(ret){//判断查询返回的是否是null,如果是null就是没有数据,那么返回账号密码错误。if(ret){//如果返回的对象,就是存在,然后密码比对,返回Boolean值。if(awaitbcrypt.compare(req.body.password,ret.password)){//返回true说明比对成功res.send({message:"登录成功!",code:0});//返回false说明比对失败,返回账号密码错误}else{res.send({message:"账号或密码错误!",code:1});}}else{res.send({message:"账号或密码错误!",code:1});}});

2021-8-17 51 0