Nodejs和axios的前后端通信_axios nodejs

Nodejs和axios的前后端通信

前端axios的使用

1. 首先在mian.js里面引入axios

import axios from 'axios';
Vue.prototype.$axios = axios;

1
2
3
4

2. 在router路由里面设置路径,children :[这里是二级路由是在admin下的路由]

 {
    path: '/login',
    name: 'Login',
    component: ()=> import('@/views/Login.vue')
  },
  {
    path: '/admin',
    name: 'Admin',
    component: ()=> import('@/views/Admin.vue'),
    children : [
      // 当点击职位编辑的时候，会给当前页面的url后面添加上postedit 然后在这里 根据path进行匹配路由，根据指定的路由进入指定页面
      { path : 'postedit' , component : ()=> import('@/views/Admin_postedit.vue')} ,
    ]
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 写配置文件vue.config.js

module.exports = {
    devServer : {
        proxy : {
            //在vue的axios中只有/api开头的路由; 就会全部拼接到target的URL的后面
            '/api' : {
                target : 'http://localhost:3000',
                changeOrigin : true
            }
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11

4. axios设置URL

//这里设置的URL去和后端的接口匹配，匹配成功则进行通信 
  this.$axios.post('/api/post/add' , param , 

        }).then((res)=>{

        }).catch(()=>{

        })
    },
1
2
3
4
5
6
7
8
9

后端nodejs的接口

1. 连接服务器并启动服务器

var express = require('express');
var app = express();
//这里的URL和端口，要和前端里的配置文件相匹配
app.listen(3000 , 'localhost',(err)=>{
    if(err){
        console.log('服务器启动失败');
        return;
    }
    console.log('服务器启动成功');
});
1
2
3
4
5
6
7
8
9
10

2. 设置一级路径, 当前端的请求过来时，会先经过一级路由进行匹配；然后在进行路由的匹配

//引入在router文件下面的post路由；
var postRouter = require('./routes/post')
//一级路由
app.use('/api/post',postRouter)
1
2
3
4

2. 匹配路由：设置造一级路由引入的路由函数

//把第一个参数直接拼接到 /api/post 的后面 ，
router.post('/add', (req,res,next)=>{
     //获取前端发来的数据
     //post请求要使用req.body 请求数据
     //get请求要使用req.query 请求数据
    var page = req.query.page;
    var count = 10;
       //对数据库进行查询，并且用res发给前端请求的数据
    PostModel.find().then((infos)=>{
        if(infos.length){
            res.json({
                code : 0,
                errmsg : 'ok',
                infos : infos,
            })
        }
        else{
            res.json({
                code : -1 ,
                errmsg : 'nothing',
                infos :'',     
            })
        }
    }).catch((err)=>{
        res.json({
            code : -1,
            errmsg : 'nothing',
            infos :'',
            
        });
    })
}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32