Finish the create table of install.

2024-04-21 12:31:55 +00:00 · 2018-12-05 21:21:28 +08:00
parent 747ee00bb6
commit 7e13532a5f
4 changed files with 301 additions and 20 deletions
@@ -94,7 +94,7 @@
            <ul>
              <li v-for="(matter,index) in matterPager.data">
                <span class="rank" :class="{top3:index<3}">{{index+1}}</span>
-                <router-link class="name" :to="'/'">{{matter.name}}</router-link>
+                <router-link class="name" :to="'/matter/detail/'+matter.uuid">{{matter.name}}</router-link>
                <span class="info">{{matter.times}}</span>
              </li>
            </ul>
@@ -41,12 +41,25 @@
          </div>

          <div class="row mt20">
+            <div class="col-md-12">
+              <div class="alert alert-info">
+                <div><i class="fa fa-bullhorn"></i> 注意：</div>
+                <ol class="pl30 m0">
+                  <li>如果数据库和蓝眼云盘安装在同一台服务器，Host可以直接填写 127.0.0.1。</li>
+                  <li>数据库账户的权限要求要能够创建表，否则第二步"创建表"操作会出错</li>
+                </ol>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
            <div class="col-md-12 text-right">
-              <button class="btn btn-success btn-sm" v-if="verified">
-                <i class="fa fa-check"></i>
+              <button class="btn btn-success btn-sm" v-if="install.verified">
+                <i class="fa fa-link"></i>
                MySQL连接测试通过
              </button>
-              <button class="btn btn-info btn-sm" @click.stop.prevent="verify" v-if="!verified">
+              <button class="btn btn-info btn-sm" @click.stop.prevent="verify" v-if="!install.verified">
                <i class="fa fa-unlink"></i>
                测试MySQL连接
              </button>
@@ -59,16 +72,133 @@
          </div>
        </div>
      </el-tab-pane>
-      <el-tab-pane label="创建表" name="second" :disabled="!verified">
+      <el-tab-pane label="创建表" name="second" :disabled="!install.verified">
        <div class="install-block">

-          <h1>这里安装数据库表</h1>
+          <div class="mb15 border-bottom" v-for="(tableInfo,index) in install.tableInfoList">
+            <div class="f16">
+              {{tableInfo.name}}
+
+              <span class="label label-success" v-if="tableInfo.tableExist && !tableInfo.missingFields.length">
+                已安装
+              </span>
+              <span class="label label-danger" v-if="tableInfo.tableExist && tableInfo.missingFields.length">
+                已安装,字段缺失
+              </span>
+              <span class="label label-warning" v-if="!tableInfo.tableExist">
+                待安装
+              </span>
+
+            </div>
+
+            <div class="mt10">
+              所有字段: <span class="label label-default mr5 inline-block mb10" v-for="field in tableInfo.allFields">{{field.DBName}}</span>
+            </div>
+            <div class="mt10" v-if="tableInfo.tableExist && tableInfo.missingFields.length">
+              缺失字段: <span class="label label-default mr5 inline-block mb10"
+                          v-for="field in tableInfo.missingFields">{{field.DBName}}</span>
+            </div>
+
+          </div>
+
+          <div class="row mt20">
+            <div class="col-md-12">
+              <div class="alert alert-info">
+                <div><i class="fa fa-bullhorn"></i> 点击"一键建表"后会按照以下逻辑执行操作：</div>
+                <ol class="pl30 m0">
+                  <li>如果某表不存在，则直接创建表。</li>
+                  <li>如果某表存在并且字段齐全，那么不会对该表做任何操作</li>
+                  <li>如果某表存在但是部分字段缺失，那么会在该表中增加缺失字段。</li>
+                  <li>如果表中有多余的字段(多余字段即不是蓝眼云盘需要的字段)，不会做删除处理，而会维持原样。</li>
+                </ol>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-12 text-right">
+
+              <button class="btn btn-info btn-sm" v-if="!install.tableCreated()" @click.stop.prevent="createTable()">
+                <i class="fa fa-gavel"></i>
+                一键建表
+              </button>
+
+              <button class="btn btn-success btn-sm" v-if="install.tableCreated()">
+                <i class="fa fa-check"></i>
+                建表完成
+              </button>
+
+              <button class="btn btn-primary btn-sm" @click.stop.prevent="goTo('third')">
+                <i class="fa fa-arrow-right"></i>
+                下一步
+              </button>
+
+            </div>
+          </div>
+
        </div>
      </el-tab-pane>
-      <el-tab-pane label="设置管理员" name="third" :disabled="!tableCreated">
+      <el-tab-pane label="设置管理员" name="third" :disabled="!install.tableCreated()">
        <div class="install-block">

-          <h1>这里配置管理员</h1>
+          <div class="row" v-validator="install.adminValidatorSchema.adminUsername.error">
+            <label class="col-md-2 control-label mt5 compulsory">管理员昵称</label>
+            <div class="col-md-10 validate">
+              <input type="text" class="form-control" v-model="install.adminUsername">
+            </div>
+          </div>
+
+          <div class="row mt10" v-validator="install.adminValidatorSchema.adminEmail.error">
+            <label class="col-md-2 control-label mt5 compulsory">管理员邮箱</label>
+            <div class="col-md-10 validate">
+              <input type="text" class="form-control" v-model="install.adminEmail">
+            </div>
+          </div>
+
+          <div class="row mt10" v-validator="install.adminValidatorSchema.adminPassword.error">
+            <label class="col-md-2 control-label mt5 compulsory">管理员密码</label>
+            <div class="col-md-10 validate">
+              <input type="password" class="form-control" v-model="install.adminPassword">
+            </div>
+          </div>
+
+          <div class="row mt10" v-validator="install.adminValidatorSchema.adminRepassword.error">
+            <label class="col-md-2 control-label mt5 compulsory">再次输入密码</label>
+            <div class="col-md-10 validate">
+              <input type="password" class="form-control" v-model="install.adminRepassword">
+            </div>
+          </div>
+
+
+          <div class="row mt20">
+            <div class="col-md-12">
+              <div class="alert alert-info">
+                <div><i class="fa fa-bullhorn"></i> 注意：</div>
+                <ol class="pl30 m0">
+                  <li>由于昵称将作为文件上传的目录，因此只允许字母数字以及"_"。</li>
+                  <li>管理员邮箱将作为登录的用户名。</li>
+                  <li>点击"提交"后，如果成功将自动进入首页，安装程序将失效。</li>
+                  <li>如果conf/tank.conf丢失、结构破坏会导致蓝眼云盘重启时激活安装程序。</li>
+                </ol>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="row">
+            <div class="col-md-12 text-right">
+
+              <button class="btn btn-primary btn-sm" @click.stop.prevent="createAdmin()">
+                <i class="fa fa-send"></i>
+                提交
+              </button>
+
+            </div>
+          </div>
+
+
        </div>
      </el-tab-pane>
    </el-tabs>
@@ -83,9 +213,8 @@
  export default {
    data() {
      return {
+
        activeName: 'first',
-        verified: false,
-        tableCreated: false,
        install: new Install()
      }
    },
@@ -96,32 +225,39 @@
    },
    watch: {
      mysqlUrl(newVal, oldVal) {
-        this.verified = false
+        this.install.verified = false
      }
    },
    methods: {
      verify() {
        let that = this;
        this.install.httpVerify(function () {
-          that.verified = true
+          that.install.verified = true
          that.$message.success("数据库连接可用！")
        })
      },
      fetchTableInfoList() {
        let that = this;
-        this.install.httpTableInfoList(function (response) {
-          console.log("获取到待安装表", response.data.data)
-        })
+        this.install.httpTableInfoList()
      },
+
      handleClick(tab, event) {

        let paneName = tab.paneName;

      },
+      createTable() {
+        //开始建表
+        let that = this;
+        this.install.httpCreateTable(function (response) {
+          that.$message.success("建表成功！")
+
+        })
+      },
      goTo(tabName) {
        if (tabName === "second") {

-          if (!this.verified) {
+          if (!this.install.verified) {
            this.$message.error("请首先验证数据库连接")
            return
          }
@@ -129,12 +265,20 @@
          this.fetchTableInfoList();

        } else if (tabName === "third") {
-          if (!this.tableCreated) {
+          if (!this.install.tableCreated()) {
            this.$message.error("请首先创建数据库表")
            return
          }
        }
        this.activeName = tabName
+      },
+      createAdmin() {
+        //开始创建管理员
+        let that = this;
+        this.install.httpCreateAdmin(function (response) {
+          that.$message.success("创建管理员成功！")
+
+        })
      }
    },
    mounted() {
@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import $ from 'jquery'

+//用于表单验证的指令
 Vue.directive('validator', {
  update: function (el, binding, vnode) {
    if (binding.value && binding.value !== binding.oldValue) {
+      //先删除之前的，再寻求添加新的
+      $(el).find('.validate').children().removeClass('border-danger').next('div').remove()
      $(el).find('.validate').children().addClass('border-danger').parent().append('<div class="text-danger mt5"><i class="fa fa-warning"></i>' + binding.value + '</div>')
    } else if (!binding.value) {
      $(el).find('.validate').children().removeClass('border-danger').next('div').remove()
@@ -4,6 +4,8 @@ export default class Install extends BaseEntity {

  static URL_VERIFY = '/api/install/verify'
  static URL_TABLE_INFO_LIST = '/api/install/table/info/list'
+  static URL_CREATE_TABLE = '/api/install/create/table'
+  static URL_CREATE_ADMIN = '/api/install/create/admin'

  constructor(args) {
    super(args)
@@ -15,6 +17,19 @@ export default class Install extends BaseEntity {
    this.mysqlUsername = "tank"
    this.mysqlPassword = null

+    //管理员用户名
+    this.adminUsername = null
+    this.adminEmail = null
+    this.adminPassword = null
+    this.adminRepassword = null
+
+    //表原信息
+    this.tableInfoList = []
+
+    //数据库连接是否可用
+    this.verified = false
+
+
    this.validatorSchema = {
      mysqlPort: {
        rules: [{required: true, message: 'MySQL端口必填'}],
@@ -38,6 +53,45 @@ export default class Install extends BaseEntity {
      }

    }
+
+    this.adminValidatorSchema = {
+      adminUsername: {
+        rules: [
+          {required: true, message: '昵称必填'},
+          {
+            type: 'string',
+            pattern: /^[0-9a-zA-Z_]+$/,
+            message: '昵称只能包含字母，数字和"_"'
+          }],
+        error: null
+      },
+      adminEmail: {
+        rules: [
+          {required: true, message: '邮箱必填'},
+          {
+            type: 'string',
+            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
+            message: '邮箱格式不正确'
+          }],
+        error: null
+      },
+      adminPassword: {
+        rules: [
+          {required: true, message: '密码必填'},
+          {min: 6, message: '密码长度至少为6位'}
+        ],
+        error: null
+      },
+      adminRepassword: {
+        rules: [
+          {required: true, message: '密码必填'},
+          {min: 6, message: '密码长度至少为6位'}
+        ],
+        error: null
+      }
+
+    }
+
  }

  render(obj) {
@@ -54,15 +108,35 @@ export default class Install extends BaseEntity {
    }
  }

-  validate() {
-    return super.validate()
+  validate(validatorSchema = this.validatorSchema) {
+    return super.validate(validatorSchema)
  }

+  //表创建完毕
+  tableCreated() {
+    if (!this.tableInfoList || this.tableInfoList.length === 0) {
+      return false
+    }
+    for (let i = 0; i < this.tableInfoList.length; i++) {
+      let tableInfo = this.tableInfoList[i]
+      if (!tableInfo.tableExist) {
+        return false
+      }
+
+      if (tableInfo.tableExist && tableInfo.missingFields.length !== 0) {
+        return false
+      }
+    }
+
+    return true;
+  }
+
+
  httpVerify(successCallback, errorCallback) {
    let that = this

    if (!this.validate()) {
-      that.safeCallback(errorCallback)("验证不通过");
+      this.defaultErrorHandler("验证不通过", errorCallback)
      return
    }

@@ -76,8 +150,68 @@ export default class Install extends BaseEntity {
  httpTableInfoList(successCallback, errorCallback) {
    let that = this

+    if (!this.verified) {
+      this.defaultErrorHandler("请首先验证数据库连接", errorCallback)
+      return
+    }
+
    this.httpPost(Install.URL_TABLE_INFO_LIST, this.getForm(), function (response) {

+      that.tableInfoList.splice(0, that.tableInfoList.length);
+      that.tableInfoList.push(...response.data.data)
+
+      that.safeCallback(successCallback)(response)
+
+    }, errorCallback)
+  }
+
+  httpCreateTable(successCallback, errorCallback) {
+    let that = this
+
+    if (!this.verified) {
+      this.defaultErrorHandler("请首先验证数据库连接", errorCallback)
+      return
+    }
+
+    this.httpPost(Install.URL_CREATE_TABLE, this.getForm(), function (response) {
+
+      that.tableInfoList.splice(0, that.tableInfoList.length);
+      that.tableInfoList.push(...response.data.data)
+
+      that.safeCallback(successCallback)(response)
+
+    }, errorCallback)
+  }
+
+  httpCreateAdmin(successCallback, errorCallback) {
+    let that = this
+
+    if (!this.tableCreated()) {
+      this.defaultErrorHandler("请首先创建数据库表", errorCallback)
+      return
+    }
+
+
+    if (!this.validate(that.adminValidatorSchema)) {
+      this.defaultErrorHandler("验证不通过", errorCallback)
+      return
+    }
+
+
+    if (this.adminPassword !== this.adminRepassword) {
+      this.defaultErrorHandler("两次密码不一致", errorCallback)
+      return
+    }
+
+
+    let form = this.getForm()
+    form["adminUsername"] = this.adminUsername
+    form["adminEmail"] = this.adminEmail
+    form["adminPassword"] = this.adminPassword
+
+
+    this.httpPost(Install.URL_CREATE_ADMIN, form, function (response) {
+
      that.safeCallback(successCallback)(response)

    }, errorCallback)