Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Time:2021-12-22

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Registration page

Registration page regin The code of Vue is similar to the code of the login page, which is to write two verification rules for verification, telephone number and confirmation password
regin. Vue code

<template>
  <el-main>
    <el-form 
      :model="ReginForm"
      ref="ReginForm"
      :rules="rule"
      class="regform"
      label-width="0">

      <h3>User registration</h3>

      <el-form-item prop="username">
        <el-input 
          type="text"
          v-model="ReginForm.username"
          Placeholder = "user name" >
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input 
          type="password"
          v-model="ReginForm.password"
          Placeholder = "password" >
        </el-input>
      </el-form-item>

      <el-form-item prop="confirmpassword">
        <el-input 
          type="password"
          v-model="ReginForm.confirmpassword"
          Placeholder = "confirm password" >
        </el-input>
      </el-form-item>

      <el-form-item prop="email">
        <el-input 
          type="email"
          v-model="ReginForm.email"
          Placeholder = "email" >
        </el-input>
      </el-form-item>

      <el-form-item prop="tel">
        <el-input 
          type="text"
          v-model.number="ReginForm.tel"
          Placeholder = "phone number" >
        </el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input 
          type="text"
          v-model="ReginForm.name"
          Placeholder = "nickname" >
        </el-input>
      </el-form-item>

      <el-form-item >
        <el-button 
          type="success" 
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          register
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          Reset
        </el-button>
        <hr>
        <p>You already have an account, go to < span class = "to" @ Click = "tologin" > to log in < / span ></p>
      </el-form-item>

    </el-form>
  </el-main>
</template>
<script>
export default {
  data () {
    let confirmpasswordCheck = (rule, value, callback) => {
      if (value === '') {
        Return callback (new error ('password is required '))
      } else if (value !== this.ReginForm.password) {
        Return callback (new error ('passwords entered twice are inconsistent '))
      } else {
        return callback()
      }
    }
    let telCheck = (rule, value, callback) => {
      if (value === '') {
        Return callback (new error ('phone number is required '))
      } else if (!Number.isInteger(value)) {
        Return callback (new error ('phone number must be a number '))
      } else if (value.toString().length !== 11) {
        Return callback (new error ('phone number must be 11 digits'))
      } else {
        callback()
      }
    }
    return {
      ReginForm: {
        username: '',
        password: '',
        confirmpassword: '',
        tel: '',
        email: '',
        name: ''
      },
      logining: false,
      rule: {
        username: [
          {
            required: true,
            max: 14,
            min: 7,
            Message: 'user name is required, with a length of 7-14 bits',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            Message: 'password is required!',
            trigger: 'blur'
          }
        ],
        confirmpassword: [
          {
            required: true,
            validator: confirmpasswordCheck,
            trigger: 'blur'
          }
        ],
        tel: [
          {
            required: true,
            validator: telCheck,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            type: 'email',
            Message: 'please enter the correct email format( [email protected] )',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            max: 12,
            min: 2,
            Message: 'nicknames are required, preferably Chinese characters',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // ...
    submit () {
      this.$refs.ReginForm.validate(valid => {
        if (valid) {
          this.logining = true
          console. Log ('Start writing background data! ')
        } else {
          console.log('submit err')
        }
      })
    },
    reset () {
      this.$refs.ReginForm.resetFields()
    },
    tologin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.regform {
  margin: 20px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 10px #B4BCCC;
  padding: 30px 30px 0 30px;
  border-radius: 25px; 
}
.submitBtn {
  width: 65%;
}
.to {
  color: #FA5555;
  cursor: pointer;
}
</style>

Install mongodb

To realize the registration and login function, you must have data. One way is to use mockjs to simulate data, or you can directly use a database. In order to learn more knowledge, I decided to study the database mongodb

1. Download Database, official website address:https://www.mongodb.com/
2. Install database:
Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

The installation is next anyway

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Of course, changing the installation path is also good

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

After installation

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Because mongodb data is generally operated by CMD, it is not suitable for intuitive viewing, so you can use the next mongovue to facilitate your eyes
Address:http://pan.baidu.com/s/1c15QWTy
Installation instructions are provided

3. Start database

Before starting the database, find a place to build a folder to store data, which is generally called data

Then you can start the database
Because mongodb of 3.4 is used, if you use mongovue to view, you will not be able to create collections, that is, the dataset is equivalent to the table of MySQL. After checking a lot of data, it is said that the database engine is different
It is said that this problem is solved in this way

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

So try it first
Mongod — storageengine mmapv1 — dbpath (path of data)

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

It runs like this

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Then go and see the effecthttp://localhost:27017/
This indicates that it is started

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Then open mongovue to test
Create a connection first

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Then it’s like this

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Create a new database learn

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Create a new collection called users in learn

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

succeed

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

It shows that this method is very effective

If it still fails, empty the data in the data first, replace the database with mmapv1 engine, and then repeat the above operation

Vue Vue router vuex element UI Axios learning notes (V) registration page and connection to mongodb

Recommended Today

Processing of time series data in tensorflow window

Processing of tensorflow time series data Data set introduction Data source:Kaggle Ubiquant Market Prediction The dataset describes 300 anonymous features (“f_0” to “f_299”) and one target feature (“target”) of multiple investment projects in a time series. It is required to predict the target characteristics according to the anonymous characteristics of subsequent time nodes. The main goal […]