【Web开发】关于Web项目的前后端分离

前后端分离的核心思想

前端HTML页面通过Ajax调用后端的Restuful API接口并使用JSON进行数据交互。前端部分放在Web服务器上(Nginx、Apache等),后端部分放在应用服务器上(Tomcat、Jetty等)。
前后端工程师必须事先制定好接口文档,后端工程师要写好测试用例(2个维度)供前端工程师使用。
可用测试工具:postman、soapui、jmeter、junit、mock测试

前后端分别注重的内容

后端追求的是:三高(高并发,高可用,高性能)、安全、存储、业务。
前端追求的是:页面表现、速度流畅、兼容性、用户体验。

现有互联网架构

正常的互联网架构需要把整个Web项目拆开放在不同的服务器上,这样才能保证不会因为一个子应用的不稳定而导致整个网站挂掉。
现有互联网架构的组成是web服务器集群+应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群。

前后端分离的优势

  1. 实现高内聚低耦合。
  2. 减少后端(应用)服务器的并发/负载压力。
  3. 即使后端服务暂时超时或者宕机了,前端页面也会正常访问,但无法提供数据。
  4. 增加代码的维护性&易读性。
  5. 提高开发效率

参考:JavaWeb项目前后端分离

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在后端分离的项目中,HTML主要负责前端界的展示和结构。在这种架中,前端通过AJAX或Fetch等技与后端API进行通信,获取数据并态更新页面内容。 以下是一个简单的示例,展示了一个基本的前界面结构: ```html <!DOCTYPE html> <html> <head> <title>前后端分离项目</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="script.js"></script> </head> <body> <header> <h1>前后端分离项目</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <h2>欢迎访问我们的项目</h2> <p>这是一个前后端分离项目示例。</p> <div id="data-container"> <!-- 这里将通过JavaScript动态加载数据 --> </div> </main> <footer> <p>版权所有 © 2022 我的项目</p> </footer> </body> </html> ``` 在这个示例中,`<head>` 标签中引入了一个外部的样式表文件 `styles.css` 和一个外部的脚本文件 `script.js`。样式表文件用于定义页面的外观,脚本文件用于处理与后端API的通信和数据更新。 页面结构包括一个 `<header>` 元素用于显示项目标题,一个 `<nav>` 元素用于导航链接,一个 `<main>` 元素用于主要内容展示,以及一个 `<footer>` 元素用于显示页脚信息。 在 `<main>` 元素中,我们可以使用 `<div>` 元素的 `id` 属性为 `data-container`,用于动态加载后端API返回的数据。 需要注意的是,这只是一个简单的示例,实际的前端开发中可能涉及更多的HTML标签和交互逻辑。同时,前端也需要通过CSS和JavaScript等技术来美化页面、处理用户交互和实现其他功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值