0

用 Svelte 为 Go aah 后端写个 Web App

1044   /   0   /   Posted on 2 years ago   /   Updated on 2022-02-18

Go 的最佳拍档 Svelte 来了:)。此 aah-recycleview-webapp 是以 aah-recycleview-backend 为 REST API 服务器、基于 Svelte 开发的前端 Web 应用。

前言

标题之所以包含 “aah”，是因为它是以 aah-recycleview-backend 为 REST API 服务器、基于 Svelte 开发的前端 Web 应用。至于后端是用 aah 还是 Echo \ Gin 或者其他框架甚至 Go 标准库 "net/http"，其实都可以的，参照 aah 的后端 API 实现去改写就可以了。这是 Go aah 框架系列文章的第3篇。

先决条件

  • go >= 1.11：这是 aah v0.12.0 版本的要求。
  • Node.js >= 8：这是 Svelte 3 的最低要求。
  • IDE：Visual Studio Code（可选）

功能设计

  • 实现与 Android app 基本相同的部分：industry 列表、过滤、排序（todo）
  • 实现对 industry 条目的 “增删改查”
  • 原则上基于 aah 内置功能实现（除数据库以外）

Industry 列表及操作、industry 条目的表单编辑，都在同一页面完成，且数据更新时不需要刷新整个页面（默认的首页）。

Svelte web app 操作演示如下：

（Svelte web app 操作演示）

从演示可以看到，全部操作都是在一个页面内完成，过程中并没有刷新页面。代码仓库是：https://github.com/vulcangz/aah-recycleview-webapp。如对您有所帮助或启示，就可以点个 “star” 关注后续更多功能的更新，哈哈。

安装使用

1）安装 aah 后端服务器

git clone git@github.com:vulcangz/aah-recycleview-backend.git
cd aah-recycleview-backend
aah run

服务器正常启动后，在浏览器访问 http://localhost/，显示`{"message":"Welcome to aah framework - API application"}`

访问 http://localhost/v1/industry 可以列出全部 industries 条目的 json 数据；访问 http://localhost/v1/industry/1 显示第1条 industry 的 json 数据，依此类推。

2）安装前端——Svelte web app

克隆源代码并安装依赖 

git clone git@github.com:vulcangz/aah-recycleview-webapp.git
cd aah-recycleview-webapp
npm install

然后开始 Rollup： 

npm run dev

浏览器导航到 http://localhost:5000/。这会儿，你应该可以看到 web 应用的界面了。

几点说明

1）CORS（跨源资源共享）处理

aah 服务器运行在 localhost 80 端口，而 Svelte Web app 运行在 localhost:5000。这样在访问 Web app——也就是 http://localhost:5000 时，Web app 在浏览器环境下访问类似 "http://localhost/v1/x/y/z" 这样运行在不同端口的后端 API 时就会出现跨域问题。这个问题可以通过 aah 内置的 CORS 功能来解决。

在 routes.conf 配置文件中的域级块中添加 CORS 配置： 

    cors {
      enable = true
      allow_origins = ["http://localhost:5000"]
      allow_headers = ["Accept", "Authorization", "Content-Type", "Origin"]
      allow_methods = ["GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS"]
    }

2）后端服务器的更新

如果您已经测试过 aah-recycleview-backend，请 git pull 拉取最新更新。aah 后端为了配合新的 Web app 端演示的数据需要，做了一点小的调整。具体参见项目 repo 中的 commit。

总结

到目前为止，我们用 Go aah 框架开发了 REST API 服务器，实现了为 Android app、Svelte Web app 提供后端服务支撑。作为演示目的，仅展示了 aah 框架的最基本的一些特性。

aah 框架中最为出彩的部分，个人认为一是其安全体系设计（认证、授权、Anti-CSRF 等），二是其扩展性（服务器扩展点、拦截器——每个控制器和每个动作级别的拦截器）。要尽可能全面地展现这些功能点，且整体应用功能简单明了、易于实现的，可能有且仅有博客系统了：一个支持多用户的博客系统，以 REST API 服务支持 Web app 和 Android app；Web 服务支持基于 Go 模板的 Web client，大概就是这样子的，这个有计划但没有时间表。

在此之前，仍会以完善 aah-recycleview-backend 这个系列的示例为主，如有时间，再完善数据库 CRUD 示例、和用户认证授权功能。结合实例来介绍 ahh 框架的特性，预计需要分 1~2 篇进行介绍。


Like:
0
Tag:
go
aah
To the top