java如何实现前后端分离

1、第一步：配置服务器环境，即新建一个springboot项目，写一个接口，代码如下：@RestControllerpublic class DemoController { @PostMapping("/orderinfo") String orderInfo(){ return "order"; }}

2、第二步：前后端分离最主要的就是配置跨域问题，很多接口不通都是跨域惹的祸，跨域配置如下：@Configurationpublic 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、第七步：前后端分离完成，现在开始测试一下，如图：