【项目实战】登录与注册业务的实现（前端+后端+数据库）

谁践踏了优雅 2023-09-28 11:34 6阅读 0赞

本示例基于Vue.js和mint UI实现。

--------------------

**目录**

一、数据库的创建

二、后端接口与数据库的连接

三、前端代码实现

1.注册页相关代码

2.注册页效果

3.登录页相关代码

4.登录页效果

四、注册登录演示

五、项目文件结构

--------------------

## 一、数据库的创建 ##

此处以Navicat软件进行创建，新建数据库reg\_log.sql与数据表reg\_log；

为了实现注册业务，我们在数据库中设计ID、用户名、密码、邮箱、电话号5个字段。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16][]

创建结束后保存，便可以在数据库中找到我们刚刚创建的数据库和空表。这样就可以在项目中进行连接了。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## \*\*二、\*\*后端接口与数据库的连接 ##

server文件夹 -> app.js

// 加载Express模块
    const express = require('express');
    
    // 加载MySQL模块
    const mysql = require('mysql');
    
    // 加载bodyParser模块
    const bodyParser = require('body-parser');
    
    // 加载MD5模块
    const md5 = require('md5');
    
    // 创建MySQL连接池
    const pool = mysql.createPool({
      host: '127.0.0.1', //MySQL服务器地址
      port: 3306, //MySQL服务器端口号
      user: 'root', //数据库用户的用户名
      password: '', //数据库用户密码
      database: 'reg_log', //数据库名称
      connectionLimit: 20, //最大连接数
      charset: 'utf8' //数据库服务器的编码方式
    });
    
    // 创建服务器对象
    const server = express();
    
    server.use(bodyParser.urlencoded({
      extended: false
    }));
    
    
    // 加载CORS模块
    const cors = require('cors');
    
    // 使用CORS中间件
    server.use(cors({
      origin: ['http://localhost:8080', 'http://127.0.0.1:8080']
    }));
    
    //用户注册接口
    server.post('/register', (req, res) => {
      //console.log(md5('12345678'));
      // 获取用户名和密码信息
      let username = req.body.username;
      let password = req.body.password;
      //以username为条件进行查找操作，以保证用户名的唯一性
      let sql = 'SELECT COUNT(id) AS count FROM reg_log WHERE username=?';
      pool.query(sql, [username], (error, results) => {
        if (error) throw error;
        let count = results[0].count;
        if (count == 0) {
          // 将用户的相关信息插入到数据表
          sql = 'INSERT reg_log(username,password) VALUES(?,MD5(?))';
          pool.query(sql, [username, password], (error, results) => {
            if (error) throw error;
            res.send({
              message: 'ok',
              code: 200
            });
          })
        } else {
          res.send({
            message: 'user exists',
            code: 201
          });
        }
      });
    });
    
    // 用户登录接口
    server.post('/login', (req, res) => {
      //获取用户名和密码信息
      let username = req.body.username;
      let password = req.body.password;
      // SQL语句
      let sql = 'SELECT id,username FROM reg_log WHERE username=? AND password=MD5(?)';
      pool.query(sql, [username, password], (error, results) => {
        if (error) throw error;
        if (results.length == 0) { //登录失败
          res.send({
            message: 'login failed',
            code: 201
          });
        } else { //登录成功
          res.send({
            message: 'ok',
            code: 200,
            result: results[0]
          });
        }
      });
    
    });
    
    // 指定服务器对象监听的端口号
    server.listen(3000, () => {
      console.log('server is running...');
    });

## \*\*三、\*\*前端代码实现 ##

### 1.注册页相关代码 ###

项目文件夹 -> Register.vue

<template>
    
      <div class="reg">
        <mt-header title="用户注册">
          <router-link slot="left" to="/"> 返回首页 </router-link>
          <router-link to="/login" slot="right">去登录</router-link>
        </mt-header>
        <mt-field
          type="text"
          label="用户名"
          placeholder="请输入用户名"
          v-model="name"
          :state="nameState"
          @blur.native.capture="checkName"></mt-field>
          
        <mt-field
          type="password"
          label="密码"
          placeholder="请输入密码"
          v-model="pwd"
          :state="pwdState"
          @blur.native.capture="checkPwd"></mt-field>
        <mt-field
          type="password"
          label="确认密码"
          placeholder="再次输入密码"
          v-model="repwd"
          :state="repwdState"
          @blur.native.capture="checkrePwd"></mt-field>
        <mt-field
          label="邮箱"
          placeholder="请输入邮箱"
          type="email"
          v-model="email"
          :state="emailState"
          @blur.native.capture="checkEmail"></mt-field>
        <mt-field
          label="手机号"
          placeholder="请输入手机号"
          type="tel"
          v-model="phone"
          :state="phoneState"
          @blur.native.capture="checkPhone"></mt-field>
        <mt-field
          label="生日"
          placeholder="请输入生日"
          type="date"
          v-model="birthday"></mt-field>
        <mt-button class="btn" type="primary" size="large" @click="checkForm">注册</mt-button>
      </div>
    </template>
    
    <style scope>
    .reg .btn {
      background-color: #d86931;
      width: 190px;
      border-radius: 0;
      border: 0;
      margin: auto;
    }
    .reg .mint-cell-wrapper {
      line-height: 80px;
    }
    .reg {
      margin-top: 14%;
    }
    
    .reg .mint-header {
      background-color: #d86931;
    }
    .reg .btn {
      background-color: #d86931;
    }
    </style>
    
    <script>
    export default {
      data() {
        return {
          name: "", //双向数据绑定 用户名输入框
          nameState: "", //处理用户名输入框的动态更新
          pwd: "",
          pwdState: "",
          repwd: "",
          repwdState: "",
          email: "",
          emailState: "",
          phone: "",
          phoneState: "",
          birthday: "",
        };
      },
      methods: {
        // 封装各个字段的验证方法：
        // 1.验证用户名
        checkName() {
          //事件处理函数：处理点击按钮验证表单
          let reg = /^[a-zA-Z0-9一-龥]{2,6}$/;
          if (reg.test(this.name)) {
            this.nameState = "success";
            return true;
          } else {
            this.nameState = "error";
            return false;
          }
        },
        // 2.验证密码
        checkPwd() {
          let reg = /^d{6}$/;
          if (reg.test(this.pwd)) {
            this.pwdState = "success";
            return true;
          } else {
            this.pwdState = "error";
            return false;
          }
        },
        // 3.重复输入密码
        checkrePwd() {
          let reg = /^d{6}$/;
          if (reg.test(this.repwd) && this.pwd == this.repwd) {
            this.repwdState = "success";
            return true;
          } else {
            this.repwdState = "error";
            return false;
          }
        },
        // 4.验证邮箱格式
        checkEmail() {
          let reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
          if (reg.test(this.email)) {
            this.emailState = "success";
            return true;
          } else {
            this.emailState = "error";
            return false;
          }
        },
        // 5.验证手机号
        checkPhone() {
          let reg = /^1[3|5|7|8][0-9]d{8}$/;
          if (reg.test(this.phone)) {
            this.phoneState = "success";
            return true;
          } else {
            this.phoneState = "error";
            return false;
          }
        },
    
        checkForm() {
          // 点击注册按钮后调用此方法，验证用户名、密码、二次密码是否均正确，正确则发送axios请求
          if (this.checkName() && this.checkPwd() && this.checkrePwd()) {
            console.log(`验证成功，执行注册业务......`);
            // 发送注册(post)请求
            this.axios
              .post("/register", `username=${this.name}&password=${this.pwd}`)
              .then((result) => {
                console.log(result);
                if (result.data.code == 200) {
                  // 弹窗提示注册成功
                  this.$toast({
                    message: "注册成功",
                    position: "bottom",
                    duration: 3000,
                  });
                  // 注册成功后直接跳转到登录页
                  this.$router.push("/login");
                } else if (result.data.code == 201) {
                  this.$toast({
                    message: "用户已存在，请重新注册",
                    position: "bottom",
                    duration: 3000,
                  });
                }
              });
          }
        },
      },
    };
    </script>

### 2.注册页效果 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

### 3.登录页相关代码 ###

项目文件夹 -> Login.vue

<template>
    
      <div class="log">
        <span class="login">请登录</span>
        <span class="reg">
          <router-link to="/register">先去注册</router-link>
        </span>
        
        <mt-field
          type="text"
          label="用户名"
          placeholder="请输入用户名"
          v-model="name"
          :state="nameState"
          @blur.native.capture="checkName"></mt-field>
        <mt-field
          type="password"
          label="密码"
          placeholder="请输入密码"
          v-model="pwd"
          :state="pwdState"
          @blur.native.capture="checkPwd"></mt-field>
        <hr style="width: 85%" />
        <mt-button class="btn" type="primary" size="large" @click="checkForm">登录</mt-button>
      </div>
    </template>
    
    <style scoped>
    .log .reg {
      font-size: 18px;
    }
    .log .login {
      font-size: 24px;
      font-family: "楷体";
      font-weight: 700;
      margin-left: 5px;
      margin-right: 210px;
      line-height: 80px;
    }
    .log {
      margin-top: 20%;
    }
    .log .btn {
      background-color: #d86931;
      width: 190px;
      border-radius: 0;
      border: 0;
      margin: auto;
    }
    .log .btn1 {
      background-color: white;
      border: 2px solid #d86931;
      color: #d86931;
      width: 190px;
      margin: auto;
      margin-top: 30px;
    }
    </style>>
    
    <script>
    export default {
      namespaced: true,
      data() {
        return {
          name: "", //双向数据绑定 用户名输入框
          nameState: "", //处理用户名输入框的动态更新
          pwd: "",
          pwdState: "",
        };
      },
      methods: {
        // 封装验证方法：
        // 1.验证用户名
        checkName() {
          //事件处理函数：处理点击按钮验证表单
          let reg = /^[a-zA-Z0-9一-龥]{2,6}$/; //2-6位的数字、字母、汉字
          if (reg.test(this.name)) {
            this.nameState = "success";
            return true;
          } else {
            this.nameState = "error";
            return false;
          }
        },
        // 2.验证密码
        checkPwd() {
          let reg = /^d{6}$/;
          if (reg.test(this.pwd)) {
            this.pwdState = "success";
            return true;
          } else {
            this.pwdState = "error";
            return false;
          }
        },
    
        checkForm() {
          // 点击登录按钮后调用此方法，同时验证用户名和密码
          if (this.checkName() && this.checkPwd()) {
            // 发送登录(post)请求
            this.axios
              .post("/login", `username=${this.name}&password=${this.pwd}`)
              .then((result) => {
                console.log(result);
                if (result.data.code == 200) {
                  // 弹窗提示登录成功
                  this.$toast({
                    message: `欢迎您 ${this.name}`,
                    position: "bottom",
                    duration: 3000,
                  });
                  // 修改vuex中用户登录状态
                  this.$store.commit("loginok", this.name);
                  // 将islogin与username存入sessionStorage
                  sessionStorage.setItem("islogin", true);
                  sessionStorage.setItem("username", this.name);
                  // 登录成功后直接跳转到首页
                  this.$router.push("/club");
                } else {
                  this.$toast({
                    message: "登录失败，请检查您的用户名和密码",
                    position: "bottom",
                    duration: 3000,
                  });
                }
              });
          }
        },
      },
    };
    </script>

### 4.登录页效果 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

## 四、注册登录演示 ##

按正则要求输入用户信息。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

注册成功后弹窗显示并且跳转至登录页。 进行登录：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

登录成功。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

## 五、项目文件结构 ##

因为登陆注册业务需要使用到接口并调用数据库，所以需要两个文件夹，一个是项目文件夹，作为前端；一个是server文件夹，作为后端，且这两个文件夹都需要下载 node\_modules 包并单独启动；

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16][]

各模块的加载、连接池的创建以及接口写于 server 下的 app.js 文件，启动时使用命令 **node app.js；**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

而前端的页面就正常在你的项目文件夹中书写，启动时使用命令 **npm run serve；**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ec9966b5bdd0436bb6f3d532aaf38916.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1b5ec330c33f4efe987e4f851647ae4c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ecae6cdeef5b4f5c85f854765b4255d2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/e9a09a267dde4f08afd0a39bcc0a700d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/8d7c7d846e984923aa8c78e526f182a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/e9ccc50b70324e1db0bc50f10c7a46a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/a620c794390442789edce88cc1b04ef6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0893e46528ee48679cca97d416930a29.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ca3b916f2801492dbcd67f79eb069940.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YmN56uv5bCP6ams_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/42850dbff01944868c8a193590b37219.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6ams,size_20,color_FFFFFF,t_70,g_se,x_16