登陆注册完成

package.json

@@ -11,13 +11,14 @@
     "axios": "^0.26.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
+    "js-md5": "^0.7.3",
     "mavon-editor": "^2.10.4",
     "mui-player": "^1.6.0",
     "mui-player-desktop-plugin": "^1.4.2",
+    "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
     "vue": "^2.6.11",
-    "vue-router": "3.5.2",
+    "vue-router": "3.5.2"
-    "node-sass": "^4.14.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.5",

src/components/404.vue

@@ -80,7 +80,7 @@ export default {
 .el-button--primary {
   color: #fff;
   background: #466AFF ;
-  border-color: #466AFF ;;
+  border-color: #466AFF ;
 }
 .el-button--primary:hover, .el-button--primary:focus {
   background: #7890ee;

src/components/Login.vue

@@ -11,50 +11,25 @@
       label-width="0px"
       class="login-container"
     >
-      <h3 class="title"></h3>
+      <img :src="logo" class="logo"/>
-      <el-form-item prop="adminName" class="a">
+<!--      <h3 class="title"></h3>-->
+      <el-form-item prop="phone" class="a">
         <el-input
           type="text"
-          v-model="loginForm.adminName"
+          v-model="loginForm.phone"
           auto-complete="off"
           placeholder="账号"
         ></el-input>
       </el-form-item>
-      <el-form-item prop="adminPass">
+      <el-form-item prop="password">
         <el-input
           type="password"
-          v-model="loginForm.adminPass"
+          v-model="loginForm.password"
           auto-complete="off"
           placeholder="密码"
         ></el-input>
       </el-form-item>
 
-      <!-- 验证码 -->
-      <el-form-item>
-        <el-col :span="12">
-          <el-form-item prop="captcha">
-            <el-input
-              type="test"
-              v-model="loginForm.captcha"
-              auto-complete="off"
-              placeholder="验证码, 单击图片刷新"
-              style="width: 100%"
-            >
-            </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col class="line" :span="1">&nbsp;</el-col>
-        <el-col :span="11">
-          <el-form-item>
-            <img
-              style="width: 70%"
-              class="pointer"
-              :src="loginForm.src"
-              @click="refreshCaptcha()"
-            />
-          </el-form-item>
-        </el-col>
-      </el-form-item>
 
       <el-form-item style="width: 100%">
         <el-button
@@ -72,12 +47,18 @@
         >
       </el-form-item>
     </el-form>
-    <div class="footer"><p>@ 1703050328 张启磊</p></div>
+
+    <div style="color: #2f2f2f">
+      版权所有：红山开源社区    <a href="https://beian.miit.gov.cn/#/Integrated/index"> 京ICP备2021005060号</a>
+    </div>
   </div>
 </template>
 
 <script>
-import Cookies from "js-cookie";
+
+
+import {Message} from "element-ui";
+import pageUtils from "@/utils/pageUtils";
 
 export default {
   name: "Login",
@@ -85,19 +66,17 @@ export default {
   data() {
     // 定义数据
     return {
+      logo:require("@/assets/logo/no-word-logo.png"),
       logining: false,
       loginForm: {
         // 登录表格
-        adminName: "",
+        phone: "",
-        adminPass: "",
+        password: ""
-        captcha: "",
-        src: "http://localhost:8088/graduate_evaluate/createPicCode",
       },
       Rules: {
         // 表单验证规则  必须填写
-        adminName: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
-        adminPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
-        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
       },
     };
   },
@@ -106,40 +85,32 @@ export default {
     // 定义方法
     login() {
       let adminInfo = {
-        picCode: this.loginForm.captcha,
+        phone: this.loginForm.phone,
-        adminName: this.loginForm.adminName,
+        password: this.$md5(this.loginForm.password),
-        adminPass: this.loginForm.adminPass,
       };
 
-      this.$api.login
+      this.$api.login(adminInfo)
-        .login(adminInfo)
         .then((res) => {
           console.log(res);
-          if (res.code != 0) {
+          if (res.status === 10) {
-            alert(res.message);
+            Message.warning("用户名或密码错误")
-            this.loginForm.src =
+          }else {
-              "http://localhost:8088/graduate_evaluate/createPicCode?t=" +
+            localStorage.setItem("systemToken",res.token)
-              new Date().getTime();
+            sessionStorage.setItem("username", res.username);
-            return false;
+            sessionStorage.setItem("userId", res.userId);
+            sessionStorage.setItem("role", res.auth.authority);
+            pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/home") //跳转至主页
           }
-          Cookies.set("token", res.data.token); // 放置token到Cookie
+          // Cookies.set("token", res.data.token); // 放置token到Cookie
-          sessionStorage.setItem("name", res.data.adminName); // 保存管理员信息到本地本地存储
+
-          sessionStorage.setItem("pass", res.data.adminPass);
-          sessionStorage.setItem("rank", res.data.adminRank);
-          this.$router.push("/"); // 登录成功，跳转到主页
         })
         .catch(function (res) {
           alert(res);
-          this.refreshCaptcha();
+
         });
     },
 
-    // 刷新验证码
+
-    refreshCaptcha: function () {
-      this.loginForm.src =
-        "http://localhost:8088/graduate_evaluate/createPicCode?t=" +
-        new Date().getTime();
-    },
 
     // 重置表单
     reset() {
@@ -154,7 +125,16 @@ export default {
 
 
 <style scoped lang="scss">
-
+a:hover{
+  color: rgb(250, 202, 46);
+}
+a:active{
+  color: rgb(250, 202, 46);
+}
+a{
+  text-decoration: none;
+  color: #2f2f2f;
+}
 .login-container {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -165,13 +145,20 @@ export default {
   padding: 35px 35px 15px 35px;
   background: #fff;
   opacity: 0.9;
-  border: 1px solid #eaeaea;
+  //border: 1px solid #eaeaea;
-  box-shadow: 0 0 25px #cac6c6;
+  box-shadow: 0 10px 20px #cac6c6;
   .title {
     margin: 0px auto 40px auto;
     text-align: center;
     color: #000000;
   }
+  .el-input{
+    left:0
+  }
+  .logo{
+    width: 130px;
+    margin-top: -100px;
+  }
 }
 
 </style>
@@ -182,10 +169,10 @@ export default {
 .loginWraper {
   position: absolute;
   left: 0;
-  top: 0;
+  top: 10%;
   bottom: 0;
   right: 0;
-  background: url(../../assets/Pic/loginPic.jpg) no-repeat;
+  /*background: url(../../assets/Pic/loginPic.jpg) no-repeat;*/
   background-size: cover;
 }
 .login-container .el-input { 
@@ -201,8 +188,8 @@ export default {
 
 .el-button--primary {
   color: #fff;
-  background: rgb(66, 166, 199);
+  background: #466AFF;
-  border-color: rgb(66, 166, 199);;
+  border-color: #466AFF;
 }
 .el-button--primary:hover, .el-button--primary:focus {
   background: #7890ee;

src/components/Register.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="loginWraper">
+    <!-- v-bind:model的缩写 绑定登录表格 
+       表单验证规则  自己设定
+       获取登录表格元素 this.longinForm -->
+    <el-form
+      :model="loginForm"
+      :rules="Rules"
+      ref="loginForm"
+      label-position="left"
+      label-width="0px"
+      class="login-container"
+    >
+      <img :src="logo" class="logo"/>
+      <h3 class="title">注册用户</h3>
+      <el-form-item prop="name" class="a">
+        <el-input
+            type="text"
+            v-model="loginForm.name"
+            auto-complete="off"
+            placeholder="用户名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="phone" class="a">
+        <el-input
+          type="text"
+          v-model="loginForm.phone"
+          auto-complete="off"
+          placeholder="账号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          type="password"
+          v-model="loginForm.password"
+          auto-complete="off"
+          placeholder="密码"
+          show-password
+        ></el-input>
+      </el-form-item>
+
+
+      <Verify status="status" :successFun="verifySuccess" :errorFun="verifyError"></Verify>
+
+      <el-form-item style="width: 100%">
+
+        <!-- 主要按钮 -->
+        <el-button
+          type="primary"
+          style="width: 48%"
+          @click.native.prevent="register()"
+          >注 册</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div style="color: #2f2f2f">
+      版权所有：红山开源社区    <a href="https://beian.miit.gov.cn/#/Integrated/index"> 京ICP备2021005060号</a>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+import {Message} from "element-ui";
+import pageUtils from "@/utils/pageUtils";
+import Verify from "@/components/Verify";
+
+
+
+var checkStatus = (rule, value, callback) => {
+  console.log(value);
+  if (!value) {
+    return callback(new Error("请拖动滑块完成验证"));
+  } else {
+    callback();
+  }
+};
+export default {
+  name: "Register",
+  components: {Verify},
+  data() {
+    // 定义数据
+    return {
+      checkStatus,
+      status: [{ validator: checkStatus, trigger: "change" }],
+      verifyStatus: false,
+      logo:require("@/assets/logo/no-word-logo.png"),
+      logining: false,
+      loginForm: {
+        // 登录表格
+        name:"",
+        phone: "",
+        password: "",
+      },
+      Rules: {
+        // 表单验证规则  必须填写
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+    };
+  },
+
+  methods: {
+    verifySuccess(){
+      this.verifyStatus = true
+    },
+    verifyError(){
+
+    },
+    // 定义方法
+    register() {
+      //先检查验证码
+
+      if (this.verifyStatus === true) {
+
+        let adminInfo = {
+          name: this.loginForm.name,
+          phone: this.loginForm.phone,
+          password: this.$md5(this.loginForm.password),
+        };
+
+        this.$api.register(adminInfo)
+            .then((res) => {
+              console.log(res);
+              if (res.status === 4) {
+                Message.warning("该手机号已经注册")
+              }else if (res.status === 10) {
+                Message.warning("系统错误")
+              }else if (res.status === 0){
+                localStorage.setItem("systemToken",res.token)
+                pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/home") //跳转至主页
+              }
+
+
+            })
+            .catch(function (res) {
+              alert(res);
+
+            });
+      }else {
+        Message.warning("请先进行人机校验")
+      }
+
+    },
+
+
+
+    // 重置表单
+    reset() {
+      this.$refs.loginForm.resetFields();
+    },
+
+  },
+
+
+};
+</script>
+
+
+<style scoped lang="scss">
+a:hover{
+  color: rgb(250, 202, 46);
+}
+a:active{
+  color: rgb(250, 202, 46);
+}
+a{
+  text-decoration: none;
+  color: #2f2f2f;
+}
+.login-container {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 20px;
+  background-clip: padding-box;
+  margin: 150px auto;
+  width: 350px;
+  padding: 35px 35px 15px 35px;
+  background: #fff;
+  opacity: 0.9;
+  //border: 1px solid #eaeaea;
+  box-shadow: 0 10px 20px #cac6c6;
+  .title {
+    margin: 0px auto 40px auto;
+    text-align: center;
+    color: #000000;
+  }
+  .el-input{
+    left:0
+  }
+  .logo{
+    width: 130px;
+    margin-top: -100px;
+  }
+}
+
+</style>
+
+
+<style>
+
+.loginWraper {
+  position: absolute;
+  left: 0;
+  top: 10%;
+  bottom: 0;
+  right: 0;
+  /*background: url(../../assets/Pic/loginPic.jpg) no-repeat;*/
+  background-size: cover;
+}
+.login-container .el-input { 
+  width: 350px;
+  left: 10px;
+}
+.login-container .el-form-item__error {  
+  padding-left: 10px;
+}
+.footer {
+  font-size: 18px;
+}
+
+.el-button--primary {
+  color: #fff;
+  background: #466AFF;
+  border-color: #466AFF;
+}
+.el-button--primary:hover, .el-button--primary:focus {
+  background: #7890ee;
+  border-color: #7890ee;
+}
+
+</style>

src/components/Verify.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="verify-comp">
+     <div class="verify" :class="rangeStatus?'success':''" >
+        <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
+         {{rangeStatus?successText:startText}}
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Verify",
+  props: {
+    // 成功以后的函数
+    successFun: {
+      type: Function
+    },
+    //成功图标
+    successIcon: {
+      type: String,
+      default: 'el-icon-success'
+    },
+    //成功文字
+    successText: {
+      type: String,
+      default: '验证成功'
+    },
+    //开始的图标
+    startIcon: {
+      type: String,
+      default: 'el-icon-d-arrow-right'
+    },
+    //开始的文字
+    startText: {
+      type: String,
+      default: '请拖住滑块，拖动到最右边'
+    },
+    //失败以后的函数
+    errorFun: {
+      type: Function
+    },
+    //或者用值来进行监听
+    status: {
+      type: String
+    }
+  },
+  data(){
+    return {
+      disX : 0,
+      rangeStatus: false
+    }
+  },
+  methods:{
+    //滑块移动
+    rangeMove(e){
+      let ele = e.target;
+      let startX = e.clientX;
+      let eleWidth = ele.offsetWidth;
+      let parentWidth =  ele.parentElement.offsetWidth;
+      let MaxX = parentWidth - eleWidth;
+      if(this.rangeStatus){//不运行
+        return false;
+      }
+      document.onmousemove = (e) => {
+        let endX = e.clientX;
+        this.disX = endX - startX;
+        if(this.disX<=0){
+          this.disX = 0;
+        }
+        if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
+          this.disX = MaxX;
+        }
+        ele.style.transition = '.1s all';
+        ele.style.transform = 'translateX('+this.disX+'px)';
+        e.preventDefault();
+      }
+      document.onmouseup = ()=> {
+        if(this.disX !== MaxX){
+          ele.style.transition = '.5s all';
+          ele.style.transform = 'translateX(0)';
+          //执行成功的函数
+          this.errorFun && this.errorFun();
+        }else{
+          this.rangeStatus = true;
+          if(this.status){
+            this.$parent[this.status] = true;
+          }
+          //执行成功的函数
+          this.successFun && this.successFun();
+        }
+        document.onmousemove = null;
+        document.onmouseup = null;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin jc-flex{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.verify-comp{
+  margin: 20px 0;
+  font-size: 14px;
+  .verify{
+
+    background-color: #e9e9e9;
+    position: relative;
+    transition: 1s all;
+    user-select: none;
+    color: #585858;
+    @include jc-flex;
+    height: 40px; /*no*/
+    border-radius: 5px;
+    &.success{
+      background-color: #538c3d;
+      color: #fff;
+      i{
+        color: #538c3d;
+      }
+    }
+    i{
+      position: absolute;
+      left: 0;
+      width: 40px;/*no*/
+      border-radius: 5px;
+      height: 100%;
+      color: #538c3d;
+      background-color: #fff;
+      border: 1px solid #d8d8d8;
+      cursor: pointer;
+      font-size: 20px;
+      @include jc-flex;
+    }
+  }
+}
+</style>

src/main.js

@@ -10,13 +10,15 @@ import api from './utils/http/index'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 
+//md5
+import md5 from 'js-md5'
 // 图标
 import "/src/assets/icon/iconfont.css"
 /* // echarts
 import * as echarts from 'echarts';
 // 时间
 import moment from "moment"; */
-
+Vue.prototype.$md5 = md5;
 
 Vue.use(api)
 Vue.prototype.$axios = Axios

src/router/index.js

@@ -159,8 +159,17 @@ let routes = [
 		path: '/404',
 		component:() => import("@/components/404"),
 		name: '404'
+	},
+	{
+		path: '/:compId/login',
+		component:() => import("@/components/Login"),
+		name: 'login'
+	},
+	{
+		path: '/:compId/register',
+		component:() => import("@/components/Register"),
+		name: 'login'
 	}
-
 ]
 
 

src/utils/http/interface.js

@@ -39,11 +39,28 @@ export const getPageData = (compId,page) => {
     })
 };
 
+export const login = data => {
+    return axios({
+        url: '/login',
+        method: 'post',
+        data
+    })
+};
+
+export const register = data => {
+    return axios({
+        url: '/user/activeUser',
+        method: 'post',
+        data
+    })
+};
 // 默认全部倒出
 // 根据需要进行
 export default {
     query,
     mock,
     getComp,
-    getPageData
+    getPageData,
+    login,
+    register
 }

yarn.lock

@@ -5278,6 +5278,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-md5@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
+  integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz"