【NodeJS】完成简单前后端分离登陆注册功能

nodejs写的前后端分离的登陆/注册，使用MongoDB作为数据库，使用vue作为前端框架，使用vue-cli 3.0。由于一些不可描述的原因（懒），ajax使用的是$.ajax

目录结构

在项目根目录下新建server目录

root
 |  node_modules
 |  public
 |    |  favicon.ico
 |    |  index.html
 |  server
 |    |  index.js
 |  src
 |    |  assets
 |    |  components
 |    |    |  Login.vue
 |    |    |  Register.vue
 |    |  App.vue
 |    |  main.js
 |  babel.config.js
 |  package.json
 |  package-lock.json

首先是前端

前端：

首先是APP.vue，写的非常简单，登陆注册的切换使用动态组件

<template>
  <div>
    <ul>
      <li @click="changeType(0)">
        Login
      </li>
      <li @click="changeType(1)">
        register
      </li>
    </ul>
    <component :is="componentType" />
  </div>
</template>

<script>
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
export default {
  name: 'app',
  components:{
    Login, Register
  },
  data(){
    return {
      componentType: "Login"
    }
  },
  methods: {
    changeType(type){
      if (!!type){
        this.componentType = "Register"
      } else {
        this.componentType = "Login"
      }
    }
  }
}
</script>

<style>

</style>

然后是两个组件，也非常简单，注册写了一个简单的验证

login.vue

<template>
  <div>
    <h3>Login</h3>
    <div>
      <input type="text" placeholder="username" v-model="username" />
    </div>
    <div>
      <input type="password" placeholder="password" v-model="password" />
    </div>
    <button @click="login">login!</button>
  </div>
</template>

<script>
import $ from 'jQuery';
export default {
  data(){
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    login(){
        $.ajax({
            method: "POST",
            url: 'http://localhost:3000/login',
            data: {
            username: this.username,
            password: this.password
            },
            success: function(res){
              console.log(res)
            }
        })
    }
  }
}
</script>

<style>
</style>

register.vue

<template>
  <div>
    <h3>Register</h3>
    <div>
        <input type="text" placeholder="username" v-model="username" />
    </div>
    <div>
        <input type="password" placeholder="password" v-model="password" />
    </div>
    <div>
        <input type="password" placeholder="repassword" @blur="showCheck(0)" v-model="repassword" />
    </div>
    <div v-show="check">
        <span>{{firstNum}} + {{lastNum}} = </span>
        <input type="text" v-model="ans" @blur="showCheck(1)">
    </div>
    <p v-show="!!errStr" style="color: red;">{{errStr}}</p>
    <button @click="register()">Register!</button>
  </div>
</template>

<script>
import $ from 'jQuery';
export default {
  data(){
    return {
      username: "",
      password: "",
      repassword: "",
      ans: "",
      firstNum: 0,
      lastNum: 0,
      check: false,
      errStr: false
    }
  },
  methods: {
    register(){
        let isCheck = this.$refs.codeVal.value === (this.firstNum + this.lastNum).toString();
        if(!(isCheck && this.username && this.password === this.repassword)){
            if(this.password !== this.repassword){
                this.errStr = "两次密码输入不一致"
            }else if(!isCheck){
                this.errStr = "验证码错误"
            }else if(!this.username){
                this.errStr = "无用户名"
            }

            return alert("注册未完成")
        }
        $.ajax({
            method: "POST",
            url: 'http://localhost:3000/register',
            data: {
                username: this.username,
                password: this.password
            },
            success: function(res){
                let oData = JSON.parse(res)
                console.log(res)
                if(oData.code === "S"){
                    alert(oData.str)
                }else if( oData.code === "E"){
                    alert(`err: ${oData.str}`)
                }
            }
        })
    },

    showCheck(type){
        if(!type){
            if( this.repassword !="" && this.repassword === this.password ) {
                this.errStr = ""
                this.firstNum = parseInt(Math.random()*30)
                this.lastNum = parseInt(Math.random()*20)
                this.check = true
            }else if (this.repassword != this.password){
                this.check = false
                this.errStr = "两次密码输入不一致"
            }
        }else {
            let temp = this.firstNum + this.lastNum
            if( this.$refs.codeVal.value === temp.toString() ){
                if( this.username === "" ){
                    this.errStr = "无用户名"
                    return;
                } else {
                    this.errStr = ""
                }
            }else {
                this.errStr = "验证码错误"
            }
        }
    },
  }
}
</script>

<style>
</style>

前端写的很简单，就不赘述了。

---

NodeJS

server.js

const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");

const url = "mongodb://localhost/userDB";


mongoose.connect(url, function(err){
    if(err) return console.log("MongoDB Connect err:", err)

    console.log("MongoDB Connect Success")
})


const userDBSchema = new mongoose.Schema({
    userno: Number,
    username: String,
    password: String
})
mongoose.model("userDB", userDBSchema)


app.use(cors({
    origin: ["http://localhost:8080"],
    methods: ["POST","GET"],
    allowHeader: ["Content-Type", "Authorization"]
}))

app.get("/login", function(req,res){
    const userDB = mongoose.model("userDB");
    let resStr = {}
    userDB.find({username:req.query.username},function(err, data){
        if(err){
            resStr = {
                res: err,
                str: "数据库异常",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        }else{
            if(!data.length){
                resStr = {
                    res: data,
                    str: "用户查询为空",
                    code: "E"
                }
                res.end(JSON.stringify(resStr))
            }else {
                if(req.query.password == data[0].password){
                    resStr = {
                        res: data,
                        str: "查询成功",
                        code: "S"
                    }
                    res.end(JSON.stringify(resStr))
                }else {
                    resStr = {
                        res: [],
                        str: "密码错误",
                        code: "E"
                    }
                    res.end(JSON.stringify(resStr))
                }
            }

        }
    })

})

app.get("/register", function(req,res){
    const userDB = mongoose.model("userDB");
    let oData = req.query;
    let resStr = {};


    let user = new userDB({
        userno: 7,
        username: oData.username,
        password: oData.password
    })
    userDB.find({username:req.query.username},function(err, data){
        if (err) {
            resStr = {
                res: err,
                str: "数据库异常",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        } else if( data.length ) {
            resStr = {
                res: "",
                str: "用户已存在",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        }else{

            user.save(function(err){
                if(err) return console.log("MongoDB Save err:", err);
                console.log("MongoDB Save Success")
                resStr = {
                    res: req.query,
                    str: "注册成功",
                    code: "S"
                }
                res.end(JSON.stringify(resStr))
            })
        }
    })
})



const server = app.listen(3000, function(){

    let host = server.address().address
 
    let port = server.address().port
     
    console.log(`应用实例，访问地址为 http://${host}:${port}`)

})

接下来我们把这个文件拆分开来讲

[1] express

首先我们引入express，用于设置中间件响应HTTP请求

const express = require("express");
const app = express();

[2] cors

引入cors来进行跨域

const cors = require("cors");

[3] mongoose

引入mongoose用来操作数据库（MongoDB）

const mongoose = require("mongoose");

// 设置数据库地址
const url = "mongodb://localhost/userDB";

// 链接数据库
mongoose.connect(url, function(err){
    if(err) return console.log("MongoDB Connect err:", err)

    console.log("MongoDB Connect Success")
})

// 定义schema
const userDBSchema = new mongoose.Schema({
    username: String,
    password: String
})
mongoose.model("userDB", userDBSchema)

目前的功能只需要引入这几个包，接下来开始搞事。

// 通过express使用cors来进行跨域
app.use(cors({
    origin: ["http://localhost:8080"],
    methods: ["POST","GET"],
    allowHeader: ["Content-Type", "Authorization"]
}))

当请求为Login时

// 当请求为login时，进行判断
app.get("/login", function(req,res){

// 创建数据库实例
    const userDB = mongoose.model("userDB");
    let resStr = {}

// 检索数据库 ajax发送来的数据在req.query里
// 使用res.end()来返回数据，只能返回字符串或者Buffer
    userDB.find({username:req.query.username},function(err, data){
        if(err){
            resStr = {
                res: err,
                str: "数据库异常",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        }else{
            if(!data.length){
                resStr = {
                    res: data,
                    str: "用户查询为空",
                    code: "E"
                }
                res.end(JSON.stringify(resStr))
            }else {
                if(req.query.password == data[0].password){
                    resStr = {
                        res: data,
                        str: "查询成功",
                        code: "S"
                    }
                    res.end(JSON.stringify(resStr))
                }else {
                    resStr = {
                        res: [],
                        str: "密码错误",
                        code: "E"
                    }
                    res.end(JSON.stringify(resStr))
                }
            }

        }
    })

})

当请求为Register时

// 当请求为login时，进行判断
app.get("/register", function(req,res){
    const userDB = mongoose.model("userDB");
    let oData = req.query;
    let resStr = {};


    let user = new userDB({
        username: oData.username,
        password: oData.password
    })
    userDB.find({username:req.query.username},function(err, data){
        if (err) {
            resStr = {
                res: err,
                str: "数据库异常",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        } else if( data.length ) {
            resStr = {
                res: "",
                str: "用户已存在",
                code: "E"
            }
            res.end(JSON.stringify(resStr))
        }else{

// 储存用save方法
            user.save(function(err){
                if(err) return console.log("MongoDB Save err:", err);
                console.log("MongoDB Save Success")
                resStr = {
                    res: req.query,
                    str: "注册成功",
                    code: "S"
                }
                res.end(JSON.stringify(resStr))
            })
        }
    })
})

监听端口，建立服务

const server = app.listen(3000, function(){

    let host = server.address().address
 
    let port = server.address().port
     
    console.log(`应用实例，访问地址为 http://${host}:${port}`)

})

这样一个非常非常简单的登陆注册就写完了。