各位同学，大家好。上节课，我们介绍了可视化大屏系统后端数据库建模的方法。这节课，我们来讲解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 项目开发实战
接下来，我们给大家讲解项目开发实战。
未完待续。
我是源动君，带领大家一起进步，谢谢观看。