【node笔记】前后端分离的用户注册功能

两年前的文章，水一下🤣

准备工作

后端环境搭建

新建 ​​vue_node​​​ 文件夹, 建立子文件夹 ​​serve​​​, 文件夹下打开 ​​cmd​​​ 输入 ​​npm init -y​​ 初始化项目描述文件 

• ​​package.json​​ 存放项目依赖信息
• ​​package-lock.json​​ 存放依赖版本信息

安装项目依赖

• 名称:express

• 安装:​​npm i express -s​​
• 作用:后端框架

• 名称:nodemon

• 安装:​​npm install -g nodemon​​
• 作用:代码发生变化自动重启服务

• 名称:mongoose

• 安装:​​npm i mongoose -S​​
• 作用:数据库

• 名称:body-parser

• 安装:​​npm i body-parser-S​​
• 作用:模块会处理​​application/x-www-form-urlencoded​​、​​application/json​​ 两种格式的请求体。经过这个中间件后，就可以在所有路由处理器的 ​​req.body​​ 中访问请求参数。

• 名称:cors

• 安装:​​npm i cors -S​​
• 作用:解决跨域问题

在 ​​serve​​​ 文件夹中新建 ​​app.js​​ 主入口文件

在 ​​serve​​​ 文件夹中新建 ​​model​​ 文件夹用于存放数据库文件

在 ​​serve​​​ 文件夹中新建 ​​route​​ 文件夹用于存放路由文件

前端环境搭建       

​​vue_node​​​ 文件夹下打开 ​​cmd​​​ 输入 ​​vue create view​​  

​​cd view​​​ 进入文件夹 输入 ​​npm run serve​​ 启动服务

引入 ​​elementUI​​​ 组件库 ​​vue add element​​

删除没用的东西

在 ​​views​​​ 文件夹下新建 ​​Register.vue​​​ 以及 ​​Index.vue​​​ 以及 ​​NotFound.vue​​

命令行 ​​npm i axios -S​​​  ，  安装 ​​axios​​

后端开发

1.配置 express 框架,创建网站服务器并监听 3000 端口

//引用express框架
const express = require("express");

//创建网站服务器
const app = express();

//监听端口
app.listen(3000, () => {
    console.log("服务器启动成功")
});

2.配置注册界面路由,在 route 文件夹下新建 register.js 在此文件中配置注册请求路径

//引用express框架
const express = require("express");

//创建注册页面路由
const register = express.Router();

//匹配二级请求路径
register.post("/",(req,res) => {
  res.send("hello world")
});

//将路由对象作为模块成员进行导出
module.exports

3.在 app.js 中引入路由对象并配置一级请求路径

//引入路由对象
const register = require("./route/register");

//为路由匹配一级请求路径
app.use("/register", register);

4.命令行输入 nodemon app.js 启动服务

5.浏览器地址访问 http://localhost:3000/register 可以看见 hello world

6.打开接口调试工具 postman 访问localhost:3000/register 同样可以看见 hello world

7.在 model 文件夹下新建 connect.js 用来连接数据库

//引入mongoose模块
const mongoose = require("mongoose");
//存放数据库地址
const mongoURL = "mongodb://localhost/VueAndNode"
// 避免警告
mongoose.set('useCreateIndex', true);
//连接数据库
mongoose.connect(mongoURL,{ useNewUrlParser: true,useUnifiedTopology: true })
  .then(()=>console.log("数据库连接成功"))
  .catch(()=>console.log("数据库连接失败"));

8.在 app.js 中引入 connect.js 进行数据库连接

//数据库连接
require("./model/connect");

9.在 model 文件夹下新建 user.js 用来创建用户集合

//创建用户集合
//引入mongoose模块
const mongoose = require("mongoose");
const { Schema, model } = mongoose;
//设定集合规则
const userSchema = new Schema({
    account: {
            type: String,
        required: true,
        unique: true //保证账号在插入数据库时不重复
    },
    password: {
        type: String,
        required: true
    }
});

//创建集合
const User = model("User", userSchema);

//测试数据加在此处

//将用户集合作为模块成员进行导出
module.exports = {
    User: User,
}

10.通过 user.js 插入一条测试数据， 通过 mongodb compass 工具查看集合是否建立成功， 然后注释掉插入测试数据的代码

// 插入一条测试数据
User.create({
  account:"17615180174",
  password:"12346",
});

已插入测试数据,集合创建成功

11.在 app.js 中配置 body-paser

//引入body-parser模块  用来处理post请求参数
const bodyParser = require("body-parser");

// 处理post请求参数
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(bodyParser.json({
  extended: false

12.在 route 下的 register.js 中实现注册接口

//引入用户集合构造函数
const { User } = require("../model/user.js");

//匹配二级请求路径  注册接口
register.post("/register", async (req, res) => {
  // 数据库中查询用户是否存在
  const user = await User.findOne({
    account: req.body.account
  })
  if (user) { //如果用户存在
    return res.status(409).send("用户名已被注册");
  } else { //如果用户不存在 添加此条数据到数据库
    const newUser = await User.create(req.body);
    //返回插入的数据
    return res.send(newUser);
  }
});

在 ​​postman​​ 中测试结果如下 可以成功返回插入的数据

13.在 app.js 中配置 cors 解决跨域问题

//引入cors模块  用来解决跨域问题
const cors = require('cors')

//配置cors
app.use(cors())

前端开发

1.在 router 文件夹下 index.js 中添加路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Register from '../views/Register'
import NotFound from '../views/NotFound'
import Index from '../views/Index'
Vue.use(VueRouter)

const routes = [{
        path: '/',//主页面
        redirect: '/index'
    },
    {//主页面
        path: '/index',
        name: 'Index',
        component: Index
    },
    {//注册页面
        path: '/register',
        name: 'Register',
        component: Register
    },
    {//未找到
        path: '*',
        name: 'Not Found',
        component: NotFound
    }

]

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

export default

访问 ​​http://localhost:8080/register​​ 结果如下

访问 ​​http://localhost:8080/index​​ 结果如下

访问 ​​http://localhost:8080/​​123 结果如下

2.在 Register.vue 中使用 elementUI 构建简单注册页面

<template>
  <div id="app" class="box">
    <h3>注册页面</h3>
    <el-form
      :model="loginForm"
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
      <el-form-item label="账号" prop="account">
        <el-input v-model="loginForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">立即创建</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: ""
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid {
        if (valid) {
           alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>.box{
  width: 500px;
  height: 400px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 5px #eeeeee;
}
h3{
  text-align: center;
}

.el-input{
  width: 92%;
}
</style>

效果如下

3.在 main.js 同级目录下新建 axios.js

//引入axios
import axios from 'axios'

//存放请求根地址
const http = axios.create({
    baseURL: 'http://localhost:3000'
})

export default

4.在 main.js 中配置 axios

//引入axios配置文件
import axios from './axios'

//将axios添加到vue原型链上
Vue.prototype.$axios

5.在 Register.vue 中验证方法中使用 axios 发送请求

methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid {
        if (valid) {
          // alert("submit!");
          this.$axios.post('/register/register',this.loginForm).then(res {
            console.log(res.data)
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }

6.页面输入进行注册,可以正常添加数据

控制台输出如下

数据库如下

7.修改 axios 中代码如下

this.$axios.post('/register/register',this.loginForm).then(res {
            console.log(res.data)
      this.$message({
        type:'success',
        message:'用户注册成功'
      })
      this.$router.push('/index');
          })

再次测试结果如下

跳转到 ​​index​​ 页面并提示用户注册成功

8.用户已经存在的错误验证

服务器端 ​​register.js​​ 代码修改如下

//注册接口
register.post("/register", async (req, res) => {
  // 数据库中查询用户是否存在
  const user = await User.findOne({
    account: req.body.account
  })
  if (user) { //如果用户存在
    res.json({
      isOk:'false',
      msg:'用户已经存在'
    })
  } else { //如果用户不存在 添加此条数据到数据库
    const newUser = await User.create(req.body);
    //返回结果
    res.json({
      isOk:'true',
      msg:'用户注册成功'

前端 ​​axios​​ 请求代码修改如下

this.$axios.post('/register/register',this.loginForm).then(res {
        //注册成功 跳转至主页 给出提示
            if(res.data.isOk == true){
        console.log(res.data)
        this.$message({
          type:'success',
          message:res.data.msg
        })
        this.$router.push('/index');
      }else{
        //注册失败  用户已存在  不跳转 给出提示
        console.log(res.data)
        this.$message({
          type:'error',
          message:res.data.msg

演示结果如下