今汝安-CSDN博客

原创将字符串转成RMB格式

核心思路字符串拼接计算串未拼接部分的长度// 定义一个字符串let str = '12345'function fn(str) { // 参数可传数字与字符 str = str.toString() // 定义一个空字符串用来拼接结果 var result = '' var len = str.length for (let i = 1; i <= len; i++) { // 循环拼接结果 result += str[i - 1] .

2021-10-12 23:02:33 210

原创时间日期格式化（xxx之前）

relativeTime (val) { const t = new Date(val) const diff = Date.now() - t.getTime() const year = Math.floor(diff / (1000 * 3600 * 24 * 365)) if (year) { return `${year}年前` } const month = Math.floor(diff / (1000

2021-10-02 20:00:13 208

原创如何在 Vue 项目中以插件的形式批量注册组件

步骤将需要注册的 vue文件统一放置在一个文件夹下（文中以 components文件夹为例）, 并在此文件中创建一个 index.js 文件用以实现批量注册组件功能;// 文件夹示例:components | |---------- index.js |---------- a.vue |---------- b.vue |---------- c.vue批量导入需要使用一个函数 require.contextconst importFn = require

2021-09-17 08:31:57 338

原创 JS 截取 URL 地址中对应的参数

需求给定一个携带数据的 url 地址, 如:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e将其中的数据转换为对象格式, 如:{a: '1', b: '2', c: '', d: 'xxx', e: undefined}方法思路:通过 indexOf 寻找 ? 的下标截取 url 所携带的数据;通过 split、substr、substring 等字符串API 取出所需数据;代码如下:

2021-09-15 16:12:02 2818

原创 JS 数组冒泡排序

思路:依次对数组中相邻的两项进行大小比较;如果前一项比后一项大 , 则调换这两项的位置;（假设要求是进行升序排序【实际要求如果是降序排序, 比较两项谁更小即可】）如此则会得到数组中最大的值并通过调换位置被放到了数组的最后;再进行循环, 找到数组中第二大的值, 以此类推, 直至循环结束;代码如下:// 需要进行排序的数组var arr = [23, 45, 18, 37, 92, 13, 24]// 依次循环数组for (let i = 0; i.

2021-09-15 13:00:10 93

原创 vuex-persistedstate（Vue 的数据持久化插件）

项目中常会有 vuex 数据持久化的需求, 除了手动将数据保存至 localstorage 或 cookies … 中, 也可以通过插件来解决使用步骤通过 npm 安装npm i vuex-persistedstate在项目的 src/store/index.js 中引入import createPersistedstate from 'vuex-persistedstate'在 store 实例中进行配置export default createStore({ mo.

2021-09-15 10:57:20 280

原创基于 Vue3 封装轮播图组件

一、封装组件思路:通过 fade 类名控制图片的显隐;通过定义的响应式变量 index 控制当前显示的图片;<template> <div class="carousel" @mouseenter="stopFN" @mouseleave="continueFN"> <ul class="carousel-body">  <li v-for="(item, i) in sli

2021-09-14 14:32:25 487

原创 JS 随机数组

方法1: 利用中间变量重新赋值let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]arr.forEach((item, index) => { // 取随机数作为随机数组下标 const randomIndex = parseInt(Math.random() * arr.length) // 定义中间变量保存随机下标对应的值 let x = arr[randomIndex] // 将循环内当前项赋值给数组对应随机下标的值 arr[randomI

2021-09-14 08:31:07 1121

原创 Vue中基于axios的请求通用模块封装基本思路

// 通用接口调用文件import request from 'axios'// 引入 vueximport store from '@/store'// 引入 vue-routerimport router from '@/router'// 定义基地址export const baseURL = ''// 创建一个独立的实例对象const axios = request.create({ baseURL: baseURL})// 请求拦截器axios.intercept

2021-09-11 21:13:17 141

原创 js （连字符）字符串转驼峰

代码如下:let name = 'set-token'const strToHump = str => { const arr = str.split('-') const head = arr.shift() const uppercaseArr = arr.map(str => (str = str.substr(0, 1).toUpperCase() + str.substr(1))) const newStr = head + uppercaseArr.join(''

2021-09-10 21:54:54 163

原创数组去重

const newArr = [] // 方法1: includes // reArr.forEach(item => (!newArr.includes(item) ? newArr.push(item) : '已存在')) // 方法2: indexof // reArr.forEach(i => (newArr.indexOf(i) === -1 ? newArr.push(i) : '已存在')) console.log(newArr)...

2021-09-10 21:06:42 42

原创 CSS 盒子水平垂直居中

首先定义父子级盒子<style> .box:hover { background-color: #ccc; } .father { width: 600px; height: 900px; border: 5px solid #000; } .box { width: 300px; height: 300px; border: 1px solid #000; }</style><div..

2021-09-09 14:24:00 45

原创 CSS 清除浮动

为什么要清除浮动？浮动的元素撑不开父盒子，影响父元素与其同级元素；影响与浮动元素同级的非浮动元素；在视觉上，浮动元素会覆盖在非浮动元素之上（即脱离标准流）；如与浮动元素同级的第一个元素是非浮动的，则会影响页面的显示结构；如何清除浮动？在浮动元素后面添加一个有 {clear: both;} 属性的 div标签;给浮动元素的容器添加 overflow: hidden; 样式;给浮动元素的容器的 class类添加伪元素 .clearFix:after {content: '..

2021-09-09 13:37:45 42

原创 vue-quill-editor自动获取焦点问题解决办法

问题:在 vue 项目中使用 vue-quill-editor 时, 总会发生富文本自动获取焦点的情况, 有时可能会导致进入富文本所在页面时, 页面不在最顶端的尴尬状况…原因:vue-quill-editor 富文本插件在我们发起 ajax 请求成功并且有数据回填（或富文本内容改变）的操作后就会自动获取焦点;解决办法:由此可知, 我们只需在 vue-quill-editor 富文本插件发起 ajax 请求成功并且有数据回填的操作后失去焦点即可, 代码如下:async editSh.

2021-09-07 14:27:22 3846

原创简单模拟分页功能的实现

简单模拟分页功能的实现话不多说, 直接代码走起… // btnCount: 最多能看到几个分页按钮 // total: 信息总条数 // size: 每页几条信息 // page: 当前第几页 function f(total, size, page, btnCount = 5) { // 能看到的页码集合 let arr = [] // 根据总条数和每页几条得出总页数 const pages = total / size // 生成总页数

2021-08-20 08:37:05 191

原创 GET 请求与 POST 请求的区别以及有关GET 请求传参长度的误区

GET 请求与 POST 请求的区别数据传递GET参数通过 url 传递; 而 POST 将数据放在请求体 (request body) 中;GET请求在 url 中传递的参数有长度上的限制, 而 POST 请求没有 (有关传参长度误区详见下方说明) ;POST 相对于 GET 更安全，因为 POST请求的数据在地址栏上不可见, 而 GET请求参数直接暴露在 url 中，故不能用来传递敏感信息;本质区别GET 是用来从服务器上获得数据, 而 POST 是用来向服务器上传递

2021-08-16 16:04:21 508

原创 cookies、sessionStorage、localStorage 简易说明

cookie、sessionStorage、localStorage 简易说明cookiescookies 是在浏览器与服务器间来回传递的;cookies 数据始终在同源 http 请求中携带（无论需要与否） , 并且在所有同源窗口中共享;cookies 有路径概念, 可以以此进行限制 cookies 只属于某个路径下;cookies 数据有大小限制, 不能超过 4K , 因为每次 http 请求都会携带 cookies, 故 cookies 只适合保存很小的数据;cookies 数据

2021-08-11 09:19:58 536

原创 JS 数组常见 API 示例说明

JS 数组常见 API 示例说明静态方法Array.isArray(): 判断是否为数组Array.from(): 把伪数组转换为真数组注: 伪数组必须有length属性,否则无法转换为真数组,length为几,数组有几个值,如果length大于原数据个数,则多出部分为undefined实例方法concat: 链接数组成为新数组eg: let a1 = [1, 2, 3]; let a2 = ['a', 'b', 'c']; let a3 = [11, 12, 13];

2021-08-08 20:41:15 127

原创服务器返回状态码 400、401、403、304 的原因

服务器返回状态码 400、401、403、304 的原因状态码 400意为请求无效产生原因前端提交数据的字段名称和字段类型与后台的实体没有保持一致 ;例如: 前端提交到后台的数据应该是json 字符串类型，但是前端没有将对象JSON.stringify 转化成字符串.解决方法依据接口文档, 对照字段的名称，保持一致性.状态码 401产生原因当前请求需要用户验证.状态码 403产生原因服务器已经得到请求, 但是拒绝执行, 比如图片防盗链造成的 403.状态码 304产生原

2021-08-07 21:48:00 3196 1

原创 JS 宏任务与微任务、事件循环、任务队列之间的关系

JS 宏任务与微任务、事件循环、任务队列之间的关系因为JavaScript是单线程运行的, 也就是说在同一时刻, JavaScript只能执行一个任务, 其他任务只能等待上个任务执行完毕再依次执行, 由此循环往复, 便引出事件循环的概念。事件循环事件循环理解比较容易, 如上文所说, JavaScript引擎在 “等待任务”，"执行任务"和"进入休眠状态等待更多任务"这几个状态之间转换的循环便是事件循环。一般执行过程: 当有任务时, 从最先进入的任务开始执行, 如执行完没有其他任务，休眠直到出现任

2021-08-06 16:30:53 546

原创 Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别

Vue Router 嵌套路由中, 子路由path路径带 ‘/’ 与不带的区别示例代码:const routes = [ { path: '/layout', component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout/Layout.vue'), children: [ { path: 'home', component: () =>

2021-08-05 20:50:56 7308

原创 JS 数组转树状结构

JS 数组转树状结构需求: 将如下数组转成树状结构 // 需转化数组示例 data = [ { id: '01', lable: '项目经理', pid: '' }, { id: '02', lable: '产品leader', pid: '01' }, { id: '03', lable: 'UIleader', pid: '01' }, { id: '04', lable: '技术leader', pid: '01' }, { id: '05', lable: '

2021-08-05 20:00:22 5093

m0_59128154的博客