user6054116914083
获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
展开
评论
点赞
二、JWT
2 原理
全称是json web token， 简单来说JWT就是通过可逆加密算法，生成一串包含用户、过期时间等关键信息的Token，每次请求服务器拿到这个Token解密出来就能得到用户信息，从而判断用户状态。
1.客户端登录成功后（必须是在登陆成功才行，与session一样的前提条件），服务器会根据用户名和签名以及其他信息加密生成唯一的token串，用来区分他们，不需要存入服务端的缓存中，但会把这个token返回给相应的主机
2.主机收到token后会存入cookie或者localStorage中，以后主机的每一次发送其他类型的请求的操作都会携带这个token
3.服务器会将客户端发来的这个token和服务端从数据库查询出来的并且重新计算得到的用户信息进行对比，如果匹配，则认证成功，如果用户请求的资源需要相应的权限，则校验token中的payload中存储的权限等相关信息，如果有权限则返回给对应主机所需要的资源（即做到了权限鉴权），否则拒绝
3 token+redis与jwt的区别
1.简单的说，token只是一个标识，以token加redis为例，服务端将token保存在redis中，客服端访问时带上token，如果在redis中能够查到这个token，说明身份有效。
2.jwt不需要查库，本身已经包含了用户的相关信息，可以直接通过服务端解析出相关的信息，与session，token的最大区别就是服务端不保存任何信息（服务端只需要保存密钥key）
2 原理
全称是json web token， 简单来说JWT就是通过可逆加密算法，生成一串包含用户、过期时间等关键信息的Token，每次请求服务器拿到这个Token解密出来就能得到用户信息，从而判断用户状态。
1.客户端登录成功后（必须是在登陆成功才行，与session一样的前提条件），服务器会根据用户名和签名以及其他信息加密生成唯一的token串，用来区分他们，不需要存入服务端的缓存中，但会把这个token返回给相应的主机
2.主机收到token后会存入cookie或者localStorage中，以后主机的每一次发送其他类型的请求的操作都会携带这个token
3.服务器会将客户端发来的这个token和服务端从数据库查询出来的并且重新计算得到的用户信息进行对比，如果匹配，则认证成功，如果用户请求的资源需要相应的权限，则校验token中的payload中存储的权限等相关信息，如果有权限则返回给对应主机所需要的资源（即做到了权限鉴权），否则拒绝
3 token+redis与jwt的区别
1.简单的说，token只是一个标识，以token加redis为例，服务端将token保存在redis中，客服端访问时带上token，如果在redis中能够查到这个token，说明身份有效。
2.jwt不需要查库，本身已经包含了用户的相关信息，可以直接通过服务端解析出相关的信息，与session，token的最大区别就是服务端不保存任何信息（服务端只需要保存密钥key）
展开
评论
点赞
minxin其实是一个对象，里面的结构大致跟普通组件的script里面的一样，有data属性，钩子函数和方法等
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
在实际项目中，可以新建一个js文件，导出一个minxin对象 在引用的组件中引入使用即可
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
在实际项目中，可以新建一个js文件，导出一个minxin对象 在引用的组件中引入使用即可
展开
评论
点赞
一.什么是mixins（混入）？
mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。
二.作用:
1.更高效的实现组件内容的复用
2.将组件内部data,method等与父组件相应内容进行合并,相当于在引入后,父组件的各种属性,方法进行了扩充
3.对数据,对象进行合并,要以组件为优先
mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。
二.作用:
1.更高效的实现组件内容的复用
2.将组件内部data,method等与父组件相应内容进行合并,相当于在引入后,父组件的各种属性,方法进行了扩充
3.对数据,对象进行合并,要以组件为优先
展开
评论
点赞
Window 对象是浏览器全局对象，表示浏览器应用窗口，包含许多与浏览器相关的属性和方法，例如 window.document、window.navigator、window.location 等等。通过这些属性和方法，我们可以访问和操作 HTML 页面的元素和内容，以及获取与浏览器相关的信息。
例如:
- window.document 可以直接操纵 HTML 文档，对页面上的元素进行增删改查。
- window.location 可以让我们访问当前页面的 URL，并且可以用于重定向用户到其他页面。
- window.history 可以操作浏览器的历史记录 ，如 back() 和 forward()。
- window.resizeTo() 和 window.moveTo() 可以调整浏览器窗口的大小或位置。
- window.open() 可以打开新的浏览器窗口。
- window.close() 可以关闭浏览器窗口。
需要注意的是，并非所有这些属性和方法都能正常使用，因为浏览器可能出于安全原因，会把它们禁用。
例如:
- window.document 可以直接操纵 HTML 文档，对页面上的元素进行增删改查。
- window.location 可以让我们访问当前页面的 URL，并且可以用于重定向用户到其他页面。
- window.history 可以操作浏览器的历史记录 ，如 back() 和 forward()。
- window.resizeTo() 和 window.moveTo() 可以调整浏览器窗口的大小或位置。
- window.open() 可以打开新的浏览器窗口。
- window.close() 可以关闭浏览器窗口。
需要注意的是，并非所有这些属性和方法都能正常使用，因为浏览器可能出于安全原因，会把它们禁用。
展开
评论
点赞
Vue2和Vue3的区别主要在以下几个方面：生命周期函数钩子、数据双向绑定原理、定义变量和方法、指令和插槽的使用、API类型、是否支持碎片、父子之间传参、main.js文件中部分设置等1。其中，Vue3使用了ES6的Proxy API对数据代理，通过reactive()函数给每一个对象都包一层Proxy，从而实现对数据的监控2。Vue3还支持碎片(Fragments)，即组件可以拥有多个根节点2。此外，Vue3提供了setup方法来声明响应性数据
展开
评论
点赞
1.设置或获取对象指定的文件名或路径：
获取整个 URL 为字符串(常用):window.location.href
2.获取与 URL 关联的端口号码:window.location.port
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e =>8088
3.设置或获取 URL 的协议部分:window.location.protocol
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e =>http
4.设置或获取 href 属性中在井号“#”后面的分段。window.location.hash
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
=> #home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
5.设置或获取 location 或 URL 的 hostname 和 port 号码:window.location.host
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
获取整个 URL 为字符串(常用):window.location.href
2.获取与 URL 关联的端口号码:window.location.port
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e =>8088
3.设置或获取 URL 的协议部分:window.location.protocol
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e =>http
4.设置或获取 href 属性中在井号“#”后面的分段。window.location.hash
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
=> #home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
5.设置或获取 location 或 URL 的 hostname 和 port 号码:window.location.host
eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e
展开
评论
点赞
状态码200：
状态码200表示服务器响应成功，也就是服务器找到了客户端请求的内容，并且将内容返回给客户端。
状态码302：
状态码302代表临时跳转。例如：URL地址A可以向URL地址B上跳转，但这并不是永久性的，在经过一段时间后，URL地址A还可能向URL地址C上跳转。
状态码301 ：
状态码301和状态码302相似，不同的是状态码301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。这个“跳”的动作是服务器是通过回传状态码301来下达给客户端的，让客户端完成跳转。
状态码304：
服务器通过返回状态码304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。
状态码403：
状态码403代表请求的服务器资源权限不够，也就是说，没有权限去访问服务器的资源，或者请求的IP地址被封掉了。
状态码404：
状态码404代表服务器上没有该资源，或者说服务器找不到客户端请求的资源，是最常见的请求错误码。
状态码200表示服务器响应成功，也就是服务器找到了客户端请求的内容，并且将内容返回给客户端。
状态码302：
状态码302代表临时跳转。例如：URL地址A可以向URL地址B上跳转，但这并不是永久性的，在经过一段时间后，URL地址A还可能向URL地址C上跳转。
状态码301 ：
状态码301和状态码302相似，不同的是状态码301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。这个“跳”的动作是服务器是通过回传状态码301来下达给客户端的，让客户端完成跳转。
状态码304：
服务器通过返回状态码304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。
状态码403：
状态码403代表请求的服务器资源权限不够，也就是说，没有权限去访问服务器的资源，或者请求的IP地址被封掉了。
状态码404：
状态码404代表服务器上没有该资源，或者说服务器找不到客户端请求的资源，是最常见的请求错误码。
展开
评论
点赞
1.Promise.resolve()函数被执行时, 会将promise的状态从 pending 改成fulfilled成功
2.Promise.reject()函数被执行时, 会将promise的状态从pending 改成rejected失败
new Promise((resolve, reject) => {
reject() //Promise.reject()----> rejected 失败
// resolve() Promise.resolve()----->fulfilled 成功
})
3.Promise.all([promise1, promise2, promise3]) 等待原则, 是在所有promise都完成后执行, 可以用于处理一些并发的任务，如果Promise实例都进入Fulfilled状态，Promise.all返回的实例才会变成Fulfilled状态并将Promise实实例数组的所有返回值组成一个数组，传给Promise.all返回实例的回调函数；如果有某一个或者多个实例进入rejected状态，Promise.all返回的实例会立即变成Rejected状态并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。
应用场景
4.Promise.race([promise1, promise2, promise3])赛跑, 竞速原则, 只要三个promise中有一个满足条件, 就会执行.then(用的较少)，先执行到成功就返回成功的状态，返回失败就是失败状态
2.Promise.reject()函数被执行时, 会将promise的状态从pending 改成rejected失败
new Promise((resolve, reject) => {
reject() //Promise.reject()----> rejected 失败
// resolve() Promise.resolve()----->fulfilled 成功
})
3.Promise.all([promise1, promise2, promise3]) 等待原则, 是在所有promise都完成后执行, 可以用于处理一些并发的任务，如果Promise实例都进入Fulfilled状态，Promise.all返回的实例才会变成Fulfilled状态并将Promise实实例数组的所有返回值组成一个数组，传给Promise.all返回实例的回调函数；如果有某一个或者多个实例进入rejected状态，Promise.all返回的实例会立即变成Rejected状态并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。
应用场景
4.Promise.race([promise1, promise2, promise3])赛跑, 竞速原则, 只要三个promise中有一个满足条件, 就会执行.then(用的较少)，先执行到成功就返回成功的状态，返回失败就是失败状态
展开
评论
点赞
1.computed计算属性：
作用：
（1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。
（2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。
（3）不支持异步，如果有异步操作，无法监听数据的变化。
（4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。
（5）computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
2.watch侦听器：
作用：
（1）它不支持缓存，数据变化时，它就会触发相应的操作。
（2）支持异步监听。
（3）接受两个参数，第一个是最新的值，第二个是变化之前的值。
（4）监听data或者props传来的数据，发生变化时会触发相应操作。有两个参数：
immediate：立即触发回调函数。
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。
作用：
（1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。
（2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。
（3）不支持异步，如果有异步操作，无法监听数据的变化。
（4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。
（5）computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
2.watch侦听器：
作用：
（1）它不支持缓存，数据变化时，它就会触发相应的操作。
（2）支持异步监听。
（3）接受两个参数，第一个是最新的值，第二个是变化之前的值。
（4）监听data或者props传来的数据，发生变化时会触发相应操作。有两个参数：
immediate：立即触发回调函数。
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。
展开
评论
点赞
w3c常用规范
① HTML内容结构要求语义化
尽量用有结构含义的，少用无语义的，如 <span>，<div> 无意义，看不出是什么东西，可是<address>一看就知道这里面的是地址，<em>标签一看就知道这个是强调的内容，区分于普通内容。标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，标签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）很有帮助
② 内容（HTML）与表现（css样式）分离。样式尽量少用 行内样式。
③内容（HTML）与行为（JS）分离
④图片添加有意义的alt属性
⑤ 命名遵循行业标准 (比如驼峰命名)
⑥标签名和属性名称必须小写
⑦HTML标签必须关闭
⑧属性值必须用引号括起来
⑨标签必须正确嵌套（标签不能交叉）
⑩不要在注释内容中使用’’–’
① HTML内容结构要求语义化
尽量用有结构含义的，少用无语义的，如 <span>，<div> 无意义，看不出是什么东西，可是<address>一看就知道这里面的是地址，<em>标签一看就知道这个是强调的内容，区分于普通内容。标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，标签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）很有帮助
② 内容（HTML）与表现（css样式）分离。样式尽量少用 行内样式。
③内容（HTML）与行为（JS）分离
④图片添加有意义的alt属性
⑤ 命名遵循行业标准 (比如驼峰命名)
⑥标签名和属性名称必须小写
⑦HTML标签必须关闭
⑧属性值必须用引号括起来
⑨标签必须正确嵌套（标签不能交叉）
⑩不要在注释内容中使用’’–’
展开
评论
点赞
CommonJS模块特点：
对于基本数据类型，属于复制。即会被模块缓存，如果在另外一个模块导入相同的变量也可以对该变量进行赋值
对于复杂数据类型，是浅拷贝。由于两个模块引用对象指向同一内存空间，因此对该模块的值作出修改时会影响到另一个模块
当使用require命令加载某一个模块时，就会运行整个模块的代码
当使用require命令加载同一个模块的时候，不会再执行该模块，而是取到缓存之中的值，CommonJS模块无论加载多少次，都只会在第一次加载的时候运行一次，以后在加载都是在缓存中取值返回第一次运行的结果，除非手动清除系统缓存
循环加载时，属于加载时执行。即脚本代码在require的时候就会全部执行，一旦出现某个模块被“循环加载”，就只输出已经执行的部分，还未执行的部分不会输出
ES6模块特点
静态化，必须定义在顶部，不能使用条件语句，自动采用严格模式
treeshaking(webpack会在打包的时候忽略掉没有用的代码)和编译优化，以及在webpack3中作用域的提升
外部可以拿到实时的值而不是缓存中的值，是引用而不是拷贝
es6模块中的值是属于动态只读引用
对于只读来说，就是不能修改引入变量的值，import变量是只读的，无论是基本数据类型还是复杂数据类型，当模块遇到import命令的时候。就会生成一个只读引用。等到脚本真正执行的时候，再根据这个只读引用到被加载的那个模块里面去取值
对于动态来说，原始值发生变化，import加载的值也发生变化，无论是基本数据类型还是复杂数据类型
循环加载时，es6模块时动态引用的，只要两个模块之间存在某个引用，代码就能构执行
对于基本数据类型，属于复制。即会被模块缓存，如果在另外一个模块导入相同的变量也可以对该变量进行赋值
对于复杂数据类型，是浅拷贝。由于两个模块引用对象指向同一内存空间，因此对该模块的值作出修改时会影响到另一个模块
当使用require命令加载某一个模块时，就会运行整个模块的代码
当使用require命令加载同一个模块的时候，不会再执行该模块，而是取到缓存之中的值，CommonJS模块无论加载多少次，都只会在第一次加载的时候运行一次，以后在加载都是在缓存中取值返回第一次运行的结果，除非手动清除系统缓存
循环加载时，属于加载时执行。即脚本代码在require的时候就会全部执行，一旦出现某个模块被“循环加载”，就只输出已经执行的部分，还未执行的部分不会输出
ES6模块特点
静态化，必须定义在顶部，不能使用条件语句，自动采用严格模式
treeshaking(webpack会在打包的时候忽略掉没有用的代码)和编译优化，以及在webpack3中作用域的提升
外部可以拿到实时的值而不是缓存中的值，是引用而不是拷贝
es6模块中的值是属于动态只读引用
对于只读来说，就是不能修改引入变量的值，import变量是只读的，无论是基本数据类型还是复杂数据类型，当模块遇到import命令的时候。就会生成一个只读引用。等到脚本真正执行的时候，再根据这个只读引用到被加载的那个模块里面去取值
对于动态来说，原始值发生变化，import加载的值也发生变化，无论是基本数据类型还是复杂数据类型
循环加载时，es6模块时动态引用的，只要两个模块之间存在某个引用，代码就能构执行
展开
评论
点赞
CSRF攻击，攻击者会伪造一个用户发送给服务器的正常链接，其核心主要是要和已登录（已认证）的用户去发请求。CSRF不需要知道用户的Cookie，CSRF自己并不会发请求给服务器，一切交给用户
评论
点赞