使用Golang + MySQL作为后端与Mithril js前端结合的实践

使用Golang + MySQL作为后端与Mithril js前端结合的实践 我对Mithril和Golang都了解不多。

目前我想将两者结合使用，虽然尝试了一些方法 但对路由部分感到有些困惑。

路由应该如何实现？

请我需要您的帮助。

6 回复

我已经完成了。

现在想了解如何将两者结合起来

更多关于使用Golang + MySQL作为后端与Mithril js前端结合的实践的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


你好

以下是我在Github上的内容

感谢您的回复。

我指的是像 ServerMux 那样实现的方式。

我需要在页面之间跳转，可能还需要携带数据。

例如： 我使用我的凭据登录后，下一个页面会加载更多详细信息等。

Mithril 是一个客户端框架，能够向服务器发起 XHR 请求。该服务器可以用 Go 语言编写。

您所说的“路由”具体指什么？是指 Mithril 所理解的路由概念吗？这与 Go 无关。还是指通过 ServerMux 实现的路由机制？这可能是为 Mithril 发起的 XHR 请求实现 Go 后端的一种方式。

你混淆了使用 Mithril 实现的单页应用（SPA）的工作方式与将 HTTP 请求路由到后端服务方法的方式。SPA 内部的导航完全独立于后端，你甚至可以编写完全没有后端的 SPA。

只有当 SPA 需要从后端读取或写入数据时，你才需要一个能够处理 XHR HTTP 请求的后端。

尝试编写一个不需要后端的简单 Mithril 应用。然后编写一个能够处理某些 HTTP 请求的简单 Go HTTP 服务器。只有在你理解了这两者各自的工作原理后，再尝试将它们结合起来。

在结合Golang后端和Mithril.js前端时，路由的实现需要前后端协同工作。以下是具体的实现方案：

后端路由（Golang + MySQL）

使用Gin框架实现API路由，处理数据存储和业务逻辑：

package main

import (
	"database/sql"
	"github.com/gin-gonic/gin"
	_ "github.com/go-sql-driver/mysql"
	"net/http"
)

type User struct {
	ID   int    `json:"id"`
	Name string `json:"name"`
	Email string `json:"email"`
}

func main() {
	router := gin.Default()
	
	// 连接MySQL数据库
	db, err := sql.Open("mysql", "user:password@tcp(127.0.0.1:3306)/dbname")
	if err != nil {
		panic(err)
	}
	defer db.Close()

	// API路由定义
	router.GET("/api/users", func(c *gin.Context) {
		rows, err := db.Query("SELECT id, name, email FROM users")
		if err != nil {
			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
			return
		}
		defer rows.Close()

		var users []User
		for rows.Next() {
			var user User
			err := rows.Scan(&user.ID, &user.Name, &user.Email)
			if err != nil {
				c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
				return
			}
			users = append(users, user)
		}
		c.JSON(http.StatusOK, users)
	})

	router.GET("/api/users/:id", func(c *gin.Context) {
		id := c.Param("id")
		var user User
		err := db.QueryRow("SELECT id, name, email FROM users WHERE id = ?", id).Scan(&user.ID, &user.Name, &user.Email)
		if err != nil {
			c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
			return
		}
		c.JSON(http.StatusOK, user)
	})

	// 静态文件服务 - 用于提供前端资源
	router.Static("/static", "./static")
	router.StaticFile("/", "./static/index.html")
	
	// 处理前端路由的404情况 - 返回index.html让前端路由处理
	router.NoRoute(func(c *gin.Context) {
		c.File("./static/index.html")
	})

	router.Run(":8080")
}

前端路由（Mithril.js）

使用Mithril.js的路由系统处理前端导航：

// app.js
const UserList = {
    oninit: function(vnode) {
        m.request({
            method: "GET",
            url: "/api/users"
        }).then(function(users) {
            vnode.state.users = users
        })
    },
    view: function(vnode) {
        return m("div", [
            m("h1", "用户列表"),
            m("ul", 
                vnode.state.users ? vnode.state.users.map(function(user) {
                    return m("li", [
                        m("a", {href: "/user/" + user.id, oncreate: m.route.link}, user.name),
                        " - " + user.email
                    ])
                }) : m("p", "加载中...")
            )
        ])
    }
}

const UserDetail = {
    oninit: function(vnode) {
        m.request({
            method: "GET",
            url: "/api/users/" + vnode.attrs.id
        }).then(function(user) {
            vnode.state.user = user
        })
    },
    view: function(vnode) {
        return m("div", [
            m("h1", "用户详情"),
            vnode.state.user ? m("div", [
                m("p", "ID: " + vnode.state.user.id),
                m("p", "姓名: " + vnode.state.user.name),
                m("p", "邮箱: " + vnode.state.user.email),
                m("a", {href: "/", oncreate: m.route.link}, "返回列表")
            ]) : m("p", "加载中...")
        ])
    }
}

const Home = {
    view: function() {
        return m("div", [
            m("h1", "主页"),
            m("a", {href: "/users", oncreate: m.route.link}, "查看用户列表")
        ])
    }
}

// 路由配置
m.route(document.body, "/", {
    "/": Home,
    "/users": UserList,
    "/user/:id": UserDetail
})

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>Golang + Mithril App</title>
    <script src="https://unpkg.com/mithril/mithril.js"></script>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

项目结构

project/
├── main.go          # Golang后端
├── static/
│   ├── index.html   # 前端入口
│   └── app.js       # Mithril前端代码
└── go.mod

这种架构中，Golang处理API路由和数据持久化，Mithril.js处理前端路由和用户界面。前端路由通过HTML5 History API实现，后端通过NoRoute处理程序确保直接访问前端路由时能正确返回应用。

回到顶部