mongodb结合axios实现vue数据请求

当我们性高彩烈的使用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);

})