Vue(全家桶)+node+koa2+mysql+nginx+redis，nginx反向代理和vue前端api

一，前后端分离跨域解决，nginx反向代理。 1，安装配置

现在我们已经把前端页面和后端接口都给写好了，但是取请求的时候就会跨域，报错。

怎么解决呢？可以使用nginx反向代理。 我们先下载一下nginx。 nginx下载地址，http://nginx.org/en/download.html。 下载安装就行了。 打开安装的目录，进入conf文件，我们要对其进行修改配置，适应我们的项目。

//找到location 注释掉，然后再下面加这三个配置端口。
#        location / {
#            root   html;
#            index  index.html index.htm;
#        }
        location / {
            proxy_pass  http://localhost:8080;
        }

        location /qadmin-1.2/ {
            proxy_pass  http://localhost:8888;
        }

        location /api/ {
            proxy_pass  http://localhost:3000;
            proxy_set_header  Host  $host;
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

修改完成后保存，进入cmd，进入nginx文件夹，开启服务。

cd C:\nginx-1.16.1
start nginx

• 1
• 2

2，原理

什么是nginx呢？简单的说就是一个web服务器，它能够统一你本机的所有服务，做成一个方向的路口，并且根据请求的路径给它选择正确的响应服务。

1，如果我们的请求的是后台接口，那它就会把请求分配给node后台。

2，如果我们请求的是前端页面，那它就会把请求分配给前端界面。

二，编写前端api 1，user.js

关于用户的api接口

import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'
//登陆
export function login (FormData) {
  const url = debug ? 'http://47.112.***.***:80/api/user/login' : 'http://localhost:8000/api/user/login'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url, FormData).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//注册
export function signup (FormData) {
  const url = debug ? 'http://47.112.***.***:80/api/user/signup' : 'http://localhost:8000/api/user/signup'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url, FormData).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}

//检验登陆状态
export function getSession () {
  const url = debug ? 'http://47.112.***.***:80/api/user/getSession' : 'http://localhost:8000/api/user/getSession'
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}

//退出登陆
export function logOut () {
  const url = debug ? 'http://47.112.***.***:80/api/user/logout' : 'http://localhost:8000/api/user/logout'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//更新头像
export function upavatar (param) {
  const url = debug ? 'http://47.112.***.***:80/api/user/updata/avatar' : 'http://localhost:8000/api/user/updata/avatar'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url, param).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//更换名字
export function upname (param) {
  const url = debug ? 'http://47.112.***.***:80/api/user/updata/name' : 'http://localhost:8000/api/user/updata/name'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url, param, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}

• 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
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99

2，home.js

首页的api接口

import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'

//文章列表
export function get (num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/list' : 'http://localhost:8000/api/article/list'
  const data = Object.assign({}, {
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//文章详情
export function getdetail (id) {
  const url = debug ? 'http://47.112.***.***:80/api/article/detail' : 'http://localhost:8000/api/article/detail'
  const data = Object.assign({}, {
    id
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//轮播图
export function getbaners () {
  const url = debug ? 'http://47.112.***.***:80/api/file/banerslist' : 'http://localhost:8000/api/file/banerslist'
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}

• 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
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59

3，article.js

文章相关的api接口

import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'
//文章列表
export function get (lei,num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/list' : 'http://localhost:8000/api/article/list'
  const data = Object.assign({}, {
    lei,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//文章详情
export function getdetail (id) {
  const url = debug ? 'http://47.112.***.***:80/api/article/detail' : 'http://localhost:8000/api/article/detail'
  const data = Object.assign({}, {
    id
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//获取评论
export function getcomments (id) {
  const url = debug ? 'http://47.112.***.***:80/api/article/comments' : 'http://localhost:8000/api/article/comments'
  const data = Object.assign({}, {
    id
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//提交评论
export function postcomments (comments) {
  const url = debug ? 'http://47.112.***.***:80/api/article/postcomments' : 'http://localhost:8000/api/article/postcomments'
  const p = new Promise(
    (resolve, reject) => {
      axios.post(url, comments).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//增加阅读量
export function addhit (id, num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/addhit' : 'http://localhost:8000/api/article/addhit'
  // console.log(id, num)
  const data = Object.assign({}, {
    id,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//点赞
export function addgood (id, idstr, num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/addgood' : 'http://localhost:8000/api/article/addgood'
  // console.log(id, num)
  const data = Object.assign({}, {
    id,
    idstr,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//收藏
export function addlike (id, idstr, num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/addlike' : 'http://localhost:8000/api/article/addlike'
  // console.log(id, num)
  const data = Object.assign({}, {
    id,
    idstr,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//取消点赞
export function subgood (id, idstr, num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/subgood' : 'http://localhost:8000/api/article/subgood'
  // console.log(id, num)
  const data = Object.assign({}, {
    id,
    idstr,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}
//取消收藏
export function sublike (id, idstr, num) {
  const url = debug ? 'http://47.112.***.***:80/api/article/sublike' : 'http://localhost:8000/api/article/sublike'
  // console.log(id, num)
  const data = Object.assign({}, {
    id,
    idstr,
    num
  })
  const p = new Promise(
    (resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.error(err)
      })
    }
  )

  return p
}

•