node、Mongo项目如何前后端分离提供接口给前端

node接口编写，vue-cli代理接口方法 

　　通常前端使用的MocK 数据的方法，去模拟假的数据，但是如果有node Mongodb 去写数据的话就不需要在去mock 数据了，具体的方法如下。

首先启动 mongodb、node、以及前端 项目。这里用加载商品列表做一个举例

1、在node项目创建

在node的项目中，创建文件夹： model。在model中创建 goods.js。在router 文件夹下创建 goods 的路由 goods.js。

2、模板goods.js编写（model下边的goods.js）

var mongoose = require('mongoose');
// 引入商品模型
var Schema = mongoose.Schema;

// 定义商品模型
var productSchema = new Schema({
    "productId": String,
    "productName": String,
    "salePrice": Number,
    "productPic": String,
    "checked": String
});

/**
* 输出 good 模型
* 有一个问题：在这里输出的是 good 但是数据库建立的一定要加s，代码会默认取数据库找 s 的那张表
*/
module.exports = mongoose.model('Good', productSchema);

3、在项目的app.js中配置 路由。

// 首先导入 goods 的路由文件
var goods = require('./routes/goods');

// 然后使用路由

// 新增路由商品，这个文件中的都是一级路由,这个路由到router下边的good,然后router那个good二级路由到 model 下边的goods
app.use('/goods', goods);

4、路由goods的编写。首先我们先确定连接数据库成功，然后再去数据库里面查找数据写接口

var express = require('express');
var router = express.Router();

var mongoose = require('mongoose');
var Goods = require('../model/goods');

/* 连接数目库. */
mongoose.connect('mongodb://127.0.0.1:27017/mall', {
    useMongoClient: true
});

// 连接成功回调监听
mongoose.connection.on("connected", function(){
    console.log("mongodb connected success");
});

// 连接失败回调监听
mongoose.connection.on("error", function(){
    console.log("mongodb connected faile");
});

// 连接断开回调监听
mongoose.connection.on("disconnected", function(){
    console.log("mongodb connected disconnected");
});

/**
* app.js 下边写的路由是一极路由，在这里写的路由是二级路由
* 例如：app.js 里面写的 /goods 这是一个路由地址了，下边写的 / 就是 /goods/ 默认加载的
* 这段代码的意思是：访问 http://1·27.0.0.1:3000/goods/  其实就相当于是 Node 在这个地址里面 把前端想要的数据返回出来，这样前端调用这个地址就相当于是接口了
* 这块的路由就是 直接地址到/goods 然后再到 /
*/
router.get("/", function(req, res, next){
    res.send("数据库连接成功");
});

module.exports = router;

这个时候重启一下 node 的服务，可以先关掉前便开启的服务，然后重启。

打开应该是

http://localhost:3000/

然后输入

http://localhost:3000/goods/

如果页面输出：数据库连接成功。则代表数据库连接成功了。这个时候便可以写我们的业务逻辑了，还是在router 下边的 goods.js中，整体代码应该是

/**
* app.js 下边写的路由是一极路由，在这里写的路由是二级路由
* 例如：app.js 里面写的 /goods 这是一个路由地址了，下边写的 / 就是 /goods/ 默认加载的
*/
router.get("/", function(req, res, next){

    /**
    * 连接请求处理数据 0 代表成功，1代表失败
    * doc 就是返回的数据
    */ 

    Goods.find({}, function(err, doc){
        if(err){
            res.json({
                status: '',
                msg: err.message
            });
        }else{
            res.json({
                status: '',
                msg: '',
                result: {
                    count: doc.length,
                    list: doc
                }
            });
        }
    });
});

这样重新启动node 然后输入地址变会出现，从数据库查找的 商品的 数据。

vue-cli代理接口方法 

　　这个时候我们的商品数据的后端代码就差不多写完了；接下来就是把 接口放到前端去。因为我们的访问的还是 本地的接口，前后端项目又分离，这样前端访问这个接口其实还是牵扯到跨域的问题的，这样就需要在前端的项目中设置代理，来访问到接口了。

具体方法为：

用vue的项目做例子，把以前的mock数据的代码都去掉，在新的vue常见的项目中的config 下边的 index.js中 找到 dev，添加

// 设置代理
    proxyTable: {
       '/goods':{
         target:"http://localhost:3000",//设置你调用的接口域名和端口号 别忘了加http  相当于是 访问/goods的时候，默认前边的端口就是 target 里面写的
       }
    }

意思就是当我们在项目中访问 goods这个接口的时候，自动代理到

http://localhost:3000/goods/

重新启动项目

npm run dev

看是否看到新的数据，整体就完了。