laoli360的博客

原创 获取url内的参数数据

例如我们的页面 是含有参数的 类似于 www.baidu.com?userdata=百度用户我们想获得 url内的userdata的数据值 那么就需要 使用下方这个正则判断方式来进行计算window.location.href这个可以获得 window对象内的location的href 也就是我们当前页面的地址然后通过语法正则判断问号 ? 后面的数据 // 获取url的数据参数 let url =window.location.href // /...

原创 非脚手架vue兼容IE和360兼容模式方法

哎 今天麻了 用非脚手架的vue和el-ui来写页面 结果发现 不兼容ie浏览器这里我通过百度 确认了几种方法但是都没有实现最后实现的就是Releases · babel/babel-standalone · GitHub通过这个链接 下载 babel 来进行设置第一步先下载下载min版本的 轻量然后 第二步<script src="./js/babel.min.js"></script>引入后第三步在你要写JavaScri...

原创 知识点----为数组对象每一个对象添加新的键值对

常用于 赋予判断条件等等操作Arrobject = Arrobject.map(function(o) { o.isActive = false; return o; })效果原图不包含 isActive :false 这个数据我们加载上方语句后嗯 又学到了一个以前忘记的小知识...

原创 SQL基础语法及技巧(1)

第二天记录的笔记内容 我写这篇文章 主要为了加深自己的记忆更新表 RENAME TABLE 旧表名 TO 新表名;更新字段名 ALTER TABLE 表名 CHANG 旧字段名 新字段名 字段类型;更新字段类型\NULL值\默认值 ALTER TABLE 表名 MODIFY 字段 字段类型;删除字段默认值 ALTER TABLE 表名 ALTER COLUMN 字段名 DROP DEFAUIT;设置主键 ALTER TABLE 表名 ADD PRIMARY KEY (主键字

原创 SQL基础语法及技巧

因为自己是个前端 工作中遇到需要操作数据库的操作 所以开始学习SQL了 在这里做一些笔记 方便自己查阅观看 如有不足之处 请批评指正SELECT 数据库拉取数据UPDATE 更新数据库中的数据DELETE 从数据库中删除数据IN SERT INTO 向数据库中插入新数据CREATE DATABASE 创建数据库ALTER DATABASE 修改数据库CREATE TABLE 创建表ALTER TABLE 修改表DROP TA...

原创 多维数组对象去重

这是我在工作中遇到的 通过我个人不屑的努力。。。。。百度 从而解决多维数组对象去重 let len = objarray.length; let tempJson = { }; let res = []; for(let i = 0;i < len;i++){ //取出每一个对象 tempJson[JSON.stringify...

原创 vue三种不同方式实现页面跳转及传参方式

vue三种不同方式实现页面跳转Vue：router-lin 及query传参方式 1 2 3 <router-link to="/">[跳转到主页]</router-link> <router-link to="/login">[登录]</router-link> <router-link to="/logout">[登出]</router-link> ..

原创 DOM和BOM的区别

BOMbom 是 browser object model 的缩写 意义为 浏览器对象模型bom 没有相关标准bom 最根本对象是 windowDOMdom 是 document object model 的缩写 意义为 文档对象模型DOM 是w3c 的标准DOM 最根本的对象是 document 实际上是 window.document我们日常操作的 元素标签 都是DOM对象...

原创 整屏滚动插件使用fullpage

Fullpage.js 全屏滚动插件值得注意的是 这个插件使用的前提是 要用jquery这是 一个js插件 可以实现 鼠标滚轮 和键盘方向键切换整屏效果这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /><script src="/fullpage/jquery.

原创 Animate.css动画库的使用操作

我们在实际操作的demo网页 尤其是需要动画效果 比如弹出 隐藏等等的效果时候 需要敲写很多代码这里我给大家推荐一下现在网上比较常用的动画库https://www.dowebok.com/demo/2014/98/上面链接是网址使用的时候 需要给对应的元素加上 animate动画库特定的类名例如下面我们link导入好你下载的css包<link rel="stylesheet" href="animate.min.css">然后在你需要用的地方加上对应...

原创 常见报错解析(持续更新)

前端程序员工作过程中肯定会面对各种报错,有能解决的,有冲突的,有看不懂的,太多太多了这里简单列举两个报错情况 后续会持续更新不能解析模块 比如自定义模块和三方模块自定义的模块和三方模块都有可能出现错误 拼写错误 2. 路径错误 出现这种错误 无非就是 拼写路径出现了错误 比如 from 和form的区别 调用时候 回报错大家好好对比下目录下的地址和请求位置 等等的模块导入导出问题按需导入导出 默认导入导出导入导出必须是对应的这里可能出现的问题...

原创 vuex持续化操作及vuex的自动化缓存从localStorage切换到存入cookie

大家在实际工作中 可能会遇到操作token 用户数据等等的 存取到 本地localStorage中或者 cookie中的情况但是为了优化读取速度 又要使用vuex 来进行加速处理 但是对于很多人来说 难免会觉得有点脱裤子放屁的感觉用户登录后，访问其他页面需要携带token，vuex是储存在内存里面的，而内存的特点就是快，将token存在vuex中可以提高获取token速度。因为localStorage的读取是一次磁盘读取，读取速度远低于vuex的内存读取，为了避免重复读取localStorage..

原创 slot-scoped 自我笔记

<template> <el-table :data="tableData" style="width: 100%"> //---:data="用于存放请求数据回来的数组" <el-table-column label="索引值" width="400"> <template slot-scope="scope"> //--- 这里取到当前单元格 <span>{{ scope.$in.

原创 扁平数组转换为树状结构

本文代码只是一个例子. const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"03", name: "小美", pid:"01", job: "UIleader"}, {id:"04", name: "老马", pid:"01", job: "技术leader"}, {id:"05", name: "老

原创 Vscode-ESLint插件不工作

ESLint插件不工作在正常工作的时候 如果碰到ESLint插件不工作 按ctrl+s 他不保存格式化了 vscode根目录下必须直接是有.eslintrc.js文件 ESLint插件是否安装, 配置文件写的是否正确? 如果右下角有这个图表点击后选择AnyWhere, 会变成V对号, 如果没有略过此步 自动缩进情况1.与其他的美化代码插件冲突了禁用/卸载如下插件 (或者类似功能的插件)2.关闭vsc...

原创 项目开发时各个位置工作内容

1. 需求产出 客户、产品经理、竞品(对手的产品)、收集市场反馈 2. 项目立项 从市场来看，会提出很多需求，但是需求很多是不合理的， 就需要将需求进行筛选，筛选出用户真的需要的、符合用户的 ----------------- 将筛选出来的需求进行开发 立项(确认做这个需...

原创 前端配置环境

在正式入职或者在日常重装系统以后，如果公司给配置了新的电脑。都需要对开发环境重新搭建，搭建环境的过程是非常痛苦的，因为不知道哪些东西需要是必须安装，必须配置的，也会造成一些插件或者包的遗漏安装，这也成为很多新手程序员的烦恼。下面给提供一份开发环境的基础配置清单，这份清单中囊括了笔者在面试新电脑时基础的配置，你可以在这份清单中继续添加日常开发中安装的一些插件、工具等，这样在以后面对新电脑，就可以按照清单进行配置。Chrome 配置首先,身为一名前端程序员,陪伴我们最多的浏览器就是谷歌浏览器了

原创 前端入职第一天该做什么?

嘿嘿 很多学习的同志们 上岸了 拿到自己心仪的offer 准备入职 如果是第一次入职 难免会有很多的好奇和担忧,为了避免各位第一天麻爪,让别人感觉自己很low 这里我会描述入职第一天需要做什么,这里结合本人和网络上其他工作了数年前端经验的前端攻城狮的经验 对入职第一天需要做的事情进行总结:数据来源于网络 如有侵权 请第一时间私信我,我会及时删除.入职欢迎仪式 签订入职协议 新人入职培训 配置开发环境 开通相关账号 熟悉公司规范 熟悉项目代码入职欢迎仪式新..

原创 项目小技巧----封装统一管理浏览器本地缓存

场景:比如我们在做一个项目的时候 一开始使用的localStorage 方法存入数据 但是后面 又要修改然后又要修改来回切换很费劲这里教给大家一个统一封装管理 的方法\比如我这里保存用户的token值 存到本地localStorage我们将本地存储方式 统一保存在一个文件里,这里我统一放到一个storage.js的文件内这样 在我们需要使用的地方 可以引入使用了比如刚才的localStorage的存储token值得地方首先我们引入这个getSt...

原创 项目小技巧------注册组件抽离统一管理

正常工作的时候 我们的Vue脚手架 导入了很多组件,例如我们这里的vant组件,如果全放到main.js内 就不太好管理和操作.这里我就教给大家如何将一堆注册组件抽离统一管理首先我们准备一个js文件 用来装vant组件注册需要剪切的有如下剪切完毕后 只需要在main.js 引入个js文件即可实现 vant组件抽离 统一管理就是这么简单,感觉很容易吧?...

原创 实现created(初始化)状态axios获取数据

这里我们利用 axios请求 get方式获取 后端地址的数据然后通过前端网页控制台看res打印出来什么我们知晓了 他的具体位置 然后在data里面保存一个空对象用来存放这个书籍数据this.Bookobj=res.data.data然后让bookobj 接收这些数据然后实现页面数据显示这里 用了 v-for 是防止以后 书籍数据是多个 没法全部铺展 而设置的这里的obj.author 就是 res.data.data.author 依次...

原创 拖拽上传图片并转换成base64格式显示

本文讲解怎么实现 将图片拖拽实现上传 且以base64格式显示出来首先css准备一个div 要有大小和背景颜色 让我们知道该拖拽到什么地方 div { width: 200px; height: 200px; background-color: #8df; }然后html 里面放一个div盒子其实事物本质也是创建一个img //dragover： 判断是否有东西拖拽上来。//d...

原创 get请求图片出现403 防盗链解决方式 no-referrer

http请求头中有一个referrer字段，用来表示发起http请求的源地址信息服务器端在拿到这个referrer值后判断请求是否来自本站 若不是则返回403，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403 <!-- 解决图片403防盗链问题 --><meta name="referrer" content="no-referrer" />在前端...

原创 token的封装及调用

实际开发中,一个项目其实就是一个个组件来组合出来一个项目比如登录信息的token保存 下面代码 可以复制复用的这里给大家展示保存到浏览器 可以用来实现判断用户登录情况// 操作认证信息token的工具函数const KEY = '****-****-**-****'// 获取tokenexport const getToken = () => { return localStorage.getItem(KEY)}// 设置tokenexport const set..

原创 Vant实现下拉新增数据

效果图如下(图片较大,请稍后)效果就是实现下拉更新数据 然后 当没有数据的时候 让他提示一个'没有更多了'的字符串首先我们打开vant的线上文档 找到list大家在看我笔记的时候 先阅读两遍上面的基础用法然后我给大家简单演示下如何使用这里我是用van-list包含需要刷新的文章列表 data () { return { articleList: [], loading: false, // 底部加载状态 finished..

原创 Vant移动端组件简单使用及讲解

之前我讲解了简单的el-ui的使用方法那么 移动端有什么组件库吗? 有很多 Vant就是比较常用的一种这里我会简单的简绍下使用的方法首先我们下载Vant组件包yarn add vant然后看文档,根据文档的指引,书写配置文档Vant - Mobile UI Components built on Vue如果上面打不开用这个地址试试: Vant - Mobile UI Components built on Vue按照文档我们下载对应需要的插件方便我...

原创 Vuex的简单图解 个人用...你可能看不懂

原创 Vuex基础知识 actions及getters的使用

actions定义-异步修改actions 是一种异步修改的功能这里我们以 定时器来模拟他的语法如下const store = new Vuex.Store({ actions: { 函数名 (store, 可选值) { // 异步代码, 把结果commit给mutations给state赋值 } }})我们用一下就知道他的意思了const store = new Vuex.Store({ // ...省略state和mutations此...

原创 ElementUI的简单使用方法讲解

这里我们以引入button按钮为例 其实很多表单 或者 时间 等等的组件 引入方式都是一样的举一反三吧.首先 yarn add element-ui -S 让我们来安装这个包main.js 全局注册 element-ui这个组件// 完整引入，main.js写入以下代码import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)这样 我们就可..

原创 element-ui的表单验证及自定义验证规则

element-ui是一个组件库 里面有很多项大家都会用到 其中的表单项验证时比较常用的比如我们一个登录界面有以下的要求 手机号: 必填, 11位移动手机号 验证码: 必填, 6位数字 协议: 必须勾选 <el-form :model="form" :rules="rulesArr"> <el-form-item prop="mobile"> <el-input v-model="form.mobile" placeh

原创 Vuex基础知识-state及mutation

Vuexvuex 状态管理模式 ---- 全局统一集中式管理全局变量.使用场景 跨组件通信eventBus 也是可以做到的跨组件通信的 但是不如vuex 方便.像图片中 如果是父子结构的组件调用内容 可以用父子组件传值(之前写过文章 不再赘述)而如果是 侄子和叔叔传值呢?那么就用到vuex了...

原创 Vue懒加载

component: Login// 改成这个写法component: () => import('@/views/Login.vue')它可以让 用户加载到什么组件 才会获取对应组件 方便效率降低流量数据路由懒加载 - 查看文档: 路由懒加载 | Vue Router

原创 个人vscode配置项

{ "terminal.integrated.confirmOnExit": true, "workbench.editor.tabCloseButton": "right", // 以下为编辑器配置 "editor.fontSize": 16, // 文字大小 "editor.tabSize": 2, // 使用 tab 缩紧的时候几个空格的位置 "editor.dragAndDrop": false, // 控制编辑器是否允许拖动来移动内容 "editor.detectIn.

原创 HTTP请求错误 2xx 3xx 4xx 5xx

2xx （成功）表示成功处理了请求的状态代码。代码 说明200 （成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201 （已创建） 请求成功并且服务器创建了新的资源。202 （已接受） 服务器已接受请求，但尚未处理。203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。204 （无内容） 服务器成功处理了请求，但没有返回任何内容。205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。206 （部分内容） 服务器成功处理了部分 GET

原创 Vue组件内标签样式修改

//加入scoped以后webpack在打包时会给当前vue组件内所有标签和组件的跟标签会加上data-v属性,而//组件内的标签没有data-v属性//需求当你想要修改组件内标签样式时有问题了//style里选择器会额外被加上data-v属性选择器//而标签身上没有data-v属性所以选不中而想要修改span标签的颜色直接写的话 是不可以的而要解决这种情况 只需要在选择器前面加个/deep/即可//...

原创 自定义脚手架模板

脚手架是做vue项目时候的前备条件 而有些设置 每次都要来回重复着弄 是很麻烦的在这里教大家自定义脚手架模板vue create 起名字首先给项目起个名字 然后 运行然后选择第三项 Manually select features(手动选择功能)选择你需要的功能这里分别代表着选择vue版本 2.或者3.选择路由模式选择CSS预处理(推荐用less)选择eslint和语法风格规则选择esl...

原创 Vue命令====＞v-model的本质

首先 准备一个 Add的组件<template> <div> <p>子组件库存: {{ value }}</p> <button @click="addFn">增加+1</button> </div></template><script>export default { props: { value: { type: Number,

原创 Vue 自定义指令 自动获取焦点

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxxhtml+css的复用的主要形式是组件你需要对普通 DOM 元素进A行底层操作，这时候就会用到自定义指令App.vue内准备内容<template> <div> <!-- <input type="text" v-gfocus> --> <input type="text" v-focus>

原创 Vue插槽

正常我们调用组件的时候 肯定不希望一个组件写死了 或者进入这个组件修改各个内容这对于组件的复用性 不太好在这里我给大家讲一下 Vue的插槽用法组件 -----插槽以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式之前的折叠面板案例的组件我们拿过来Pannel.vue 内容如下<template> <div> <!-- 按钮标题 --> <div class...

原创 $nextTick的使用方式

点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值Move.vue<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> <p>2. 获取组件对象 - 可调用组件内一切</p> <Demo ref="de"></D.