#前端#vue-element-admin。。。

符鸣
2023-12-01

vue-element-admin的使用

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

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

源码

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

源码解析

1.<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
在组件里,注册了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
        }
      })
    }
  }
}
 类似资料: