前端
香菜xc
这个作者很懒,什么都没留下…
展开
-
请求拦截、响应拦截和请求处理
1、创建axios实例const http = axios.create({ // baseURL: 'http://localhost:8085/', timeout: 1000 * 30, // 请求超时 withCredentials: true, // true:在跨域请求时,会携带用户凭证 false:在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie headers: { 'Content-Type': 'application/j原创 2022-04-16 22:05:39 · 4113 阅读 · 0 评论 -
动态获取菜单和路由及路由守卫
1、组件注册// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有生产环境使用懒加载// const _import = require('./import-' + process.env.NODE_ENV)// 生产环境的为 file => () => import('@/views/' + file + '.vue')const _import = file => require('@/views/' + file + '.vue'.原创 2022-04-16 21:31:27 · 2286 阅读 · 3 评论 -
jszip打包多层文件夹
let zip = new JSZip(); const img = zip.folder(FileName); const meshes = img.folder('meshes') meshes.file(`mesh.` + fileType, url, { base64: true }); zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 9 } ...原创 2022-04-14 13:57:05 · 2861 阅读 · 4 评论 -
盒子水平垂直居中
1、flex布局 给其父盒子加上以下样式 display: flex; justify-content: center; align-items: center;2、绝对定位 给该盒子加上以下样式,如果是相对父盒子居中,给父盒子添加相对定位样式 position: absolute; left: 50%; top: 50%; transform: translate(-50%,...原创 2021-12-26 19:59:05 · 162 阅读 · 0 评论 -
响应式布局
响应式布局是指同一页面在不同屏幕尺寸下有不同的布局优点:面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题缺点:仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大,效率低下 代码累赘,会出现隐藏无用的元素,加载时间加长 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况...原创 2021-12-26 19:49:02 · 149 阅读 · 0 评论 -
new操作符干了啥
创建一个新的空对象 让这个空对象的__proto__指向其构造函数的原型prototype 将创建的对象和this进行绑定,如果构造函数没有显式的返回值,隐式返回this对象原创 2021-12-20 12:07:51 · 158 阅读 · 0 评论 -
watch和computed
watch:一个数据影响多个数据,当监听的数据发生变化时都会执行回调进行后续操作。需要深度监听对象里的属性需要打开deep:truecomputed:多个数据影响一个数据,是计算属性,依赖其他属性,有缓存,只有它以来的属性发生变化才会重新计算在数据变化时执行异步或者开销大的操作时,使用watch...原创 2021-12-19 19:20:36 · 78 阅读 · 0 评论 -
Vue内置指令
v-once 只渲染一次,包括该元素或组件下的所有子节点,首次渲染后,不会再因数据变化重新渲染,视为静态内容 v-cloak 该指令保持在元素上直到关联实例结束编译--解决初始化慢导致页面闪动的最佳实践 v-bind 绑定属性,动态更新html元素上的属性 v-on 监听dom事件 v-html 相当于innerHTML v-text 相当于innerText v-model value和input的语法糖 v-if/v-原创 2021-12-19 18:55:31 · 72 阅读 · 0 评论 -
组件的动态切换和组件缓存
组件动态切换<template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comName = 'UserInfo'">个人信息填写</button> <p>下main显示注册组件-动态切换</p> <div style="border: 1px solid原创 2021-12-19 08:38:48 · 304 阅读 · 0 评论 -
Vue2---provide和inject
父组件有一个provide选项提供数据,后代组件有一个inject选项来使用这些数据父组件 // 给所有的后代组件提供数据 // 注意:不要滥用 provide: function () { return { articleId: this.articleId } },后代组件 inject: { articleId: { type: [Number, String, Object], default: null原创 2021-11-22 10:28:48 · 395 阅读 · 0 评论 -
生命周期--钩子函数
<template> <div> <p>学习生命周期 - 看控制台打印</p> <p id="myP">{{ msg }}</p> <ul id="myUL"> <li v-for="(val, index) in arr" :key="index">{{ val }}</li> </ul> <button @click="a.原创 2021-11-18 20:09:22 · 465 阅读 · 0 评论 -
移动端适配
将单位转换为rem一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)1、安装npm i amfe-flexible2、main.js导入import 'amfe-flexible' 二、使用 postcss-pxtorem 将 px 转为 rem 1、安装npm install postcss-pxtorem -D 2、然后在项目...原创 2021-11-18 20:01:46 · 494 阅读 · 0 评论 -
sync修饰符
子组件<template> <div> <div>{{ count }}</div> <button @click="addFn">+1</button> </div></template><script>export default { props: { count: { type: Number } }, methods原创 2021-11-13 18:50:14 · 998 阅读 · 0 评论 -
VueX--states、getters、mutations、actions
App.vue<template> <div> <h1>一、state</h1> <div>(原始形式)state的count数据:{{ $store.state.count }}</div> <div>(计算属性)state的count数据:{{ count }}</div> <div>(辅助函数)state的count数据:{{ author }}<原创 2021-11-10 08:14:49 · 327 阅读 · 0 评论 -
vue组件&组件通信
一、组件的使用 1、全局-注册使用在入口文件main.js,new Vue之上注册import Pannel from 'vue组件路径'Vue.component('组件名', 组件对象) 组件名当标签使用:<组件名></组件名> 2、局部-注册使用<script>// 局部引入组件import Pannel from 'vue组件路径'...原创 2021-10-31 20:20:13 · 79 阅读 · 0 评论 -
Vue基础API
一、创建手脚架项目 1、安装全局包yarn global add @vue/cli 2、创建项目vue create 项目名 3、进入项目文件夹,启动服务器cd 项目名yarn serve二、插值表达式...原创 2021-10-29 16:20:26 · 113 阅读 · 0 评论 -
bind()用法
bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定为bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用。1、每隔一秒在控制台输出1-5for (var i = 1; i <= 5; i++) { setTimeout(console.log.bind(null, i), i * 1000);}...原创 2021-10-25 18:39:34 · 1082 阅读 · 0 评论 -
定义一个add()函数,得到以下效果
add(1)(2)(3).finish(); // 6 add(1, 2, 3)(4).finish(); // 10 add(1)(2)(3)(4, 5).finish(); // 15 add(2, 6)(1).finish(); // 9 var adding = add(1, 2)(3) setTim...原创 2021-10-20 21:06:05 · 1225 阅读 · 0 评论 -
错题笔记(前端)
1、创建对象的方式- 使用class关键字创建对象- 使用字面量创建对象- 使用构造函数创建对象- 使用Object构造函数创建对象2、类生成实例,是通过`new 类名(构造函数形参)`的方式来创建3、面向对象和面向过程面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。它的优点易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、...原创 2021-10-18 20:27:14 · 65 阅读 · 0 评论 -
js的隐式转换
在+ - * / 运算符里面:+拼接 字符串的话, 数字类型会被默认转换为字符串;- * / 这些符号的 字符串和数字拼接的话 就会把字符串隐式转换为数字进行计算;所以只有第一个是 返回的字符串类型, 其余的三种运算都是返回的数字类型;...原创 2021-10-17 20:00:33 · 84 阅读 · 0 评论 -
预解析--变量提升和函数提升
变量提升只提升声明,不提升赋值,函数提升只提升声明,不调用函数原创 2021-10-17 19:37:55 · 50 阅读 · 0 评论 -
Nodejs
一、文件系统模块1、读取文件内容fs.readFile(读取文件路径,编码格式(可选),callback)//err错误信息 dataStr获取到的数据fs.readFile('./test/2.txt', 'utf8', (err, dataStr) => { if (err) { return console.log('读取失败' + err); } console.log(dataStr);})2、写入...原创 2021-10-16 21:36:28 · 715 阅读 · 0 评论 -
es6---新增语法&内置对象拓展
一、新增语法解构赋值ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。 数组解构 let [a, b, c] = [1, 2, 3]; console.log(a); //1 console.log(b); //2 console.log(c); //3解构不成功,变量值为undefined let [x] = []; console.log(x); //und原创 2021-09-24 11:45:09 · 100 阅读 · 0 评论 -
let、const、var的区别
一、变量提升使用var声明的变量存在变量提升现象,const、let不存在变量提升 a=3 console.log(a); //3 var a; b = 4; console.log(b); let b; c=5; console.log(c); const c;二、作用域及特性var l...原创 2021-09-23 20:42:37 · 87 阅读 · 0 评论 -
对象方法--Object.keys,Object.defineProperty
var obj = { id: 1, pname: '小米', price: 3999 };一、遍历对象 var arr = Object.keys(obj); //遍历对象 console.log(arr); //返回一个有属性名组成的数组["id", "pname", "price"]二、修改对象属性1)value:设置属性的值,默认为undefin...原创 2021-09-20 16:42:08 · 200 阅读 · 0 评论 -
改变this指向---call(),apply(),bind()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-09-20 15:36:56 · 71 阅读 · 0 评论 -
构造函数与原型---原型链
function Star(name, age) { this.name = name; this.age = age; this.sing = function () { console.log(this.name + '会唱歌'); } } var ht = new Star('河图', 3); //每一个构...原创 2021-09-19 20:54:27 · 277 阅读 · 0 评论 -
原型继承及添加属性
function Animal(age) { this.age = age; this.sleep = function () { console.log('我会睡觉'); } } //将固有的方法直接定义在原型对象上,所有对象的实例都可以共享该方法 Animal.prototype.eat = function () { ...原创 2021-09-19 20:52:05 · 161 阅读 · 0 评论 -
localStorage本地存储
var local = [ { name: '张三', sex: '男', age: 22 } ] console.log(typeof (local)); //object console.log(typeof (JSON.stringify(local))); //string c...原创 2021-09-13 19:33:33 · 61 阅读 · 0 评论 -
pop(),push(),shift(),unshift()
var arr = [1, 4, 5, 2, 1, 88]; arr.push(23); //在数组最后添加一个元素 console.log(arr); //输出[1, 4, 5, 2, 1, 88, 23] arr.pop(); //删除出最后一个元素,若pop()内有参数,不影响结果 console.log(arr); //输出[1, 4, 5, 2, 1, 88] arr....原创 2021-09-13 19:16:05 · 51 阅读 · 0 评论 -
jQuery
一、使用 下载jquery.min.js 文件,下载地址https://jquery.com/download/ 引入该js文件<script src="./jquery.min.js"></script>二、入口函数//常用入口函数$(function () {})$(document).ready(function(){})三、js对象和jQuery对象之间的相互转换 //...原创 2021-09-08 20:16:02 · 4970 阅读 · 0 评论 -
Web API---仿淘宝固定右侧侧边栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-08-29 21:49:00 · 165 阅读 · 0 评论 -
Web API---仿京东放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-08-29 21:12:33 · 117 阅读 · 0 评论 -
Web API---模态框拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-08-29 20:27:24 · 122 阅读 · 0 评论 -
JS-判断一个数是否为质数
// 输出1~100之间的质数 // 方法一 console.log(2); console.log(3); console.log(5); console.log(7); for (i = 10; i <= 100; i++) { if (i % 2 != 0 && i % 3 != 0 && i % 5 != 0 &&am...原创 2021-08-16 09:19:34 · 222 阅读 · 0 评论 -
斐波纳契数列
//有个人想知道一年之内一对兔子能繁殖多少对。于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子,而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象,那么,一对兔子一年内(12个月)能繁殖成多少对?兔子数列规律为:1,1,2,3,5,8,13,21 //在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=1,F(1)=1, F(n)=F(n-1)+F(n-2)(n>2,n∈N*) var num = ...原创 2021-08-16 09:00:45 · 93 阅读 · 0 评论 -
JS--输出三角形
var str = ''; for (i = 1; i <= 5; i++) { for (j = 1; j <= i; j++) { str += '*' + '\t'; } str += '\n'; } console.log(str); var str2 = ''; for (...原创 2021-08-16 08:58:39 · 2491 阅读 · 0 评论 -
JS---数字和字符串之间的类型转换
一、数字型转化为字符串 1、变量.toString() 2、String(变量) 3、拼接字符串:变量 + '' ''内容为空二、字符串转化为数字型1、parseInt()和parseFloat() (1)转换为整数 parseInt(变量) 向下取整(2)转换为浮点数 parseFloat(变量) ...原创 2021-08-11 10:20:32 · 833 阅读 · 0 评论 -
Web API---获取元素
1、使用getElementById('id名')方法获取带有id的元素对象<div id="u">用户名</div><script> var t= document.getElementById('u'); console.log(t); console.log(typeof t); //输出t的类型</script>2、使用getElementsByTagName('标签名')方法原创 2021-08-08 22:01:39 · 304 阅读 · 0 评论 -
Bootstrap---微金所
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...原创 2021-08-08 14:23:16 · 170 阅读 · 0 评论