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

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

转载于:https://www.cnblogs.com/haonanZhang/p/8260290.html

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

  1. deflower-该项目是前后端分离的卖花网站

    deflower 项目地址 介绍 该项目是前后端分离的卖花网站,有一个后端工程deflower,使用iade进行开发,基于jdk1.8,有两个前端工程,mall4uni,vue-admin-maste ...

  2. node作为中间层进行前后端分离

    前言: 思考: 1. 前后端不分离的缺点? Node作中间层做前后端分离 1. 前后端分离的定义 就是前端代码,和后端后端分开嘛. 2. 啊,怎么分开,那我直接cx把前端代码弄走吗? 咦,请求不了了, ...

  3. 一套仿阿里完整版Spring Boot电商项目,前后端分离+权限管理系统

    项目简介 1.项目背景 2. B2B 模式 3. B2C 模式 ==(商城模式)*== 4. C2B 模式 5. C2C 模式 6. O2O 模式 2.商城架构图 2.1.前后端分离 基础版 2.3. ...

  4. 【Java从0到架构师】项目实战 - 前后端分离、后端校验、Swagger、全局异常处理

    项目实战 - 前后端分离.后端校验.Swagger Layui 同源策略 SpringMVC 实现 CORS 后端校验 - hibernate-validator 方法的 Model 参数校验 方法的 ...

  5. 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)

    可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)

  6. 阿里云轻量应用服务器部署Node.js+React+MongoDB前后端分离项目

    最近用阿里云服务器部署了一个前端React,后端Node.js(Koa2),数据库MongoDB的前后端分离项目,其间踩了不少的坑,用这篇文章记录一下具体的步骤,希望对你们能有帮助. 1. 服务器的选 ...

  7. (2022)Springboot+vue3项目开发前后端分离书法图书管理Coun

    项目地址:https://github.com/KKJava1/Coun Coun是基于Springboot+vue3 项目采用了前后端分离技术:后端采用 springBoot 基本框架,数据库连接池 ...

  8. Nodeway--基于node.js的轻量级前后端分离框架

    一. 背景 1.什么是前后端分离? 目前,大家一致认同的前后端分离的例子就是SPA(Single-pageapplication),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式 ...

  9. 秒杀项目(前后端分离)

    1P/11P项目开篇 技术点总结 1.安装开发工具 2P/11p 项目架构介绍 常见的请求:返回前端页面HTML:Model+HTML模板 ajax异步请求:返回json数据[返回特定格式的字符串只返 ...

最新文章

  1. 统计学习方法笔记(一)-k近邻算法原理及python实现
  2. asp中关于从utf8页面到gb2312页面出现乱码得解决
  3. 从Python代码到APP,你只需要一个小工具:GitHub已超3000星
  4. 乐鑫代理-启明云端分享|乐鑫ESP8266模组ESP-WROOM-02D和ESP-WROOM-02U有什么不同
  5. restful json_Dropwizard:轻松的RESTful JSON HTTP Web服务
  6. java客户端重复请求_Java后台防止客户端重复请求、提交表单实现原理
  7. python增加工作日列_将工作日添加到日期字段
  8. Android学习之简单地使用碎片
  9. RQNOJ PID379 / 约会计划 -并查集
  10. 月均数据_月均收入15k的数据产品经理=数据+产品经理?
  11. 宠物商店业务逻辑关系模型图
  12. k8s基本概念及使用
  13. access行列转换。
  14. 微信公众号最佳实践 ( 10.3)获取微信版本及手机系统
  15. 阿里云ECS上CentOS关闭阿里云盾
  16. 【孟子E章】祝大家新年愉快!
  17. 售票计算机 制票机的使用方法,铁路客运计算机售票具体操作.pdf
  18. 计算机系统结构——量化研究方法(第三版)
  19. 挂载 机械硬盘_如何在mac苹果系统下使用移动硬盘
  20. 通讯录的实现(C语言)

热门文章

  1. java发送简单邮件_Java程序实现发送简单文本邮件
  2. 2022-2028年中国塑料管的制造行业市场需求预测及投资策略研究报告
  3. 2022-2028年中国阻燃纤维行业市场研究及前瞻分析报告
  4. 在linux(centos7)下本地仓库的搭建
  5. 文件流处理流式处理大数据处理
  6. nn.moduleList 和Sequential由来、用法和实例 —— 写网络模型
  7. pytorch lstm crf 代码理解 重点
  8. TVM性能评估分析(三)
  9. CUDA刷新器:CUDA编程模型
  10. 2021年大数据常用语言Scala(三十四):scala高级用法 异常处理