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

一尾流莺

发布于 2022-12-10 13:59:38

2.4K0

文章被收录于专栏：一尾流莺学前端一尾流莺学前端

两年前的文章，水一下🤣

准备工作

后端环境搭建

新建 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 = register;

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 router

访问 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 http;

4.在 main.js 中配置 axios

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

//将axios添加到vue原型链上
Vue.prototype.$axios = 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
                })
            }
          })

演示结果如下

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-11，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js