Nginx反向代理实现前后端分离

前后端分离就是让前后端专注于做自己的实现

自己写过简单的Web小案例，即便是这样，在前后端不分离的情况下，虽然基本语法都懂，但是实现起来还是相当繁琐，前端依赖后端传来的数据，耦合度很高。最近在网上学习了前后端分离的实现，一方面技术水平有限，另一方写作水平有限，写这篇仅仅只是记录整理整个实现的过程

整个流程：
首先前后端分离，前端实现简单的登陆界面，后端向前端返送数据，我理解Nginx就是做转发功能

1. 前端：Vue框架
2. Nginx服务器
3. 后端：Golang

Vue

假定安装过程已完成，具体安装过程省略，网上很多，开发工具为WebStorm
1.目录结构新建一个Test.vue

2.Test.vue内容，主要template里面的内容，一个简单的登陆界面

3.在App.vue里添加test字段

4.启动

Go

开发工具GoLand
1.新建一个mainWeb.go

2.mainWeb.go

import (
	"fmt"
	"log"
	"net/http"
	"strings"
)

func sayhelloName(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()  //解析参数，默认是不会解析的
	fmt.Println(r.Form)  //这些信息是输出到服务器端的打印信息
	fmt.Println("path", r.URL.Path)
	fmt.Println("scheme", r.URL.Scheme)
	fmt.Println(r.Form["url_long"])
	for k, v := range r.Form {
		fmt.Println("key:", k)
		fmt.Println("val:", strings.Join(v, ""))
	}
	fmt.Fprintf(w, "Hello astaxie!") //这个写入到w的是输出到客户端的
}
func login(w http.ResponseWriter,r *http.Request){
	username:=r.FormValue("username")
	password:=r.FormValue("password")
	if username == "lee" && password == "777" {
		fmt.Fprintf(w,"ok")
	}else {
		fmt.Fprintf(w,"wrong")

	}


}
func main() {
	http.HandleFunc("/", sayhelloName) //设置访问的路由
	http.HandleFunc("/login", login) //设置访问的路由
	err := http.ListenAndServe(":9090", nil) //设置监听的端口
	if err != nil {
		log.Fatal("ListenAndServe: ", err)
	}else {
		fmt.Println("listen:9090")
	}

3.启动

1.前端运行在8080端口
2.后端运行在9090端口

Nginx

安装过程省略…
1.更改配置

2.更改为如下所示

 server {

        listen       7070;
        server_name 127.0.0.1:8080 127.0.0.1:9090;

        location / {
            proxy_pass http://127.0.0.1:8080;

        }

        location /login {
            proxy_pass http://127.0.0.1:9090;
            proxy_set_header Host $http_host;
        }

Nginx默认80端口，修改为7070，server_name为前后端的位置，location将路由转发至哪里。

1. location /：将127.0.0.1:7070 指向 前端127.0.0.1:8080
2. location /login :将127.0.0.1:7070/login指向127.0.0.1:9090/login

3.启动Nginx

效果

1.8080端口界面

2.7070端口界面，和8080相同

3.7070端口界面输入用户名：lee，密码：777 点击登陆

4.密码正确显示ok，如果不正确会显示wrong

结语

这篇是按自己的理解写的第一篇整理，重点是为了让自己理清前后端分离的逻辑实现，应该还有其他的方式实现前后端分离的数据交互，网上搜的是使用Nginx反向代理实现，但是试了网上的一些方法并没有成功，可能是步骤有误，所以又根据相关资料整理整个实现步骤，代码较为简陋，逻辑基本实现，细节问题没有深究。