更改初始化模式

web/src/view/init/index.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="init_page">
     <div class="init_page_panle">
-      <div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello  " @click="showNext">
+      <div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello  ">
         <div>
           <div class="hello_title">GIN-VUE-ADMIN</div>
-          <p class="in-two a-fadeinT">您需要初始化您的数据库并且填充初始数据</p>
-          <p class="init_p">点击进入初始化</p>
+          <p class="in-two a-fadeinT">初始化须知</p>
+          <p class="init_p">1.您需有用一定的VUE和golang基础</p>
+          <p class="init_p">2.请您确认是否已经阅读过官方文档</p>
+          <p class="init_p">3.请您确认是否了解后续的配置流程</p>
+          <p class="init_btn">
+            <el-button type="primary" @click="goDoc">
+              阅读文档
+            </el-button>
+            <el-button type="primary" @click="showNext">
+              我已确认
+            </el-button>
+          </p>
         </div>
       </div>
       <div v-if="hello > 0 " :class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']" class=" form">
@@ -73,6 +83,9 @@ export default {
       this.hello = this.hello + 1
       console.log(this.hello)
     },
+    goDoc() {
+      window.open('https://www.gin-vue-admin.com')
+    },
     async onSubmit() {
       const loading = this.$loading({
         lock: true,
@@ -141,6 +154,9 @@ export default {
         margin-top: 20px;
         color: #777777;
       }
+      .init_btn{
+        margin-top: 20px;
+      }
     }
     .form{
       position: absolute;

web/src/view/login/index.vue

@@ -47,10 +47,16 @@
               >
             </div>
           </el-form-item>
+          <div />
           <el-form-item>
             <el-button
               type="primary"
-              style="width: 100%"
+              style="width: 46%"
+              @click="checkInit"
+            >前往初始化</el-button>
+            <el-button
+              type="primary"
+              style="width: 46%;margin-left:8%"
               @click="submitForm"
             >登 录</el-button>
           </el-form-item>
@@ -73,6 +79,7 @@
 <script>
 import { mapActions } from 'vuex'
 import { captcha } from '@/api/user'
+import { checkDB } from '@/api/initdb'
 export default {
   name: 'Login',
   data() {
@@ -113,6 +120,20 @@ export default {
   },
   methods: {
     ...mapActions('user', ['LoginIn']),
+    async checkInit() {
+      const res = await checkDB()
+      if (res.code === 0) {
+        if (res.data?.needInit) {
+          this.$store.commit('user/NeedInit')
+          this.$router.push({ name: 'Init' })
+        } else {
+          this.$message({
+            type: 'info',
+            message: '已配置数据库信息，无法初始化'
+          })
+        }
+      }
+    },
     async login() {
       return await this.LoginIn(this.loginForm)
     },

web/src/view/login/login.vue

@@ -1,157 +0,0 @@
-<template>
-  <div id="userLayout" class="user-layout-wrapper">
-    <div class="container">
-      <div class="top">
-        <div class="desc">
-          <img class="logo_login" src="@/assets/logo_login.png" alt="">
-        </div>
-        <div class="header">
-          <a href="/"><span class="title">Gin-Vue-Admin</span></a>
-        </div>
-      </div>
-      <div class="main">
-        <el-form
-          ref="loginForm"
-          :model="loginForm"
-          :rules="rules"
-          @keyup.enter.native="submitForm"
-        >
-          <el-form-item prop="username">
-            <el-input v-model="loginForm.username" placeholder="请输入用户名">
-              <i slot="suffix" class="el-input__icon el-icon-user" />
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              :type="lock === 'lock' ? 'password' : 'text'"
-              placeholder="请输入密码"
-            >
-              <i
-                slot="suffix"
-                :class="'el-input__icon el-icon-' + lock"
-                @click="changeLock"
-              />
-            </el-input>
-          </el-form-item>
-          <el-form-item style="position: relative">
-            <el-input
-              v-model="loginForm.captcha"
-              name="logVerify"
-              placeholder="请输入验证码"
-              style="width: 60%"
-            />
-            <div class="vPic">
-              <img
-                v-if="picPath"
-                :src="picPath"
-                width="100%"
-                height="100%"
-                alt="请输入验证码"
-                @click="loginVerify()"
-              >
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              style="width: 100%"
-              @click="submitForm"
-            >登 录</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <div class="footer">
-        <div class="links">
-          <a href="http://doc.henrongyi.top/"><img src="@/assets/docs.png" class="link-icon"></a>
-          <a href="https://www.yuque.com/flipped-aurora/"><img src="@/assets/yuque.png" class="link-icon"></a>
-          <a href="https://github.com/flipped-aurora/gin-vue-admin"><img src="@/assets/github.png" class="link-icon"></a>
-          <a href="https://space.bilibili.com/322210472"><img src="@/assets/video.png" class="link-icon"></a>
-        </div>
-        <div class="copyright">Copyright &copy; {{ curYear }} 💖flipped-aurora</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import { captcha } from '@/api/user'
-export default {
-  name: 'Login',
-  data() {
-    const checkUsername = (rule, value, callback) => {
-      if (value.length < 5) {
-        return callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const checkPassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        return callback(new Error('请输入正确的密码'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      curYear: 0,
-      lock: 'lock',
-      loginForm: {
-        username: 'admin',
-        password: '123456',
-        captcha: '',
-        captchaId: ''
-      },
-      rules: {
-        username: [{ validator: checkUsername, trigger: 'blur' }],
-        password: [{ validator: checkPassword, trigger: 'blur' }]
-      },
-      logVerify: '',
-      picPath: ''
-    }
-  },
-  created() {
-    this.loginVerify()
-    this.curYear = new Date().getFullYear()
-  },
-  methods: {
-    ...mapActions('user', ['LoginIn']),
-    async login() {
-      return await this.LoginIn(this.loginForm)
-    },
-    async submitForm() {
-      this.$refs.loginForm.validate(async(v) => {
-        if (v) {
-          const flag = await this.login()
-          if (!flag) {
-            this.loginVerify()
-          }
-        } else {
-          this.$message({
-            type: 'error',
-            message: '请正确填写登录信息',
-            showClose: true
-          })
-          this.loginVerify()
-          return false
-        }
-      })
-    },
-    changeLock() {
-      this.lock = this.lock === 'lock' ? 'unlock' : 'lock'
-    },
-    loginVerify() {
-      captcha({}).then((ele) => {
-        this.picPath = ele.data.picPath
-        this.loginForm.captchaId = ele.data.captchaId
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-@import "@/style/login.scss";
-</style>