![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
在vue中使用node.js
在vue中,使用node.js的框架express 和mongodb数据库 来进行增删改查的页面交互。
·
在vue中使用node.js。 当然具体是使用node.js 的框架express 和mongodb来完成的。
按照以下我的步骤一步一步来,即可完成在vue中使用自己写的接口完成增删改查进行页面交互。
1:需要下载安装mongodb。并打开
2:在vue项目中文件目录下和src目录同级创建一个文件。如:server 然后再server文件夹下分别创建 1、mongo.js 。2、index.js 。 3、server.js 。 4、package.json
3:开始在已经创建的文件中加代码
(1)在 package.json 里面加上以下代码。示例:
{
"dependencies": {
"body-parser": "^1.20.0",
"mongoose": "^6.5.0",
}
}
(2)npm install 补全依赖。生成node_modules 包
(3)在 mongo.js文件中链接到mongodb。 示例:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});
var mgs = require('mongoose')
var url = "mongodb://127.0.0.1:27017/dataList" //连接MongoDB
console.log(url)
mgs.connect(url, function (err) {
if (!err) {
console.log('+++++++++')
}
})
// 数据类型
var type = { dateTime: String, ming: String, dizhi: String }
var dataLists = mgs.model('dataLists', type)
module.exports = dataLists
(4)在 index.js 文件用来写接口。 示例:
var express = require('express');
var router = express.Router();
let dataLists = require('./mongo') 引入mongo.js 文件
// 添加新增 /list 为自定义接口名
router.post('/list', function (req, res) {
var obj = req.body
dataLists.create(obj, function (err, result) {
if (!err) {
res.send(result);
}
})
})
// 查询
router.post('/querys', function (req, res) {
console.log(req)
var obj = req.body
dataLists.find(obj, function (err, result) {
if (!err) {
res.send(result);
}
})
})
// 修改
router.post('/modify', function (req, res) {
console.log(req)
var obj = req.body
dataLists.findOneAndUpdate({ _id: obj._id }, obj, function (err, result) {
if (!err) {
res.send(result)
}
})
})
// 删除
router.post('/deleds', function (req, res) {
var obj = req.body
console.log(obj)
for (let i = 0; i < obj.length; i++) {
dataLists.deleteOne({ _id: obj[i] }, function (err, result) {
if (!err) {
res.send(result)
}
})
}
})
module.exports = router
(5)在 server.js 中进行配置
var express = require('express');
var bodyParser = require('body-parser');
// 创建项目实例
const app = express();
// 加载路由控制
var routes = require('./index');
// 定义数据解析器
// parse application/x-www-form-urlencoded body-parser 插件 数据问题
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
// 跨域等
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type']);
next();
});
// 匹配路径和路由
app.use('/', routes);
app.listen('8080', function () { //此处的8080 需要和vue项目中的target 端口号后缀一模一样才可。
console.log("8080");
})
module.exports = app;
(6)最后 需要启动server.js 文件 可以在当前文件夹下cmd进入命令框然后 node server.js 启动。
(7)mongodb 需要启动服务.
(8)完成以上的之后,就可以在vue页面中调用接口使用了。
比如:
this.$post("list", data).then((res) => {
});
更多推荐
所有评论(0)