- 博客(51)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 缕一缕koa中间件
vscode 调试用的运行环境是了Launch Program！！！其他环境就错误，虽然还不懂这块，先挖坑吧，累死我了。。。┭┮﹏┭┮使用中间件首先使用npm init -y 初始化项目，根目录下新建app.js入口文件，再npm install koaapp.use()里面一次装载中间件，设计中间件功能是在后台打印字符。通过打印出来的字符可以观察到请求再中间件内部的运动轨迹，就和洋葱模型一样。中间件是回调函数，该函数传入两个参数 ctx, nextctx 对象是对原生node.js接口
2021-10-26 16:40:22
202
1
原创 同一个浏览器内看同一个页面，本地启动的和部署在服务器上的样式不同
vue +elementui，引用了menu组件，本地运行的时候是好的，但是部署上去后样式出现差错，首先排除兼容模式的问题。检查线上线下的样式文件是否一致，能看到有不一样的样式。因为我有修改原生组件的样式，所以去源代码查看也没有找出问题，后来百度到这篇文章，谢谢~Element-ui升级2.0后初体验小结：本地启动和服务器启动排除项目部署本身的不同问题之外会出现资源加载顺序的问题。部署在本地的时候资源加载速度比较快基本不会出现资源加载先后顺序的问题，但是部署在服务器上面就需要网络请求所有的资源，这
2021-10-13 17:15:24
1304
原创 解决在页面刷新前利用sessionStorage存储vuex的数据中的小bug
问题描述：我想实现点击这两个按钮（pub和tools)没有选中的按钮设置display:none,（这样下面的白色三角形就隐藏了）我为了页面刷新后vuex数据能不被初始化，所以这样做的在app.vue中问题描述：预期效果应该是在当前页面刷新后三角形还是之前被选中的状态，但是实际是： 原因分析：active的值都存进去了，那为什么样式修改没有成功呢。搞了半天发现，本来state中和我添加按钮的方法赋值给state的数据就是字串类型，然而赋值给sessionStorage还转化了
2021-10-13 16:59:04
122
原创 前端面经汇总
1. 看代码说结果题目1：const objA = { a: 1 };const objB = { b: 2 };const arrA = [objA];const arrB = [objB];const v1 = arrA.concat(arrB);const v2 = arrA.concat(...arrB);const v3 = arrA.push(arrB);const v4 = arrA.push(...arrB);console.log(v1); //[{a: 1},{b:
2021-09-29 11:21:40
104
原创 es6 class以及构造函数(constructor)
es5中，生成实例对象通过构造函数来生成：function Fun(a,b) { this.a = a; this.b = b;}Fun.prototype.showA = function () { console.log(this.a)}var fun = new Fun(1,2);fun.showA();//1es6则引用了class的概念，使得更接近java、c++等语言，更加直观。如：class Fun { constructor(a,b){
2021-09-27 16:22:34
1034
原创 在vue页面监听中如何修改子元素的样式
项目原先代码：需要实现的是导航栏在页面下滑到一定位置的时候，对其样式进行修改父组件system.vue页面<template> <div> <div id="sysytem"> <!-- 导航栏 --> <head-tabbar ref ="tabbar" class="tabbar"></head-tabbar> <!-- 轮播图 --> <el-carousel class="lunb
2021-09-23 16:27:07
730
原创 初步认识MongoDB
一、关系型和非关系型数据库关系型数据库表就是关系或者说表与表之间存在关系所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束 唯一的 主键 默认值 非空非关系型数据库非关系型数据库非常的灵活有的非关系型数据库就是key-value对儿 但但是 MongDB 是长得最像关系型数据库的非关系型数据库 数据库 -》 数据库 数据表 -》 集合（数组） 表记录 -》文档对象MongDB 不需
2021-09-22 21:02:20
75
原创 package.json和package-lock.json
当你安装包的时候，会自动创建或者是更新 package-lock.json 这个文件npm5 以后的版本安装包不需要加 --save 参数，它会自动保存依赖信息package-lock.json 这个文件会保存 node_modules 中所有包的信息（版本、下载地址）这样的话将项目的 node_modules 删除后重新 npm install 的速度就可以提升从文件来看，有一个 lock 称之为锁这个 lock 是用来锁定版本的如果项目依赖了 1.1.1. 版本如...
2021-09-22 20:30:43
62
原创 nodejs学习-----封装异步API，学习回调函数
回调函数定义回调函数是指 使用者自己定义一个函数，实现这个函数的程序内容，然后把这个函数（入口地址）作为参数传入别人（或系统）的函数中，由别人（或系统）的函数在运行时来调用的函数。函数是你实现的，但由别人（或系统）的函数在运行时通过参数传递的方式调用，这就是所谓的回调函数。异步回调----读取文件var fs = require("fs");fs.readFile('input.txt', function (err, data) { if (err) return console.erro
2021-09-22 16:04:45
280
原创 顶部导航栏如何可以透出来后面的图片
1、父盒子用position: relative;2、子盒子1、2用position: absolute;3、导航栏z-index值比图片的属性值要大，才可以叠在图片上面4、导航栏background: rgba(0, 0, 0, .5);设置透明度
2021-09-17 11:05:01
128
原创 点击链接的跳转方式
在新窗口打开连接方式 超链接<a href="www.123.com" title="123" target="_blank">123</a> 等效于js代码 window.open(“www.123.com"); 在当前窗口打开新连接 超链接<a href="www.123.comt" title="123">123</a> 等效于js代码 window.location.href="www.123.com"; //在同当
2021-09-17 10:05:56
3912
原创 eleui,:preview-src-list用base64图像格式预览大图
<div v-if="item.picture!= null"> <div v-for="picitem in item.pics" style="float: left;border:5px solid white;"> <el-image style="width: 100px; height: 100px" :src="'data:image/png;base64,'+picitem" :preview-src-list="dataURItoBlob(it
2021-09-14 16:53:52
1148
原创 解决Html在不同分辨率下显示效果不一样的问题
问题描述：让导航栏重叠在轮播图上面，并且导航栏要是透明的状态，功能实现了，但是出现拖到分屏宽度就变了。代码：开始用的宽度设置都是px单位，后来改成百分比就可以自适应了。 原因分析：百度看到HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题通过设置百分比长宽，对于不同分辨率的显示器上会自动适应大小。...
2021-09-14 10:20:08
5025
原创 利用localstorage解决vuex页面刷新数据丢失问题
一、场景描述：根据用户的登录状态来实现不同的路由跳转，这个功能之前有写到用三目运算来实现。那么这个用户状态又怎么做呢，怎么在登录期间刷新页面而不丢失用户信息？首先想到Vuex作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。二、解决思路：将用户信息更新至vuex中并保存到local storage，这样页面刷新或者其他页面都可以读取到用户信息。具
2021-09-07 20:25:53
2967
原创 Vuex！
vue在做大型项目时，会用到多状态管理，vuex允许我们将store分割成多个模块，便于管理模块。从仿写ele项目学习下store多模块的一些基本认识。1、main.js文件引入2、./store/index.js，index.js相当于vuex的主目录，文件都在index.js文件引入state文件定义所有的状态3、mutation-types.js用于定义action和mutation变量，便于统一管理4、mutation.js① 只能通过 mutation 变更
2021-09-07 10:23:01
42
原创 根据三目运算实现路由跳转
项目场景：需要根据Vuex中store的userInfo信息（初始状态为空）来判断路由取向。userInfo: null时去登录注册页： path: ‘/login’,userInfo 非空时去个人信息页：path: ‘/profile’, <router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' > <svg class="user_avatar" v-if="
2021-09-06 21:41:19
220
原创 学习fetch！
导读：fetch:这个方法是ES2017中新增的特性，这个特性出来后给人一种传统ajax已死的感觉，其实它的作用是替代浏览器原生的XMLHttpRequest异步请求，我们在日常的开发中，基本不会自己去写XMLHttpRequest，主要是太复杂了，都是使用已经封装好了的各种插件，常用的有jquery。npm包管理工具也提供了axios,request等模块。而有了fetch后我们就可以在不用这些插件的情况下快速简单的实现异步请求了。async/await 能使得我们在编写异步代码时像同步一样的方
2021-09-06 14:13:54
113
原创 Token
1、 网页开发模式中的两种验证方式：1.1 MTV、MVC模式1.2 MVVM JWT前后端分离前后端分离以及token的使用前后端分离项目中有一特征就是：在刷新页面时需要下载很多东西，因为是单页应用（实际都在一个网页中，期间没有刷新其他网页，处于整个JavaScript生命周期之中，即使有路由跳转也只是dom节点的变化，不像MTV模式下是整个路由都在变化，整个Html都在变化。2.session,cookie,sessionStorage,localStorage,token的区别：看看
2021-09-06 10:45:06
43
原创 Promise入门
文章目录1. 预备知识1.1 实例对象与函数对象1.2 两种类型的回调函数1. 同步回调2. 异步回调1.3 JS中的异常error处理1. 错误的类型2. 错误处理（捕获与抛出）3. 错误对象2. Promise的理解和使用2.1 Promise是什么1. 理解Promise2. Promise 的状态3. Promise对象的值4. Promise 的基本流程5. Promise 的基本使用2.2 为什么要用 Promise1.指定回调函数的方式更加灵活2.支持链式调用，可以解决回调地狱问题2.3 如何
2021-08-25 20:31:28
166
原创 函数内this的指向
函数内部 this 指向函数内 this 的指向这些 this 的指向，是当我们调用函数的时候确定的。 调用方式的不同决定了this 的指向不同一般指向我们的调用者. // 函数的不同调用方式决定了this 的指向不同 // 1. 普通函数 this 指向window function fn() { console.log('普通函数的this' + this); } fn();//实际上是win
2021-08-23 21:03:29
163
原创 箭头函数以及箭头函数的this关键字
//箭头函数是用来简化函数定义语法的 const fn = () => { console.log(123) } fn(); // 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略 function sum (n1, n2){ return n1 + n2; } const sum = (n1, n2) => n1 + n2; // 在箭头函数中 如果形参只有一
2021-08-23 21:03:08
214
原创 iview Page组件调用@on-page-size-change方法会先调用@on-change
问题：切换页码时，如果页码不是在第一页时，页面展示错误。这时候更改每页条数，应该要将页码更改到第一页开始用的代码如下： pIndexChange(i) { //页码改变的回调 this.tableData = [] this.page.index = i; this.getCoaDetec()//接口调用填充表格，数据展示 }, pSize
2021-08-11 10:29:52
573
原创 vuex使用常量替代 Mutation 事件类型
1、知识储备：菜狗在学习大神的饿了么项目中，看到这个代码就不懂了，而且在看了很久vuex文档还不懂，果然是菜狗。。。。Mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：const store = new Vuex.St
2021-08-03 21:07:33
505
转载 vue keep-alive以及activated,deactivated生命周期的用法
vue keep-alive以及activated,deactivated生命周期的用法Vue / keep-alive
2021-07-29 19:12:48
179
原创 Vue中的的通信方式
props/$emit 适用父子组件通信ref与parent/children适用父子组件通信EventBus(事件总线)适用于父子、隔代、兄弟组件通信attrs/listeners 适用于隔代组件通信rovide/inject 适用于隔代组件通信vuex 适用于父子、隔代、兄弟组件通信slot插槽方式...
2021-07-26 19:41:44
58
原创 回溯算法的理解
回溯函数通常指递归函数，而递归函数又是一种纯暴力搜索。通常用来解决组合（不强调顺序）、切割、子集、排列（强调顺序）、棋盘等问题一般格式：void backtracking(参数){ if( 终止条件){ 收集结果；//一般在叶子节点处收集结果 return；//return 空 推出函数 } for(集合函数){ 处理节点； 递归函数； 回溯操作； }例子：40.组合ii给定
2021-07-19 18:06:28
56
原创 a标签跳转的时候会拼接项目地址
希望实现：点击图片跳转至原文链接原先代码如下：<a :href=" item.url"><img :src="'data:image/png;base64,'+ item.picture" alt=""></a>接收后端传送的url,但是在控制台看到a标签跳转的时候会拼接项目地址解决：要在href属性里面添加http:协议，如果要跳转至百度就href=“http://www.baidu.com”<a :href="'http://'+ item.
2021-07-15 14:39:17
1481
原创 在vue中修改element-ui的原生样式
例子:修改走马灯默认容器高度1、看到网上说，在style标签内不要加scoped，并且使用！important<style > .el-carousel__container { height: 600px !important; }</style>但是我这样做，我其他修改的样式没办法展示了2、使用深度选择器修改element-ui的原生样式可以使用 /deep/ 前缀 通过深度选择器 来“穿透”这个样式/deep/ .el-carousel__co
2021-07-14 17:19:00
237
原创 内部DIV设定position: absolute该如何居中
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><style>.className1{width: 300px;height: 300px;margin:0 auto;background-color: red;position: relative;} .className2{position: absolute
2021-07-14 16:32:34
368
原创 CSS 中的position定位:absolute和relative
relative:生成相对定位的元素，相对于其正常位置进行定位absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位注:(所有的块属性的position默认为static)如果要使绝对定位absolute生效，必须指定left、right、top和bottom属性中的至少一个...
2021-07-14 16:05:10
99
原创 Vue的slot-scope和scope.row
实现效果：根据后端传来的mg_state的bool型数据来渲染开关状态，当为true时，开关打开；为false时关闭解决：状态开关属于单元格，也属于一行，如果我们拿到这一行的数据，就可以.mg_state具体值，则可以按需渲染效果。所以想到用作用域插槽来渲染状态这一列 <el-table :data="userlist" border stripe> <el-table-column type="index"></el-table-column> <
2021-04-28 20:21:54
3386
原创 slot插槽/slot-scope作用域及v-slot使用
匿名插槽子组件：父组件调用这个匿名组件时，传递过来的内容可以替换掉，来展示相应的内容。具名插槽子组件：对比匿名，在slot多了一个name属性作用域插槽：绑定了一个具体的数据源，可以在父组件使用作用域插槽的数据：data="data"...
2021-04-28 16:57:18
736
原创 element Message配置
//导入弹框提示组件import { Button, Form, FormItem, Input, Message } from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)// 配置方式和前面不同//使用全局挂载，把Message弹框组件挂载在vue的原型对象上，$message是自定义属性，可以自己修改，合法即可//后面的Message是个组件，这样每个组件都可以用this来访问$mess
2021-04-26 21:01:46
820
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人