037bfef1f5c655ba67177b0ced5670b3
Go, gin, vue 创建单页应用

一、前言

上一篇 我们讲解了 Go RESTful API。很多时候,我们的 RESTful API 是提供给前端使用的,本篇主要通过 Go + Vue 实现一个 TODO App 以此来介绍 Go 的前后端交互。

二、后端

开发中一般主张前后端分离,因此,我们先实现后端的 API。

  1. 创建数据库

  2. 创建 Go web 项目 (忘记的同学可以回顾下前几篇文章

  3. 添加路由

    func handleRequests() {
      r := gin.Default()
    
      r.GET("/todos", AllTodos)
      r.POST("/todo", NewTodo)
      r.DELETE("/todo/:id", DeleteTodo)
    
      r.Run(":8080")
    }
  4. 实现获取所有 Todo 接口

    // AllTodos - get all todos
    func AllTodos(c *gin.Context) {
      db := openDB()
      defer db.Close()
    
      var todos []Todo
      if err := db.Find(&todos).Error; err != nil {
        response := Response{Code: 1, Message: "Get todos failed.", Data: err}
        c.JSON(http.StatusNoContent, response)
      } else {
        response := Response{Code: 0, Message: "Successfully get all todos.", Data: todos}
        c.JSON(http.StatusOK, response)
      }
    }

    测试

  5. 实现添加新的 Todo 接口

    // NewTodo - add a todo
    func NewTodo(c *gin.Context) {
      name := c.PostForm("name")
      todo := Todo{Name: name}
    
      db := openDB()
      defer db.Close()
    
      if err := db.Create(&todo).Error; err != nil {
        response := Response{Code: 1, Message: "Add todo failed.", Data: err}
        c.JSON(http.StatusInternalServerError, response)
      } else {
        response := Response{Code: 0, Message: "Successfully add todo.", Data: todo}
        c.JSON(http.StatusOK, response)
      }
    }

    测试

  6. 实现删除 Todo 接口

    // DeleteTodo - delete todo with id
    func DeleteTodo(c *gin.Context) {
    id, err := strconv.Atoi(c.Param("id"))
    if err != nil {
        response := Response{Code: 0, Message: "id is no uint type", Data: c.Param("id")}
        c.JSON(http.StatusExpectationFailed, response)
        return
    }
    
    db := openDB()
    defer db.Close()
    
    var todo Todo
    if err := db.First(&todo, "id = ?", id).Error; err != nil {
        response := Response{Code: 1, Message: "Delete todo failed.", Data: err}
        c.JSON(http.StatusInternalServerError, response)
    } else {
        if err := db.Delete(&todo).Error; err != nil {
            response := Response{Code: 1, Message: "Delete todo failed.", Data: err}
            c.JSON(http.StatusInternalServerError, response)
        } else {
            response := Response{Code: 0, Message: "Successfully deleted the todo.", Data: todo}
            c.JSON(http.StatusOK, response)
        }
    }
    }

    测试

至此,TODO App 的接口已实现完毕。

三、前端

后端接口实现完毕后,接下来我们看下前端的实现。

  1. 指定静态资源

    r := gin.Default()
    r.Static("/static", "./public")
    // 这里为了方便直接把首页重定向到静态资源的 index.html 上
    r.GET("/", func(c *gin.Context) { c.Redirect(http.StatusTemporaryRedirect, "static") })
  2. 在 public 目录下新建 index.html

  1. 实现前端面

    Html 部分
    ```


    TODO App
    ...... 此处省略一堆引用





    TODO App


    • {{ todo.name }}


    <input
    type="text"

top Created with Sketch.