nginx先後端分離

時間 2019-11-18

標籤 nginx 後端分離欄目 Nginx 简体版

原文原文鏈接

jdk和tomcat的安裝在此就不做過多的講解，能夠百度查一下相關教程

首先安裝nginx的依賴庫：

yum -y installl gcc gcc-c++ autoconf automake

yum -y install pcre pcre-devel

yum -y install zlib zlib-devel

新建一個文件夾，下載解壓nginx

mkdir /usr/my

cd /usr/my

wget http://nginx.org/download/nginx-1.14.0.tar.gz

tar -zxvf nginx-1.14.0.tar.gz

安裝nginx

cd nginx-1.14.0

./configure

make && make install  #當usr/local文件夾下出現nginx文件夾代表已經安裝成功

切換到nginx的目錄，配置一下nginx.conf。沒有這個文件就建立一個新的

cd /usr/local/nginx/conf

# nginx.conf
user nobody;
worker_processes 2;
events{
        worker_connections 1024;
}
http{
 	include mime.types; #文件擴展名與文件類型映射表
	default_type application/octet-stream; #默認文件類型
        server{
                listen 192.168.2.19:80; #配置成本身本機的ip地址和端口
                server_name 192.168.2.19;
                access_log logs/server1.accesscombined;
		#定義服務器的默認網站根目錄位置
		root /usr/my/web-project/ve/dist/;
       		index login.html;
                # index index.html     # vue的配置
 		#默認請求
        	location / {
        	    index login.html;
                    # 如下是vue的配置
        	    # try_files $uri $uri/ @router;
        	    # index index.html; 
        	}                
               # location @router {
               #    rewrite ^.*$ /index.html last;
               # }
		#配置Nginx動靜分離，定義的靜態頁面直接從Nginx發佈目錄讀取。
	        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|woff|woff2|properties|json|map)$ {
          	    if (-f $request_filename) {
                      expires 1d;
                      break;
                    }
                }                            
		#設置代理，轉發請求，msm是我部署到tomcat的項目名
		location /msm  {
		    index login.html;
                    proxy_set_header X-Forwarded-Host $host;
                    proxy_set_header X-Forwarded-Server $host;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://localhost:8080;
		}
        }
}

建立一個登錄的頁面，對應在nginx.conf配置了頁面的路徑

touch /usr/my/web-project/ve/dist/login.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>login</title>
</head>
<body>
	<div style="border: 1px solid #666666; width: 250px; height: 150px; position: absolute;">
		<div style="margin-top: 20px;">
			<span>用戶名：</span>
			<input type="text" id="username" name="username" value=""><br />
		</div>
		<div>
			<span style="margin-left: 15px;">密碼：</span>
			<input type="text" id="password" name="password" value="" style="margin-top: 10px; margin-bottom: 10px;"><br />
		</div>
		<button style="margin-left: 160px;" onclick="login();">登錄</button>
	</div>
	<script type="text/javascript"> 
        var url = "/msm/api/login"; 
        function login(){    
		    var postData = "username=" + document.getElementById("username").value + "&password=" + document.getElementById("password").value;     
		    var xhr = new XMLHttpRequest();  
		    xhr.onreadystatechange = function(event){   
		        if(xhr.readyState == 4){    
		            if(xhr.status == 200){    
		                //console.log(xhr)   
		            }
		        }
		    };
		    xhr.open('POST',url,true);   
		    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
		    xhr.send(postData);     
		}   
	</script>
</body>
</html>

後臺的項目我直接去下載了mybatisplus的一個項目源碼，在userController增長了一個測試的方法

@ResponseBody
    @RequestMapping("/api/login")
   public Object login(@RequestParam(value = "username", required = false) String username,
    @RequestParam(value = "password", required = false) String password){
    	return renderSuccess("驗證成功:"+username);
    }

打包這個項目成war包，名字爲msm。放到tomcat中運行

nginx經常使用的命令，啓動nginx

cd /usr/local/nginx/sbin
./nginx                    # 啓動
./nginx -s reload     # 修改完配置文件以後從新加載
./nginx -s reopen    # 從新啓動 
./nginx -s stop        # 中止

在瀏覽器訪問192.168.2.19會直接打開登錄的頁面，輸入用戶名/密碼點擊登錄按鈕，按F12進入瀏覽器的調式模式下，查看有沒有發起http請求，請求返回的結果是什麼。

能夠去下載一個vue的後臺管理模版，打包以後把dist放到/usr/my/web-project/ve/中試試，修改一下請求的連接什麼的，完全的弄一個先後端分離的項目。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。