@[toc]

preface

I haven’t seen pyTorch for a long time. His head is a bit too big, but I’m ok. It is also due to expire recently, so it is just ready to use this Springboot and VUE to refactor the white hole in front of it with Springboot. Of course, to be honest, I haven’t changed the Django version of White Hole, but I’m not giving up on it, as you can see from the picture below.So now I’m going to basically redo the page with vue + Element UI.This page is also made with reference to others. But that’s beside the point. I’ll open source when I get the front end right, this week. It’s not a big problem. The big ones are the back end. Of course, the purpose of this blog post is how to do the login module, this is a front and back separated project, so the verification code and so on are generated by the front end.

Environment to prepare

I here because the machine is still VUE 2, so here is vuE2 development, and mainly good whoring components, after all, not professional front-end. For some reason, THE package management I’m using here is CNPM for no other reason than to not get thunderstruck during installation. Here is a vuex to manage the state, how to install a command things.

Page jump

The reason for logging in is because this is the main thing

Here’s the code (just for that module).

<template>
<div>
  <p>This is a personal space, behind the personal page, personal blog management, channel management are done in this piece, if you can behind a set of visual data display tools.</p>
</div>
</template>

<script>
export default {
  name: "Space".beforeRouteEnter: (to, from, next) = > {
    console.log("Ready for personal information page");
    let islogin = sessionStorage.getItem("isLogin")
    if(! islogin){ next({path:'/login'}); } next(); }},</script>

<style scoped>

</style>

Copy the code

The login page

Let’s take a look at the current project structureSpace is personal space. That’s where I jumped to.

Captcha component

This organization is actually from the Internet to get over the words, many and all called a name.

SIdentify

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>

<script>
export default {
  name: "SIdentify".props: {
    identifyCode: {
      type: String.default: '1234'
    },
    fontSizeMin: {
      type: Number.default: 25
    },
    fontSizeMax: {
      type: Number.default: 30
    },
    backgroundColorMin: {
      type: Number.default: 255
    },
    backgroundColorMax: {
      type: Number.default: 255
    },
    colorMin: {
      type: Number.default: 0
    },
    colorMax: {
      type: Number.default: 160
    },
    lineColorMin: {
      type: Number.default: 100
    },lineColorMax: {
      type: Number.default: 255
    },
    dotColorMin: {
      type: Number.default: 0
    },
    dotColorMax: {
      type: Number.default: 255
    },
    contentWidth: {
      type: Number.default: 112
    },
    contentHeight: {
      type: Number.default: 31}},methods: {
    // Generate a random number
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // Generate a random color
    randomColor(min, max) {
      let r = this.randomNum(min, max)
      let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ', ' + g + ', ' + b + ') '
    },
    drawPic() {
      let canvas = document.getElementById('s-canvas')
      let ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // Draw the background
      ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
      ctx.fillRect(0.0.this.contentWidth, this.contentHeight)
      // Draw text
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-45.45)
      // Change the coordinates origin and rotation Angle
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 180)
      ctx.fillText(txt, 0.0)
      // Restore the coordinates origin and rotation Angle
      ctx.rotate(-deg * Math.PI / 180)
      ctx.translate(-x, -y)
    },
    drawLine(ctx) {
      // Draw interference lines
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0.this.contentWidth), this.randomNum(0.this.contentHeight))
        ctx.lineTo(this.randomNum(0.this.contentWidth), this.randomNum(0.this.contentHeight))
        ctx.stroke()
      }
    },
    drawDot(ctx) {
      // Draw interference points
      for (let i = 0; i < 80; i++) {
        ctx.fillStyle = this.randomColor(0.255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0.this.contentWidth), this.randomNum(0.this.contentHeight), 1.0.2 * Math.PI)
        ctx.fill()
      }
    }
  },
  watch: {
    identifyCode() {
      this.drawPic()
    }
  },
  mounted() {
    this.drawPic()
  }
}
</script>

<style scoped>
.s-canvas {
  height: 38px;

}
.s-canvas canvas{
  margin-top: 1px;
  margin-left: 8px;
}
</style>

Copy the code

You should just copy this and put it in the draft.

Using the component

Now we need to use this component in the login screen.

The introduction of the component

import SIdentify from ".. /components/SIdentify"Copy the code

Just drop the components in where you want them

<div class="login-code" @click="refreshCode"> <! <s-identify :identifyCode="identifyCode"></s-identify> </div>Copy the code

Page using

Just look at the code, which is done directly using element UI.

<template>
<div>
  <el-form :model="formLogin" :rules="rules" ref="ruleForm" label-width="0px" class="login-bok">
    <el-form-item prop="username">
      <el-input v-model="formLogin.username" placeholder="Account">
        <i slot="prepend" class="el-icon-s-custom"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" placeholder="Password" v-model="formLogin.password">
        <i slot="prepend" class="el-icon-lock"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-row :span="24">
        <el-col :span="12">
          <el-input v-model="formLogin.code" auto-complete="off" placeholder="Please enter the verification code." size=""></el-input>
        </el-col>
        <el-col :span="12">
          <div class="login-code" @click="refreshCode">
            <! -- Captcha component -->
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm()" style="margin-left: auto; width: 35%">The login</el-button>
        <el-button type="primary" @click="submitForm()" style="margin-left: 27%; width: 35%" >registered</el-button>
      </div>
    </el-form-item>
  </el-form>


</div>
</template>
Copy the code

The complete code

This is not like other tutorials, the old mystery, style are not given. Here is mainly the page refresh method, verification code verification and so on, and is related to the binding of variables, or more important.

<template>
<div>
  <el-form :model="formLogin" :rules="rules" ref="ruleForm" label-width="0px" class="login-bok">
    <el-form-item prop="username">
      <el-input v-model="formLogin.username" placeholder="Account">
        <i slot="prepend" class="el-icon-s-custom"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" placeholder="Password" v-model="formLogin.password">
        <i slot="prepend" class="el-icon-lock"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-row :span="24">
        <el-col :span="12">
          <el-input v-model="formLogin.code" auto-complete="off" placeholder="Please enter the verification code." size=""></el-input>
        </el-col>
        <el-col :span="12">
          <div class="login-code" @click="refreshCode">
            <! -- Captcha component -->
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm()" style="margin-left: auto; width: 35%">The login</el-button>
        <el-button type="primary" @click="submitForm()" style="margin-left: 27%; width: 35%" >registered</el-button>
      </div>
    </el-form-item>
  </el-form>


</div>
</template>

<script>
import SIdentify from ".. /components/SIdentify"

export default {
  name: "login".components: { SIdentify },
  data() {
    return{
      formLogin: {
        username: "".password: "".code: ""
      },
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz'.// random string content
      identifyCode: ' './ / check
      rules: {
        username: [{required: true.message: "Please enter user name".trigger: "blur"}].password: [{ required: true.message: "Please enter your password".trigger: "blur"}].code: [{ required: true.message: "Please enter the verification code.".trigger: "blur" }]
      }

    }
  },
  mounted () {
    // Initializes the verification code
    this.identifyCode = ' '
    this.makeCode(this.identifyCodes, 4)},methods:{
    refreshCode () {
      this.identifyCode = ' '
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0.this.identifyCodes.length)]
      }
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    submitForm(){
      this.$router.push("/space")
      sessionStorage.setItem("isLogin".true)
      // if (this.formLogin.code.toLowerCase() ! == this.identifyCode.toLowerCase()) {
      // this.$message.error(' Please fill in the correct verification code ')
      // this.refreshCode()
      //
      // }
      // else {
      // // here after a submission, server verification, after passing the token
      // console.log("code is right")
      // console.log(this.formLogin.password)
      // console.log(this.formLogin.username)
      // }}}},</script>

<style scoped>
.login-bok{
  width: 30%;

  margin: 150px auto;
  border: 1px solid #DCDFE6;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 30px #DCDFE6;
}
</style>
Copy the code

You can copy it directly here, but change your own route. The effect is as follows:

It could also look like. The following login module is also similar. When verifying, send a request from Axious to verify that the account password is correct and then give a token.