注册

1. 注册演示

注册

⬇️注册返回数据⬇️

{}

2. 实现方式

2.1. 前端实现

1. 判断开发环境 import.meta.env.DEV
2. 调用注册接口 fetch(`${baseUrl}/users/register`, { ... })
3. 展示注册结果 resultRegister.value = result

vue-script

<script setup>
import { ref, reactive } from "vue";
const baseUrl = import.meta.env.DEV
  ? "http://localhost:13000"
  : "https://zichin.com/blogapi";

const params = reactive({
  username: "aaa",
  password: "123",
  email: "aaa@163.com",
  telephone: "18812345678",
});

const resultRegister = ref({});

const doRegister = async () => {
  const result = await fetch(`${baseUrl}/users/register`, {
    method: "POST",
    body: JSON.stringify(params),
    headers: {
      "Content-Type": "application/json",
    },
  }).then((res) => res.json());
  resultRegister.value = result;
};
</script>

vue-template

<template>
  <div class="registerform-container">
    <h3>注册</h3>
    <el-form :model="params" label-width="auto" style="max-width: 600px">
      <el-form-item label="username">
        <el-input v-model="params.username" />
      </el-form-item>
      <el-form-item label="password">
        <el-input v-model="params.password" type="password" />
      </el-form-item>
      <el-form-item label="email">
        <el-input v-model="params.email" type="email" />
      </el-form-item>
      <el-form-item label="telephone">
        <el-input v-model="params.telephone" type="telephone" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doRegister()">注册</el-button>
      </el-form-item>
    </el-form>
    <p>⬇️注册返回数据⬇️</p>
    <p>{{ resultRegister }}</p>
  </div>
</template>

vue-style

<style lang="scss">
.registerform-container {
  h3 {
    margin-bottom: 20px;
  }
}
</style>

2.2. 后端实现

1. 新增路由 router/users.js
2. 查询是否有该用户 SELECT * FROM users WHERE username = ?
3. 注册写入数据 INSERT INTO users (username, password, email, telephone) VALUES (?, ?, ?, ?)
4. 返回数据 resp.data.token = token

router/users.js

const Router = require("koa-router");
const db = require("./../utils/db");
const router = new Router();

// 新增数据
router.post("/users/register", async (ctx) => {
  const { username, password, email, telephone } = ctx.request.body;
  const rows = await db.query("SELECT * FROM users WHERE username = ?", [
    username,
  ]);
  if (rows.length) {
    ctx.body = { success: false, message: "用户已存在" };
  } else {
    const result = await db.query(
      "INSERT INTO users (username, password, email, telephone) VALUES (?, ?, ?, ?)",
      [username, password, email, telephone]
    );
    const resp = {};
    if (result.affectedRows > 0) {
      resp.success = true;
      resp.message = "注册成功";
    } else {
      resp.success = false;
      resp.message = "注册失败";
    }
    ctx.body = resp;
  }
});

utils/db.js

const mysql = require("mysql");
const dbconfig = require("./config");
const pool = mysql.createPool(dbconfig);

function query(sql, values) {
  return new Promise((resolve, reject) => {
    pool.getConnection((err, connection) => {
      if (err) {
        reject(err);
      } else {
        connection.query(sql, values, (error, results) => {
          connection.release();
          if (error) {
            reject(error);
          } else {
            resolve(results);
          }
        });
      }
    });
  });
}

module.exports = {
  query,
};

utils/config.js

const dbconfig = {
  host: "82.156.xxx.xxx", // 数据库地址
  user: "db_name_xxx", // 数据库用户
  password: "db_password_xxx", // 数据库密码
  database: "my_blog", // 选中数据库
  charset: "utf8mb4",
};

package.json

{
  "name": "statistics",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon app.js",
    "git": "git add . && git commit -m \"update\" && git push"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jsonwebtoken": "^9.0.2",
    "koa": "^2.15.0",
    "koa-bodyparser": "^4.4.1",
    "koa-jwt": "^4.0.4",
    "koa-router": "^12.0.1",
    "koa2-cors": "^2.0.6",
    "mysql": "^2.18.1",
    "nodemon": "^3.0.3"
  }
}