建设工程造价信息网站,怎么建立一个公司网站,网站建设最新签约,门户网站广告是什么文章目录 引言SpringBootThymeleafVueSpringBootSpringBootVue#xff08;前端#xff09;axios/ajaxVue作用响应式动态绑定单页面应用SPA前端路由 前端路由URL和后端API URL的区别前端路由的数据从哪里来的 Vue和只用三件套axios区别 引言
我是一个喜欢知其然又知其所以然的… 文章目录 引言SpringBootThymeleafVueSpringBootSpringBootVue前端axios/ajaxVue作用响应式动态绑定单页面应用SPA前端路由 前端路由URL和后端API URL的区别前端路由的数据从哪里来的 Vue和只用三件套axios区别 引言
我是一个喜欢知其然又知其所以然的人快速入门致使我对JavaWeb整体开发有点模糊不清这篇我们就讲一下SpringBootVue的这个模式如何进行的数据交互这篇重点讲前端因为我是一个后端开发人员当你用过SpingBoot就知道他工作原理是什么
SpringBootThymeleaf
上篇文章我们讲过了JSPServlet 用过SpringBoot的朋友知道SpringBoot代替了Servlet的功能进行数据处理和响应 那么JSP的替代者是谁呢 以下是AI回答 在 Spring Boot 中JSP 通常被 Thymeleaf 或其他模板引擎所替代。Thymeleaf 是一种现代的模板引擎它的主要作用与 JSP 类似用于在服务器端动态生成 HTML 页面。但是与 JSP 不同的是Thymeleaf 具备更好的语法、性能和灵活性并且 支持更强的模板逻辑例如条件判断、循环等。 Spring Boot Thymeleaf 的工作方式 控制器Controller处理请求执行业务逻辑并将模型数据如从数据库查询到的信息传递到视图模板。 模板引擎Thymeleaf接收到模型数据后生成最终的 HTML 内容并将其返回给浏览器。 其实就是跟JSP和Servlet差不多 与VueSpringBoot不同的是 这种方式并没有实现前后端分离的模式 还是在服务器进行的前端html页面的生成然后返回给客户端再展示 这个框架我们就不多说了不经常使用
VueSpringBoot
我们的vueSpringBoot这种开发模式就是真正的前后端分离 为什么这样所呢 因为其不靠后端渲染页面具体解释如下 在传统的 JSP Servlet 模式中JSP 文件直接嵌入 Java 代码来渲染动态页面Servlet 负责数据的处理和传递。 在 Vue Spring Boot 模式中Vue.js 作为前端框架来动态渲染页面它不再依赖于后端渲染 HTML 页面。Vue 负责从后端请求数据接收到数据后通过组件的方式在客户端渲染 HTML 页面。这意味着前端和后端通过 API 进行通信而不是直接由后端传递渲染好的 HTML 页面。 注这里的渲染不是浏览器渲染呈现html页面而是将动态数据赋值到静态网页变量的过程比如JSP中的EL表达式赋值过程
SpringBoot
众所周知了分成三层架构 Controller层负责接收前端客户端网络请求以及返回给前端对应数据 Service层这一层被Controller调用负责对前端传输进来的数据Request中的数据进行数据处理生成对应的数据再返回给Controller层 Dao/Mapper层一般这一层都是被Service调用用来查询数据库中的内容返回内容来给Service方法以实现动态数据的效果
至于IOC/DI等内容就不多讲了
Vue前端
axios/ajax
我最疑惑的点就是前端怎么请求到后端的数据的这个点 简单来说就是通过axios/ajax这项技术向后端发送请求http进行数据json的交换 ajax是异步交互即在不刷新界面的情况下也可以请求到后端数据进行展示 可以看下这篇 Ajax快速入门
前端Vue通过 Axios 发送请求后端Spring Boot处理数据并返回前端渲染界面
前端发送请求 用户在页面上进行某些操作如点击按钮、提交表单。 Vue.js 使用 Axios 或其他 HTTP 库通过 HTTP 请求GET、POST、PUT、DELETE 等将请求发送给后端。后端处理请求 Spring Boot 的控制器RestController接收前端的请求解析数据。 根据请求调用相应的 服务层Service和 数据访问层DAO来处理业务逻辑、查询或更新数据库。后端返回数据 后端处理完数据后将结果通常是 JSON 格式的数据通过 HTTP 响应返回给前端。前端接收数据并渲染 Vue.js 的 Axios 获取后端返回的数据。 Vue 根据接收到的数据更新视图UI让页面内容动态变化并展示给用户。
举例
用户点击 “查询订单” 按钮。Vue 通过 Axios 向后端发送一个请求
axios.get(/api/orders?userId123).then(response {// 后端返回的数据保存在 response 中this.orders response.data; // 把订单数据绑定到 Vue 的 data
});后端 Spring Boot 接收到请求查询数据库并返回结果
RestController
public class OrderController {GetMapping(/api/orders)public ListOrder getOrders(RequestParam int userId) {return orderService.getOrdersByUserId(userId);}
}Vue 使用返回的数据动态渲染订单列表页面
ulli v-fororder in orders :keyorder.id{{ order.name }} - {{ order.price }}/li
/ulVue作用
说完Axios我认为单纯的三件套htmlcssjs以及axios就可以实现前端效果前后端分离那么vue是干什么的呢 组件化开发 下面主要讲解一下和前端有关的2和3
响应式动态绑定
正如所说的就是你的数据更改后页面会自动更改你的信息不需要刷新网址进行操作 底层我们后端人员不用研究 就是调用从后端来的信息写代码加方便且前端更改也能响应 比如前端更改了某个值若该界面就有对应值的显示他也会变成对应 但是后端可能还没接受到该值的更改需要提交后后端数据才会更新 Vue 只在前端做数据变化 → 视图更新不会自动通知后端
单页面应用SPA 这里的JS动态替换JS中可以写html和css比如下面的方法1 方法1 不用url跳转而是用js函数的方式实现通过innerHTML操作DOM更换我们id为app里的html内容 不常用已淘汰
!DOCTYPE html
html langzh
headmeta charsetUTF-8titleSPA 示例/title
/head
bodynavbutton onclickshowHome()主页/buttonbutton onclickshowAbout()关于/button/navdiv idapp这里是主页内容/divscriptfunction showHome() {document.getElementById(app).innerHTML h2这里是主页/h2p欢迎来到主页/p;}function showAbout() {document.getElementById(app).innerHTML h2关于我们/h2p这是关于页面。/p;}/script
/body
/html
前端路由
定义一个前端路由 然后里面创建组件然后挂载我的理解是组件就相当于不同的页面 路由里包含不同组件组件用对应的url和html页面进行匹配 点击对应url按键就会请求对应的urlurl对应的vue组件就会替换内容 直接在地址栏输入
http://localhost:8080/about会被路由拦截加载对应vue组件 前端路由URL和后端API URL的区别
前端URL和后端URL有所不同 前端就是展示界面用的后端就是在界面基础上axios访问后端数据喽 axios定义是在原有Vue的url基础上 /function因为axios本来就在Vue组件中定义
前端路由的数据从哪里来的
图一非常的惊骇解决了我的问题 Vue和只用三件套axios区别
说实话其实看完Vue这部分内容其实就能理解了 只使用 HTML CSS JavaScript Axios 也能实现 前后端分离但 Vue 这样的框架提供了更好的 开发体验 和 维护性。我们先看 不用 Vue 如何实现前后端分离再分析 Vue 的优势。
