- 博客(51)
- 收藏
- 关注
RSS订阅原创 前端安全性问题
如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。主要原理：过于信任客户端提交的数据！防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。CSRF跨站请求伪造原理？如何进行？防御手段？如何进行：当你在某网页登录之后，在没有关闭网页
2021-09-08 22:10:27
205
原创 Cookie、sessionStorage、localStorage的区别
共同点：都是保存在浏览器端，并且是同源的Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就
2021-08-31 17:22:00
187
原创 如何实现数组去重
利用对象的 key 唯一众所周知，对象的key不可重复，否则后者将覆盖前者。利用该特性，实现数组去重，遍历数组，将数组的每一项做为对象的key值。<script> let arr = [1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4, 1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4] let map = new Map(); let newStr = []; for (l
2021-08-22 22:22:20
224
原创 新特性，新方法
1、新增声明命令 let 和 const2、模板字符串(Template String):用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串3、函数的扩展：箭头函数4、对象的扩展：属性名和属性值相同时可以简写5、Promise 对象：解决异步编程，，将异步操作以同步操作的流程表达出来。即解决异步处理回调地狱6、解构赋值：数组和对象都可以用7、…展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量8、async、await...
2021-08-13 20:30:30
122
原创 MySQL数据库常用指令
1.查询users表中的所有数据，所有字段-- select * from users;2.像列表中插入数据-- insert into users (username,password) values ('钢铁侠','adc123');-- select * from users;3. 修改指定条件字段-- update users set password="888888",status=0 where id=3;-- select * from users; 4.删除...
2021-08-11 21:37:47
64
原创 微信小程序
数据绑定在打他中定义数据 data: { hamlet:'木叶村', number:1, students:[{name:'鸣人'},{name:'佐助'}], age:[18,15,25], img:'https://img1.baidu.com/it/u=180951433,2136657036&fm=26&fmt=auto&gp=0.jpg' },在 wxml 中使用数据<view>有{{number}}个，{
2021-08-09 22:21:23
74
原创 JS知识点总结
Ajax如何使用一个完整的AJAX请求包括五个步骤：创建XMLHTTPRequest对象使用open方法创建http请求，并设置请求地址xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数设置发送的数据，用send发送请求注册事件（给ajax设置事件）获取响应并更新页面出现跨域问题的原因:在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所
2021-08-04 23:39:35
108
原创 Vue知识点总结
v-model 的原理？我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 textarea 元素使用 value 属性和 input 事件； -checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为 prop 并将 cha
2021-08-01 00:02:55
368
原创 如何判断两个对象是否相等
Object.is( )Object.is 方法只能判断这两个对象的引用地址是否一致，但是要比对两个对象的内容是否相等时就不能用这个方法了 let obj1 = { a: 11, b: 22 } let obj2 = { a: 11111111111, b: 22222222222 } let obj3 = obj2 console.log('obj1 VS obj2:', Object.is(
2021-07-30 23:35:44
9191
1
原创 promise实现原理
promise怎么使用const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }}); promise.then(function(value) { // success}, function(error) { // failure});可
2021-07-29 22:39:02
76
原创 手写超级简单的vue分页组件
组件基本布局template> <div class="xtx-pagination"> <a href="javascript:;" v-if="myCurrentPage==1" class="disabled">上一页</a> <a href="javascript:;" v-else @click="go(-1)">上一页</a> <span v-if="pageInfo.start>
2021-07-27 22:52:35
211
原创 拿来就能用的Vue3手写数量选择组件
基础结构<template> <div class="xtx-numbox"> <div class="label">数量</div> <div class="numbox"> <a href="javascript:;">-</a> <input type="text" readonly value="1"> <a href="javascri
2021-07-25 23:46:43
224
1
原创 如何能让一维数组转换成二维数组
分析接口给我们的数据是一个一维数组[{}, {}, {},{},{},{},{},{}]，为了方便轮播图使用，我们把4件商品分成一组，一组是一个单位来填充轮播的一屏。二维数组转换成一维数组（[1,1],[2,2],[3,3] 转换成 [1, 1, 2, 2, 3, 3]）slice（）方法// 得到需要的数据： 把一维数组转成二位数组// 转换前：[1,2,3,4,5,6,7,8] // 取size=4； 4个一组 // 转换后：[[1,2,3,4], [5,6,7,8...
2021-07-25 23:11:49
3470
原创 手写一个图片放大镜组件
问题1：如何实现左侧遮罩的鼠标跟随效果？鼠标在遮罩层中心； 实时跟随移动； 不能移动到指定区域外部问题2：如何展示放大后的效果？background
2021-07-23 23:25:36
124
原创 如何封装一个加载更多组件
它自己不保存数据，一旦它可见，就去通知父组件加载数据，数据回来填充，它又被挤下来看不见了1.创建组件全局注册并在业务组件中使用<template> <div class="xtx-infinite-loading" ref="container"> <!-- 正在加载数据时显示 --> <div class="loading" v-if="isLoading"> <span class="img">.
2021-07-22 23:39:34
140
原创 如何解决路由组件的缓存问题
路由地址变化了： http://localhost:8080/#/category/1013001 http://localhost:8080/#/category/1013321但内容并没有更新，因为这两个地址匹配的都是同一个组件，这个组件在路由切换的过程中，组件并没有重新销毁(重新生成)解决方案：1）给router-view路由...
2021-07-21 18:57:22
250
原创 头部组件-渲染数据（在Vuex中发axios）
1.首先封装接口// 定义首页需要的接口函数import request from '@/utils/request'/** * 获取首页头部分类数据 */export const findHeadCategory = () => { return request('/home/category/head', 'get')}2.定义vuex中的category模块 state () { return { // 分类信息集合 list:
2021-07-16 22:55:57
162
原创 手写事件总线 EventBus
什么是事件总线在 Vue 2.x 中，有两种能在任意组件中传参的方式：状态管理Vuex和事件总线EventBus// 实例化事件总线const events = new EventBus();// 监听自定义事件events.on('my-event', (value) => { console.log(value);});// 触发事件events.emit('my-event', 'helloworld');发布订阅模式发布订阅模式是一种广泛应用于异步编...
2021-07-16 22:19:15
138
原创 一个关于Vuex持久化的插件
1.安装Vuex的持久化插件npm i vuex-persistedstate2.准备Vuex模块创建一个名叫modules文件夹，根据项目的具体要求，创建模块并在index.js中导用示例：3.使用Vuex-Persistedstate插件来进行持久化（固定格式）a）.在index.js中导入import createPersistedstate from 'vuex-persistedstate'b）.增加配置项: plugins[ ]plugins...
2021-07-16 21:43:16
60
原创 Vue3.0的用法
vue3可以在template中有多个根标签main.js中的Vue的实例化发生了一些变化vue2：//new Vue({el: '#app',render: h => h(App)}) vue3: //createApp(App).mount('#app')1.一些不用的语法1.在3.0版本中移除了$on方法eventBusVue.prototype.$eventBus=new Vue();this.$on('事件名'， 回调)2.移除过滤器选项 （插值表达式里{{m..
2021-07-13 23:48:25
1286
原创 关于Vue插槽？
1.插槽可分为三种：默认插槽 具名插槽 作用域插槽2.默认插槽：通过 slot 标签, 可以接收到写在组件标签内的内容使用方法：a）.子组件内用<slot></slot>占位<template> <div> <h1>今天天气状况：</h1> <slot></slot> </div></template><
2021-07-06 23:44:37
122
2
原创 自定义指令-按钮级控制
场景：员工A和员工B都可以访问同一个页面，但是员工A的等级高，有***功能，员工B就没有此功能实现思路用户登陆成功后，用户可以访问的按钮级别权限保存在points数组中。而这个数据我们是保存在vuex中的，所以，就可以在项目的任意地方来中访问。 如果某个按钮上的标识在points出现，则可以显示出来 注册格式：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时inserted会自动执行
2021-07-04 22:54:05
281
2
原创 数组转树状结构
调用tranListToTreeData()// 把数组转成树export function tranListToTreeData(list) { const arr = [] const map = {} list.forEach(item => { // 给list循环，补充一个children属性给一个空数组 item.children = [] map[item.id] = item }) // 2.对list做 第二轮循环： 根据 pid 找 .
2021-07-04 22:12:55
54
原创 excel导入功能
目录安装必要的插件添加组件定义组件并将它注册成全局组件使用 后端提供一个excel模板文件 用户填写这个excel模板文件 上传这个文件，实现批量导入功能 安装必要的插件npm install xlsx -S添加组件将用到的组件复制到我们自己的项目 src/components/UploadExcel下<template> <div> <!-- :on-success="handleAvatarSu.
2021-07-02 22:01:13
142
原创 递归计算案例
利用递归函数求斐波那契数列(兔子序列)function tuzi ( n ) { if ( n == 1 || n == 2 ) { return 1; } return tuzi(n-1) + tuzi(n-2); } console.log( tuzi(6) ); // return tuzi(5) + tuzi(4); // return tuzi(4) + tuzi(3) + tuzi(4);
2021-07-01 23:09:47
73
原创 vue-element-中excel的导出方案
1）. vue-element-admin中有现成的功能参考，项目资源里提供了现成的插件包，复制到项目的src目录下：2）.给导出按钮添加事件// 回调函数内容如下hExport() { import('@/vendor/Export2Excel').then(excel => { // excel表示导入的模块对象 console.log(excel) excel.export_json_to_excel({ //export_json_to_excel导出去.
2021-06-30 23:17:09
260
2
原创 如何将后端返回来的数据格式化
目录业务背景：处理过程：a）.我们将项目中所有的映射关系都可以提前在文件中定义好b）.开始做格式化，这里用到了作用域插槽来处理c）.把用到的常量导入到当前文件d）.数据转换e）.在methods中定义方法业务背景：后端返回的数据是直接以数字形式返回，我们需要把这些数据做相应的格式化，处理成我们想要的文字后端给到我们前端的是一个数字类型的状态码(1, 2)，每一个状态码对应有中文说明。我们通过枚举的方式转换成文字即可处理过程：a）.我们将项目...
2021-06-29 16:36:44
1194
原创 如何使用公共组件-Vue.use
它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)例如之前学过的：Vue.use(VueRouter) Vue.use(Vuex) Vue.use(vant)注册：a).在min.js中导入import 组件对象 from '公共组件.vue' Vue.component('组件名', 组件对象)****组件名一定是个字符串****...
2021-06-28 20:46:03
260
原创 环境变量！
前端项目启动时，占用端口号9528，是在哪里定义的呢在vue.config.jsprocess.env.port实际上是一个nodejs服务下的环境变量
2021-06-26 22:13:09
49
原创 .sync .native：修饰符
.sync作用实现父子组件数据之间的双向绑定，与v-model类似。类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。
2021-06-25 21:06:25
103
原创 静态和动态路由表
00.在一项目中，不同用户（权限不同）登陆进来页面时，会显示出不同的页面功能我们可以将项目中的路由在路由表中拆分，分成静态路由表和动态路由表两种。1.静态路由和动态路由表：静态路由表：每一位用户都可以访问到的页面，不用做权限控制。 动态路由表：需要做权限控制，登录用户的权限不同，所能见到的页面内容也不一样。2.嵌套路由（普通做法）1.进入路由配置文件（router/index.js)，进行补充：// 动态路由表，用来存放项目中不同的用户可以访问不同的功能 export .
2021-06-22 19:45:06
910
原创 vue-cli解决跨域
1.什么是跨域： 它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 同源策略是一种约定,它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到攻击。浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域「protocol（协议）、domain（域名）、port（端口）三者一致。」报错信息：请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的跨域请求出现错误的条件： 浏览器同源...
2021-06-21 21:27:42
402
2
原创 webSocket
我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。...
2021-06-17 22:11:01
74
2
原创 vue路由守卫
/ 全局前置守卫，所有的路由在执行之前都会经过该守卫。router.beforeEach((to, from, next) => { /* 导航守卫 处理逻辑 */})// router是 new VueRouter() 得到的路由对象// 参数是一个箭头函数to:是一个对象，保存着将要访问的路由相关参数。to.path:被访问的路由地址信息from:是一个对象，保存着离开的那个路由的相关参数。from.path: 从哪来的路由地址next:是一个回调函数，对后续的执行...
2021-06-15 23:27:13
217
原创 响应拦截器作用：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；...
2021-06-15 22:58:07
3013
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人