首页
壁纸
直播
留言
关于
友链
统计
Search
1
tampermonkey油猴和谷歌访问助手的安装---破解谷歌访问助手
13,642 阅读
2
安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)
3,211 阅读
3
编译asar文件与electron反编译
3,177 阅读
4
websocket封装带心跳和重连机制(vue3+ts+vite)
2,782 阅读
5
js一些小功能(持续更新)
2,442 阅读
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
登录
Search
标签搜索
Vue3
Vue
Axios
微信小程序
Javascript
Vuex
js
请求
request
前端
tampermonkey
Google
助手
脚本
小程序云开发
Bootstrap
壁纸
鼠标事件
跨域
css
大祥子i
累计撰写
55
篇文章
累计收到
128
条评论
首页
栏目
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
页面
壁纸
直播
留言
关于
友链
统计
搜索到
8
篇与
Vue
的结果
2021-09-15
Vue前端模拟生成验证码并且效验功能
遇到个登陆功能需要输入验证码,后端没接口,但是为了防止机器人恶意登陆还是要写个验证码效验的,活就跑到前端来了,利用随机数写的一个4位验证码。{mtitle title="js核心代码如下"/}//定义code用于存放验证码 var code = '' // 设置长度,这里看需求,我这里设置为4 var codeLength = 4 // 设置随机字符 // 这里可以写成字母,这样就可以随机生成字母验证码了 var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9) // 循环codeLength 我设置的4就是循环4次 for (var i = 0; i < codeLength; i++) { // 设置随机数范围,这设置为0 ~ 36 var index = Math.floor(Math.random() * 9) // 字符串拼接 将每次随机的字符 进行拼接 code += random[index] } // 将拼接好的字符串赋值给展示的code this.code = code 效验功能就不写了,就是获取用户输入的验证码,和生成的验证码做对比,对就OK不对就告诉用户:吊毛你输入的验证码有误!{mtitle title="这里CSS对样式改进"/}/* 让验证码变形,看起来更加像一点*/ letter-spacing: 15px; transform:skew(45deg); transform: scale(1.,0.5);
2021年09月15日
633 阅读
0 评论
0 点赞
2021-09-15
Vue实现登陆并使用Vuex保存用户信息
Vue实现登陆并使用Vuex保存用户信息功能,直接上代码吧,注释都写的清楚!{mtitle title="主要的main.js"/}// 设置路由跳转的登陆守卫 router.beforeEach((to, from, next) => { // 先读缓存模拟登陆 const user = sessionStorage.getItem('user') const nll = null // 注销登陆 if (to.name === 'Logout') { // 清空缓存 sessionStorage.clear() // 跳转登陆 next('/login') } else if (to.name === 'Login') { // 判断是否为空--是否登陆,登陆直接跳首页 if (user !== nll) { next('/') } } else if (user === nll) { next('/login') } next() }){mtitle title="Vuex的index"/}import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 读取缓存,没有就设置空 state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : { user: { user: '' } }, // 获取user getters: { getUser (state) { return state.user } }, // 唯一可以修改state mutations: { updataUser (state, user) { state.user = user } }, // 异步执行mutations方法 actions: { asyncUpdataUser (context, user) { context.commit('updataUser', user) } }, modules: { } }){mtitle title="Login页面"/}// 所有的都验证完成,并且成功,直接执行这句话,跳转并且用Vuex保存用户 this.$store.dispatch('asyncUpdataUser', { name: formName.account }){mtitle title="App页面解决刷新后Vuex数据丢失"/}<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', components: {}, // 第一种解决Vuex刷新数据丢失 mounted () { // 全局监听刷新,刷新就执行saveState写入本地缓存 window.addEventListener('unload', this.saveState) }, methods: { saveState () { // 缓存vuex的state数据 sessionStorage.setItem('state', JSON.stringify(this.$store.state)) } } // 第二种解决Vuex刷新数据丢失,iphone使用beforeunload无效所以我没有用 // created () { // // 在页面加载时读取sessionStorage里的状态信息 // if (sessionStorage.getItem('store')) { // this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) // } // // 在页面刷新时将vuex里的信息保存到sessionStorage里 // window.addEventListener('beforeunload', () => { // sessionStorage.setItem('store', JSON.stringify(this.$store.state)) // }) // } } </script>
2021年09月15日
1,018 阅读
0 评论
0 点赞
2020-07-17
Vue前端解决跨域问题
Vue前端解决跨域
2020年07月17日
187 阅读
0 评论
1 点赞
1
2