部署前端代码到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