#前端#vue-element-admin完成界面及前后端交互

vue-element-admin的使用

项目实训因为组里之前接触过vue的人不多，所以就跑去写前端了。

之前只用vue.js写过简单的前端，这次碰到大佬指导，学了一下新的架构，以 登录 为例，记录一下。

源码

界面部分是element-ui，本文只记录逻辑，界面看这里：element-ui的使用

源码解析

1.Login
在组件里，注册了handleLogin方法，点击之后执行。
2.`

      handleLogin() {
  this.$refs.loginForm.validate(valid => {
  //refs可以理解为所有的ref属性，通过ref属性的值找到对应组件，这里我们找到loginForm
 //validate是验证有效性，在export default中已验证。
    if (valid) {
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {//▲1

        this.$router.push({ path: this.redirect || '/' })   //▲2
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}`

handleLogin方法处理登录，代码中有两处△，是vue的核心之处，我们首先进去这个部分。
▲1 store
这里是调用了store文件夹下的login方法

  login({ commit }, userInfo) { //userInfo就是loginForm
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password  }).then(response => {// △
        const { data } = response
        commit('SET_TOKEN', data.token)  //正常登录后会返回token，将tokenset进去。
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

这里，关于token不明白请自行百度token登录等。
vue的封装做的相当好，关于token之类的方法已经全部封装好了，我们可以打开/utils/request.js,可以看到里面已经将request和response封装好，包括加上请求头等等。（这里不详述）

代码中△处，即最终调用的登录方法，是api文件夹下的文件，可以在其中找到相应方法，和普通js写法区别不大，很好理解，此处不详述。

▲2 router
打开router文件夹，里面的index.js文件。
可以看到里面注册了很多路由，这大概是vue核心的地方。
而this.$router.push({ path: this.redirect || ‘/’ }) 这一句的意思就是说，若redirect这个变量存在，则跳转到这个url，否则返回主页。
ps.redirect是一个全局变量，所有的变量都在data的return里面声明。

其它

我觉得vue最难懂的地方应该是script部分，所以把这部分单独拎出来记录一下。
毕竟是做了分离，所以html和css部分几乎是纯ui，不涉及任何数据。

export default { //export的意思是，export出去，外面的模块只要import就可以拿到本模块的数据
  name: 'Login',
  data() {
    return {//return 里面声明所有的全局变量
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      userToken:'',
    }
  },
  watch: {//watch是监听路由的变化
    $route: {
      handler: function(route) {//监听路由变化，路由变化也就是登录成功了
        //自动跳转指定页面，query是查询参数  查询参数中的redirect
        //跳转的时候在页面之间传参
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {//在里面写方法
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}