Implementierung der Anmelde- und Registrierungsfunktion von Vue project 2

プログラミング 2023-05-04 23:37:07 訪問数: null

Tipp: Nachdem der Artikel geschrieben wurde, kann das Inhaltsverzeichnis automatisch generiert werden, wie es erstellt wird, können Sie dem Hilfedokument auf der rechten Seite entnehmen

Artikelverzeichnis

Vorwort

Nachdem die Umgebung eingerichtet wurde, implementiert dieses Kapitel entsprechend den Anforderungen der Benutzer des Verwaltungssystems, sich zu registrieren, die Anmeldung zu realisieren und Benutzerinformationen lokal zu speichern, hauptsächlich die Anmelde- und Registrierungsfunktion des Systems.

1. Realisierung der Systemregistrierungsfunktion

Bildbeschreibung hier einfügen
Analysieren Sie zunächst die Funktionen, die auf der Registrierungsseite realisiert werden sollen, darunter Kontonummer, Nickname, Passwort und sekundäres Bestätigungspasswort. Die Kontonummer und der Spitzname dürfen nicht leer sein, und das Passwort und das Bestätigungspasswort müssen identisch sein.
Beim Erstellen der gesamten Registerseite müssen wir die ELementUI-Komponentenbibliothek verwenden. Bevor wir die Registrierungsseite schreiben, müssen wir home.vue und about.vue unter Ansichten löschen und den Router-Link-Sprung in App.vue löschen

1. Konfigurieren Sie das Routing der Registrierungsseite

Löschen Sie in src/router/index.js zuerst die Home- und About-Routen, die mit dem erstellten Projekt geliefert werden, und konfigurieren Sie die Registrierungsroute in den Routen. Erstellen Sie dann einen Registerordner unter Ansichten und erstellen Sie index.vue unter dem Registerordner. Schließlich importieren wir die Registrierungsseite durch Import in src/router/index.js, (beachten Sie, dass die Routing-Methode auskommentiert werden muss, Modus: "history").

import Vue from "vue";
import VueRouter from "vue-router";
import Register from "../views/register";
Vue.use(VueRouter);
const routes = [
  {
    path: "/register",
    name: "register",
    component: Register,
  },
];

const router = new VueRouter({
  // mode: "history",
  base: process.env.BASE_URL,
  routes,
});
export default router;

2. Aufbau der Registrierungsseite

Die Registrierungsseite verwendet die benutzerdefinierten Validierungsregeln des Formularformulars in der ElementUI-Komponentenbibliothek.
Elementui-Formularlink
Wählen Sie das Formularformular in Elementui aus und erstellen Sie die Kontonummer, den Spitznamen, das Passwort und das Bestätigungspasswort, die wir benötigen. Übergeben Sie dann den in ruleForm enthaltenen Prop-Wert in der Rückgabefunktion von data.Da die Kontonummer und der Spitzname nicht leer sind, übergeben wir die Überprüfungsregel durch Formularüberprüfung.Das Hinzufügen eines Sternchens vor der Regel auf der Seite zeigt an, dass die Einrichtung ist erfolgreich. Für die sekundäre Überprüfung des Passworts können wir validatePass und validatePass2 zur Überprüfung einrichten. Übermitteln Sie abschließend die von uns übermittelten Daten zur Verifizierung.

<template>
  <div class="register-container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="register-ruleForm"
    >
      <h2 class="register-title">注册</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="goLogin('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from "@/api/login.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        nickname: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  components: {},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          } 
    });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

3. Dateierstellung zum Senden von Ajax-Anforderungen unter API

Hier erstellen wir eine neue login.js-Datei, um eine Ajax-Anfrage zu senden, um die von der Vordergrundüberprüfung übermittelten Daten (Benutzername, Spitzname, Passwort) zu übergeben und ein asynchrones Objekt (Anfrage) zu erhalten, das vom Hintergrund als Antwort auf die Vordergrunddaten erhalten wird. die wir in index.vue unter register importieren können Verwenden Sie die axios-Methode (register), um das asynchrone Objekt der Hintergrundantwort zu erhalten.

import request from "@/utils/request.js";

// 注册
export function register(username,nickname,password){ //这里的参数都是形参
    return request({
        method:"post",
        url:"/user/register",
        data:{ //需要向后台传输的数据是req，后台又会响应回来一个数据是res
            username,
            nickname,
            password
        }
    })
}

Zweitens die Erstellung von Hintergrunddatendiensten

Im Hintergrund müssen wir die Schnittstelle so konfigurieren, dass sie die gespeicherten Daten in der Datenbank akzeptiert und die Daten über die Schnittstelle an die Titelseite zurückgibt.Installieren Sie zuerst package.json über npm init -y.Wir verwenden express, mongoose, md5 und Body-Parse hier.
Der Installationsbefehl lautet

npm i express blueimp-md5 body-parse [email protected]

1. Die Einrichtung der app.js-Datei

Der Code lautet wie folgt: Importieren Sie die Komponenten, die verwendet werden müssen

var express = require("express");
var bodyParser = require("body-parser");
var path = require("path");
var router = require("./router.js")
var app=express();

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// 开发资源
app.use("./node_modules",express.static(path.join(__dirname,"./node_modules/")))
app.use(router);
app.listen(3000,function(){
    console.log("running....");
})

2. Die Einrichtung der User.js-Datei

Hier wird die Mongoose-Datenbank verwendet, und wir erstellen das Regelobjekt der Datenbank.

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/msmstu');
//定义一个规则对象
var Schema = mongoose.Schema;
var userSchema = new Schema({
    username:{
        type:String,
        required:true
    },
    password:{
        type:String,
        required:true
    },
    nickname:{
        type:String,
        required:true
    },
    token:{
        type:String,
        required:true
    }
});
module.exports = mongoose.model('KeLi', userSchema);

3. Konfigurieren Sie die Routing-Datei der Backend-Schnittstelle (router.js)

var express = require("express");
var md5 = require("blueimp-md5");
var User = require("./User.js")
var router = express.Router()
// 注册
router.post("/user/register",function(req,res){
    var body = req.body; //req里面包含的就是我们前台传递过来的数据
    // console.log(body);
    // res.send("666")
    User.find({  //这里查询的是数据库中数据，find是mongoose中的方法
        $or:[
            {
                username:body.username
            },
            {
                nickname:body.nickname
            }
        ]
    },function(err,data){
        // console.log("data1"+data);
        if(err){
            return res.status(500).json({
                code:3000,
                flag:false,
                message:"serve error",
            })
        }
        if(data.length !== 0){ //说明数据库中已有该数据
            return res.status(200).json({
                code:4000,
                flag:false,
                message:"账号或昵称已存在"
            })
        }
        body.token = md5(md5(body.username)+"KeLi"); //设置一个token存入数据库中
        new User(body).save(function(err,data){  //这里是新建User表对象用于存储body数据
            // console.log("data2"+data);
            if(err){
                return res.status(500).json({
                    code:3000,
                    flag:false,
                    message:"存储失败",
                })
            }
            return res.status(200).json({
                code:2000,
                flag:true,
                message:"注册成功"
            })
        })
    })
})

Hier ist die Implementierung der Registrierungsfunktion, die Registrierung verwendet post, um Daten zu übertragen, der Pfad ist /user/register, wobei body der Körper ist, der auf req antwortet (Daten, die von der Rezeption übergeben werden), User.find soll die Datenbank aufrufen und verwenden Sie dann die find-Methode, um den Benutzernamen oder Spitznamen darunter zu finden Dann verschlüsseln wir die registrierte und erstellen dann eine neue Benutzertabelle zum Speichern des Objekts.
router.js

var express = require("express");
var md5 = require("blueimp-md5");
var User = require("./User.js")
var router = express.Router()

// 注册
router.post("/user/register",function(req,res){
    var body = req.body; //req里面包含的就是我们前台传递过来的数据
    // console.log(body);
    // res.send("666")
    User.find({  //这里查询的是数据库中数据，find是mongoose中的方法
        $or:[
            {
                username:body.username
            },
            {
                nickname:body.nickname
            }
        ]
    },function(err,data){
        // console.log("data1"+data);
        if(err){
            return res.status(500).json({
                code:3000,
                flag:false,
                message:"serve error",
            })
        }
        if(data.length !== 0){ //说明数据库中已有该数据
            return res.status(200).json({
                code:4000,
                flag:false,
                message:"账号或昵称已存在"
            })
        }
        body.token = md5(md5(body.username)+"KeLi"); //设置一个token存入数据库中
        new User(body).save(function(err,data){  //这里是新建User表对象用于存储body数据
            // console.log("data2"+data);
            if(err){
                return res.status(500).json({
                    code:3000,
                    flag:false,
                    message:"存储失败",
                })
            }
            return res.status(200).json({
                code:2000,
                flag:true,
                message:"注册成功"
            })
        })
    })
})

4. Front-End-Registeraufrufmethode

Wir rufen die von login.js gekapselte register-Methode unter der api in der index.vue von register auf, um das asynchrone Objekt der Hintergrundantwort zu erhalten. Rufen Sie über das erhaltene asynchrone Objekt die Methode zum Abrufen des asynchronen Objekts auf und übergeben Sie den Parameter (this.ruleForm.Benutzername , this.ruleForm.Spitzname, this.ruleForm.pass). Setzen Sie einen Wert bzw. erhalten Sie response.data. Bestimmen Sie, ob der boolesche Wert des Flag-Werts auf resp wahr ist. Wenn wahr, ist die Registrierung erfolgreich und die Seite springt zur Anmeldeseite, andernfalls wird eine Warnung angezeigt.
Legen Sie eine goLogin-Methode auf der Anmeldeschaltfläche fest. Zum Auslösen klicken.
Code zeigen wie unten

<template>
  <div class="register-container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="register-ruleForm"
    >
      <h2 class="register-title">注册</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="goLogin('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { register } from "@/api/login.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        nickname: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          // 调用方法发送ajax请求
          register(
            this.ruleForm.username,
            this.ruleForm.nickname,
            this.ruleForm.pass
          ).then((response) => {
            // console.log(response.data);
            // 这里的逻辑是如果在后台的数据库中注册成功的话，通过flag的布尔值来判断是否进入登录页面
            const resp = response.data;
            if (resp.flag) {
              // 调转到登录界面
              this.$router.push("/login")
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }

      });
    },
    goLogin(){
      // 跳转到登录页面，使用的时编程式的登陆跳转方法
      this.$router.push("/login")
    }
  },
};
</script>
<style scoped>
.register-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../assets/bgu.gif");
  background-size: cover;
}
.register-ruleForm {
  width: 400px;
  height: 500px;
  margin: 150px auto;
  padding: 20px;
  background-color: aquamarine;
  border-radius: 20px;
}
.register-title {
  text-align: center;
  background-color: rgb(55, 0, 255);
}
</style>

Beachten Sie, dass VUE_APP_SERVICE_URL = 'http://localhost:3000' von .env.development durch Port 3000 ersetzt werden muss, der dem Backend entspricht.

5. Realisierung der Front-End-Login-Funktion

Login implementiert hauptsächlich die Benutzeranmeldung und nach erfolgreicher Anmeldung werden die Informationen des Benutzers abgerufen und lokal gespeichert. Die
Logik ist im Grunde ähnlich wie bei der Registrierung. Konfigurieren Sie zuerst das Routing in index.js unter Router, erstellen Sie dann eine Anmeldeseite und konfigurieren Sie dann Api.js in login.js Die Datei wird verwendet, um Ajax-Anfragen zu senden und asynchrone Objekte zu erhalten und schließlich die Anmeldeschnittstelle in der router.js des Hintergrunddienstes zu konfigurieren.

5.1 Frontend-Anmeldung

index.js-Konfigurationsrouting unter Router

const routes = [
  {
    path: "/register",
    name: "register",
    component: Register,
  },
  {
    path: "/login",
    name: "login",
    component: Login,
  },
];

Um eine Anmeldeseite zu erstellen, erfordert die Anmeldeseite eine Kontonummer und ein Passwort. Die Gebäudeseite verwendet das Form-Formular von ElementUI wie die Registrierung. (Beachten Sie, dass sich die Überprüfungsregeln des Passworts hier von denen der Registrierung unterscheiden und nur die Regel implementieren, dass das Passwort nicht leer ist.)

<template>
  <div class="login-container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="login-ruleForm"
    >
      <h2 class="login-title">登录</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="goRegister('ruleForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//import { login, getUserInfo } from "@/api/login.js";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        pass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
                }
              });
            } 
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goRegister() {
      // 跳转到注册页面，使用的时编程式的登陆跳转方法
      this.$router.push("/register");
    },
  },
};
</script>
<style scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../assets/bgu.gif");
  background-size: cover;
}
.login-ruleForm {
  width: 400px;
  height: 500px;
  margin: 150px auto;
  padding: 20px;
  background-color: aquamarine;
  border-radius: 20px;
}
.login-title {
  text-align: center;
  background-color: rgb(55, 0, 255);
}
</style>

Senden Sie die Login-Ajax-Anforderung in der Datei login.js unter api.

// 登录
export function login(username,password){
    return request({
        method:"post",
        url:"/user/login",
        data:{
            username,
            password
        }
    })
}

Der Backend-Dienst konfiguriert die Anmeldeschnittstelle in router.js

router.post("/user/login",function(req,res){
    var body = req.body;
    console.log(body);
    User.findOne({
        username:body.username,
        password:body.password
    },function(err,data){
        if(err){
            return res.status(500).json({
                code:3000,
                flag:false,
                message:"serve error登录失败",
            })
        }
        if(!data){
            return res.status(200).json({
                code:4000,
                flag:false,
                message:"账号或密码不存在"
            }) 
        }
        return res.status(200).json({
            "code":2000,
            "flag":true,
            "message":"登录成功",
            "data":{
                token:data.token
            }
        })
    })
});

Hier ist die Implementierung der Login-Backend-Schnittstelle, und die Post-Schnittstelle wird hier verwendet. Der Pfadwert ist /user/login, und der Hauptteil wird abgerufen.Verwenden Sie die findOne-Methode der Benutzer-Benutzertabelle.Der Unterschied hier besteht darin, dass sowohl der Benutzername als auch das Passwort hier abgerufen werden und dann je nachdem, ob ein vorhanden ist, err zurückgegeben wird error, ob Daten vorhanden sind, um festzustellen, ob die Daten vorhanden sind, und schließlich, wenn die Daten erfolgreich übereinstimmen, "Daten" zurückgeben, die ein Token passieren müssen.

//登录
router.post("/user/login",function(req,res){
    var body = req.body;
    console.log(body);
    User.findOne({
        username:body.username,
        password:body.password
    },function(err,data){
        if(err){
            return res.status(500).json({
                code:3000,
                flag:false,
                message:"serve error登录失败",
            })
        }
        if(!data){
            return res.status(200).json({
                code:4000,
                flag:false,
                message:"账号或密码不存在"
            }) 
        }
        return res.status(200).json({
            "code":2000,
            "flag":true,
            "message":"登录成功",
            "data":{
                token:data.token
            }
        })
    })
});

Kehren Sie unter der Front-End-Anmeldung zu index.vue zurück, um die Anmeldemethode zu importieren, und rufen Sie diese Methode auf, um festzustellen, ob die Anmeldung erfolgreich ist.

submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.ruleForm.username, this.ruleForm.pass).then((response) => {
            const resp = response.data;
            if (resp.flag) {
           
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goRegister() {
      // 跳转到注册页面，使用的时编程式的登陆跳转方法
      this.$router.push("/register");
    },
  },
};

5.2 Abrufen von Benutzerinformationen nach erfolgreicher Überprüfung der Front-End-Anmeldung

Rufen Sie Benutzerinformationen in der Backend-Konfiguration ab

router.get("/user/info",function (req,res) {
    var body = req.query;
    console.log(body);
    User.findOne({
        token: body.token

    }, function (err, data) {
        console.log(data);
        if (err) {
            return res.status(500).json({
                code: 3000,
                flag: false,
                message: "server error"
            })
        }
        if (!data) {
            return res.status(200).json({
                code: 4000,
                flag: false,
                message: "token不存在"
            })
        }
        return res.json({
            "code": 2000,
            "flag": true,
            "message": "成功获取用户信息",
            "data": {
                "nickname": data.nickname,
                "id":data._id
            }
        })
    })
});

Die get-Methode wird hier verwendet, um die Abfrageinformationen von req zu erhalten, und der Tokenwert, den wir zuvor in der Anmeldeschnittstelle festgelegt haben, wird über die findOne-Methode von User gefunden. Beurteilen Sie dann, ob die Benutzerinformationen erfolgreich abgerufen wurden, und übergeben Sie zwei Werte für Spitzname und ID in den Benutzerinformationen.
Gehen Sie als Nächstes zu login.js unter der API auf der Front-End-Seite, um Axios zum Abrufen von Benutzerinformationen zu konfigurieren

//获取用户信息
export function getUserInfo(token){
    return request({
        method:"get",
        url:`/user/info?token=${token}`,
    })
}

Importieren Sie dann die Methode in index.vue unter logn unter Ansichten.
Übergeben Sie nach erfolgreicher Anmeldung die Antwortdaten über getUserInfo an respUser.Speichern Sie nach erfolgreichem Abrufen der Benutzerinformationen die Benutzerinformationen lokal und stellen Sie sie so ein, dass sie in das Stammverzeichnis der Homepage springen.

import { login, getUserInfo } from "@/api/login.js";

methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.ruleForm.username, this.ruleForm.pass).then((response) => {
            const resp = response.data;
            if (resp.flag) {
              //登录成功则获取用户信息
              getUserInfo(resp.data.token).then((response) => {
                const respUser = response.data;
                console.log(respUser);
                if (respUser.flag) {
                    localStorage.setItem("msm-user",JSON.stringify(respUser.data));
                    localStorage.setItem("msm-token",resp.data.token)
                    this.$router.push("/")
                } else {
                  this.$message({
                    message: respUser.message,
                    type: "warning",
                  });
                }
              });
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goRegister() {
      // 跳转到注册页面，使用的时编程式的登陆跳转方法
      this.$router.push("/register");
    },
  },
};

Zusammenfassen

Dieses Kapitel implementiert hauptsächlich die Registrierung und Anmeldung von Benutzern. Rufen Sie nach erfolgreichem Anmeldeabgleich Benutzerinformationen ab und speichern Sie die Informationen lokal. Die Gesamtseite wird mithilfe der ElementUI-Komponentenbibliothek erstellt.
login.js unter api

//用于发送ajax请求
import request from "@/utils/request.js";

// 注册
export function register(username,nickname,password){ //这里的参数都是形参
    return request({
        method:"post",
        url:"/user/register",
        data:{ //需要向后台传输的数据是req，后台又会响应回来一个数据是res
            username,
            nickname,
            password
        }
    })
}

// 登录
export function login(username,password){
    return request({
        method:"post",
        url:"/user/login",
        data:{
            username,
            password
        }
    })
}

//获取用户信息
export function getUserInfo(token){
    return request({
        method:"get",
        url:`/user/info?token=${token}`,
    })
}

index.js unter Router

import Vue from "vue";
import VueRouter from "vue-router";
// import Register from "../views/register"
import Register from "../views/register";
import Login from "../views/login"

Vue.use(VueRouter);

const routes = [
  {
    path: "/register",
    name: "register",
    component: Register,
  },
  {
    path: "/login",
    name: "login",
    component: Login,
  },
];

const router = new VueRouter({
  // mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

views/login/index.vue

<template>
  <div class="login-container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="login-ruleForm"
    >
      <h2 class="login-title">登录</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="goRegister('ruleForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login, getUserInfo } from "@/api/login.js";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        pass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      },
    };
  },

  components: {},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.ruleForm.username, this.ruleForm.pass).then((response) => {
            const resp = response.data;
            if (resp.flag) {
              //登录成功则获取用户信息
              getUserInfo(resp.data.token).then((response) => {
                const respUser = response.data;
                console.log(respUser);
                if (respUser.flag) {
                    localStorage.setItem("msm-user",JSON.stringify(respUser.data));
                    localStorage.setItem("msm-token",resp.data.token)
                    this.$router.push("/")
                } else {
                  this.$message({
                    message: respUser.message,
                    type: "warning",
                  });
                }
              });
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goRegister() {
      // 跳转到注册页面，使用的时编程式的登陆跳转方法
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../assets/bgu.gif");
  background-size: cover;
}
.login-ruleForm {
  width: 400px;
  height: 500px;
  margin: 150px auto;
  padding: 20px;
  background-color: aquamarine;
  border-radius: 20px;
}
.login-title {
  text-align: center;
  background-color: rgb(55, 0, 255);
}
</style>

views/register/index.vue

<template>
  <div class="register-container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="register-ruleForm"
    >
      <h2 class="register-title">注册</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="goLogin('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from "@/api/login.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        nickname: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  components: {},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          // 调用方法发送ajax请求
          register(
            this.ruleForm.username,
            this.ruleForm.nickname,
            this.ruleForm.pass
          ).then((response) => {
            // console.log(response.data);
            // 这里的逻辑是如果在后台的数据库中注册成功的话，通过flag的布尔值来判断是否进入登录页面
            const resp = response.data;
            if (resp.flag) {
              // 调转到登录界面
              this.$router.push("/login")
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }

      });
    },
    goLogin(){
      // 跳转到登录页面，使用的时编程式的登陆跳转方法
      this.$router.push("/login")
    }
  },
};
</script>

<style scoped>
.register-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../assets/bgu.gif");
  background-size: cover;
}
.register-ruleForm {
  width: 400px;
  height: 500px;
  margin: 150px auto;
  padding: 20px;
  background-color: aquamarine;
  border-radius: 20px;
}
.register-title {
  text-align: center;
  background-color: rgb(55, 0, 255);
}
</style>

Registrierungsseite
Loginseite

おすすめ

転載: blog.csdn.net/qq_49375885/article/details/125284421
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com