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}`)
})
这样一个非常非常简单的登陆注册就写完了。