zoukankan      html  css  js  c++  java
  • 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: '1',
                    msg: err.message
                });
            }else{
                res.json({
                    status: '0',
                    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

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

  • 相关阅读:
    方法
    数组
    Scanner类+Random
    运算符2
    运算符1
    Linux中Oracle的安装
    redis安装常见错误
    redis常用命令
    Linux中redis安装
    修改Oracle字符集
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/8260290.html
Copyright © 2011-2022 走看看