以下是使用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. 完成
完成了前后端分离的项目实现,现在可以按照自己的需求进行开发。