Electron-vue實戰-每日清單---04登入頁面與開機自啟動的實作

​

Electron 如何加載 vue 頁面的呢

第一步 createWindow()，建立視窗

在src/main/index.js中的createWindow()函數中，

-

已經為我們寫好了建立視窗的執行個體。在這裡調用到了BrowserWindow，具體的參數設定以及使用參考

官方文檔

。這裡我們先引入BrowserWindow：

import { BrowserWindow } from 'electron'      

然後看一下我們需要的參數，目前我們隻需要設定視窗的寬高

// 定義一個mainWindow作為主視窗
mainWindow = new BrowserWindow({
    height: 310,//視窗的高度
    width: 330,//視窗的寬度
})      

到這裡，目前我們就可以建立一個頁面了，那麼

要如何來顯示我們

寫好的頁面，其實Electron-vue已經為我們做好了。

第二步 引入頁面

// 定義了一個winUrl,存儲要加載的頁面
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`      

在Electron-vue中index.html對應的是index.ejs ！！！

第三步 加載頁面

// 用主視窗去加載頁面
mainWindow.loadURL(winURL)      

到此為止，我們已經了解了Electron是如何加載頁面的

下面的内容，需要了解vue！！！

下面我們開始制作登入頁面，

第一步 建立檔案以及檔案夾

在renderer中建立一個名為layout的檔案夾，并在此檔案夾中建立login.vue檔案.

第二步 使用element-ui實作如下頁面

可以看到這是一個form表單，需要引入el-form ,然後裡面有使用者名輸入框，密碼輸入框，自啟動radio，已經兩個button。

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"label-width="80px"label-position="left">
        <el-form-item label="使用者名" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="請輸入使用者名" style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="密碼" prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="請輸入密碼"style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="開機啟動" prop="autoStart">
          <el-switch v-model="ruleForm.autoStart"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>      

确定form中的資料有：userName，password，autoStart，直接使用vue進行的v-model進行綁定。

分析：

1. 我們需要定義的字段

data() {
    return {
      user: [],
      autoStartLocal:false, // 記錄本地存儲的自啟動，如果本地已經将自啟動寫入系統資料庫，這個資料和表單裡的autoStart進行比較，防止多次寫入。
      ruleForm: {
        password: "", // 表單密碼
        userName: "",//表單
        autoStart: false
      },
      rules: {
        password: [{ required: true, message: "請輸入密碼", trigger: "blur" }],
        userName: [{ required: true, message: "請輸入使用者名", trigger: "blur" }]
      }
    };
  },      

1. 什麼時候讀取本地存儲的使用者名，密碼以及自啟動

   使用者輸入完使用者名和密碼，需要和本地所存儲的使用者名密碼進行比較，是以我們需要将資料取出來，但是你會發現，自啟動，我們有可能之前設定過了，是以自啟動要在頁面加載之後就開始讀取，使用monted在DOM加載完成之後就進行讀取。

submitForm(formName) {
      console.log("送出");
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            this.ruleForm.userName !== this.user.userName ||
            this.user.password !== this.ruleForm.password
          ) {
            this.$message({
              message: "使用者名或者密碼錯誤",
              type: "error",
              center: true,
              duration: 1000
            });
          } else {
            let result = this.$db
              .get("user")
              .find({ userName: this.ruleForm.userName })
              .assign({ autoStart: this.ruleForm.autoStart })
              .write();
            if (result) {
              this.$store.commit("changeLoginState", true);
              console.log(this.$store.state.login.loginState);
              this.$router.replace("/");
              console.log(this.$router);
            }
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>