Vue+Echarts可视化大屏系统前后端数据通信设计(附代码)

各位同学，大家好。上节课，我们介绍了可视化大屏系统后端数据库建模的方法。这节课，我们来讲解Vue与exrpess前后端通信的方法。

01 项目相关理论介绍

1.后端解决跨域问题

什么是跨域问题？

跨域是指访问另外一个域的资源，由于浏览器的同源策略，默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略，这是由浏览器对 JavaScript 施加的安全限制。

Axios 跨域的解决方法

（1）CORS设置

CORS 需要服务器设置
Access-Control-Allow-Origin 响应头，表示该资源可以被指定的域进行跨域访问。

（2）服务端启用 CORS

比如 Node.js Express 启用 CORS。

2.前端与后端通信的方法

依赖注入

在 Vue.js 中，provide 和 inject 是一个用于跨组件传递数据的 API，这对于在嵌套组件树中共享数据非常有用，而不必手动传递 props。这对于全局状态管理或者跨多个组件共享数据的情况特别有帮助。

（1）使用 provide

provide 选项允许你指定你想要提供给后代组件的数据或方法。通常在祖先组件中使用。

（2）使用 inject

在需要接收数据的后代组件中，使用 inject 选项来接收来自祖先组件提供的数据。

注意事项：

使用 provide 和 inject 可以让数据在多级嵌套的组件间共享，但要小心使用，因为它可能会导致组件间的耦合度增加。过度使用可能会使得应用的依赖关系变得难以追踪和维护。通常建议在应用的全局状态管理（如 Vuex）或某些特定的跨组件通信需求中使用。 例如，全局配置、主题、插件等。对于常规的父子组件通信，推荐使用 props 和 events。

组件页面读取后台传入数据

在Vue.js中，使用Axios来获取数据是一种非常常见且高效的方式。Axios是一个基于Promise的HTTP客户端，用于在浏览器和node.js中发送异步HTTP请求。

为了使代码更加简洁和易于管理，你可以使用async/await语法。

02 项目开发实战

接下来，我们给大家讲解项目开发实战。

未完待续。

我是源动君，带领大家一起进步，谢谢观看。