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
看是否看到新的数据,整体就完了。