用C语言做一个web站,富文本写入与展示,用户登录,文本目录划分

目录

      • 1. 基础准备
        • 必备工具:
      • 2. 目录结构
      • 3. 用户登录(使用简单的文件系统管理)
      • 4. 富文本编辑器和展示
      • 5. 样式文件
      • 6. 配置 Web 服务器
      • 7. 运行和测试

构建一个简单的 Web 站点实现富文本写入和展示、用户登录以及文本目录划分需要结合多个技术,包括 C 语言的 CGI(Common Gateway Interface)、HTML、JavaScript 和 CSS 以及一个简单的文件系统管理。下面是一个基本的实现步骤和示例代码。

1. 基础准备

必备工具:
  • 一个 Web 服务器(例如 Apache 或 Nginx)支持 CGI。
  • HTML、CSS 和 JavaScript 基础知识。
  • C 语言编译器(例如 gcc)。

2. 目录结构

/var/www/cgi-bin/      # 放置 CGI 脚本
/var/www/html/         # 放置 HTML 文件
/var/www/html/css/     # 放置 CSS 文件
/var/www/html/js/      # 放置 JavaScript 文件

3. 用户登录(使用简单的文件系统管理)

login.html(放在 /var/www/html/ 中):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Login</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form action="/cgi-bin/login.cgi" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <button type="submit">Login</button>
    </form>
</body>
</html>

login.cgi(放在 /var/www/cgi-bin/ 中):

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

void get_post_data(char *data) {
    char *lenstr;
    long len;
    lenstr = getenv("CONTENT_LENGTH");
    if(lenstr == NULL || sscanf(lenstr,"%ld",&len)!=1 || len>1024) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Invalid POST data</body></html>");
        exit(1);
    }
    fgets(data, len+1, stdin);
}

int main() {
    char data[1024];
    char username[100], password[100];

    get_post_data(data);

    sscanf(data, "username=%99[^&]&password=%99s", username, password);

    // 简单的用户名密码验证 (应替换为更安全的方法)
    if(strcmp(username, "admin") == 0 && strcmp(password, "password") == 0) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Login successful!<br><a href=\"editor.html\">Go to Editor</a></body></html>");
    } else {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Invalid credentials. <a href=\"/login.html\">Try again</a></body></html>");
    }

    return 0;
}

4. 富文本编辑器和展示

editor.html(放在 /var/www/html/ 中):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rich Text Editor</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/editor.js"></script>
</head>
<body>
    <form action="/cgi-bin/save_text.cgi" method="post">
        <textarea id="editor" name="editor" rows="10" cols="80"></textarea>
        <button type="submit">Save</button>
    </form>
    <div>
        <h2>Text Directory</h2>
        <ul id="directory"></ul>
    </div>
</body>
</html>

editor.js(放在 /var/www/html/js/ 中):

document.addEventListener("DOMContentLoaded", function() {
    const directory = document.getElementById('directory');

    // Fetch directory contents
    fetch('/cgi-bin/list_texts.cgi')
        .then(response => response.json())
        .then(data => {
            data.forEach(file => {
                let li = document.createElement('li');
                let a = document.createElement('a');
                a.href = `/cgi-bin/display_text.cgi?file=${file}`;
                a.innerText = file;
                li.appendChild(a);
                directory.appendChild(li);
            });
        });
});

save_text.cgi(放在 /var/www/cgi-bin/ 中):

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

void get_post_data(char *data) {
    char *lenstr;
    long len;
    lenstr = getenv("CONTENT_LENGTH");
    if(lenstr == NULL || sscanf(lenstr,"%ld",&len)!=1 || len>8192) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Invalid POST data</body></html>");
        exit(1);
    }
    fgets(data, len+1, stdin);
}

void save_to_file(const char *filename, const char *data) {
    FILE *file = fopen(filename, "w");
    if(file == NULL) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Could not save file.</body></html>");
        exit(1);
    }
    fprintf(file, "%s", data);
    fclose(file);
}

int main() {
    char data[8192];
    get_post_data(data);

    // Saving the data to a file (simple naming, should be more secure)
    save_to_file("/var/www/texts/saved_text.html", data);

    printf("Content-type:text/html\n\n");
    printf("<html><body>Text saved! <a href=\"editor.html\">Back to Editor</a></body></html>");
    return 0;
}

list_texts.cgi(放在 /var/www/cgi-bin/ 中):

#include <stdio.h>
#include <stdlib.h>
#include <dirent.h>
#include <string.h>

int main() {
    DIR *d;
    struct dirent *dir;
    char result[8192] = "[";

    d = opendir("/var/www/texts/");
    if(d) {
        while((dir = readdir(d)) != NULL) {
            if(dir->d_type == DT_REG) {
                strcat(result, "\"");
                strcat(result, dir->d_name);
                strcat(result, "\",");
            }
        }
        closedir(d);
        if(result[strlen(result) - 1] == ',') {
            result[strlen(result) - 1] = '\0';
        }
    }
    strcat(result, "]");

    printf("Content-type: application/json\n\n");
    printf("%s", result);
    return 0;
}

display_text.cgi(放在 /var/www/cgi-bin/ 中):

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

void display_file(const char *filename) {
    FILE *file = fopen(filename, "r");
    if(file == NULL) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Could not open file.</body></html>");
        exit(1);
    }
    printf("Content-type:text/html\n\n");
    printf("<html><body>");
    char ch;
    while((ch = fgetc(file)) != EOF) {
        putchar(ch);
    }
    printf("</body></html>");
    fclose(file);
}

int main(int argc, char *argv[]) {
    char *query_string = getenv("QUERY_STRING");
    char filename[256];

    if(query_string == NULL || sscanf(query_string, "file=%255s", filename) != 1) {
        printf("Content-type:text/html\n\n");
        printf("<html><body>Invalid file request.</body></html>");
        exit(1);
    }

    char filepath[512];
    snprintf(filepath, sizeof(filepath), "/var/www/texts/%s", filename);
    display_file(filepath);

    return 0;
}

5. 样式文件

style.css(放在 /var/www/html/css/ 中):

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

form {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    height: 200px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

6. 配置 Web 服务器

确保你的 Web 服务器配置正确,并支持 CGI 脚本。例如,如果你使用 Apache,确保 httpd.conf 中有如下配置:

ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options +ExecCGI
    AddHandler cgi-script .cgi .pl .py
    Require all granted
</Directory>

7. 运行和测试

  • 将所有文件放在对应的目录中。
  • 访问 http://yourserver/login.html 进行用户登录。
  • 成功登录后,访问富文本编辑器进行内容输入和保存。
  • 确保你有 `/var/www

/texts/` 目录用来保存文本文件,并具有写权限。

这只是一个基础的示例,实际应用中需要考虑更多安全性和功能性方面的细节。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/766495.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入理解ThreadLocal原理

以下内容首发于我的个人网站&#xff0c;来这里看更舒适&#xff1a;https://riun.xyz/work/9898775 ThreadLocal是一种用于实现线程局部变量的机制&#xff0c;它允许每个线程有自己独立的变量&#xff0c;从而达到了线程数据隔离的目的。 基于JDK8 使用 通常在项目中是这样…

JS爬虫实战之Fastmoss

Fastmoss参数逆向 逆向前准备思路1- 确认接口2- 参数确认3- 重试校验参数逻辑4- 寻找逆向入口1- 方式一&#xff08;search搜索&#xff09;&#xff1a;2- 方式二&#xff08;堆栈搜索&#xff09;&#xff1a; 5- 获取加密算法1- fm-sign字段是有zn来的&#xff0c;我们查看z…

机器学习 C++ 的opencv实现SVM图像二分类的训练 (二)【附源码】

本节讲机器学习 C 的opencv实现SVM图像二分类的训练&#xff0c;下节讲测试&#xff1a; 数据集合data内容如下&#xff1a; 下载地址为&#xff1a;https://download.csdn.net/download/hgaohr1021/89506900 #include <stdio.h> #include <time.h> #include…

C语言课程回顾:六、C语言循环控制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 C语言循环控制 6 循环控制6.1 概述6.2 goto语句以及用goto语句构成循环6.3 while语句6.4 do-while语句6.5 for语句6.6 循环的嵌套6.7 几种循环的比较6.8 break和continue语句…

Windows系统安装NVM,实现Node.js多版本管理

目录 一、前言 二、NVM简介 三、准备工作 1、卸载Node 2、创建文件夹 四、下载NVM 五、安装NVM 六、使用NVM 1、NVM常用操作命令 2、查看NVM版本信息 3、查看Node.js版本列表&#xff1b; 4、下载指定版本Node.js 5、使用指定版本Node.js 6、查看已安装Node.js列…

Java知识点整理 18 — Lambda表达式

一. 简介 Lambda 表达式是函数式编程思想的体现&#xff0c;强调做什么&#xff0c;而不是以什么方式去做。 面向对象编程思想强调的是对象&#xff0c;必须通过对象的形式来做一些事情。比如多线程执行任务&#xff0c;需要创建对象&#xff0c;对象需要实现指定接口&#x…

Rust监控可观测性

可观测性 在监控章节的引言中&#xff0c;我们提到了老板、前端、后端眼中的监控是各不相同的&#xff0c;那么有没有办法将监控模型进行抽象、统一呢&#xff1f; 来简单分析一下&#xff1a; 业务指标实时展示&#xff0c;这是一个指标型的数据( metric )手机 APP 上传的数…

若依 ruoyi vue上传控件 el-upload上传文件 判断是否有文件 判断文件大小

console.info(this.$refs.upload.uploadFiles.length)//this.$refs.upload.uploadFiles.length 获取当前上传控件中已选择的文件大小//判断是否存在已上传文件 if(this.$refs.upload.uploadFiles.length 0){this.$modal.msgWarning("请上传文件");return; }

轻松配置,无需重复操作:PyCharm新建项目后,如何让当前新建项目使用既有虚拟环境

1、点击右上角的设置按钮 2、点击Settings 3、点击profect 4、点击python Interprter&#xff0c;这个是python解释器 5、点击 add interpreter&#xff0c;这个是增加python解释器 6、再点击add Local interpreter 7、选择第一个Virtualenv Environment,然后选择Existin…

交叉编译tslib库和上机测试

目录 一、tslib 介绍 二、tslib 框架分析 三、交叉编译、测试 tslib 1.安装工具链 tslib &#xff08;1&#xff09;设置交叉编译工具链 &#xff08;2&#xff09;进入tslib目录 &#xff08;3&#xff09;安装工具链 &#xff08;4&#xff09;确定工具链中头文件、库…

Linux源码阅读笔记09-进程NICE案例分析1

task_nice task_nice函数功能&#xff1a;获取某个进程的nice值&#xff0c;其中nice值为进程的优先级&#xff0c;与静态优先级有关&#xff08;nicestatic_prio-120&#xff09;。 nice的取值范围&#xff1a;-20 ~ 19 内核源码 根据内核的注释可以知道&#xff1a;task_n…

13-Django项目--文件上传

目录 前端展示 路由: 数据库字段: 函数视图: 前端展示 {% extends "index/index.html" %}{% block content %}<div class"container"><input type"button" id"btnAdd" value"上传荣耀" class"btn btn-succ…

鼠标点击器免费版?详细介绍鼠标连点器的如何使用

随着科技的发展&#xff0c;鼠标连点器逐渐成为了我们生活和工作中不可或缺的工具。它不仅能够帮助我们完成频繁且重复的点击任务&#xff0c;还能在很大程度上减少我们的手部疲劳&#xff0c;提高工作效率。本文将详细介绍鼠标连点器的使用方法&#xff0c;并推荐三款好用的免…

to_json 出现乱码的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

来咯,他来咯 看GitHub Codespaces 如何帮助缩短开发设置时间

在快节奏的软件开发世界中&#xff0c;效率和速度起着重要作用。对于开发人员来说&#xff0c;设置开发环境可能是一项耗时的任务。GitHub Codespaces 是一个基于云的环境&#xff0c;旨在通过提供对配置设置的访问来应对这一挑战。 本指南将帮助你开始使用 GitHub Codespaces …

Spring boot 更改启动LOGO

在resources目录下创建banner.txt文件&#xff0c;然后编辑对应的图案即可 注释工具 Spring Boot Version: ${spring-boot.version},-.___,---.__ /|\ __,---,___,- \ -.____,- | -.____,- // -., | ~\ /~ | …

【面试干货】值传递与引用传递:理解Java中的参数传递机制

【面试干货】值传递与引用传递&#xff1a;理解Java中的参数传递机制 1、值传递&#xff08;Call by Value&#xff09;2、引用传递&#xff08;Call by Reference&#xff09;3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 值传递…

【Python】已解决:ERROR: No matching distribution found for JPype1

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ERROR: No matching distribution found for JPype1 一、分析问题背景 在安装Python的第三方库时&#xff0c;有时会遇到“ERROR: No matching distribution fo…

金融科技在反洗钱领域的创新应用

随着金融市场的不断发展和全球化趋势的加速&#xff0c;洗钱活动日益猖獗&#xff0c;给金融机构和社会经济安全带来了严重威胁。为了有效应对这一挑战&#xff0c;金融科技在反洗钱领域的应用逐渐崭露头角&#xff0c;为打击洗钱活动提供了强有力的技术支持。本文将从多个角度…