部署前端代碼到nginx
1.下載nginx
2.配置自己的conf文件用默認的也行，我另外配置了一個
location / {
root LearningWebsite; #站點目錄
index main.html main.htm;
}
LearningWebsite 你的前端目錄位置 我的和nginx在同一級目錄所以只寫了目錄名
main.html LearningWebsite目錄下的主頁
如果你有2個項目用同一個端口nginx設置如下
location /bg {
alias BackgroundSystem; #站點目錄
index demo.html;
}
注意：alias是這個而不是root BackgroundSystem（另一個項目的目錄）
index demo.html; BackgroundSystem目錄下的主頁
nginx解決跨域問題
1.修改html中請求路徑代碼
原來的 httpUrl : 'http:127.0.0.1:8081/myWeb'
現在的 httpUrl : '/myWeb'
2.設置nginx proxy_pass
location /myWeb {
proxy_pass http://127.0.0.1:8081;
}
跨域完整前端例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理系統</title> </head> <body> <h3 id="bg"> 這是后台管理系統</h3> <br> <p id="zhao"></p> </body> <script> /*請求參數*/ var paramObj = { // httpUrl : 'http:127.0.0.1:8080/myWeb', httpUrl : '/myWeb', type : 'GET', data : { } } /*請求調用*/ httpRequest(paramObj,function(respondDada) { //這里編寫成功的回調函數 console.log(respondDada) document.getElementById("zhao").innerHTML =JSON.stringify(respondDada,null,2).toString(); },function() { alert('網絡錯誤') }); function httpRequest(paramObj,fun,errFun) { var xmlhttp = null; /*創建XMLHttpRequest對象， *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象：new ActiveXObject("Microsoft.XMLHTTP") * */ if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else if(window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } /*判斷是否支持請求*/ if(xmlhttp == null) { alert('你的瀏覽器不支持XMLHttp'); return; } /*請求方式，並且轉換為大寫*/ var httpType = (this.paramObj.type || 'GET').toUpperCase(); /*數據類型*/ var dataType = this.paramObj.dataType || 'json'; /*請求接口*/ var httpUrl = this.paramObj.httpUrl || ''; console.log("請求地址："+httpUrl) /*是否異步請求*/ var async = this.paramObj.async || true; /*請求參數--post請求參數格式為：foo=bar&lorem=ipsum*/ var paramData = this.paramObj.data || []; var requestData = ''; for(var name in paramData) { requestData += name + '='+ paramData[name] + '&'; } requestData = requestData == '' ? '' : requestData.substring(0,requestData.length - 1); console.log(requestData) /*請求接收*/ xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { /*成功回調函數*/ fun(xmlhttp.responseText); }else{ /*失敗回調函數*/ errFun; } } /*接口連接，先判斷連接類型是post還是get*/ if(httpType == 'GET') { xmlhttp.open("GET",httpUrl,async); xmlhttp.send(null); }else if(httpType == 'POST'){ xmlhttp.open("POST",httpUrl,async); //發送合適的請求頭信息 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(requestData); } } </script> </html>
后端接口例子
@GetMapping (value = "/myWeb") public Map<String,Object> myWeb(){ Map<String,Object> map=new HashMap<>(); map.put("name","zhao"); map.put("sex",12); return map; }
nignx 啟動 我在windows上啟動的
D:\mySoftwareEnvironment\nginx-1.16.1> nginx.exe -c conf\myconfig.conf
linux系統 啟動nginx start nginx
以下命令windows linux通用
nginx -s reload 熱更新
nginx -s quit 溫柔停止
nginx -s stop 粗暴停止
完結撒花
之前在學校用bootstrap寫的前端。
項目地址：https://gitee.com/richOne/BootstrapyWebSiteCode/tree/master/nginx-1.16.1