cargo new rust-backend接下来,通过向Cargo.toml文件中添加Rocket框架到项目中:
[dependencies] rocket = "0.5.0"通过将Rocket作为依赖项添加,你现在可以创建一个简单的REST API。出于本文的目的,我们将创建一个返回用户列表的简单接口。
#![feature(proc_macro_hygiene, decl_macro)] #[macro_use] extern crate rocket; #[get("/users")] fn users() -> &'static str { "{\"users\": [{\"id\": 1, \"name\": \"John Doe\"}, {\"id\": 2, \"name\": \"Jane Doe\"}]}" } fn main() { rocket::ignite().mount("/", routes![users]).launch(); }在上面的代码中,我们创建了一个简单的接口,它返回一个带有用户列表的JSON对象。Rocket框架负责处理传入请求并将它们路由到适当的端点。你现在可以在nightly版本上运行cargo run来启动后端。应该可以看到Rocket服务器运行在本地主机端口8000上。
设置好后端之后,是时候设置前端了。我们将使用slevte创建一个简单的用户界面,该界面显示来自后端的用户列表。
首先,你需要在你的机器上安装Node.js和npm。如果没有安装,可以从官网下载安装。一旦你安装了Node.js和npm,使用下面的命令创建一个新的slvelte项目:
npx degit sveltejs/template svelte-frontend这将创建一个名为slvelte -frontend的新slvelte项目。
npm install axios安装axios后,现在可以向后端发出请求以检索用户列表。
import axios from 'axios'; let users = []; axios.get('http://localhost:8000/users') .then(response => { users = response.data.users; });检索到数据后,现在可以在我们的slvelte组件中显示用户列表。
<template> <ul> {#each users as user} <li>{user.name}</li> {/each} </ul> </template> <script> import axios from 'axios'; let users = []; axios.get('http://localhost:8000/users') .then(response => { users = response.data.users; }); export default { data() { return { users }; } }; </script>在上面的代码中,我们创建了一个简单的模板,它使用一个Svelte each指令来遍历用户列表并显示他们的名字。data函数返回users数组,然后在模板中使用。
npm run dev现在你应该能够访问http://localhost:5000的前端,并看到页面上显示的用户列表。