首页
友链
导航
影视
壁纸
统计
留言板
Search
1
el-upload自定义触发按钮及触发上传前判断
896 阅读
2
vue配置二级目录以及nginx多网站部署
710 阅读
3
el-cascader选择任意一级搭配懒加载使用,单选框radio不会触发懒加载
593 阅读
4
joe主题自定义导航页面
582 阅读
5
js获取昨天今天明天日期
497 阅读
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
登录
Search
标签搜索
web
vue
node项目实战
js
javascript
typecho
css
vuex
router
nginx
git
element
joe
utils
leaflet
dateFormat
map
date
axios
reg
辰漪
累计撰写
66
篇文章
累计收到
122
条评论
首页
栏目
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
页面
友链
导航
影视
壁纸
统计
留言板
搜索到
66
篇与
辰漪
的结果
2021-12-20
window10如何将C盘用户中文名改为英文名
1. 首先将计算器管理用户组中的Administrator账号打开2. 注销当前用户3. 登录时选择Administrator账号登录4. 打开c盘将‘C:\Users\中文名’这个文件夹中文改成英文5. 修改注册表win + r 打开运行面板输入regedit打开注册表搜索‘计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList’找到最长的,一般是1001,修改ProfileImagePath数据值,改为英文名路径关闭就行了,注销当前Administrator用户然后登录你自己的,打开c盘,此时用户名就改成了英文不用Administrator了,就给他重新禁用掉就ok
2021年12月20日
454 阅读
0 评论
3 点赞
2021-12-17
vue配置二级目录以及nginx多网站部署
1. 在vue.config.js配置publicPath二级目录module.exports = { publicPath: '/adm/', // 二级目录名称 }2. 在router中配置baseconst router = new VueRouter({ mode: 'history', // base: process.env.BASE_URL, base: '/adm/', // 二级目录 routes })3. nginx多网站配置 根据location部署// 在nginx.conf文件中配置 server { listen 80; server_name localhost; location / { // 前台网站 访问 127.0.0.1 root dist; // 根目录下直接放了一个dist前端代码 index index.html index.htm; try_files $uri $uri/ /index.html; // 刷新空白 } location /adm { // 后台网站 访问 127.0.0.1/adm alias adm/dist; // 根目录下adm文件夹下有一个dist前端代码 index index.html index.htm; try_files $uri $uri/ /index.html; } }注意:nginx配置二级目录要使用alias不能使用root前台测试地址: https://cyblog.wrz521.top后台测试地址:https://cyblog.wrz521.top/adm
2021年12月17日
710 阅读
0 评论
3 点赞
2021-12-17
vue路由传参的几种方式
路由跳转的两种方式1. 声明式导航使用router-link的to属性进行路由跳转 to的值是要跳转到的那个路由// 1.1 to后直接跟路由 <router-link to="/home">to home</router-link> // 1.2 to后跟一个配置对象path属性是要跳转到的那个路由 <router-link :to="{ path: '/home' }">to home</router-link> // 1.3 to后跟一个配置对象,使用命名路由的name进行跳转 <router-link :to="{ name: 'homeIndex' }">to home</router-link>查询字符串形式 路由传参 to的值是一个配置对象 以查询字符串形式携带 url?id=123// 2.1 以 url?id=123&name=zs的形式携带 <router-link :to="{ path: '/home?id=123' }">to home?id=123</router-link> // 2.2 以query属性进行传参 <router-link :to="{ path: '/home', query: { id: 123 } }">to home 以query携带</router-link> // 2.3 以params进行传参 需要命名路由name <router-link :to="{ name: 'userIndex', params: { id: 123 } }">to user 以params携带</router-link>2. 编程式导航使用this.$router进行跳转 $router可以访问到路由的实例this.$router.push('/home') this.$router.push('/home?id=123') // 携带query参数 this.$router.push({ path: '/home', query: { id: 123 } }) // 携带query参数 this.$router.push({ name: 'homeIndex', params: { id: 123 } }) // 携带params参数 需要和命名路由搭配使用$router实例的跳转方法push() // 跳转到指定的路由,向history历史中添加记录,点击返回,返回到来之前的路由。 go(n) // 向前前进 n 或 后退 n个路由 n可为负数 replace() // 跳转到指定的路由,但是不会在history中添加记录,点击返回,会跳转到上上一个路由。 back() // 后退 forward() // 前进
2021年12月17日
143 阅读
0 评论
2 点赞
2021-12-17
js如何实现复制功能
复制功能实现方法先创建一个 textarea 文本域dom元素将要复制的文本放到文本域中将dom元素添加到body中调用select()将文本域的内容全选使用document.execCommand('copy')方法进行复制dom.remove() 将文本域自身移除封装成函数/* * @description js复制功能 * @param text {String} 要复制的文本 * @param fn {Function} 复制成功的回调函数 参数为复制成功的text */ function copy(text, fn) { const input = document.createElement('textarea') // 创建文本域 input.value = text // 将要复制的文本放到文本域中 document.body.appendChild(input) // 添加到body中 input.select() // 全选 document.execCommand('copy') // 复制 input.remove() // 删除自身 fn && fn(text) // 复制成功的回调... }
2021年12月17日
91 阅读
0 评论
3 点赞
2021-12-13
数组常用的方法函数(整理)
1. Array.push() 在原数组末尾追加一个或多个元素,返回该数组的长度let arr = [ 1 , 2 , 3 ] arr.push( 4 , 5 ) // 返回值为数组的长度 5 console.log(arr) // [1, 2, 3, 4, 5]2. Array.pop() 删除数组的最后一个元素,并返回该元素let arr = [ 1 , 2 , 3 , 4 ] arr.pop() // 返回值为删除的元素 4 console.log(arr) // [1, 2, 3]3. Array.unshift() 在原数组前边添加一个或多个元素,返回该数组的长度let arr = [ 1 , 2 , 3 ] arr.unshift( 4 , 5 ) // 返回值为数组的长度 5 console.log(arr) // [4, 5, 1, 2, 3]4. Array.shift() 删除数组的第一个元素,并返回该元素let arr = [ 4 , 5 , 1 , 2 , 3 ] arr.shift() // 返回值为删除的元素 4 console.log(arr) // [5, 1, 2, 3]5. Array.splice() 从原数组某个位置删除/添加元素,返回删除的元素数组let arr = [ 4 , 5 , 1 , 2 , 3 ] arr.splice( 0 , 1 ) // 从 0 的位置,删除一个元素,返回值为删除的元素数组 [4] console.log(arr) // [5, 1, 2, 3] arr.splice( 0 , 1 , 11 ) // 从 0 的位置,删除一个元素,并添加一个 11 元素 返回值为删除的元素数组 [5] console.log(arr) // [11, 1, 2, 3]6. Array.slice() 返回选定的元素数组,原数组不会改变let arr = ['a','b','c','d'] arr.slice( 1 , 3 ) // 从索引为 1 的位置,取到 3 的位置,但不包含 3 ,返回值为 新数组 ['b', 'c'] console.log(arr) // ['a', 'b', 'c', 'd'] 原数组不会改变7. Array.join() 使用某个拼接符,将数组转化为字符串,返回该字符串,原数组不会改变let arr = [ 1 , 2 , 3 , 4 , 5 ] arr.join('-') // 返回拼接后的字符串 '1-2-3-4-5' console.log(arr) // [1, 2, 3, 4, 5] 原数组不会改变8. Array.forEach() 遍历数组,为每一个元素调用一次函数let arr = ['a','b','c'] arr.forEach((item, index, arr) => { console.log(item) // 当前遍历元素项 console.log(index) // 当前遍历元素的索引 console.log(arr) // 原数组 })9. Array.map() 遍历数组,为每一个元素调用一次函数,根据函数return返回的结果组成一个新的数组let arr = ['a','b','c'] const newArr = arr.map((item, index, arr) => { console.log(item, index, arr) // 元素项,索引,当前数组 return item += 2 }) console.log(arr) // 原数组不会改变 console.log(newArr) // 返回一个处理过的新数组 ['a2', 'b2', 'c2']10. Array.filter() 遍历数组,根据筛选出的符合条件的元素,组成一个新的数组let arr = [ 1 , 2 , 3 , 4 ] const newArr = arr.filter((item,index,arr) => { return item > 2 // 返回元素项大于 2 的元素,组成一个新的数组 }) console.log(arr) // [1,2,3,4] 不会改变元素组 console.log(newArr) // [3, 4]11. Array.find() 遍历数组,返回第一个通过测试的元素项let arr = [ 1 , 2 , 3 , 2 , 4 ] const num = arr.find((item, index) => { console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束 return item >= 2 // 返回item >= 2的第一个元素项,找到之后结束遍历,不会继续 }) console.log(arr) // [1,2,3,2,4] 不会改变元素组 console.log(num) // 212. Array.findIndex() 遍历数组,返回第一个通过测试的元素的索引值let arr = [ 1 , 2 , 3 , 2 , 4 ] const num = arr.findIndex((item, index) => { console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束 return item >= 2 // 返回item >= 2的第一个元素项的索引值,找到之后结束遍历,不会继续 }) console.log(arr) // [1,2,3,2,4] 不会改变元素组 console.log(num) // 索引值为 113. Array.indexOf() 数组中是否存在某个元素,存在返回该索引,不存在返回-1,出现多次,也只会返回第一次出现时的索引let arr = ['a','b','c','d', 'c', 'c'] arr.indexOf('c') // 返回值为 索引 2 arr.indexOf('ff') // 返回值为 -1 ff不存在数组中14. Array.reduce() 遍历数组,将函数的返回值,存储到累加器中let arr = [ 1 , 2 , 3 , 4 , 5 ] const total = arr.reduce((total, item) => { // 每次遍历将total + item,下一次的遍历时,total为上一次返回的结果 console.log(total) // 1 3 6 10 return total + item }) console.log(total) // 1515. Array.from() 将具有length属性或者可迭代的对象转化为数组Array.from('abcdef') // 返回值['a', 'b', 'c', 'd', 'e', 'f'] Array.from(new Map([['b', 1 ], ['a', 2 ]])) Array.from(new Set([ 1 , 2 , 3 ]))
2021年12月13日
74 阅读
0 评论
5 点赞
2021-12-01
js获取昨天今天明天日期
/* * @params date 日期 * @params type 日期 prev/current/next 昨天/今天/明天 * @params fmt 日期拼接符 */ function getDays(date, type, fmt) { let currentDate = new Date(date) let y = currentDate.getFullYear() let m = currentDate.getMonth() + 1 let d = currentDate.getDate() function dateFormat(date, fmt) { let y = new Date(date).getFullYear() let m = new Date(date).getMonth() + 1 let d = new Date(date).getDate() return `${y}${fmt}${m}${fmt}${d}` } switch (type) { case "prev": if (d - 1 < 1) { if (m - 1 < 1) { y = y - 1 m = 12 } else { m = m - 1 } d = new Date(y, m, 0).getDate() } else { d = d - 1 } break case "current": break case "next": if (d + 1 > new Date(y, m, 0).getDate()) { if (m + 1 > 12) { y = y + 1 m = 1 d = 1 } else { m = m + 1 d = 1 } } else { d = d + 1 } break; default: break; } return dateFormat(new Date(`${y}-${m}-${d}`), fmt) } console.log(getDays(new Date('2021-1-1'), "prev", "-"));
2021年12月01日
497 阅读
10 评论
8 点赞
2021-11-29
常用的正则表达式(持续更新中)
1. 手机号匹配:let reg = /^1(3|4|5|7|8)[0-9]{9}$/ let reg = /^1[0-9]{10}$/ let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/2. 邮箱匹配:let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/3. 身份证号匹配:// 15位、18位数字,最后一位是校验位,可能为数字或字符X let reg = /^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$/4. 登录账号匹配:let reg = /^[a-zA-Z0-9_]{5,13}$/5. 登录密码匹配:// 以字母开头,长度在6~18之间,只能包含字母、数字和下划线 let reg = /^[a-zA-Z]\w{5,17}$/ // 必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间 let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/6. QQ号码匹配:let reg = /[1-9][0-9]{4,}/7. 是否是数字:let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/8. 是否是http链接let reg = /(http|ftp|https)://([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/
2021年11月29日
94 阅读
0 评论
2 点赞
2021-11-29
如何封装axios,并模块化
1. 安装axiosnpm install axios -s2. 导入axios// utils/request.js import axios from 'axios' export const baseURL = process.env.NODE_ENV === 'production' ? 'http://wrz521.top:8080/api/' : 'http://127.0.0.1:8080/api/' // 实例化axios const request = axios.create({ baseURL, // 基准路径 timeout: 10000 }) // 添加请求拦截器 request.interceptors.request.use(function (config) { // 在发送请求之前做些什么 if (config.url !== '/my/login') { config.headers.Authorization = getToken() } return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 request.interceptors.response.use(function (response) { // 对响应数据做点什么 const { data } = response if (data.status === 401) { removeToken() router.push('/login') } return data }, function (error) { // 对响应错误做点什么 return Promise.reject(error) }) export default request3. 使用request封装api函数// api/user.js import request from '@/utils/request.js' export const login = function (username, password) { return request({ url: '/api/login', method: 'get', params: { username, password } }) }4. 在页面中调用api函数发送请求import { login } from '@/api/user.js' export default { data () { return { username: 'admin', password: '123456789' } }, mounted () { this.onLogin() }, methods: { async onLogin () { const res = await login(this.username, this.password) console.log(res, 'login result') } } }
2021年11月29日
308 阅读
3 评论
6 点赞
2021-11-24
map数据结构
<!-- index-menu -->一、简介 map数据结构类似于键值对的集合,和Object区别是键可以存任何数据类型。二、Map实例的方法和属性Map实例的方法:1. Map.prototype.set(key, value) 添加 2. Map.prototype.get(key) 获取 3. Map.prototype.has(key) 判断 4. Map.prototype.delete(key) 删除 5. Map.prototype.clear() 清空 6. Map.prototype.keys() 获取所有的键组成的数组 [key, key1, key2]形式 7. Map.prototype.values() 获取所有的值组成的数组 [value, value1, value2]形式 8. Map.prototype.entries() 获取所有的成员组成的数组 [ [key, value], [key2, value2] ]形式 9. Map.prototype.forEach() 遍历方法类似于数组的forEach循环Map的属性:1. size 获取map长度三、map增删改查// html <div class="box">box</div> const boxEl = document.querySelector('.box') // dom1. set 存储数据 返回值 整个map数据结构,如果键存在,会更新,否则添加新的键map.set('a', 1) map.set(boxEl, 2) map.set(undefined, 3) map.set(222, '数字') map.set(null, 'null')2. get 获取数据 返回值 对应键的值,没有返回undefinedconsole.log(map.get('a')); // 1 console.log(map.get(boxEl)); // 2 console.log(map.get(undefined)); // 3 console.log(map.get(222)); // 数字 console.log(map.get(5)); // undefined3. has 判断map数据结构中有没有该数据 返回值 true / falseconsole.log(map.has('a')); // true console.log(map.has(boxEl)); // true console.log(map.has(undefined)); // true console.log(map.has(222)); // true console.log(map.has(5)); // false4. delete 删除map数据结构中的键 返回值 true / falseconsole.log(map.delete('a')); // true console.log(map.delete('b')); // false5. clear 清空map中所有的数据 无返回值map.clear() console.log(map); // Map(0) {}四、map遍历1. Map.prototype.keys() 返回键名集合,通过for of遍历数组for(let key of map.keys()) { console.log(key); // 键 }2. Map.prototype.values() 返回键值的集合,通过for of遍历数组for(let value of map.values()) { console.log(value); // 值 }3. Map.prototype.entries() 返回所有的成员,通过for of遍历数组for(let [key, value] of map.entries()) { // 数组的解构赋值 console.log(key, value); // 键 值 }4. Map.prototype.forEach() 直接遍历map结构,类似于数组的forEach方法遍历map.forEach((value, key, map) => { console.log(key, 1); // 键 console.log(value); // 值 console.log(map); // 原map结构 })五、数组对象和map之间的转换1. map转数组 使用展开符(...)[...map] // [ [key, value], [key, value], [key, value]]2. 数组转map 使用new Map()传入一个包含键和值的数组集合let arr = [ ['a', 1], ['b', 2] ] new Map(arr) // Map(2) {'a' => 1, 'b' => 2}3. map转对象 当map的键名是字符串,可以完全转换,如果非字符串,会先转化为字符串let map = new Map().set('a', 1).set('b', 2) let obj = {} for(let [key, value] of map.entries()) { // 数组的解构赋值 console.log(key, value); // 键 值 obj[key] = value } console.log(obj)// {a: 1, b: 2}4. 对象转map 可以通过对象的Object.entries()方法,该方法返回 键值对组成的数组集合[ [key, value], [key, value], [key, value]]let obj = {"a":1, "b":2}; let map = new Map(Object.entries(obj)); // 实际上是遍历对象,通过set给map设置值 for (let k in obj) { map.set(k, obj[k]) }
2021年11月24日
127 阅读
0 评论
5 点赞
2021-11-24
js如何获取本周上周下周的日期
/* *@params date 时间对象/时间字符串/时间戳等等 *@params type {String} 值:prev/current/next 上周/本周/下周 *@params fmt {String} 日期连接符 */ function getWeekList(date, type, fmt) { let arr = [] // 格式化日期 const dateFormat = (date, fmt) => { console.log(date, "datefoemat") let y = date.getFullYear() // 年 console.log(y) let m = date.getMonth() + 1 // 月 let d = date.getDate() // 日 return `${y}${fmt}${m}${fmt}${d}` } console.log(dateFormat(new Date("2021-12-28"), "```")) let currentDate = new Date(date) let w = currentDate.getDay() // 当前星期 0-6 let y = currentDate.getFullYear() // 当前年 let m = currentDate.getMonth() + 1 // 当前月 let d = currentDate.getDate() // 当前日期 if (w === 0) w = 7 // 先算出周一是几号 根据type类型计算 let Monday = 0 // 获取周一的年份 月份 日期 const getMonday = (zf) => { if (zf <= 0) { // 日期小于0 且当前星期不是0 if (m - 1 <= 0) { // 月份<=0 年份-1 y = y - 1 // 年份 -1 m = 12 // 月份 = 12 let n = d - (w - 1) // 负的星期 Monday = new Date(y, m, 0).getDate() + n console.log(y, m, Monday) } else { m = m - 1 // 月份 -1 let n = d - (w - 1) // 负的星期 Monday = new Date(y, m, 0).getDate() + n console.log(y, m, Monday) } } else if (zf > 0) { // 日期大于0 Monday = d - (w - 1) console.log(y, m, Monday) } } // 本周一 switch (type) { case "current": // 本周 break case "prev": // 上一周 if (d - 7 < 0) { if (m - 1 < 1) { m = 12 y = y - 1 d = new Date(y, m, 0).getDate() + (d - 7) } else { m = m - 1 d = new Date(y, m, 0).getDate() + (d - 7) } } else { d = d - 7 } break case "next": // 下一周 if (d + 7 > new Date(y, m, 0).getDate()) { if (m + 1 > 12) { m = 1 y = y + 1 d = d + 7 - new Date(y - 1, 12, 0).getDate() // d + 7 大于 12月的天数多少天 就是几号 } else { m = m + 1 d = d + 7 - new Date(y, m - 1, 0).getDate() } } else { d = d + 7 } break } getMonday(d - (w - 1)) // 获取周一日期 // 获取日期 const getDate = (mon, i) => { if (mon + i > new Date(y, m, 0).getDate()) { // 大于当月天数 Monday = -i + 1 mon = 1 if (m + 1 > 12) { y += 1 m = 1 } else { m += 1 } console.log(m, i, "大于当月天数") return dateFormat(new Date(`${y}-${m}-${mon}`), fmt) } console.log(y, m, mon + i) console.log(dateFormat(new Date(y, m, mon + i, 0), fmt)) return dateFormat(new Date(`${y}-${m}-${mon + i}`), fmt) } // currentDate = new Date(y, m, Monday, 0) console.log(currentDate, "currentDate") // 往后推7天 for (let i = 0; i < 7; i++) { arr[i] = getDate(Monday, i) } return arr } console.log(getWeekList(new Date(), "prev", "-"))
2021年11月24日
71 阅读
2 评论
3 点赞
1
...
5
6
7