SRE全栈运行篇

希里安 2023-04-13

225

关注“希里安”，get更多有用干货！

截止昨日，前后端接口都开发了，那么就该运行前后端程序，正式测试一下。

我们设计的前后端分离的流程大致如上图所示，所以说，我们今天主要是将前后端都跑起来，然后把后端返回的数据渲染到页面上。这样一个简单的前后端分离的项目算是完成了。

前端开启

Npm run serve

后端开启

Go run main.go

打开前端，打开pod页面不显示信息，什么问题，调试信息表示如下：

这个错误表示浏览器阻止了浏览器发出的

xmlhttprequest请求'http://localhost:8080/pods'

，因为目标资源没有设置cors（跨源资源共享）策略中所需的'access-control-allow-origin'响应头。这是一种基于安全原则的浏览器机制，它可以防止网站通过脚本等方式访问未经授权的外部资源，从而确保用户数据和隐私的安全性。

那么怎么设置，下面介绍一番

在gin框架中，可以通过设置中间件来允许跨域访问。具体步骤如下：

导入Cors模块

在代码中导入cors模块：

import "github.com/gin-contrib/cors"

设置Cors中间件

使用cors中间件并设置跨域参数：

r := gin.Default()
// 配置cors中间件
config := cors.DefaultConfig()
config.AllowOrigins = []string{"http://example.com"} // 允许跨域访问的域名
config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE"}
r.Use(cors.New(config))

以上代码表示只允许来自 http://example.com 域名的请求，并且允许GET、POST、PUT和DELETE方法。

除了AllowOrigins和AllowMethods外，还有其他一些常用的配置项，例如：AllowCredentials、AllowHeaders、MaxAge等。可根据实际需要进行设置。

测试跨域访问

到这跨域的请求资源的问题得到解决。

那么现在的问题就是如何在前端美观的展示我们需要的数据，而不是一堆返回的json数据。

那肯定要弄一个类似表格的东西展示数据，那么先看下简单的效果：

这里就是一个简单的表格加一个分页功能展示，从后端返回的k8s中kube-system命名空间的pod相关的信息，包括名字、命名空间、创建时间的功能，当然还可以根据需求，添加其他功能，比如查看IP。

比如查看状态：

那么如何实现呢，就是先要在vue页面中用之前学的方法，添加一个表格，然后使用分页功能，这些基础的前面已经说了，这里就不说了，关键是如何将后端数据展示在数据表里面呢。可以使用之前介绍的双花括号来插值显示后端数据，利用v-for循环遍历存返回的数据信息，也可以使用prop这个功能，这里说一下prop这个知识点，prop是一种向子组件传递数据的方式，类似于React中的props。通过prop，父组件可以向子组件传递数据，子组件可以在props中接收这些数据并使用。

举个例子：

<template>
<child-component :prop1="value1"
:prop2="value2"></child-component>
</template>
<script>
import ChildComponent from
'./ChildComponent.vue'
export default {
components: {
ChildComponent
 },
data() {
return {
value1: 'hello',
value2: 'world'
 }
 }
}
</script>

这里面定义了hello world的值，在父组件是用子组件的时候，通过vbind将数据绑定到子组件中的props中，然后子组件中，可以定义prop接受父组件传递的数据：

<template>
<div>
<p>{{ prop1 }}</p>
<p>{{ prop2 }}</p>
</div>
</template>
<script>
export default {
props: {
prop1: {
type: String,
required: true
},
prop2: {
type: String,
default: 'default value'
 }
 }
}
</script>

使用prop就是一种数据传递的方式，不同组件之间的数据可以交互，提高复用性和可维护性。

那么再来总结下，后端数据返回前端的几种方式：

1.使用axios或者fetch等工具从后端获取数据，然后在前端页面中通过v-for指令循环展示数据。

2.使用vue-resource等插件，通过配置url和params等参数，从后端获取数据并展示在前端页面中。

3.使用vuex来管理应用的状态，从后端获取数据后存储到vuex中，然后在组件中通过computed属性或者watch来展示数据。

4.使用组件化开发，将数据展示的组件封装起来，通过props属性传递数据，实现数据的展示。

5.使用服务器端渲染，在服务器端将后端数据和前端页面结合起来，直接返回渲染好的页面给客户端，减轻客户端的渲染压力。

简单点说，一般常用的有双大括号形式的插值、还有prop的数据传递、v-for、v-bind的渲染、组件的传递。具体如何使用，需要根据实际业务场景，后端返回的数据结构和页面需求再进行决策。

好了，今天的话，前后端基础开发算是全部完成了，大家已经具备前后端数据交互的功能，至于花里胡哨的功能就得后面不断添加了，赶快去实践吧，祝大家早日开发出属于自己的web应用，一切顺利！

这里具体的代码会放到github仓库和知识星球，感兴趣的朋友可以自行查阅或者后台私信领取。

sre 前端组件前端

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

SRE全栈运行篇

评论