当前位置:首页 » 网页前端 » 后端启动前端没有资源
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

后端启动前端没有资源

发布时间: 2022-10-03 13:00:28

1. 如何在开发时部署和运行前后端分离的JavaWe

在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项目,然后使用bbo+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:Workspacesesop-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中运行即可。

2. 如何处理好前后端分离的 API 问题

意义很大,但是你的问题本身认识有偏差。

对于前后端分离,认识上有个误区,那就是很多人自称:老早就分离了,全AJAX,使用Angular或者什么什么就可以了。

这个说法是不合适的,打个比方,别人问的是“如何解决家禽把蛋生在水草边的问题?”,但实际上人家养的是鸭子,答题的却是养鸡的,所以回答“不让去水边就行了”,这显然不在点子上。

这两年业界说的前后端分离,是限于偏展示类的系统(用A代替),而不是应用、管控类Web项目(用B代替),在B类项目里,前后端是天然分离的,对此,除了少部分后端开发人员,基本所有人的认识都是一致的。上一段中这样回答的人一般都是只做B类项目,在B类项目里,前后端分离是共识,不需要讨论。

那么,剩下的问题就是讨论A类项目的前后端分离了。这个问题的核心在什么地方呢,在于模板的与数据结合的位置,以及,模板的控制权在谁手里。经过这两年的讨论,基本上我们可以达成的共识就是:模板应当由前端人员去控制,主要原因有两方面:

- 性能优化(尤其是外部资源的管理与发布,请求合并等等)
- 协作的顺畅性(已形成模板的界面片段的返工等问题)

那么,模板到底应该在什么地方跟数据结合?

这个问题就比较折腾了,有部分人尝试像B类项目那样,使用js模板,然后在浏览器端执行,这是存在一些问题的,比如说seo不友好,首屏性能不够,尤其对于首页DOM量很大的电商类网站,差距很明显。

所以还是得把主要的模板放在服务端来执行。在这个过程中,阿里作了一些尝试,那就是引入Node层,在这一层把模板与数据进行合成,然后浏览器拿到的就是生成好的HTML了,但也不是所有HTML都是这么生成好的,还是会有一些内容等到了浏览器之后,再用js去加载和生成。

3. 前端端口是怎么交互后端

随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式。在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高。

首先我们要知道为什么前后端要交互

为什么要前后端分离?

把前端与后端独立起来去开发,放在两个不同的服务器,需要独立部署。两个不同的工程,两个不同的代码库,不同的开发人员,前后端工程师需要约定交互接口,实现同步开发。开发结束后需要进行独立部署,前端通过接口来调用调用后端的API,前端只需要关注页面的样式与动态数据的解析和渲染,而后端专注于具体业务逻辑。


前后端分离的优点是什么?

1、彻底解放前端。前端不再需要向后台提供模板或是后台在前端HTML中嵌入后台代。

2、提高工作效率,分工更加明确。前端只关注前端的事,后台只关心后台的活,两者开发可以同时进行,在后台还没有时间提供接口的时候,前端可以先将数据写死或者调用本地的JSON文件即可,页面的增加和路由的修改也不必再去麻烦后台,开发更加灵活。

3、局部性能提升。通过前端路由的配置,我们可以实现页面的按需加载,无需一开始加载首页便加载网站的所有的资源,服务器也不再需要解析前端页面,在页面交互及用户体验上有所提升。

4、降低维护成本。通过目前主流的前端MVC框架,我们可以非常快速的定位及发现问题的所在,客户端的问题不再需要后台人员参与及调试,代码重构及可维护性增强。

5、实现高内聚低耦合,减少后端(应用)服务器的并发/负载压力。

6、即使后端服务暂时超时或者宕机了,前端页面也会正常访问,但无法提供数据。

7、可以使后台能更好的追求高并发、高可用、高性能,使前端能更好的追求页面表现、速度流畅、兼容性、用户体验等。

了解了这些,我们再来看前后端是怎么实现交互的

前端调用后端接口无外乎六种方法,如下:

1、打开vs,创建空的asp.net mvc演示项目【WebMVC】

(1)依次点击【文件】->【新建】->【项目】;

(2)在【新建项目】界面选择【Web】->【ASP.NET Web 应用程序(.NET Framework)】,输入名称,选择框架至少4.5版本,点击【确定】按钮;

(3)选择【空】->【MVC】->【确定】 ;

(4)创建好了项目。

2、在项目中

(1)在Controllers文件夹上点击鼠标右键,依次选择【添加】->【控制器】,即可完成HomeController的创建;

(2)在Controller的Index方法内,点击鼠标右键,选择【添加视图】;

(3)在项目中添加文件夹【Content】并添加jquery源文件;

(4)在Index页面添加jquery的引用。

3、在Index页面中添加一个输入文本框,一个按钮,以及显示结果的dom。

4、在HomeController中添加新的方法,用于接收前台传入的参数,组装后返回。

5、在Index页面,添加Jquery的ajax方式,调用后台接口,返回结果的处理代码。

6、在vs中,按F5调试运行结果,如下:

(1)在文本框中输入内容;

(2)点击按钮,调用接口,并将返回值显示在界面;

(3)如果要提交大量数据,或者敏感数据,请修改ajax的type方式,这样参数就不会在url地址栏中显示了。

以上回答,希望对你有所帮助

4. 前端开发人员当后端没有给你接口的时候,如何进行功能

我是用的postman调用接口数据,这样测试的。你一可以自己写一个页面,专门用来测试接口的。下面附上postman使用的教程。接口工具-POSTMAN

5. 后端开发和前端开发的区别

展示方式:Web前端开发主要做的是偏向用户看得见的部分。后端开发主要做的是逻辑功能等模块,是用户不可见的。
知识结构:Web前端开发涉及到的知识主要有Html、CSS、avaScript、Android开发、iOS开发、各种小程序开发技术等。Web前端代码主要在客户端运行:后端开发以Java为例,主要用到的是协议ServletTomcat服务器等技术,通常需要根据业务场景进行不同语言的选择。Web后端代码主要在服务端(某台机房服务器等)运行。
工作职责:Web前端工程师的工作职责主要有以下三大部分:【Web前端开发】:PC端开发任务。【移动端开发】:包括Android开发、iOS开发和各种小程序开发。【大数据呈现端开发】:主要是基于已有的平台完成最终分析结果的呈现,呈现方式通常也有多种选择,比如大屏展示等。
后端工程师的主要职责也集中在三大部分:【平台设计】:主要是搭建后端的支撑服务容器。【接口设计】:主要针对于不同行业进行相应的功能接口设计,通常一个平台有多套接口,就像卫星导航平台设有民用和军用两套接口一样。【功能实现】:完成具体的业务逻辑实现。

6. Web前端该如何与后端合作

今天小编要跟大家分享的文章是关于web前端该如何与后端合作?为了帮助web前端工程师更好的从事工作,提高工作效率,下面来和小编一起看一看吧!

1、前后端分离


前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。


2、尽量避免后端模板渲染


web应用的渲染方式分为服务器端渲染和客户端渲染,当下比较推荐的方式是客户端渲染,数据使用全ajax的方式进行交互。


除非在一些不得不使用服务器端渲染的情况下(如门户、电商等),应当尽量使用客户端渲染,因为客户端渲染更能使前后端分离(项目分离、代码解耦、协作分离、职责分离等),也能更好的做本地接口模拟开发,提升开发效率。


即使用服务器端渲染,在技术支持的条件下,可以使用node
中间层(由前端人员开发),代替传统的后端模板渲染,这样可以使后端与前端完全解耦,后端与前端只有数据上的往来。


3、尽量避免大量的线上调试


做好本地接口模拟开发(包括后端模板渲染),避免大量的线上调试,因为线上调试很不方便,也很费事,并且每次更新代码,都需要重新构建,然后同步到服务器。


所以做好本地接口模拟开发,只要程序在本地运行是没问题的,一般线上就不会有太大的问题,这样就能大幅降低调试工作量,提升开发效率。


4、本地接口模拟开发


本地接口模拟就是在本地模拟一个与服务器差不多的环境,能够提供数据所需的接口,进行错误模拟处理等等。


本地接口模拟开发的意义就在于能够在本地完成几乎所有的开发与调试,尽量减少线上的调试,提高开发效率。


一些常用库:


§browser-sync:能让浏览器实时、快速响应文件更改(html、js、css、sass、less
等)并自动刷新页面,并且可以同时在PC、平板、手机等设备下进行调试。


§webpack-dev-middleware:。


§webpack-hot-middleware:热更新本地开发浏览器服务。


另外,本地接口模拟开发需要后端开发人员有规范的接口文档。


5、规范的接口文档


前端与后端协作提升开发效率的一个很重要的方法就是减少沟通:能够形成纸质的文档就不要口头沟通、能够把接口文档写清楚也不要口头沟通(参数、数据结构、字段含义等),特别是线上协作的时候,面对面交流是很困难的。


一个良好的接口文档应当有以下的几点要求与信息:


1.格式简洁清晰:推荐用APIBlueprint


2.分组:当接口很多的时候,分组就很必要了


3.接口名、接口描述、接口地址


4.http方法、参数、headers、是否序列化


5.http状态码、响应数据


接口文档可以用一些文档服务(如leanote)来管理文档,也可以用git来管理;书写方式可以用markdown,也可以YAML、JSON
等。


推荐使用markdown方式写文档,用git管理文档。


6、去缓存


前端需要做好去客户端缓存的功能,保证用户始终都是使用的最新资源,不会因为因为缓存的问题而出现bug。


传统的去缓存是在静态资源url
上加上版本号或者时间戳,不过因为构建工具的出现以及一些浏览器已经不支持这种方式了的缘故,这种方式已经是过去时了。


现在去缓存是将文件hash化命名,只要文件变动,文件名就会不一样,以此才能彻底的去缓存。如果使用webpack进行打包,会自动将所有文件进行
hash化命名。


7、做好错误处理


前端与后端都需要各自做好错误处理,以便发生错误能够有友好的提示,也能在用户反馈时快速准确定位错误来源和原因。


一般前端的错误分为:


§脚本运行错误:js脚本错误,找到堆栈信息,然后解决


§接口错误:服务器报错、数据返回不对、没有响应数据、超时等


而接口错误分为:


§状态码错误(状态码非2XX):服务器报错、超时等


§数据错误:没有响应数据、数据格式不对、数据内容不对


8、运行时捕捉js脚本错误


当用户在用线上的程序时,怎么知道有没有出bug;如果出bug了,报的是什么错;如果是js报错,怎么知道是那一行运行出了错?


所以,在程序运行时捕捉js脚本错误,并上报到服务器,是非常有必要的。


这里就要用到window.onerror了:


1.window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,
errorObj)=>{


2.constdata={


3.title:document.getElementsByTagName('title')[0].innerText,


4.errorMessage,


5.scriptURI,


6.lineNumber,


7.columnNumber,


8.detailMessage:(errorObj&&errorObj.message)||'',


9.stack:(errorObj&&errorObj.stack)||'',


10.userAgent:window.navigator.userAgent,


11.locationHref:window.location.href,


12.cookie:window.document.cookie,


13.};


14.


15.post('url',data);//上报到服务器


16.};


线上的js脚本都是压缩过的,需要用sourcemap文件与source-map查看原始的报错堆栈信息。


9、移动端远程调试、vConsole、TBSStudio


因为移动端的开发无法像pc端开发一样使用Chrome的开发者调试工具,所以调试移动端需要一些额外的技巧。


移动端应用一般都运行在微信浏览器中、webview中、手机浏览器中。


远程调试(RemoteDebugging)


远程调试就是通过USB连接、端口转发、搭建代理等方式,将一个设备的web页面映射到另一个设备上,比如将手机的webview映射到pc
上,达到调试的目的。


移动端web应用调试难题从一开始就有,不过后来浏览器厂商基本都推出自己的远程调试工具来解决这个问题,包括OperaMobile、
iOSSafari、ChromeforAndroid、UC浏览器等,另外还有一些第三方开发的远程调试工具,比如weinre等。


以Android为例,可以将webview、ChromeforAndroid中的页面映射到pc
端的ChromeDevTools,然后就可以在pc端调试移动端的页面了。


vConsole


一个轻量、可拓展、针对手机网页的前端开发者调试面板(chrome开发者工具的便利实现)。


TBSStudio


因为微信浏览器是定制的浏览器,一般的远程调试方式都不可用,需要配合特定的工具,如微信开发者工具。


TBSStudio是另一个可以像Chrome一样调试远程微信浏览器页面的强大工具。


10、前后端并行开发


正常情况下,前端的开发在完成UI或者组件开发之后,就需要等后端给出接口文档才能继续进行,如果能做到前后端并行开发,也能提升开发效率。


前后端并行开发,就是说前端的开发不需要等后端给出接口文档就可以进行开发,等后端给出接口之后,再对接好后就基本上可以上线了。


在本地化接口模拟的实现下,就可以做到前后端并行开发,只是在代码层面需要对ajax进行封装。


11、友好的沟通


不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的!


以上就是小编今天为大家分享的关于web前端该如何与后端合作的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!


作者:深予之(@senntyou)


#/a/1190000016852780


7. 怎么用idea运行jeecgboot的啊还有前端后端怎么运行的

  1. 后端

    先安装redis,安装mysql,执行sql建表导数据,下载包。然后,先启动redis,再启动项目。

  2. 前端

    先安装nodejs,然后安装yarn,下载包。然后启动运行。

8. rap2在linux下前端和后台服务如何启动可以让服务进程在后台运行

我是按github的文档搭建的,后端用使用pm2管理
npm run dev 是测试用的 就是看你配置文件有没有配对 会不会报错。
没问题的话 就把配置写到 src/config.prod.ts里,然后用 npm run build 构建一下 会生成一个dist文件夹,然后在应用根目录运行 npm start 命令 就启动了
pm2 list 可以查看启动的应用,pm2 的命令自己搜一下 挺多的
前端,npm run build 会生成一个 build 文件夹 把 build下面的内容拷贝到 nginx 下就可以了