Golang+Mysql+Vue+Nginx前后端分离开源项目

在现代Web开发中，前后端分离的架构越来越受欢迎。这种架构的好处是可以使前后端开发团队并行工作，提高开发效率。本文将介绍一个使用Golang、Mysql、Vue和Nginx实现的前后端分离开源项目，并提供代码示例。

项目概述

该开源项目是一个简单的待办事项应用，用户可以添加、编辑和删除待办事项。该项目的前后端分离架构如下：

  • 后端使用Golang编写，使用Gin框架处理HTTP请求，与Mysql数据库交互。
  • 前端使用Vue框架编写，通过Ajax与后端API通信。
  • Nginx用作反向代理服务器，将前端静态文件和后端API进行分发。

后端实现

后端使用Gin框架处理HTTP请求，并提供与Mysql数据库的交互接口。以下是一个简单的示例代码，用于处理添加待办事项的请求。

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/jinzhu/gorm"
	_ "github.com/jinzhu/gorm/dialects/mysql"
)

type Todo struct {
	gorm.Model
	Title     string `json:"title"`
	Completed bool   `json:"completed"`
}

func main() {
	r := gin.Default()

	db, err := gorm.Open("mysql", "user:password@tcp(127.0.0.1:3306)/database?charset=utf8&parseTime=True&loc=Local")
	if err != nil {
		panic("failed to connect database")
	}
	defer db.Close()

	db.AutoMigrate(&Todo{})

	r.POST("/todos", func(c *gin.Context) {
		var todo Todo
		c.BindJSON(&todo)

		db.Create(&todo)

		c.JSON(201, gin.H{"status": "success"})
	})

	r.Run(":8080")
}

在上述代码中，我们首先定义了一个Todo结构体，用于映射Mysql数据库中的待办事项表。然后，我们使用Gorm库连接到Mysql数据库，并自动创建待办事项表。

在POST /todos的路由处理函数中，我们首先从请求中读取JSON数据，并将其绑定到todo变量中。然后，我们使用db.Create方法将待办事项插入数据库。最后，我们返回状态码201和一个包含成功信息的JSON响应。

前端实现

前端使用Vue框架编写，通过Ajax与后端API进行交互。以下是一个简单的示例代码，用于添加待办事项。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Todo App</title>
    <script src="
    <script src="
</head>

<body>
    <div id="app">
        <input v-model="newTodo" type="text" placeholder="Add new todo">
        <button @click="addTodo">Add</button>

        <ul>
            <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []
            },
            methods: {
                addTodo: function () {
                    axios.post('/todos', {
                        title: this.newTodo,
                        completed: false
                    }).then(response => {
                        console.log(response.data);
                        this.todos.push(response.data);
                        this.newTodo = '';
                    }).catch(error => {
                        console.error(error);
                    });
                }
            }
        });
    </script>
</body>

</html>

在上述代码中，我们首先引入Vue和Axios库。然后，在Vue实例的data中定义了newTodo和todos变量。newTodo用于绑定输入框的值，todos用于存储待办事项列表。

在addTodo方法中，我们使用Axios库发送POST请求到后端API。请求中包含了待办事项的标题和完成状态。在成功响应中，我们将返回的待办事项添加到todos列表中，并清空输入框的值。

Ngin