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

系统管理员 2022-12-02 15:19 38阅读 0赞

导语：

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

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

### 本文的目录 ###

*  一，前后端分离跨域解决，nginx反向代理。
 *   *  1，安装配置
     *  2，原理
 *  二，编写前端api
 *   *  1，user.js
     *  2，home.js
     *  3，article.js

# 一，前后端分离跨域解决，nginx反向代理。 #

## 1，安装配置 ##

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

**怎么解决呢？可以使用nginx反向代理。**  
我们先下载一下nginx。  
nginx下载地址，[http://nginx.org/en/download.html][http_nginx.org_en_download.html]。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
下载安装就行了。  
打开安装的目录，进入conf文件，我们要对其进行修改配置，适应我们的项目。  
![在这里插入图片描述][20200831203747574.png_pic_center]

//找到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呢？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]  
**简单的说就是一个web服务器，它能够统一你本机的所有服务，做成一个方向的路口，并且根据请求的路径给它选择正确的响应服务。**

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

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

# 二，编写前端api #

## 1，user.js ##

关于用户的api接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]

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接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]

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接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]

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
    }

![在这里插入图片描述][20200819195904573.png_pic_center]

**你们的赞就是对我最大的鼓励。谢谢~**  
![在这里插入图片描述][20200902155530706.jpg_pic_center]

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

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0683b3f2a2bd4e7fbb1dcbf5f0e5f81c.png
[20200831203747574.png_pic_center]: /images/20221123/9fe61dd301f24ed7813cc9dd073b5f29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a8b6de42a4e542c7b05210cb8a65d5e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/302db175b57f4845a8c6daaa9620c486.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/f3ef1c2934b645d88db344c9a24e823e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/b2e7a6eead4e4b268551db3f9d7e3437.png
[20200819195904573.png_pic_center]: /images/20221123/0cf171ec89cb49c191bbdedc53654e14.png
[20200902155530706.jpg_pic_center]: /images/20221123/39c34094a0ac4a81bafd5125e6747882.png
[20200825125805528.png_pic_center]: /images/20221123/03c99b0f95624a68aa620b347cf054c8.png
[node]: /images/20221123/f6f309f82c454b66a0cbf2b29a1953c8.png