51-VUE_Rebuild-2

最新推荐文章于 2024-03-30 09:54:02 发布

原创最新推荐文章于 2024-03-30 09:54:02 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue中设置全局变量，通过Vue.prototype进行扩展。同时，详细讲解了如何封装Ajax请求，创建axios的GET/POST接口。此外，文章讨论了Vuex的使用，遵循最佳实践将API调用整合到actions中，强调了actions中参数的实际用途。还提到了Vue中处理图片点击事件的技巧，如添加时间戳防止缓存。最后，提及了登录验证中的图形验证码实现，包括服务器端session的校验和过期时间管理。

1.vue设置全局变量

新建一个Global.vue，然后引入到Main.js，用的是Vue.protoype.自定义的name，然后在其他的vue里面就可以直接用了

2.封装ajax

①新建一个api的dir里面放ajax.js和一个config.js

②进入axios

③写一个类似java里面的用接口搞的一套GET/POST的http请求以及回调

import axios from 'axios'

export default function ajax(url, data = {}, type = 'GET') {
  return new Promise(function (resolve, reject) {
    let promise
    if (type === 'GET') {
      let dataStr = ''
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      promise = axios.get(url)
    } else {
      promise = axios.post(url)
    }
    promise.then(function (response) {
      resolve(response.data)
    }).catch(function (error) {
      reject(error)
    })
  })
}

3.vuex

在这里，还是安装规范来写vuex，之前写的所有的api，应该放在vuex，用actions的异步给封装，这样更好管理

①vuex的管理js，index.js里面写配置项：

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import mutaions from './mutations'
import getters from './getters'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutaions,
  getters,
  actions
})

②在mutions.js里面引入mutation-types

import {
  RECEIVE_CODE
} from "./mutation-types";


//举了一个例子，暂时先不管
export default {
  [RECEIVE_CODE](code, {param1}) {
    state.paramname1 = param1
  }
}

③在actions里面封装mutations里面的同步方法+api的异步方法

import {
  RECEIVE_CODE
} from "./mutation-types";
import {
  reqqqqq
} from "../api/api";

export default {
  async getDemo({commit, state}) {
    const param3 = '11' +state.paramnxxx
    const result = await reqqqqq(param3)
    if (result.code === 0) {
      const return_code=result.code
      commit(RECEIVE_CODE,{return_code})
    }
  }
}

这里注意，actions里面方法名后面的参数，看起来是入参，但是实际调用actions方法的时候，是不需要写入参的，因为既然用了vuex，那么所有的data都是在vuex里面，根本不需要从外部传参数，这里的{commit，state}，commit是一个执行mutations方法的对象，后面的是你需要从store里面拿的数据，也就是state对象，里面有vuex的所有数据，然后在actions自定义方法里面给api.js传参，直接解构state，就可以写入参了，如果不需要使用state，不传也可以

调用的时候，用mapActions和$store都可以，直接调用参数名，无需传参

④给img标签写@click点击事件

url: this.GLOBAL.base_url + 'user/validateCode'+'?random='+Math.random()

这里有一个问题，如果给<img>标签设置图片的方式为src，src里面给一个后台的请求图片的url地址，如果刷新的话，一样的url，但是img不会动，这时候加一个随机数字段即可，更常用的是直接加时间戳

⑤登录

关于登录的验证码问题，不是手机验证码，而是图形验证码，这里应该用一个http请求带username，pwd，CAPTCHA三个参数，而不是发送2次验证码。。。

另外，每一次请求验证码，都会把正确的验证码，放在session里面，而这个session是存在服务器端的，所以当客户端发送验证码的时候，直接在session里面校验就可以了，而且这个session应该是可以设置过期时间的，也就是，验证码其实也可以设置过期时间。

现在开始搞shiro，这个星期shiro搞完了，速度接着搞，下一个项目前端代码量有点大哦