ruoyi源碼學習-1 登陸頁面表單

前言

ruoyi平臺是學習springboot+vue總體框架的優秀開源項目。從本文開始，跟隨頁面操做，咱們來分析ruoyi項目源碼的流程和框架。

因平常工做採用的是先後端分離模式，選取gitee.com/y_project/R… 項目clone代碼。

項目構建

將ruoyi-ui文件夾剪切到其餘位置。用idea分別打開ruoyi-ui、ruoyi-Vue，安裝依賴。

在mysql數據庫新建ry-vue，運行ruoyi-Vue中sql文件夾的sql文件，並修改application-druid.yml文件mysql配置。啓動redis服務，並修改application.yml文件redis配置。運行前端和後端項目，查看ruoyi項目頁面。

表單元素

從src/views/login.vue表單中能夠看出，主要包含：用戶名、密碼、驗證碼、記住密碼、登陸組件。

下面咱們選取較爲重要的login.vue中代碼分析。

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
複製代碼

• 採用element表單組件el-form進行構建，子項爲el-form-item。
• :model雙向綁定el-form表單值
• :rules表單輸入值校驗

<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密碼" @keyup.enter.native="handleLogin" >
複製代碼

• auto-complete="off"用來關閉瀏覽器自動補全
• placeholder="密碼" 默認顯示字段
• @keyup.enter.native="handleLogin" 回車鍵觸發登陸處理方法

<img :src="codeUrl" @click="getCode" class="login-code-img"/>
複製代碼

• 調用獲取驗證碼圖片方法

<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">記住密碼</el-checkbox>
複製代碼

• el-checkbox多選框，對應每一個框的值爲布爾類型

<span v-if="!loading">登 錄</span>
<span v-else>登 錄 中...</span>
複製代碼

• 增長登陸過程顯示

頁面初始化

created() {
  this.getCode();
  this.getCookie();
},
複製代碼

獲取驗證碼圖片

此部分中涉及請求發送處理，暫時放到下一篇統一分析。

獲取cookie

初始化時獲取cookie，此操做目的是：用戶已登陸時進入登陸頁面，加載已輸入信息

登陸操做

this.$refs.loginForm.validate(valid => {
  if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            ...
複製代碼

總體的操做須要先通過驗證過程。驗證以後，前端顯示處於登陸過程，判斷是否記錄密碼。若是記錄，在cookie中存儲相關信息。若是否，清除cookie中相關信息，以防以前配置中記住操做選項生效。

this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            this.getCode();
          });
複製代碼

向store傳入dispatch操做，傳值並觸發store中的請求操做。得到結果後，頁面重定向至根頁面。若是失敗，則退出登陸中的狀態，並刷新驗證碼。

// src/store/modules/user.js 
Login({ commit }, userInfo) {
  const username = userInfo.username.trim()
  const password = userInfo.password
  const code = userInfo.code
  const uuid = userInfo.uuid
  return new Promise((resolve, reject) => {
    // 發送login請求
    login(username, password, code, uuid).then(res => {
      // cookie中存入token
      setToken(res.token)
      // 修改mutations
      commit('SET_TOKEN', res.token)
      resolve()
    }).catch(error => {
      // 錯誤提示
      reject(error)
    })
  })
},
複製代碼

下期計劃

• src/utils/request.js 請求攔截處理分析