[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之nginx反向代理和vue前端api

导语：

暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第十一篇，开始配置nginx反向代理和vue前端api编写。

微信搜索 【web小馆】，回复 ”全栈博客项目“，即可获取 项目源码和后续的实战文章教程。

一，前后端分离跨域解决，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;
        }

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

cd C:\nginx-1.16.1
start nginx

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
}

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
}

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
}

你们的赞就是对我最大的鼓励。谢谢~

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！