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
看是否看到新的数据,整体就完了。
转载于:https://www.cnblogs.com/haonanZhang/p/8260290.html
node、Mongo项目如何前后端分离提供接口给前端相关推荐
- deflower-该项目是前后端分离的卖花网站
deflower 项目地址 介绍 该项目是前后端分离的卖花网站,有一个后端工程deflower,使用iade进行开发,基于jdk1.8,有两个前端工程,mall4uni,vue-admin-maste ...
- node作为中间层进行前后端分离
前言: 思考: 1. 前后端不分离的缺点? Node作中间层做前后端分离 1. 前后端分离的定义 就是前端代码,和后端后端分开嘛. 2. 啊,怎么分开,那我直接cx把前端代码弄走吗? 咦,请求不了了, ...
- 一套仿阿里完整版Spring Boot电商项目,前后端分离+权限管理系统
项目简介 1.项目背景 2. B2B 模式 3. B2C 模式 ==(商城模式)*== 4. C2B 模式 5. C2C 模式 6. O2O 模式 2.商城架构图 2.1.前后端分离 基础版 2.3. ...
- 【Java从0到架构师】项目实战 - 前后端分离、后端校验、Swagger、全局异常处理
项目实战 - 前后端分离.后端校验.Swagger Layui 同源策略 SpringMVC 实现 CORS 后端校验 - hibernate-validator 方法的 Model 参数校验 方法的 ...
- 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
- 阿里云轻量应用服务器部署Node.js+React+MongoDB前后端分离项目
最近用阿里云服务器部署了一个前端React,后端Node.js(Koa2),数据库MongoDB的前后端分离项目,其间踩了不少的坑,用这篇文章记录一下具体的步骤,希望对你们能有帮助. 1. 服务器的选 ...
- (2022)Springboot+vue3项目开发前后端分离书法图书管理Coun
项目地址:https://github.com/KKJava1/Coun Coun是基于Springboot+vue3 项目采用了前后端分离技术:后端采用 springBoot 基本框架,数据库连接池 ...
- Nodeway--基于node.js的轻量级前后端分离框架
一. 背景 1.什么是前后端分离? 目前,大家一致认同的前后端分离的例子就是SPA(Single-pageapplication),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式 ...
- 秒杀项目(前后端分离)
1P/11P项目开篇 技术点总结 1.安装开发工具 2P/11p 项目架构介绍 常见的请求:返回前端页面HTML:Model+HTML模板 ajax异步请求:返回json数据[返回特定格式的字符串只返 ...
最新文章
- 统计学习方法笔记(一)-k近邻算法原理及python实现
- asp中关于从utf8页面到gb2312页面出现乱码得解决
- 从Python代码到APP,你只需要一个小工具:GitHub已超3000星
- 乐鑫代理-启明云端分享|乐鑫ESP8266模组ESP-WROOM-02D和ESP-WROOM-02U有什么不同
- restful json_Dropwizard:轻松的RESTful JSON HTTP Web服务
- java客户端重复请求_Java后台防止客户端重复请求、提交表单实现原理
- python增加工作日列_将工作日添加到日期字段
- Android学习之简单地使用碎片
- RQNOJ PID379 / 约会计划 -并查集
- 月均数据_月均收入15k的数据产品经理=数据+产品经理?
- 宠物商店业务逻辑关系模型图
- k8s基本概念及使用
- access行列转换。
- 微信公众号最佳实践 ( 10.3)获取微信版本及手机系统
- 阿里云ECS上CentOS关闭阿里云盾
- 【孟子E章】祝大家新年愉快!
- 售票计算机 制票机的使用方法,铁路客运计算机售票具体操作.pdf
- 计算机系统结构——量化研究方法(第三版)
- 挂载 机械硬盘_如何在mac苹果系统下使用移动硬盘
- 通讯录的实现(C语言)