刚学了 express 和 mongoDB，结合 vue，想着搭建一个全栈的小 demo，然后就用简单的表单提交体验了一下。现在前后端分离，两者完全可以分开做，然后通过相关的接口实现数据的交互。具体看图：
image.png
简单来说，就是：前端通过 axios 跨域获取后端的接口中数据，进行相关的渲染；后端则将前端 post 过来的处理后保存到数据库中。
demo 功能
将表单中的数据保存到数据库。
技术栈
前端
vue + axios
后端
express + mongoDB
具体实现
准备
- webpack 构建项目
- npm 安装 axios 、express 、 body-parser 、mongoose。
前端
- 编写表单样式
image.png
- 通过 axios 跨域获取后端接口中的数据，实现数据写和读。
<script>
export default {
name: 'App',
data(){
return {
name: '',
password: ''
}
},
methods: {
add(){
this.axios.get('/api/register/get')
.then((res) => {
// console.log(res);
let param = {
name: this.name,
password: this.password
};
this.axios.post('/api/register/add', param);
}).catch(err => {
console.log('error...');
})
}
}
}
</script>
后端
- 在项目根目录下新建一个文件夹 server， 用于保存接口的 js 文件。
image.png
- db.js
主要实现数据库模块。
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/exdb');
// 数据库连接状态判断
let db = mongoose.connection;
db.once('error', (req, res) => {
console.log('Mongodb connect error...');
});
db.once('open', (req, res) => {
console.log('Mongodb connect succeed...');
});
let worker = mongoose.Schema({
name: {
type: String,
default: '某人'
},
password: {
type: Number,
default: 18
}
});
module.exports = mongoose.model('worker', worker);
- api.js
主要实现数据库中数据的读取。
const express = require('express');
const app = express();
// body-parser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
// 引进数据库模块
const worker = require('./db.js');
app.post('/api/register/add', (req, res) => {
worker.findOne({'name': req.body.name}, 'name', (err, result) => {
if(err){
res.send('mongoose find error...');
}else{
if(!result){
// 添加到数据库
new worker({
name: req.body.name,
password: req.body.password
}).save();
}
}
});
});
app.get('/api/register/get', (req, res) => {
worker.find((err, result) => {
if(err){
res.send('mongoose find error...');
}else{
res.send(result);
}
});
});
// '/'
// app.get('/', (req, res) => {
// res.type('text/plain');
// res.send('main...');
// });
// 404
app.use((req, res, next) => {
res.status(404);
res.type('text/plain');
res.send('404 - not found.');
next();
});
// 500
app.use((req, res, next) => {
res.status(500);
res.type('text/plain');
res.send('500 - server error.');
next();
});
app.listen(8081, (req, res) => {
console.log('The Port 8081 is running, press the Ctrl + C to stop...')
});
设置代理
前端的默认端口号是：8080， 而我的后端设置的端口号设置为：8081，这时候，就需要去设置代理，实现端口的代理。具体如下：在文件夹 config 中找到 index.js 文件，并在文件中添加以下代理代码：
proxyTable: {
"/api": {
target: "http://localhost:8081/api/",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
通过设置代理，就将端口8080和端口8081统一起来，然后前端的数据就可以传送到后端，交由后端处理。
最后效果
前端填写数据
image.png
后端获取数据
image.png
数据库
image.png
