vue连接node的api请求

1.创建vue项目

安装vuecli，执行vue init webpack + "文件名"，创建vue空工程。网上很多教程，这里不再叙述。

2.使用elementUI

地址：https://element.eleme.cn/

安装：npm i element-ui -S
在vue项目中使用：

在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

当然，也可以按需求引入想要的模块。在官网有教程。

3.安装axios

执行npm i axios --save

我们使用axios来发送请求，这里对axios进行封装，封装方法如下：

import Axios from 'axios'

const http = Axios.create({
  withCredentials: true
})
// 添加一个请求拦截器
http.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error)
  }
)

// 添加一个响应拦截器
http.interceptors.response.use(
  function (res) {
    return res
  },
  function (err) {
    return Promise.reject(err)
  }
)

export default http

4.使用axios发送请求。

1.创建一个api文件，这里我们的目的是为了把全部的请求封装到一个个单独的js文件里。然后在vue文件中使用。
例如登陆模块，就在api里面添加login.js

import http from '@/util/http'

// util/http文件就是步骤3中封装的方法

// 登陆api
function login (data) {
  return http({
    url: '/api/login',
    method: 'post',
    headers: {
      noMessage: true
    },
    data
  })
}

export {
  login
}

2.我们导出了一个login方法，在login.vue中使用该方法。

import {login} from '@/api/login'

3.使用方法

 login({userName: 'song', passWord: '123456'}).then(res => {
        console.log(res.data)
      })

5.解决跨域问题。

1.这里我们使用代理的方式，解决跨域问题。在config/index.js中

 proxyTable: {
      '/api': {
        target: "http://127.0.0.1:3000/", // API服务所在IP及端口号
        changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }

    },

这样，我们就可以请求到上次搭建的node服务器。基本做到前后端分离开发。但是node里面还有好多坑，我们下次再填。