当我们性高彩烈的使用mongodb建好数据库之后,像迫不及待的使用axios发起请求,把数据展示到自己的vue项目中来,但是每次都失败,现在解决方法来了。
首先,在本地建的server.js文件,并使用nodemon server.js命令将服务跑起来,记得此处用的端口号,我的配置在8100端口。
app.listen('8100',function(){
console.log("8100");
})
我将在最下边附上我的server.js配置信息,如果没有配置过的小伙伴可以看一下。
由于vue-cli3脚手架生成的项目配置需要使用vue.config.js文件进行配置,因此在项目根目录下新建此文件。
配置如下:
module.exports={
baseUrl: './',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8100',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
配置完成之后,就可以在vue项目中使用了,使用前记得安装axios
axios.get('/api/data').then(res=>console.log(res))
之后就能在控制台看到请求道的数据了。
附件:
文件目录结构
server.js文件代码:使用前先安装mongoose,express
//引入模块,
const express=require('express');
//引入mongoose库
const mongoose=require('mongoose');
const DB_URL="mongodb://127.0.0.1:27017/blog";
mongoose.connect(DB_URL);
mongoose.connection.on('connected',function(){
console.log("链接成功");
});
//定义文档模型,类似于数据库建表
const User=mongoose.model('userName',new mongoose.Schema({
title:{type:String,require:true},
body:{type:Number,require:true}
}))
//新增数据
User.create({
title:"功夫熊猫1",
body:19,
},function(err,doc){
if(!err){
console.log(doc);
}else{
console.log(err);
}
})
//删除数据
User.remove({age:20},function(err,doc){
console.log(doc);
})
//修改数据
User.update({name:"功夫熊猫1"},{$set:{age:28}},function(err,doc){
console.log(doc);
})
//新建app
const app=express();
//请求数据
app.get('/',function(req,res){
res.send('<h1>hello world</h1>')
})
//返回json类型数据
app.get('/data',function(req,res){
User.find({},function(err,doc){
res.json(doc);
})
})
//监听8100端口
app.listen('8100',function(){
console.log("8100");
})
服务文件解释说明:
1、express+mongodb开发web后台接口,
Express开发web接口,Express 是一个保持最小规模的灵活的 Node.js。
Mongodb为非关系型数据库。与mysql区别为,mysql为关系型数据,且存储表格类数据,而mongodb为存储类似json数据。
2、怎样使用node操作mongodb呢?需要使用node的mongoose连接二者,进而操作数据。
3、安装express,npm install express –save
4、在项目根目录下新建server文件夹,在该文件夹下新建server.js文件,在文件中写入如下内容:
//引入模块,
const express=require('express');
//新建app
const app=express();
//请求数据,req为请求,res为响应
app.get('/',function(req,res){
res.send('<h1>hello world</h1>')
})
app.listen('9093',function(){
console.log("9093");
})
然后管理员命令进入server文件夹下,输入node server.js把express跑起来。在浏览器输入,localhost:9093就会看到hello world。
5、同样可以返回json类型数据。
//引入模块,
const express=require('express');
//新建app
const app=express();
//请求数据
app.get('/',function(req,res){
res.send('<h1>hello world</h1>')
})
//返回json类型数据
app.get('/data',function(req,res){
res.json({name:"小明",age:19})
})
//监听9093端口
app.listen('9093',function(){
console.log("9093");
})
重启服务node server.js,在浏览器下localhost:9093/data路径下就会看到数据。
6、此处需要重启服务,比较麻烦,因此可以使用nodemon来自动重启,npm install -g nodemon 安装,再启动服务使用nodemon server.js代替node server.js来启动服务。
7、app.get和app.post分别开发get和post接口。App.use使用模块。
8、app.json app.send app.sendfile响应不同的内容。分别返回json,返回文本,返回文件。
9、安装mongodb,启动mongodb使用mongo命令启动。
10、安装mongoose库,他能够连接mongodb数据库。通过mongoose来操作mongdb数据。
npm install mongoose –save
在server.js文件中引入const mongoose=require('mongoose');
然后连接数据库
在控制台输入mongo就会显示出mongodb端口号和地址。
在server,js文件中引入
//引入mongoose库
const mongoose=require('mongoose');
const DB_URL="mongodb://127.0.0.1:27017";
mongoose.connect(DB_URL);
mongoose.connection.on('connected',function(){
console.log("链接成功");
})
这样启动服务nodemon server,js就会在命令控制台打印出链接成功。
如果在端口号后边加入集合,没有会自动创建,有的话被使用。
const DB_URL="mongodb://127.0.0.1:27017/vue-data";
此时会自动创建vue-data集合(前提还没有创建过)。
11、mongoose基本使用
通过connect链接数据库
定义文档模型,类似于MySQL中表的概念。schema和model新建模型。
//定义文档模型,类似于数据库建表
const User=mongoose.model('user',new mongoose.Schema({
user:{type:String,require:true},
age:{type:Number,require:true}
}))
model('user',({}))中user为文档名,类似于表名。
12、数据增删改查通过使用create,remove,update,find,findOne。
//新增数据
User.create({
name:"功夫熊猫1",
age:20,
},function(err,doc){
if(!err){
console.log(doc);
}else{
console.log(err);
}
})
查找
需要在app.get中完成
app.get('/data',function(req,res){
User.find({},function(err,doc){
res.json(doc);
})
})
Find里面不加参数为查找全部数据,加参数User.find({name:”功夫”},function(err,doc)只返回name为功夫的。
删除
//删除数据
User.remove({age:20},function(err,doc){
console.log(doc);
})
修改数据
//修改数据
User.update({name:"功夫熊猫1"},{$set:{age:28}},function(err,doc){
console.log(doc);
})