java如何实现前后端分离
1、第一步：配置服务器环境，即新建一个springboot项目，写一个接口，代码如下：
@RestController
public class DemoController {
@PostMapping("/orderinfo")
String orderInfo(){
return "order";
}
}
2、第二步：前后端分离最主要的就是配置跨域问题，很多接口不通都是跨域惹的祸，跨域配置如下：
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
}
3、第三步：启动项目，并用posman进行接口测试，在工具里面post一下 http://127.0.0.1:8080/orderinfo，效果如图：
4、第四步：下载nginx，并配置好监听端口。nginx官网地址：http://nginx.org/en/download.html，选择Mainline version下面的windowns版本即可，下载后解压，找到里面conf目录，有个nginx.conf，编辑它，如下：
worker_processes 1; #工作进程的个数，一般与计算机的cpu核数一致
events {
worker_connections 1024; #单个进程最大连接数（最大连接数=连接数*进程数）
}
http {
include mime.types; #文件扩展名与文件类型映射表
default_type application/octet-stream; #默认文件类型
server {
listen 8039;#监听80端口，可以改成其他端口
server_name localhost; # 当前服务的域名
charset utf-8;#字符集
location / {
root D:/nginx/nginx-1.13.0/html;
index index.html;
}
#启用nginx status 监听页面
location /nginxstatus {
stub_status on;
access_log on;
}
error_page 500 502 503 504 /50x.html;
}
}
5、第五步：写一个html文件放到上面的配置路径下，比如上面配置的是：D:/nginx/nginx-1.13.0/html，那就把html文件放到此目录下，如图：
6、第六步：html代码如下：
<a href="javascript:void(0)" id="x1">请求接口</a>
<span></span>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('#x1').click(function(){
$.post(' http://127.0.0.1:8080/orderinfo', {}, function(data){
console.log(data);
$("span").html(data);
})
})
</script>
7、第七步：前后端分离完成，现在开始测试一下，如图：
