天天看点

使用golang和svelte搭建前后端分离项目详细步骤

作者:灯泡是个男孩

以下是使用golang和svelte搭建前后端分离项目的详细步骤:

1. 下载安装Golang

在官网下载对应操作系统的安装包,安装Golang。

2. 创建项目目录

在本地创建一个空文件夹,用于存放项目文件。

3. 创建后端代码

在该目录下创建一个main.go的文件,用于编写后端代码。

```go

package main

import (
 "encoding/json"
 "log"
 "net/http"
)

type Todo struct {
 Name      string `json:"name"`
 Completed bool   `json:"completed"`
}

type Todos []Todo

func main() {
 http.HandleFunc("/todos", func(w http.ResponseWriter, r *http.Request) {
  todos := Todos{
   Todo{Name: "Task 1", Completed: false},
   Todo{Name: "Task 2", Completed: true},
   Todo{Name: "Task 3", Completed: false},
  }

  json.NewEncoder(w).Encode(todos)
 })

 log.Fatal(http.ListenAndServe(":8080", nil))
}           

```

该代码会在端口8080启动一个Web服务器,当访问/todos路由时,用json格式返回三个任务的列表。

可以使用以下命令运行该代码:

```

go run main.go           

```

4. 测试后端代码

在浏览器中访问 http://localhost:8080/todos,应该能看到任务列表以json格式显示在页面上。

5. 创建前端代码

在该目录下创建一个名为“client”的文件夹,在其中创建一个index.html文件。

```html

<!DOCTYPE html>
<html>
  <head>
    <title>Todos</title>
  </head>
  <body>
    <ul>
      {#each todos as todo}
        <li>
          {#if todo.completed}
            <del>{todo.name}</del>
          {:else}
            {todo.name}
          {/if}
        </li>
      {/each}
    </ul>

    <script src="bundle.js"></script>
  </body>
</html>           

```

6. 创建Svelte应用程序

使用以下命令安装svelte:

```

npm install -g degit svelte           

```

在命令行中导航到项目目录,并使用以下命令在client文件夹中创建一个svelte应用程序:

```

npx degit sveltejs/template client           

```

该命令会在client文件夹中创建一个基本的svelte应用程序。

7. 修改svelte应用程序

在client文件夹中打开src/App.svelte文件。使用以下代码替换它:

```html

<script>
  let todos = [];

  fetch('/todos')
    .then(res => res.json())
    .then(data => {
      todos = data;
    });
</script>

<ul>
  {#each todos as todo}
    <li>
      {#if todo.completed}
        <del>{todo.name}</del>
      {:else}
        {todo.name}
      {/if}
    </li>
  {/each}
</ul>           

```

该代码将使用fetch API从Web服务器获取待办事项,并将其存储在名为todos的变量中。接下来,将使用熟悉的svelte语法创建待办事项列表。

8. 构建前端应用程序

使用以下命令在client文件夹中构建前端应用程序:

```

cd client
npm run build           

```

该命令将生成一个名为“public”的文件夹,其中包含所有的构建代码和资产。

9. 运行项目

返回项目的根目录,并使用以下命令启动Web服务器:

```

go run main.go           

```

在浏览器中访问 http://localhost:8080,应该能看到任务列表以HTML格式显示在页面上。

10. 完成

完成了前后端分离的项目实现,现在可以按照自己的需求进行开发。

继续阅读