如何搭建一个前后端分离的项目

整体思路

如下：
动态请求，Client->Nginx->Tomcat->Nginx->Client
静态请求，Client->Nginx->Client

Nginx作用：
1、处理静态请求
2、负载均衡
3、转发解决跨域问题

Nginx如何区分静态请求和动态请求

自定义标识
调用controller请求时都加上一个前缀，比如（/con），Nginx处理请求时，请求如果以/con开头，转发给Tomcat，非/con开头的，直接返回静态资源。

示例
在前端发送请求时，添加统一请求前缀

//在一个js文件中定义，（这里叫baseQuest.js）
const service = axios.create({
    baseURL: "/con", // 所有请求统一添加api前缀
    timeout: 10000,// 请求超时时间
})
//(axios可参考https://www.cnblogs.com/morang/p/8424032.html)
//在vue中的js业务文件中，引入这个文件:
import request from '@/baseQuest'
const Con = {
    /**
     * 查询列表
     */
    getListQuery: (param) => {
        return request({
            url: '/shili/getList',
            method: 'post',
            data: param
       	})
   	}
}
export default Con

在后端处理请求时，过滤/con开头的请求，在WEB-INF/web.xml中定义

  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/con/*</url-pattern>
  </servlet-mapping>

Nginx配置
nginx配置相关，可参考：
Nginx配置upstream实现负载均衡：https://blog.csdn.net/gghh2015/article/details/102781054
Nginx中文站 › Nginx中文文档：http://www.nginx.cn/doc/
Nginx配置文件详解：https://cloud.tencent.com/developer/article/1469926

upstream my.controller.local {
    server 127.0.0.1:8001  weight=10 max_fails=2 fail_timeout=30s;
    server 20.22.21.23:80 backup;
}
upstream my.static.local {
    server real.my.static.local  weight=10 max_fails=2 fail_timeout=30s;
}
server
{
    listen 80;
      
    access_log /export/Logs/servers/nginx/logs/my.controller.local_access.log main;
    error_log  /export/Logs/servers/nginx/logs/my.controller.local_error.log warn;
    error_page 411 = @my_error;
	#打包后的工程在容器中的根路径
    root /export/App/my.controller.local/; 
	#以/con开头的请求转发到http://my.controller.local，就是到本地的8081端口127.0.0.1:8001
    location /con {
        proxy_next_upstream     http_500 http_502 http_503 http_504 error timeout invalid_header;
        proxy_set_header        Host  $host;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass              http://my.controller.local;
        expires                 0;
	}
	#其他请求转发到http://my.static.local，就是到real.my.static.local域名下
	location / {
        proxy_next_upstream     http_500 http_502 http_503 http_504 error timeout invalid_header;
        proxy_set_header        Host  'real.my.static.local';
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass              http://my.static.local;
        expires                 0;
	}
}

前端静态页面如何组成一个工程并发布

前端静态工程的结构和搭建过程

vue组件的使用，element组件的使用

可参考：
1、https://mp.weixin.qq.com/s/okKU5VmBxwyht09TGTNdBQ

---

后记（初衷）：
作为一个后端开发，对于带页面的工程，就会写jsp，vm是不是有点落后了。
另外，前后端分离好处多多：
1、nginx转发方便解决跨域问题
2、工程开发部署方便等

---

首先，来自遥远的回忆，
jsp的使用：返回String就是jsp的路径
@RequestMapping(value ="/userList", method =RequestMethod.GET)
private String userList(Model model) throws IOException{
List userList= userService.queryAllUser(); //获取所有用户
model.addAttribute(“userList”, userList); //传递给Model,页面获取
return “main.index”;
}

vm的使用：
在spring mvc的controller中带有@RequestAndView的方法里，直接返回ModelAndView，
@RequestMapping("/user/list")
public ModelAndView queryUserList(@ModelAttribute(“userParam”) UserParam userParam)

ModelAndView mv = new ModelAndView("/user/list");
其中路径"/user/list"就是工程里webapp/WEB-INF/vm文件夹下的前端页面了。
mv.addObject(“pageResult”, pageResult);
这样就把对象放到页面里去了，由页面渲染后返回到浏览器里。
#foreach($!rx in $!pageResult)前端页面通过$!取值，这里pageResult是个list。

---