锋盈数科-知识库 Logo
首页
软件开发
计算机基础
Hello Halo
新手必读
关于本知识库
登录 →
锋盈数科-知识库 Logo
首页 软件开发 计算机基础 Hello Halo 新手必读 关于本知识库
登录
  1. 首页
  2. 软件开发
  3. 前端
  4. 使用rust+javascript+html5写一个问题记录的页面

使用rust+javascript+html5写一个问题记录的页面

0
  • 前端
  • 发布于 2024-09-28
  • 17 次阅读
黄健
黄健

为了实现一个简单的问题记录系统,我们可以使用Rust作为后端,JavaScript和HTML5作为前端。以下是一个简单的实现:

  1. 首先,我们需要创建一个Rust后端,用于处理问题记录的增删改查操作。这里我们使用warp库来创建一个简单的HTTP服务器。

安装依赖:

cargo install warp

创建一个名为main.rs的文件,内容如下:

use warp::Filter;

#[tokio::main]
async fn main() {

    let questions = warp::path("questions")
        .and(warp::get())
        .map(|| {

            // 这里可以从数据库或其他存储中获取问题列表
            "[]" // 返回一个空的问题列表
        });

    warp::serve(questions)
        .run(([127, 0, 0, 1], 3030))
        .await;
}
  1. 接下来,我们需要创建一个HTML页面,用于显示问题列表和添加新问题。创建一个名为index.html的文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题记录系统</title>
</head>
<body>
    <h1>问题记录系统</h1>
    <ul id="question-list"></ul>
    <form id="add-question-form">
        <input type="text" id="question-input" placeholder="输入问题">
        <button type="submit">添加问题</button>
    </form>
    <script src="app.js"></script>
</body>
</html>
  1. 然后,我们需要编写JavaScript代码来处理前端逻辑,包括获取问题列表、添加新问题等。创建一个名为app.js的文件,内容如下:
document.getElementById('add-question-form').addEventListener('submit', async (event) => {

    event.preventDefault();
    const questionInput = document.getElementById('question-input');
    const question = questionInput.value;
    if (!question) return;

    // 发送请求到后端API,添加新问题
    const response = await fetch('http://localhost:3030/questions', {

        method: 'POST',
        headers: {

            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
    question })
    });

    if (response.ok) {

        // 清空输入框并刷新问题列表
        questionInput.value = '';
        updateQuestionList();
    } else {

        alert('添加问题失败');
    }
});

async function updateQuestionList() {

    const response = await fetch('http://localhost:3030/questions');
    const questions = await response.json();
    const questionList = document.getElementById('question-list');
    questionList.innerHTML = '';
    questions.forEach(question => {

        const li = document.createElement('li');
        li.textContent = question;
        questionList.appendChild(li);
    });
}

updateQuestionList();

现在,你可以运行Rust后端服务器(cargo run),然后在浏览器中打开index.html文件,即可看到一个简单的问题记录系统。请注意,这个示例仅用于演示目的,实际应用中需要考虑数据持久化、错误处理等问题。

原文链接: https://blog.csdn.net/ChailangCompany/article/details/142601797

标签: #JavaScript 80 #前端 145
相关文章

vue2路由和vue3路由区别及原理 2024-10-08 11:24

一、Vue2 与 Vue3 路由的区别 1. 创建路由实例方式的不同 Vue 2 中,通过 Vue.use() 注册路由插件,并通过 new VueRouter() 来创建路由实例。 import Vue from 'vue';import VueRouter from 'vue-router';i

vue项目 部署到nginx 上刷新页面显示404 2024-09-30 17:34

在Vue项目部署到Nginx服务器上时,遇到刷新页面显示404的问题,通常是因为Nginx无法正确地处理Vue路由(尤其是单页面应用(SPA)中的前端路由)。Vue应用的路由是前端路由,依赖于JavaScript来动态解析URL,当直接访问除根路径外的URL时,Nginx默认会尝试在服务器上找到对应

三小时快速上手TypeScript,TS速通教程(上篇、中篇、下篇、附加篇) 2024-09-29 11:21

TypeScript速通 Typescript简介 为什么需要TypeScript * JavaScript今非昔比 JavaScript中的困扰 1. 不清不楚的数据类型 2. 有漏洞的逻辑 3. 访问不存在的属性 4. 低级的拼写错误 TypeScrip

js中的事件冒泡是什么? 2024-09-29 11:21

事件冒泡(Event Bubbling)是JavaScript中一种事件传播机制。当一个事件(如点击、键盘输入等)发生在某个元素上时,浏览器会首先触发该元素上的特定事件处理函数(如果存在的话)。然后,该事件会从当前元素向其父元素逐级传播,直到达到元素或整个文档树。这种从触发元素开始,逐级向上传播的事

Vue.js 的 Mixins 2024-09-26 17:57

Vue.js 的 Mixins 是一种非常强大且灵活的功能,它允许你封装可复用的 Vue 组件选项。Mixins 实际上是一种分发 Vue 组件可复用功能的非常灵活的方式。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 时,所有 mixin 选项将被"混入"该组件本身的选项。 M

前端框架对比和选择 2024-09-26 17:57

在前端开发的广阔领域中,框架的选择对于项目的成功至关重要。不同的框架各具特色,适用于不同的开发需求和项目规模。本文将对当前最流行的三大前端框架——React、Vue和Angular进行详细对比,并探讨如何根据项目需求选择合适的框架。 一、React 1. 简介 React是由Facebook开发和维

目录

IT 外包服务商

  • 意见投递
  • zyf6619

软件开发应用

主菜单

  • 首页
  • 软件开发
  • 计算机基础
  • Hello Halo
  • 新手必读
  • 关于本知识库
Copyright © 2024 your company All Rights Reserved. Powered by Halo.