图形验证码

src/components/page/ProjectPattern.vue

@@ -92,7 +92,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .back_index:hover{
-    // background: #3f7ecc;
     opacity: 0.8;
     cursor: pointer;
 }
@@ -114,17 +113,11 @@ export default {
 .wrap{
     width: 100%;
     height: 100%;
-    // display: flex;
     font-family: '微软雅黑';
 }
 .content_one{
-    // margin-top: 60px;
     width: 100%;
     background: white;
-    // height: 600px;
-    // background: red;
-    
-    
     .content_one_title{
         width: 100%;
         height: 100px;
@@ -143,6 +136,7 @@ export default {
         border-radius: 20px;
         height: 400px;
         overflow: hidden;
+        background-size: 100% 100%;
         background: url('../../assets/img/content.jpg') no-repeat;
     }
 }
@@ -157,15 +151,12 @@ export default {
         letter-spacing:4px;
         box-sizing: border-box;
         font-weight: 550;
-        // border-radius: 0px 20px 20px 0px;
-        // background: white;
         }
     .one_text{
         width: 2300px;
         height: 130px;
         padding: 45px 0px;
         box-sizing: border-box;
-        // background: red;
         font-size: 23px;
         line-height: 2;
         color: #4D4D4F;
@@ -176,14 +167,10 @@ export default {
 
 .pattern_wrap{
     width: 100%;
-    // height: 150px;
-    // background: red;
-    // border-top: 2px solid #FF5288;
     padding: 0px 100px;
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
-    // margin-top: 20px;
     .img_wrap{
         margin-top: 30px;
         width: 500px;
@@ -192,7 +179,6 @@ export default {
         box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
         -webkit-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
         -moz-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
-        // margin-bottom: 10px;
         font-size: 23px;
         color: #FF5288;
         font-weight: 550;
@@ -205,7 +191,6 @@ export default {
         cursor: pointer;
         img{
             opacity: 0.9;
-            
         }
     }
     img{

src/components/page/RegisterForm.vue

@@ -68,19 +68,29 @@
                     <el-input type="password" v-model="regForm.password" placeholder="请输入密码"></el-input>
                 </el-form-item>
                 <el-form-item prop="rePassword">
-                    <el-input type="password" v-model="regForm.rePassword" placeholder="请再次输入密码" @keyup.enter.native="registerForm"></el-input>
+                    <el-input type="password" v-model="regForm.rePassword" placeholder="请再次输入密码"></el-input>
+                </el-form-item>
+            </div>
+            <div class="line">
+                <el-form-item>
+                    <p class="label">*验证码</p>
+                    <el-input  v-model="regForm.validateCode" placeholder="请输入验证码"  @keyup.enter.native="registerForm"></el-input>
+                </el-form-item>
+                <el-form-item>
+                     <img  :src="verifyCode" style="cursor: pointer;" @click="getVerificationCode"  title="看不清？换一张" />
                 </el-form-item>
             </div>
-            
             <el-button class="submit" type="primary" @click="registerForm">注册</el-button>
         </el-form>
     </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
     data: function() {
         return {
+            verifyCode:'',
             regForm: {
                 userName: '',
                 workNumber: '',
@@ -91,7 +101,8 @@ export default {
                 password: '',
                 rePassword: '',
                 roleId: 4,
-                schoolId: 2105
+                schoolId: 2105,
+                validateCode:''
             },
             regRules: {
                 userName: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
@@ -122,8 +133,27 @@ export default {
     mounted() {
         this.getProvince()
         this.getSchoolData()
+        this.getVerificationCode()
     },
     methods: {
+        //获取图形验证码
+        getVerificationCode(){
+            // this.$get(this.api.getValidateCode)
+            axios({
+                url:this.api.getValidateCode,
+                methods:'get',
+                headers: {
+                    "Content-Type": "application/json",
+                    "EngineCode": "j371gy1q1ioeveq2y05l4gjz3",
+                    "EngineSecret": "IgMlZo+KOs8FthII3KnobUoynILH5ELJVqcHNZcs1G2mwrkofR1THw=="
+                },
+                responseType: 'arraybuffer',
+            })
+            .then(res => {
+                const bufferUrl = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+                this.verifyCode = 'data:image/png;base64,' + bufferUrl;
+            }).catch(res => {});
+        },
         getProvince(){
             this.$get(this.api.queryProvince).then(res => {
                 this.provinceList = res.message
@@ -155,12 +185,14 @@ export default {
                     let data = this.regForm
                     data.account = data.phone
                     data.uniqueIdentificationAccount = new Date().getTime()
-                    this.$post(`${this.api.save}?workNumber=${this.regForm.workNumber}`,data).then(res => {
+                    this.$post(`${this.api.save}?workNumber=${this.regForm.workNumber}&validateCode=${this.regForm.validateCode}`,data).then(res => {
                         this.$message.success('注册成功')
                         this.$emit('update:isReg',false)
                         this.$emit('updateInfo',{username: this.regForm.phone,password: this.regForm.password})
                         this.$refs.reg.resetFields()
-                    }).catch(res => {});
+                    }).catch(res => {
+                        // this.$message.error(res)
+                    });
                 } else {
                     // this.$message.error('请输入账号和密码');
                     return false;

src/router/index.js

@@ -9,8 +9,8 @@ export default new Router({
     routes: [
     {
         path: '/',
-        redirect: '/login',
+        // redirect: '/login',
-        // redirect: '/index',
+        redirect: '/index',
     },
     {
         path: '/teachingVideo',

src/utils/api.js

@@ -1,6 +1,7 @@
 // let host = 'http://192.168.31.125:9090'//林
 // let host = 'http://192.168.31.151:9090'//榕
 // let host = 'http://192.168.31.137:9090'//陈
+// let host = 'http://192.168.31.205:9090'//杨
 // let host = 'http://122.9.154.146'
 
 let host = ''
@@ -35,6 +36,7 @@ export default {
   getCoursevideo:`${host}/evaluation/tms/classTech/simulationPlayList`,//开始课程-课程视频 
   queryPersonalCenter:`${host}/evaluation/personalCenter/queryPersonalCenter`,
   getAccessNum:`${host}/evaluation/tms/userInfo/getAccessNum`,//获取项目访问量
+  getValidateCode:`${host}/evaluation/tms/userInfo/getValidateCode`,//获取图形验证码
 
   
   examinePassword:`${host}/evaluation/tms/user/examinePassword`,//更换密码