代码编织梦想

在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项目,然后使用dubbo+zookeeper或者springCloud来构建微服务,前端则会是一个单独的项目,前台的请求通过微服务来调用。但是,不同与传统的web项目,这类前后端分离的项目如何在开发中部署和运行呢?

当前后端分离时,后端项目一定会被加载到tomcat的webapp目录下面,但是前端的资源院该如何被访问到呢?这里以tomcat这个中间件为例,探讨在开发这类项目的时候,如何让前后端分离的项目部署并且运行起来,即后端项目部署在tomcat之后如何在运行时访问静态资源(非上线部署)。

主要有两种方案:1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中,并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍

一、使用Nginx来访问静态资源。

在本地安装nginx并且修改nginx.conf,修改相关配置,将web访问的端口的资源进行更改,配置如下:

server {        listen       80;        server_name  localhost;        charset utf-8;        #access_log  logs/host.access.log  main;

location / {              proxy_pass http://tomcat_pool;              proxy_redirect off;

proxy_set_header HOST $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

client_max_body_size 10m;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 4k;

proxy_buffers 4 32k;

proxy_busy_buffers_size 64k;

proxy_temp_file_write_size 64k;

}

location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$  {

root D:\Workspaces\esop-html;             index index.html;

}

listen对象改为你本地的tomcat访问端口,最下面location中的root改为你前端项目中静态资源的位置,这样就可以实现只部署后端的项目就能访问前端的页面了。

二、将前端项目转换为动态的web项目,随后端项目一起丢入tomcat

这个方案省去了在本地安装和配置nginx,但是也只适用于开发阶段项目的部署运行和调试,真正在生产环境通常前后端项目会部署在不同的服务器。

如果是Intellij Idea,在导入前端项目之后,右键项目 add framework support --> web application,这时将会把前端项目转换为一个javaweb项目,然后将静态资源放在生成的web目录下即可。

如果是eclipse,可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下,或者直接先导入前端项目,然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。

然后,运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。

分享一个前后端分离的web项目(vue+spring boot)_smallsnail-wh的博客-爱代码爱编程_前后端分离完整项目

Github地址:https://github.com/smallsnail-wh 前端项目名为wh-web后端项目名为wh-server项目展示地址为我的github pages(https://smallsnail-w

前后端分离方案token工具类_river472242652的博客-爱代码爱编程_token工具类

JWT 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准,可实现无状态、分布式的Web应用授权。另外还有一种轻量级的方案(减轻网络压力)随机数token方案(在redis中做映射,该值与userid做成字典

前后端分离--postman神器_我爱看明朝的博客-爱代码爱编程

前后端分离–postman神器 macdown编写接口文档 postman提供macdown语法的文档编写 可以写表格描述 输入参数和响应返回 多个环境 后端开发同学在开发过程中测试接口使用的是本机localh

前后端分离api文档规范_心之归处的博客-爱代码爱编程

api简介           随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。  前端和后端的唯一联系,变成了API接口;API文档变成了前后端开发人员联系的纽带,变得越来越重要,swagger就是一款让你更好的书写API文档的框架。    --引用 RyuG

前后端分离开发具体实现_armymans的博客-爱代码爱编程_前后端分离怎么实现

一. 前后端分离开发具体实现 1 Visual Studio Code开发工具的安装 双击安装,即可成功 3.1.2 Visual Studio Code开发工具的配置 3.1.2.1、设置中文环境 设置中文环境

前后端分离跨域解决方案-4种_技术武器库的博客-爱代码爱编程

一、第一种方式: 1、编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; im

使用mock.js进行独立于后端的前端开发_weixin_33805992的博客-爱代码爱编程

概述 Mock.js实现的功能 基于 数据模板 生成数据基于 HTML模板 生成数据拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <script src="http://mockjs.com/dist/mock.js"></script> <scrip

vue学习篇——前后端分离开发-爱代码爱编程

0 复习Vue 1 MVVM:前端的设计模式,他实现了双向数据绑定,他与MVC有什么框架?MVC是没有实现双向数据绑定 2 双向数据绑定:当model数据发生改变之后,页面view层自动改动;当页面数据发生改变的时候,m

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目-爱代码爱编程

  Java后端接口开发 1、前言 从零开始搭建一个项目骨架,最好选择合适,熟悉的技术,并且在未来易拓展,适合微服务化体系等。所以一般以Springboot作为我们的框架基础,这是离不开的了。 然后数据层,我们常用的是Mybatis,易上手,方便维护。但是单表操作比较困难,特别是添加字段或减少字段的时候,比较繁琐,所以这里我推荐使用Mybatis

前后端分离神器 — 在线接口Mock工具fastmock-爱代码爱编程

fastmock fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。 在使用fastmock之前,你的团队实现数据模拟可能是下面的方案中的一种或者多种: 本地手写数据模拟,在前端代码中产生一大堆的moc

前后端分离开发模式介绍-爱代码爱编程

1.1 什么是前后端分离 前后端分离是目前一种非常流行的开发模式,它使项目的分工更加明确: 后端:负责处理、存储数据前端:负责显示数据前端和后端开发人员通过 接口 进行数据的交换。 1.2 为什么要进行前后端分离 前后端可以身心愉快地专注于各自擅长的领域避免后端写前端代码(基本上1天时间,20%写后端代码,80%写页面…)前端配置后端代码运行环境(

前端开发环境、运行环境-爱代码爱编程

目录 开发环境 一、git 二、Chrome调试工具 三、抓包 四、webpack babel 1、webpack 2、babel 3、模块加载方案比较(ES6的Module和CommonJS) 五、linux常用命令 运行环境 一、网页加载过程 1、浏览器从输入URL到页面渲染的整个流程 2、浏览器渲染机制 3、重排/回流、重

前后端分离中经常用到的工具-爱代码爱编程

0.node.js(脱离浏览器也可以运行JavaScript,只要有JavaScript引擎就可以) 0.1.node.js是基于Chorme v8引擎的JavaScript运行环境; 0.2.作用: 0.2.1:javascript运行环境 eg:直接创建01.js编写代码:console.log("hello node") ---->运行:nod

阿里P8写的源码真的强,原来源码是这样理解的-爱代码爱编程

一定不要放弃阅读源码 “源码”这两个字想必大家一看到是有人爱有人恨。后者在于:费时费力还复杂太考验耐心!但优秀的源码中有着多年积淀下来的精华,可以说阅读源码小到对源码所提供的功能上的使用更加熟练,大到使我们的程序设计更加完美优秀。身为程序员的我们为了不被时代淘汰,为了在同级中脱颖而出,肯定是不能停止学习的!为什么我们就不能做到通读源码?让多数人的短处成为