编写用户注册页面

.env.production

@@ -1,8 +1,19 @@
 # just a flag
 ENV = 'production'
+# prod env config
+NODE_ENV=prod
+VUE_APP_ENV=prod
 
 # base api
 #VUE_APP_BASE_API = '/prod-api'
 #VUE_APP_BASE_API='http://47.98.215.28:1029/'
 VUE_APP_BASE_API = 'http://localhost:8083/'
-# VUE_APP_BASE_API = 'http://192.168.8.19:8083/'
+# VUE_APP_BASE_API = 'http://192.168.8.19:8083/'
+# axios请求baseUrl
+VUE_APP_BASE_URL=https://exam.wzzz.fun/api
+# axios请求超时时间
+VUE_APP_REQUEST_TIME_OUT=5000
+# 后端验证码url
+VUE_APP_CAPTCHA_URL=https://exam.wzzz.fun/api
+# 上传图片url
+VUE_APP_UPLOAD_IMAGE_URL=https://exam.wzzz.fun/api

readme.md

@@ -1,3 +1,25 @@
+## 验证码及用户注册
+已完成效果
+![](./picture/Verification_1.jpg)
+预期
+![](./picture/Verification_2.jpg)
++ login页面添加“记住密码” && "注册" && "重置"
++ 添加前端验证码
+```js
+// api添加验证码接口
+export function getCodeImg() {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}
+
+// index.vue
+```
+
 ![](./picture/personal_1.png)
 ![](./picture/personal_2.png)
-

src/api/user.js

@@ -12,6 +12,18 @@ export function login(data) {
   })
 }
 
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}
+
 export function getInfo(username) {
   return request({
     url: '/users/' + username,

src/assets/css/admin/NoticeManage.scss

@@ -0,0 +1,28 @@
+
+.el-container {
+  width: 100%;
+  height: 100%;
+}
+
+.el-input {
+  width: 200px;
+}
+
+.el-container {
+  animation: leftMoveIn .7s ease-in;
+}
+
+@keyframes leftMoveIn {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.role {
+  color: #606266;
+}

src/assets/css/admin/userManage.scss

@@ -0,0 +1,28 @@
+
+.el-container {
+  width: 100%;
+  height: 100%;
+}
+
+.el-input {
+  width: 200px;
+}
+
+.el-container {
+  animation: leftMoveIn .7s ease-in;
+}
+
+@keyframes leftMoveIn {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.role {
+  color: #606266;
+}

src/assets/css/auth/login.scss

@@ -0,0 +1,54 @@
+.el-container {
+  min-width: 417px;
+  height: 100%;
+  background: url("../../assets/imgs/bg.png");
+  background-size: 100% 100%;
+  flex-direction: column;
+}
+
+a {
+  text-decoration: none;
+  color: blueviolet;
+}
+
+/*  card样式  */
+.box-card {
+  width: 450px;
+}
+
+.el-card {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  border-radius: 15px;
+}
+
+.card-header {
+  text-align: center;
+
+  p {
+    font-size: 20px;
+  }
+
+}
+
+/*  表单的左侧margin清楚 */
+/deep/ .el-form-item__content {
+  margin: 0 !important;
+}
+
+/*  按钮样式 */
+.el-button {
+  width: 48%;
+}
+
+/*  按钮前的小图标样式更改*/
+/deep/ .el-icon {
+  margin-right: 3px;
+}
+
+/*  验证码的输入框*/
+.code {
+  width: 72%;
+}

src/assets/css/auth/register.scss

@@ -0,0 +1,58 @@
+.el-container {
+  height: 100%;
+  min-width: 417px;
+  background: url("../../assets/imgs/bg.png");
+  -moz-background-size: 100% 100%;
+  background-size: 100% 100%;
+  flex-direction: column;
+}
+
+a {
+  text-decoration: none;
+  color: blueviolet;
+}
+
+/*  card样式  */
+.box-card {
+  width: 450px;
+}
+
+.el-card {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  border-radius: 15px;
+}
+
+.card-header {
+  text-align: center;
+
+  p {
+    font-size: 20px;
+  }
+}
+
+/*  表单的左侧margin清楚 */
+/deep/ .el-form-item__content {
+  margin: 0 !important;
+}
+
+/*  按钮样式 */
+.el-button:first-child {
+  width: 60%;
+}
+
+.el-button:nth-child(2) {
+  width: 37%;
+}
+
+/*  按钮前的小图标样式更改*/
+/deep/ .el-icon {
+  margin-right: 3px;
+}
+
+/*  验证码的输入框*/
+.code {
+  width: 72%;
+}

src/assets/css/global.css

@@ -0,0 +1,24 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+p {
+    padding: 0!important;
+    margin: 0!important;
+    font-size: 15px;
+}
+
+span {
+    font-weight: 200;
+}
+
+.el-table td, .el-table th.is-leaf {
+    border-bottom: none;
+}
+
+.el-message-box {
+    width: 50% !important;
+}

src/assets/css/index/main.scss

@@ -0,0 +1,48 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+
+  .el-menu {
+    height: 100% !important;
+  }
+}
+
+.el-main, .el-header {
+  padding: 0;
+}
+
+/*  右侧面板根据左侧的宽度变化而变化,侧边栏缩小,右侧面板变大,反之同理*/
+#aside {
+  transition: width .3s;
+}
+
+.el-breadcrumb {
+  display: inline-block;
+}
+
+/*右上角的个人信息字体*/
+.el-dropdown-link {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.el-tag {
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 0 .5px .5px gray;
+  color: black;
+  font-weight: 400;
+  text-align: center;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+/deep/ .el-card__body {
+  padding: 10px;
+}
+
+/*  tag的高亮*/
+.active {
+  background-color: rgb(66, 185, 131);
+  color: white;
+}

src/function-namespace/auth/LoginFunc.js

@@ -0,0 +1,112 @@
+import auth from '@/api/auth'
+import utils from '@/utils/utils'
+import router from '../../router/index'
+import Vue from 'vue'
+
+// 登录表单数据信息
+const loginForm = {
+  username: '',
+  password: '',
+  // 验证码
+  code: ''
+}
+// 自定义验证码校验规则
+const validateCode = (rule, value, callback) => {
+  // 验证码不区分大小写
+  if (value.toString().toLocaleLowerCase() !== code.toString().toLocaleLowerCase()) {
+    callback(new Error('验证码输入错误'))
+  } else {
+    callback()
+  }
+}
+// 登录表单的校验规则
+const loginFormRules = {
+  username: [
+    {
+      required: true,
+      message: '请输入账号',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    },
+    {
+      min: 5,
+      message: '密码不能小于5个字符',
+      trigger: 'blur'
+    }
+  ],
+  code: [
+    {
+      required: true,
+      message: '请输入验证码',
+      trigger: 'blur'
+    },
+    {
+      validator: validateCode,
+      trigger: 'blur'
+    }
+  ]
+}
+// 后台验证码id
+let codeId
+// 后台的验证码
+let code
+// 获取后台验证码
+const getCode = () => {
+  auth.getCode(codeId).then(resp => {
+    code = resp.data
+  })
+}
+// 点击图片刷新验证码
+const changeCode = () => {
+  const codeImg = document.querySelector('#code')
+  codeId = utils.getRandomId()
+  codeImg.src = `${process.env.VUE_APP_CAPTCHA_URL}/util/getCodeImg?id=` + codeId
+  codeImg.onload = () => getCode()
+}
+const toRegisterPage = () => {
+  router.push('/register')
+}
+// 登录
+const login = (formEl) => {
+  utils.validFormAndInvoke(formEl, () => {
+    auth.login(loginForm).then(resp => {
+      if (resp.code === 200) {
+        localStorage.setItem('authorization', resp.data)
+        Vue.prototype.$notify({
+          title: 'Tips',
+          message: '登陆成功^_^',
+          type: 'success',
+          duration: 2000
+        })
+        router.push('/index')
+      }
+    }).catch(err => {
+      console.log(err)
+      // 请求出错
+      changeCode()
+      getCode()
+      Vue.prototype.$notify({
+        title: 'Tips',
+        message: err.response.data.errMsg,
+        type: 'error',
+        duration: 2000
+      })
+    })
+  })
+}
+
+export default {
+  loginForm,
+  loginFormRules,
+  code,
+  getCode,
+  changeCode,
+  toRegisterPage,
+  login
+}

src/function-namespace/auth/RegisterFunc.js

@@ -0,0 +1,120 @@
+import router from '@/router'
+import auth from '@/api/auth'
+import utils from '@/utils/utils'
+
+// 注册表单数据信息
+const registerForm = {
+  username: '',
+  trueName: '',
+  password: '',
+  code: ''
+}
+// 自定义验证码校验规则
+const validateCode = (rule, value, callback) => {
+  // 验证码不区分大小写
+  if (value.toString().toLocaleLowerCase() !== code.toString().toLocaleLowerCase()) {
+    callback(new Error('验证码输入错误'))
+  } else {
+    callback()
+  }
+}
+// 自定义用户名校验规则
+const validateUsername = (rule, value, callback) => {
+  auth.checkUsername(registerForm.username)
+    .then(resp => {
+      if (resp.data) {
+        callback()
+      } else {
+        callback(new Error('用户名已存在'))
+      }
+    })
+}
+// 登录表单的校验规则
+const registerFormRules = {
+  username: [
+    {
+      required: true,
+      message: '请输入账号',
+      trigger: 'blur'
+    },
+    {
+      validator: validateUsername,
+      trigger: 'blur'
+    }
+  ],
+  trueName: [
+    {
+      required: true,
+      message: '请输入您的姓名',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    },
+    {
+      min: 5,
+      message: '密码不能小于5个字符',
+      trigger: 'blur'
+    }
+  ],
+  code: [
+    {
+      required: true,
+      message: '请输入验证码',
+      trigger: 'blur'
+    },
+    {
+      validator: validateCode,
+      trigger: 'blur'
+    }
+  ]
+}
+
+const toLoginPage = () => {
+  router.push('/')
+}
+// 后台的验证码
+let code
+// 后台验证码id
+let codeId
+// 获取后台验证码
+const getCode = () => {
+  auth.getCode(codeId).then(resp => {
+    code = resp.data
+  })
+}
+// 点击图片刷新验证码
+const changeCode = () => {
+  const codeImg = document.querySelector('#code')
+  codeId = utils.getRandomId()
+  codeImg.src = `${process.env.VUE_APP_CAPTCHA_URL}/util/getCodeImg?id=` + codeId
+  codeImg.onload = () => getCode()
+}
+
+// 表单信息提交
+const register = (formEl) => {
+  utils.validFormAndInvoke(formEl, () => {
+    auth.register(registerForm).then(resp => {
+      if (resp.code === 200) {
+        localStorage.setItem('authorization', resp.data)
+        router.push('/index')
+      }
+    })
+  }, '注册失败')
+}
+
+export default {
+  // data
+  code,
+  registerForm,
+  registerFormRules,
+  // method
+  toLoginPage,
+  getCode,
+  changeCode,
+  register
+}

src/views/login/index.vue

@@ -1,6 +1,8 @@
 <!-- eslint-disable no-undef -->
 <template>
+  <!--登录块-->
   <div class="login-container">
+    <!--表单区域-->
     <el-form
       ref="loginForm"
       :model="loginForm"
@@ -12,8 +14,9 @@
       <div class="title-container">
         <h3 class="title">力山特起重机智能运维系统</h3>
       </div>
-
+      <!-- 用户名 -->
       <el-form-item prop="username">
+        <!-- 图标 -->
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
@@ -34,6 +37,7 @@
         placement="right"
         manual
       >
+        <!-- 密码 -->
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
@@ -51,6 +55,7 @@
             @blur="capsTooltip = false"
             @keyup.enter.native="handleLogin"
           />
+          <!-- 显示密码 -->
           <span class="show-pwd" @click="showPwd">
             <svg-icon
               :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
@@ -59,40 +64,73 @@
         </el-form-item>
       </el-tooltip>
 
-      <el-form-item prop="Verification ">
+      <!-- <el-form-item v-if="captchaEnabled" prop="code ">
         <el-col :span="16">
           <el-input
-            ref="验证码"
-            v-model="loginForm.Verification "
-            :placeholder="('验证码')"
-            name="Verification "
-            type="text"
-            tabindex="1"
-            autocomplete="on"
-          />
-        </el-col>
-        <el-col :span="8">
-          <img class="verifyCodeImg" :src="imgUrl" @click="resetImg">
+            v-model="loginForm.code "
+            placeholder="验证码"
+            style="width:63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" class="login-code-img" @click="getCode">
+          </div>
         </el-col>
       </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin-left: 20px;">记住密码</el-checkbox> -->
 
+      <el-form-item prop="code">
+        <el-input
+          v-model="loginForm.code"
+          class="code"
+          prefix-icon="el-icon-info"
+          placeholder=""
+          style="margin-left:5px;fill: currentColor"
+        />
+        <img
+          id="code"
+          style="float: right;margin-top: 4px; margin-left: ;cursor: pointer"
+          title="看不清,点击刷新"
+          alt="验证码"
+          @click="changeCode"
+        >
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin-left: 8px;">记住密码</el-checkbox>
+
+      <!-- 按钮 -->
       <el-button
         :loading="loading"
-        type="primary"
-        style="width: 30%; margin-bottom: 30px; margin-left: 60px"
-        @click.native.prevent="handleLogin"
+        type="info"
+        icon="el-icon el-icon-delete"
+
+        style="width: 30%; margin-bottom: 20px; margin-left: 20px"
+        @click="resetLoginForm"
       >
-        {{ $t("login.logIn") }}
+        重置
+        <!-- {{ $t("login.logIn") }} -->
       </el-button>
       <el-button
         :loading="loading"
-        type="info"
-        style="width: 30%; margin-bottom: 30px; margin-left: 60px"
-        @click="resetLoginForm"
+        type="warning"
+        icon="el-icon el-icon-circle-plus"
+        style="width:35%;margin-bottom: 20px; margin-left: 20px"
+        @click="registerForm($refs['loginForm'])"
       >
-        重置
+        注册
         <!-- {{ $t("login.logIn") }} -->
       </el-button>
+      <el-button
+        :loading="loading"
+        icon="el-icon el-icon-s-promotion"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px; margin-left: 0px"
+        @click.native.prevent="handleLogin"
+      >
+        {{ $t("login.logIn") }}
+      </el-button>
+
     </el-form>
 
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
@@ -110,6 +148,8 @@
 import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
 import SocialSign from './components/SocialSignin'
+import Cookies from 'js-cookie'
+// import LoginFunc from '@/function-namespace/auth/LoginFunc'
 
 export default {
   name: 'Login',
@@ -131,11 +171,13 @@ export default {
       }
     }
     return {
+      // 表单数据
       loginForm: {
         username: 'adminult',
         password: '123456'
       },
       loginRules: {
+        // 校验规则
         username: [
           { required: true, trigger: 'blur', validator: validateUsername }
         ],
@@ -165,6 +207,8 @@ export default {
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
+    this.getCode()
+    this.getCookie()
   },
   mounted() {
     if (this.loginForm.username === '') {
@@ -177,6 +221,25 @@ export default {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
+    // getCode() {
+    //   getCodeImg().then(res => {
+    //     this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+    //     if (this.captchaEnabled) {
+    //       this.codeUrl = 'data:image/gif;base64,' + res.img
+    //       this.loginForm.uuid = res.uuid
+    //     }
+    //   })
+    // },
+    // getCookie() {
+    //   const username = Cookies.get('username')
+    //   const password = Cookies.get('password')
+    //   const rememberMe = Cookies.get('rememberMe')
+    //   this.loginForm = {
+    //     username: username === undefined ? this.loginForm.username : username,
+    //     // password: password === undefined ? this.loginForm.password : decrypt(password),
+    //     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+    //   }
+    // },
     checkCapslock(e) {
       const { key } = e
       this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
@@ -195,6 +258,15 @@ export default {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true
+          if (this.loginForm.rememberMe) {
+            Cookies.set('username', this.loginForm.username, { expires: 30 })
+            // Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
+          } else {
+            Cookies.remove('username')
+            Cookies.remove('password')
+            Cookies.remove('rememberMe')
+          }
           this.$store
             .dispatch('user/login', this.loginForm)
             .then(() => {
@@ -241,6 +313,7 @@ export default {
     // }
   }
 }
+
 </script>
 
 <style lang="scss">
@@ -313,13 +386,12 @@ $light_gray: #eee;
   }
   .login-form {
     position: relative;
-    width: 520px;
+    width: 450px;
     max-width: 100%;
     padding: 160px 35px 0;
     margin: 0 auto;
     overflow: hidden;
   }
-
   .tips {
     font-size: 14px;
     color: #fff;
@@ -371,6 +443,31 @@ $light_gray: #eee;
     user-select: none;
   }
 
+  .login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+
   .thirdparty-button {
     position: absolute;
     right: 0;
@@ -384,3 +481,4 @@ $light_gray: #eee;
   }
 }
 </style>
+

src/views/login/new_login.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="login_container">
+    <!--登录块-->
+    <div class="login_box">
+      <!--表单区域-->
+      <el-form
+        ref="loginFromRef"
+        :rules="loginRules"
+        :model="loginFrom"
+        class="login_from"
+        label-width="0px"
+      >
+        <h3 class="headline">力山特起重机智能运维系统</h3>
+        <!--用户名-->
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginFrom.username"
+            prefix-icon="iconfont icon-denglu"
+            placeholder="用户名"
+          />
+        </el-form-item>
+        <!--密码-->
+        <el-form-item prop="password">
+
+          <el-input
+            v-model="loginFrom.password"
+            prefix-icon="iconfont icon-mima"
+            type="password"
+            placeholder="密码"
+          />
+        </el-form-item>
+
+        <el-form-item prop="verifyCode">
+          <el-col :span="16">
+            <el-input
+              v-model="loginFrom.verifyCode"
+              prefix-icon="el-icon-message"
+              placeholder="验证码"
+              class="verifyCode"
+            />
+          </el-col>
+          <el-col :span="8">
+            <img class="verifyCodeImg" :src="imgUrl" @click="resetImg">
+          </el-col>
+
+        </el-form-item>
+
+        <!--按钮-->
+        <el-form-item class="btn">
+          <el-button type="primary" @click="login">登录</el-button>
+          <!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      // 表单数据
+      // imgUrl: 'http://localhost:9000/home/verifyCode?time=' + new Date(),
+      loginFrom: {
+        username: 'admin',
+        password: '123456',
+        verifyCode: ''
+      },
+      // 验证对象
+      loginRules: {
+        // 校验用户名
+        username: [
+          { required: true, message: '请输入用户名称', trigger: 'blur' }, // 必填项验证
+          {
+            min: 5,
+            max: 12,
+            message: '长度在 5 到 12 个字符',
+            trigger: 'blur'
+          } // 验证长度
+        ],
+        // 校验密码
+        password: [
+          { required: true, message: '请输入用户密码', trigger: 'blur' }, // 必填项验证
+          {
+            min: 6,
+            max: 10,
+            message: '长度在 6 到 10 个字符',
+            trigger: 'blur'
+          } // 验证长度
+        ]
+      },
+      imgSrc: require('../assets/bg.png')
+    }
+  },
+  methods: {
+    resetLoginForm() {
+      // 重置表单内容
+      this.$refs.loginFromRef.resetFields()
+    },
+    resetImg() {
+      this.imgUrl = 'http://localhost:9000/home/verifyCode?time=' + new Date()
+    },
+    login() {
+      // 登录请求
+      this.$refs.loginFromRef.validate(async(validate) => {
+        // 判断是否验证成功
+        if (!validate) return
+        const { data: res } = await this.$http.post(
+          'home/login',
+          this.loginFrom
+        )
+
+        // eslint-disable-next-line eqeqeq
+        if (res.status == '200') {
+          this.$message.success('登陆成功')
+          window.sessionStorage.setItem('user', res.id)
+          const { data: res1 } = await this.$http.get('menus', { params: {
+            id: window.sessionStorage.getItem('user')
+          }})
+          window.sessionStorage.setItem('menu', window.JSON.stringify(res1.menus))
+          window.sessionStorage.setItem('token', res.token)
+          // 跳转页面
+          this.$router.push({ path: '/home' })
+        // eslint-disable-next-line eqeqeq
+        } else if (res.status == '400') {
+          this.$message.error('用户名或密码错误')
+        // eslint-disable-next-line eqeqeq
+        } else if (res.status == '404') {
+          this.$message.error('账号未激活，请联系管理员')
+        } else {
+          this.$message.error('验证码输入错误')
+          this.imgUrl = 'http://localhost:9000/home/verifyCode?time=' + new Date()
+        }
+      })
+    }
+  }
+}
+</script>
+  <style lang="less" scoped>
+  .login_container {
+    background-color: #2b4b6b;
+    height: 100%;
+  }
+  .login_box {
+    background: rgba(78, 102, 112, 0.1);
+    width: 450px;
+    height: 330px;
+    border-radius: 5px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .btn {
+    width: 100%;
+  }
+  .login_from {
+    position: absolute;
+    bottom: 0%;
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    .verifyCode {
+      width:"60%",
+    }
+    .verifyCodeImg {
+      margin-top: 5px;
+      margin-left: 10px;
+      height: 30px;
+      width:"60%",
+    }
+  }
+  .el-button {
+    margin-left: 10%;
+    width: 80%;
+  }
+  .el-form-item {
+    margin-left: 10%;
+    width: 80%;
+  }
+  .headline {
+    font-size: 20px;
+    color: white;
+    margin-left: 35%;
+  }
+  </style>
+

src/views/login/register.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-card class="box-card" shadow="always">
+        <div slot="header" class="card-header">
+          <p>力山特起重机智能运维系统</p>
+        </div>
+
+        <div>
+          <el-form
+            ref="registerForm"
+            :model="registerForm"
+            :rules="registerFormRules"
+            :status-icon="true"
+            label-width="100px"
+          >
+            <el-form-item prop="username">
+              <el-input v-model="registerForm.username" prefix-icon="el-icon-user" placeholder="账号" />
+            </el-form-item>
+
+            <el-form-item prop="trueName">
+              <el-input v-model="registerForm.trueName" prefix-icon="el-icon-s-check" placeholder="姓名" />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <el-input
+                v-model="registerForm.password"
+                prefix-icon="el-icon-lock"
+                placeholder="密码"
+                show-password
+              />
+            </el-form-item>
+
+            <el-form-item prop="code">
+              <el-input
+                v-model="registerForm.code"
+                class="code"
+                prefix-icon="el-icon-chat-line-round"
+                placeholder="验证码"
+              />
+              <img
+                id="code"
+                :src="`${captchaUrl}/util/getCodeImg`"
+                style="float: right;margin-top: 4px;cursor: pointer"
+                title="看不清,点击刷新"
+                alt="验证码"
+                @click="changeCode"
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="warning" icon="el-icon el-icon-circle-plus" @click="register($refs['registerForm'])">注册
+              </el-button>
+              <el-button icon="el-icon el-icon-s-promotion" @click="toLoginPage">去登陆</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </el-main>
+
+    <Footer />
+  </el-container>
+</template>
+
+<script>
+import Footer from '@/components/Footer'
+import RegisterFunc from '@/function-namespace/auth/RegisterFunc'
+
+export default {
+  name: 'Register',
+  components: { Footer },
+  data() {
+    return {
+      ...RegisterFunc,
+      captchaUrl: process.env.VUE_APP_CAPTCHA_URL
+    }
+  },
+  mounted() {
+    RegisterFunc.changeCode()
+  }
+}
+</script>
+
+  <style scoped lang="scss">
+  @import "../../assets/css/auth/register";
+
+  </style>
+