node全栈初体验

刚学了 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

demo 的 github 地址

https://github.com/Ertsul/Projects/tree/master/project02