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);

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>

Vue前端解决跨域问题 Vue前端解决跨域