Fork me on GitHub

前后端分离小demo

目的:前端请求后端,插入数据到数据库。 新建两个文件夹,vueServer和vueClient

vueServer

服务端用express搭建服务器,mongoose数据库存储 APP.js文件很简单

1
2
3
4
5
6
7
8
9
10
11
12
13
let express = require('express') 
let app = express()
let router = require('./routes/router')
let db = require('./models/db.js')
let cors = require('cors')
//静态资源管理
app.use(express.static("./public"))
// 设置跨域(*)
app.use(cors())
// 设置路由
app.get('/users', router.doRegist)
// 监听3000端口
app.listen(3000);

router.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let Users = require('./../models/users') 
// 路由逻辑 //注册业务
exports.doRegist = function (req, res, next) {
//接受前台数据
var queryData = req.query
var username = queryData.username
var password = queryData.password
// 查询是否有重复
Users "username": username
},
function (err, doc) {
if (err) {
console.log(err); return;
} if (doc.length != 0) {
res.send("用户已经存在!"
); }
//写入数据库 else {
Users.create({
"username": username, "password": password
}, function (err, doc) {
if (err) { console.log(err); return;
} res.send("插入数据库成功!");
})
}
})
}

数据库文件 db.js

1
2
3
4
5
6
7
let mongoose = require('mongoose') 
// 连接数据库 mongoose.connect('mongodb://localhost/users')
let db = mongoose.connection
// 监听连接状态 db.once('open', function () {
console.log('数据库连接成功!')
})
module.exports = db

users.js

1
2
3
4
5
6
7
8
9
let mongoose = require('mongoose') 
// 定义schema结构
let userSchema = new mongoose.Schema({
"username": String, "password": String
})
// 利用schema生成模型
let Users = mongoose.model("Users", userSchema)
// 暴露出去
module.exports = Users

vueClient

直接用脚手架生成,用axios发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
methods:{ doRegist() { 
// 获取用户名
let username = this.$refs.username.value
let password = this.$refs.password.value
if(username === "" || password === "") {
alert("用户名或密码不能为空!")
} else {
// 向后端发送请求,存入数据库
axios.get("http://192.168.43.54:3000/users", {
params: { "username": username, "password": password }
}).then((response) => {
if(response.status === "200") {
console.log("注册成功!") }
}).catch((error) => {
console.log(error)
})
}
}
}
}

最后localhost:8080能成功请求localhost:3000,并将数据插入到数据库。

-------------本文结束感谢您的阅读-------------

本文标题:前后端分离小demo

文章作者:陈晓拉尼

发布时间:2017年12月18日 - 10:12

最后更新:2018年09月11日 - 00:09

原始链接:http://yoursite.com/archives/60865.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。