用GO和VUE构建一个单页应用程序

本文最初发表在Okta开发人员博客上，演示了使用Vue.js和Go Backend构建安全的单页应用程序（SPA）。 它利用OKTA进行身份验证和MongoDB进行数据持久性。 该水疗中心允许用户搜索GitHub以获取开源项目，喜欢它们并添加注释。

SPA提供丰富的互动和快速反馈，提供增强的用户体验。 但是，他们在身份验证和州管理等领域提出了前端挑战。 vue.js简化了此过程。

> vue.js亮点：

易于学习曲线和逐步采用。

• 简化项目设置。
• 强大的社区支持。vue-cli
基于柔性组件的体系结构。
• 应用程序体系结构：

>教程创建了一个vue.js前端，其中vuex用于州管理，Vuetify用于材料设计组件，并进行导航的VUE路由器。 GO后端提供REST API，并使用Okta的GO JWT验证器通过JSON Web令牌（JWTS）和OpenID Connect（OIDC）进行安全身份验证。 MongoDB存储应用程序数据。

项目设置：

>目录结构：在同一项目目录中，该项目与GO Backend和Vue.js Frontend一起组织。

脚手架vue.js应用程序。
1. > vuetify Integration：vue-cli vuetify被添加以用材料设计组件增强UI。
2. > OKTA身份验证：免费的OKTA开发人员帐户用于创建OIDC应用程序，提供安全的用户身份验证和管理。 Okta Vue SDK简化了集成。

路由和组件：

该应用程序定义了登录路线，主仪表板（

）和各个项目详细信息（）。 使用Okta的执行身份验证。 组件处理用户互动，数据显示和与Go后端进行通信。

/me /repo/:idauthRedirectGuard进行后端：

> GO后端使用MongoDB进行数据持久性。 A结构代表最喜欢的项目。

层处理业务逻辑，与存储库进行交互。 HTTP处理程序管理API请求，使用Okta的JWT Verifier中间件进行身份验证。

>运行应用程序：

aMakefile>简化了构建和运行过程，利用Docker组成用于管理MongoDB。

进一步的学习： >本文以vue.js和go上的其他资源的链接结束，包括Okta的PWA和身份验证的教程。

使用更简洁的语言和更清晰的部分标题，此重写版本在提高可读性和流程的同时保持原始内容的含义。 这些图像保留在其原始格式和位置。

>

以上是用GO和VUE构建一个单页应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！