基金网站模板,北京国互网网站建设价格,php商城网站的要求与数据,网站开发常见技术问题目录 一、前言 Vue框架知多少#xff1f; Vue框架的一些关键特点#xff1a; Vue组件的声明周期 二、基于Spring Boot 和 Vue 实现前后端交互功能的技术组合 后端部分#xff08;Spring Boot#xff09;#xff1a; 前端部分#xff08;Vue#xff09;#xff1a; 前后… 目录 一、前言 Vue框架知多少 Vue框架的一些关键特点 Vue组件的声明周期 二、基于Spring Boot 和 Vue 实现前后端交互功能的技术组合 后端部分Spring Boot 前端部分Vue 前后端交互 博主介绍✌专注于前后端领域开发的优质创作者、秉着互联网精神开源贡献精神答疑解惑、坚持优质作品共享。本人是掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战深受全网粉丝喜爱与支持✌有需要可以联系作者我哦 文末三连哦 精彩专栏推荐订阅 不然下次找不到哟 一、前言
Vue框架知多少
Vue.js通常简称为Vue是一种流行的JavaScript前端框架用于构建交互式的用户界面和单页面应用SPA。Vue由尤雨溪Evan You于2014年创建并于同年正式发布。它的设计目标是通过尽可能简单的API提供高效的响应式数据绑定和组件化的视图组织方式。
Vue框架的一些关键特点 响应式数据绑定Vue使用双向数据绑定机制通过指令v-model实现当数据发生变化时视图会自动更新反之亦然。 组件化架构Vue允许开发者将页面拆分为多个独立、可重用的组件每个组件都有自己的状态和行为从而更好地组织和管理UI代码。 虚拟DOMVue使用虚拟DOM技术来优化页面渲染性能它会在内存中维护一份虚拟的DOM树然后通过比对虚拟DOM和真实DOM的差异来最小化页面更新的开销。 单文件组件Vue提供了单文件组件.vue文件允许开发者将组件的模板、样式和逻辑放在同一个文件中使得组件的开发、维护和复用更加方便。 路由管理Vue配合Vue Router可以实现客户端路由功能允许开发者通过定义路由来管理不同页面的跳转和加载。 状态管理Vue配合Vuex提供了一种集中式的状态管理解决方案用于管理大型应用中的共享状态。 生命周期钩子Vue组件具有一系列的生命周期钩子函数如created、mounted、updated等允许开发者在不同阶段执行自定义的逻辑。
Vue组件的声明周期
Vue.js 组件有一系列的生命周期钩子函数它们提供了在组件生命周期不同阶段执行代码的机会。以下是 Vue 组件生命周期的主要钩子函数 beforeCreate 在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段实例的属性和方法还未被初始化。 created 在实例创建完成后被立即调用。在这个阶段实例已完成以下的配置数据观测 (data observer)属性和方法的运算watch/event 事件回调。然而挂载阶段还未开始$el 属性目前尚不可用。 beforeMount 在挂载开始之前被调用相关的 render 函数首次被调用。 mounted 在挂载结束时调用此时实例已完成以下的配置数据观测 (data observer)模板编译挂载阶段完成。但是挂载的DOM还未更新。 beforeUpdate 在数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。这个阶段尚未更新DOM。 updated 在由于数据更改导致的 DOM 重新渲染和打补丁之后调用。调用时组件 DOM 已经更新所以您现在可以执行依赖于 DOM 的操作。但是要注意避免在此期间更改状态因为这可能会导致无限循环。 beforeDestroy 在实例销毁之前调用。在这一步实例仍然完全可用。该阶段常用于解绑定事件监听器或清除定时器。 destroyed 在实例销毁后调用。此时所有的事件监听器都已被移除所有的子实例也已经被销毁。
这些生命周期钩子为开发者提供了在不同阶段执行代码的机会可以用来进行一些初始化操作、数据的处理、DOM的操作以及资源的清理。、
二、基于Spring Boot 和 Vue 实现前后端交互功能的技术组合
后端部分Spring Boot 创建Spring Boot项目使用Spring Initializr创建一个新的Spring Boot项目添加Web和其他必要的依赖。 编写Controller在Spring Boot项目中创建RESTful API的Controller用于处理前端的请求和响应数据。 RestController
RequestMapping(/api)
public class ApiController {Autowiredprivate YourService yourService;GetMapping(/data)public ResponseEntity? fetchData() {// 从数据库或其他数据源获取数据ListData dataList yourService.fetchData();return ResponseEntity.ok(dataList);}// 可以添加其他需要的API接口
}Service层编写Service层处理业务逻辑如从数据库中获取数据。 数据模型创建实体类来表示数据对象。
前端部分Vue 创建Vue项目使用Vue CLI创建一个新的Vue项目。 编写组件创建Vue组件来渲染页面和处理用户交互。 templatedivulli v-foritem in dataList :keyitem.id{{ item.name }}/li/ul/div
/templatescript
export default {data() {return {dataList: []};},created() {this.fetchData();},methods: {fetchData() {// 从后端获取数据fetch(/api/data).then(response response.json()).then(data {this.dataList data;}).catch(error console.error(Error:, error));}}
};
/script路由使用Vue Router进行页面路由管理。 样式使用CSS或者其他CSS 前后端交互 跨域处理在开发阶段为了解决跨域问题可以在Spring Boot中配置跨域访问 预处理器如Sass或Less来编写样式。 Configuration
public class WebConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/api/**).allowedOrigins(http://localhost:8080).allowedMethods(GET, POST, PUT, DELETE).allowCredentials(true).maxAge(3600);}
}前端调用后端接口在Vue组件中使用Fetch API或者Axios等工具来调用后端提供的API接口。 后端处理请求Spring Boot中的Controller接收前端的请求处理业务逻辑并返回数据。 前端处理响应Vue组件中通过异步请求获取后端数据然后更新页面。 错误处理在前后端都要进行错误处理例如前端可以通过axios的拦截器来统一处理错误信息后端也应该在Controller中进行异常处理并返回合适的HTTP状态码。
