完成一个有趣的Web期末大作业（html、css、javascript、MySQL、Node.js）

已于 2023-12-19 11:29:16 修改
阅读量3.7k 收藏 101
点赞数 19
分类专栏： web 文章标签： 前端 课程设计 html css javascript 数据库
于 2023-11-15 17:15:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62954485/article/details/134424252
版权

题目：学校老师的要求很开放，要自己做一个感兴趣的网页，要求使用基础的html、css和javascript，后端要使用数据库。 网上都是各种管理系统，看多了觉得没啥意思，要做一个自己感兴趣的网站。近几年沉迷犬夜叉这部动漫，就花了两天的时间创建了一个犬夜叉的网站，对于期末大作业来说足够了。

需要源码可以联系我的邮箱 1329690093@qq.com

一、实验工具

运行系统：Windows11
编程语言：html+css+javascript+node.js
IDE：VsCode
安装：Node.js v18.18.0 （网上有安装教程）
数据库：mysql 18.0.3.0
vscode插件:
- MySQL v6.8.9在这里插入图片描述
- Live Server v5.7.9 在这里插入图片描述
- open in browser 在这里插入图片描述
- HTML CSS Support v1.13.1 在这里插入图片描述

二、设计过程

前端要求

在进行设计的时候，采用html和css相结合，对网页进行布局规划，形成适合动漫网站风格的页面，具体要求如下：

  • 色彩：登录界面用清新的绿色按钮，首页则用深绿色导航栏搭配浅绿色按钮，配合动漫风格。
  • 布局：两个界面均采用简洁的卡片布局，信息分区清楚。
  • 字体：简单易读的字体，如微软雅黑，确保文字在各种设备上都清晰。
  • 元素：圆角的输入框和按钮，简洁的图标和图片。
  • 交互：明确的交互反馈，如点击按钮后的视觉效果。
  • 适应性：界面要适应不同设备和屏幕。
  • 兼容性：在多种浏览器和操作系统上都能保持一致表现。

页面布局

页面布局图片

具体布局模块

首页模块

  • 用户欢迎信息 ：显示 “ 欢迎 ‘用户名’ + 登录 ”。
  • 导航栏：包括首页、介绍、图片、视频&音频、论坛等链接。
  • 页脚：展示作者信息及邮箱联系方式。

内容展示模块

  • 介绍页面：展示犬夜叉动漫介绍。
  • 图片页面：展示四张犬夜叉相关图片。
  • 视频&音频页面：展示一个视频和五首音乐。
  • 论坛页面：提供评论区，用户可以发表并存储评论。

Node.js

  • 服务器搭建：利用Node.js搭建网站服务器，处理请求。
  • 提供静态文件服务，如HTML页面、CSS样式表、客户端JavaScript文件等。

script.js

  • 前端逻辑处理：控制注册和登录表单的提交，与服务器端进行异步交互；
    实现客户端表单验证，确保数据的准确性在发送到服务器之前进行校验；
    负责处理用户在导航栏的页面跳转逻辑。

comment.js

  • 评论区域功能：管理评论的提交，通过AJAX与服务器进行数据交换。
  • 在页面上动态显示用户评论。
  • 确保用户提交的评论实时更新并正确存储到数据库。

以上模块协同工作，共同提供一个交互式的用户体验，允许用户在一个安全和友好的环境中进行注册、登录、内容查看、以及社区交流。

项目工程：
项目工程

三、界面&代码

登陆界面

设计的很草率，能实现注册和登录的功能
注册登录
登陆界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Registration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        form {
            background-color: #fff;
            padding: 20px;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        input {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; 
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 0;
        }

        button:hover {
            background-color: #4cae4c;
        }

        .container {
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 登录表单 -->
        <form id="login-form">
            <input type="text" id="login-username" placeholder="用户名" required>
            <input type="password" id="login-password" placeholder="密码" required>
            <button type="submit">登录</button>
        </form>
      
        <!-- 注册表单 -->
        <form id="register-form">
            <input type="text" id="register-username" placeholder="用户名" required>
            <input type="password" id="register-password" placeholder="密码" required>
            <button type="submit">注册</button>
        </form>
    </div>

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

主界面：
主界面

主界面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬夜叉爱好者网</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <header>
    <div id="user-greeting" class="user-greeting">
        欢迎, <span id="username">访客</span>!
    </div>
    <h1>犬夜叉世界</h1>
    
    <img src="picture/Inuyasha.png" alt="犬夜叉图片">
    <nav>
    <ul>
      <li><span>主页</span></li>
      <li><a href="介绍.html">介绍</a></li>
      <li><a href="图片.html">图片</a></li>
      <li><a href="视频&音频.html">视频</a></li>
      <li><a href="论坛.html">论坛</a></li>
    </ul>
  </nav>
  </header>

  <script>
    // 页面加载时检查用户名
    document.addEventListener('DOMContentLoaded', function () {
        const storedUsername = localStorage.getItem('username');
        if (storedUsername) {
            document.getElementById('username').textContent = storedUsername;
        } else {
            document.getElementById('username').textContent = '访客';
        }
    });
  </script>

  <main>
    <article>
      <h2>欢迎</h2>
      <p>欢迎来到"犬夜叉世界"——一个专注于日本动漫《犬夜叉》的综合性网站。在这里，您可以找到关于《犬夜叉》的各种信息，包括动漫介绍、收藏图片、收藏视频，以及我们自建的犬夜叉论坛。</p>
      <hr />
      <p>在"犬夜叉世界"，我们致力于为动漫爱好者提供一个全面、多元化的交流平台。我们的网站内容包括动漫介绍，详细介绍了《犬夜叉》的主要角色、故事情节和特色亮点。此外，我们还提供了一个丰富的图片库，收录了大量精美的《犬夜叉》角色图片和场景截图。</p>
      <hr />
      <p>在视频和音频收藏部分，我们收集了《犬夜叉》的精彩片段和音乐、剧场版动画和特别版动画，供您随时观看和回味。这些视频不仅可以让您重温动漫中的经典场景，还能让您感受到《犬夜叉》世界中的奇幻与浪漫。</p>
      <hr />
      <p>除了以上内容，我们还为您打造了一个专属的犬夜叉论坛。在这里，您可以与其他动漫爱好者分享心得、讨论剧情、交流感想。我们鼓励大家积极发表自己的看法，分享对《犬夜叉》的热爱与感悟。</p>
      <hr />
      <p>"犬夜叉世界"致力于为广大动漫爱好者提供一个优质、便捷的在线交流平台。我们诚挚邀请您加入我们的大家庭，与我们一起分享对《犬夜叉》的热爱，共同度过美好的时光。</p>
      <hr />
      <p>请随时关注我们的网站更新，以便获取更多精彩内容和活动信息。谢谢您的光临，"犬夜叉世界"期待您的加入！</p>
</article>
<aside>
      <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
      <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
</aside>
</main>
<footer>
      <p>网站作者：王子一</p>
      <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
</footer>
</body>
</html>

介绍界面：
介绍界面
介绍界面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬夜叉爱好者网</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <header>
    <h1>犬夜叉世界</h1>
    <img src="picture/Inuyasha.png" alt="犬夜叉图片">
    <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><span>介绍</span></li>
      <li><a href="图片.html">图片</a></li>
      <li><a href="视频&音频.html">视频</a></li>
      <li><a href="论坛.html">论坛</a></li>
    </ul>
  </nav>
  </header>
  
  <main>
    <article>
      <h2>剧情介绍</h2>
      <p>《犬夜叉》的剧情主要围绕着半妖犬夜叉和人类少女日暮戈薇展开。故事发生在日本战国时代，当时妖怪和人类之间存在激烈的冲突。犬夜叉是一个半妖，因为他的父亲是大妖怪斗牙王，母亲是人类公主十六夜。由于自己的半妖身份，犬夜叉在人类和妖怪之间都受到排斥。</p>
      <hr />
      <p>  日暮戈薇是一个勇敢、善良的初三女生，她通过自家神社的食骨之井穿越时空来到500年前的日本战国时代，遇到了犬夜叉。为了寻找散落于各处的四魂之玉碎片并保护它，犬夜叉和日暮戈薇以及他们的伙伴们开始了冒险之旅。</p>
      <hr />
      <p>  在这个过程中，犬夜叉和日暮戈薇不断成长并建立深厚的感情。同样是在寻找四魂之玉的过程中，他们遇到了巫女桔梗，一个拥有强大灵力的女子。桔梗为了保护和净化四魂之玉，不断与前来抢夺四魂之玉的妖怪战斗。在这个过程中，犬夜叉和桔梗之间也产生了深深的感情。</p>
      <hr />
      <p>在不断的相互了解中，犬夜叉和日暮戈薇、桔梗之间都建立了深厚的感情。最终他们约定利用四魂之玉的力量，把犬夜叉变成人类，守护使命结束的桔梗也可以回归到平凡生活。然而在这个过程中，奈落出现了，他是一个邪恶的妖怪，企图利用四魂之玉的力量实现自己的目的。为了阻止奈落的阴谋，犬夜叉和日暮戈薇、桔梗以及他们的伙伴们展开了一场激烈的战斗。</p>
      <hr />
      <p>在战斗中，犬夜叉通过与日暮戈薇和桔梗的紧密合作以及自身的勇气和智慧，最终成功地打败了奈落，守护了四魂之玉。在这个过程中，他也逐渐成长为一个有担当、有责任、有勇气、有智慧的男子汉。</p>
      <hr />
      <p>总的来说，《犬夜叉》是一部充满冒险、成长、爱情和友情的故事。通过这个故事，观众可以看到主人公们在面对困难和挑战时如何勇敢地奋斗，以及他们之间的深厚感情。同时，故事也探讨了人类和妖怪之间的关系和共存问题，以及爱情、友情等主题。</p>
</article>
<aside>
      <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
      <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
</aside>
</main>
<footer>
      <p>网站作者：王子一</p>
      <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
</footer>
</body>
</html>

图片界面：
图片界面
图片界面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬夜叉爱好者网</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <header>
    <h1>犬夜叉世界</h1>
    <img src="picture/Inuyasha.png" alt="犬夜叉图片">
    <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="介绍.html">介绍</a></li>
      <li><span>图片</span></li>
      <li><a href="视频&音频.html">视频</a></li>
      <li><a href="论坛.html">论坛</a></li>
    </ul>
  </nav>
  </header>

  <main>
    <article>  
        <h2>图片</h2>  
        <div class="row">  
          <figure>  
            <img src="picture/Inuyasha.jpg"  
            alt="图片1"  
            width="350"  
            height="250">
            <figcaption>图片1</figcaption>  
          </figure>  
          <figure>  
            <img src="picture/犬夜叉3.jpg"  
            alt="图片2"  
            width="350"  
            height="250"> 
            <figcaption>图片2</figcaption>   
          </figure>  
        </div>  
        <div class="row">  
          <figure>  
            <img src="picture/犬夜叉6.jpg"  
            alt="图片3"  
            width="350"  
            height="250">  
            <figcaption>图片3</figcaption>  
          </figure>  
          <figure>  
            <img src="picture/犬夜叉7.jpg"  
            alt="图片4"  
            width="350"  
            height="250">  
            <figcaption>图片4</figcaption>  
          </figure>  
        </div>  
    </article>
    
<aside>
      <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
      <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
</aside>
</main>
<footer>
      <p>网站作者：王子一</p>
      <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
</footer>
</body>
</html>

视频&音乐界面：
视频&音频

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬夜叉爱好者网</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <header>
    <h1>犬夜叉世界</h1>
    <img src="picture/Inuyasha.png" alt="犬夜叉图片">
    <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="介绍.html">介绍</a></li>
      <li><a href="图片.html">图片</a></li>
      <li><span>视频&音频</span></li>
      <li><a href="论坛.html">论坛</a></li>
    </ul>
  </nav>
  </header>

  
  <main>
      <article>
        <h2>视频&音频</h2>
        <div class="media-container">
          <div class="video-container">
            <video
              controls
              width="500"
              height="500"
              autoplay
              loop
              muted
              poster="picture/2.jpg">
              <source src="picture/视频.mp4" type="video/mp4" />
              <p>
                你的浏览器不支持 HTML5 视频观看。
              </p>
            </video>
          </div>
          <div class="audio-container">
            <div class="audio-item">
              <h3>Every Heart</h3>
              <audio controls>
                <source src="music/BoA - Every Heart-ミンナノキモチ- (全心全意).mp3" type="audio/mp3" />
                <p>你的浏览器不支持 HTML5 音频收听。</p>
              </audio>
            </div>
            <div class="audio-item">
              <h3>Dearest</h3>
              <audio controls>
                <source src="music/Gfanfan - Dearest.mp3" type="audio/mp3" />
                <p>你的浏览器不支持 HTML5 音频收听。</p>
              </audio>
            </div>
            <div class="audio-item">
              <h3>哀歌</h3>
              <audio controls>
                <source src="music/和田薫 - 哀歌.mp3" type="audio/mp3" />
                <p>你的浏览器不支持 HTML5 音频收听。</p>
              </audio>
            </div>
            <div class="audio-item">
              <h3>ふたりの気持ち</h3>
              <audio controls>
                <source src="music/和田薫 - ふたりの気持ち.mp3" type="audio/mp3" />
                <p>你的浏览器不支持 HTML5 音频收听。</p>
              </audio>
            </div>
            <div class="audio-item">
              <h3>时代を越える想い</h3>
              <audio controls>
                <source src="music/和田薫 - 時代を越える想い (穿越时空的思念)(Moscow Recording Ver.).mp3" type="audio/mp3" />
                <p>你的浏览器不支持 HTML5 音频收听。</p>
              </audio>
            </div>
          </div>
        </div>
      </article>
<aside>
      <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
      <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
</aside>
</main>
<footer>
      <p>网站作者：王子一</p>
      <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
</footer>
</body>
</html>

论坛界面：
论坛界面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬夜叉爱好者网</title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
    <header>
      <div id="user-greeting" class="user-greeting">
        欢迎, <span id="username">访客</span>!
    </div>
    <h1>犬夜叉世界</h1>
    <img src="picture/Inuyasha.png" alt="犬夜叉图片">
    <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="介绍.html">介绍</a></li>
      <li><a href="图片.html">图片</a></li>
      <li><a href="视频&音频.html">视频</a></li>
      <li><span>论坛</span></li>
    </ul>
  </nav>
  </header>

  </script>

  <main>
    <article>
      <section id="comments-section">
        <!-- 评论展示区域 -->
      </section>
      
      <!-- 评论提交表单 -->
      <form id="comment-form">
        <textarea id="comment-content" placeholder="写下你的评论..."></textarea>
        <button type="submit">发送</button>
      </form>
</article>
<aside>
      <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
      <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
</aside>
</main>
<footer>
      <p>网站作者：王子一</p>
      <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
</footer>

<script src="common.js"></script>

</body>
</html>

服务器搭建(Node.js)：

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors');

const bcrypt = require('bcrypt');
const saltRounds = 10;

const app = express();
app.use(cors());
app.use(bodyParser.json());

app.use(express.json()); 
app.use(express.urlencoded({ extended: true }));


// 连接数据库配置
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'nan198614',
    database: 'Inuyasha'
});

connection.connect();

// 注册端点
app.post('/register', async (req, res) => {
    try {
        const { username, password } = req.body;
        const hashedPassword = await bcrypt.hash(password, saltRounds);
        const query = `INSERT INTO users (username, password) VALUES (?, ?)`;

        connection.query(query, [username, hashedPassword], (err, results) => {
            if (err) {
                // 处理错误，例如用户名已存在
                return res.status(500).json({ message: 'User registration failed' });
            }
            return res.status(200).json({ message: 'User registered successfully' });
        });
    } catch (err) {
        res.status(500).json({ message: 'Server error' });
    }
});


// 登录端点
app.post('/login', async (req, res) => {
    try {
        const { username, password } = req.body;
        const query = `SELECT * FROM users WHERE username = ?`;

        connection.query(query, [username], async (err, results) => {
            if (err || results.length === 0) {
                return res.status(401).json({ message: 'Authentication failed' });
            }
            const user = results[0];
            const isValid = await bcrypt.compare(password, user.password);
            if (isValid) {
                return res.status(200).json({ message: 'Authentication successful' });
            } else {
                return res.status(401).json({ message: 'Authentication failed' });
            }
        });
    } catch (err) {
        res.status(500).json({ message: 'Server error' });
    }
});


app.get('/get-comments', (req, res) => {

    console.log('get-comments route was called'); 

    const query = 'SELECT * FROM comments ORDER BY create_time DESC';

    connection.query(query, (err, results) => {
        if (err) {
            // 处理可能发生的错误
            return res.status(500).json({ message: 'Error retrieving comments' });
        }
        res.status(200).json(results);
    });
});


// 发布评论端点
app.post('/post-comment', (req, res) => {
    const { username, content } = req.body;
    const query = 'INSERT INTO comments (user, content, create_time) VALUES (?, ?, NOW())';

    connection.query(query, [username, content], (err, results) => {
        if (err) {
            console.error(err); // 打印错误
            return res.status(500).json({ message: 'Error posting comment', error: err.message });
        }
        res.status(200).json({ message: 'Comment posted successfully' });
    });
});


const PORT = process.env.PORT || 5500;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

评论处理脚本(common.js)

// 页面加载时检查用户名并设置评论表单的事件监听器
document.addEventListener('DOMContentLoaded', function () {
    const storedUsername = localStorage.getItem('username');
    if (storedUsername) {
        document.getElementById('username').textContent = storedUsername;
    } else {
        document.getElementById('username').textContent = '访客';
    }

    // 当页面加载时，获取并显示评论
    fetchComments();

    // 处理评论提交
    var commentForm = document.getElementById('comment-form');
    if (commentForm) {
      commentForm.onsubmit = function (event) {
        event.preventDefault(); // 阻止默认提交行为
        const username = storedUsername; // 从本地存储或其他地方获取用户名
        const content = document.getElementById('comment-content').value;
        postComment(username, content); // 异步发送评论到服务器
    };
    } else {
        console.error('The comment form was not found.');
    }
});
  
function fetchComments() {
  fetch('http://localhost:5500/get-comments') 
    .then(response => response.json())
    .then(comments => {
      const commentsSection = document.getElementById('comments-section');
      commentsSection.innerHTML = ''; // 清空现有评论
      comments.forEach(comment => {
        console.log(comment.username);
        const commentDiv = document.createElement('div');
        commentDiv.className = 'comment';

        // 创建显示用户名的元素
        const usernameSpan = document.createElement('span');
        usernameSpan.className = 'comment-username';
        usernameSpan.textContent = comment.user; // 假设返回的对象有一个username属性

        // 创建显示评论内容的元素
        const contentDiv = document.createElement('div');
        contentDiv.className = 'comment-content';
        contentDiv.textContent = comment.content; // 假设返回的对象有一个content属性

        // 创建显示评论时间的元素
        const timeSpan = document.createElement('span');
        timeSpan.className = 'comment-time';
        timeSpan.textContent = new Date(comment.create_time).toLocaleString(); // 格式化时间，假设返回的对象有一个create_time属性

        // 将用户名、评论内容和时间添加到评论的div中
        commentDiv.appendChild(usernameSpan);
        commentDiv.appendChild(contentDiv);
        commentDiv.appendChild(timeSpan);

        // 将完整的评论元素添加到评论区域
        commentsSection.appendChild(commentDiv);
      });
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

  
  // 发布评论的函数
  function postComment(username, content) {
    fetch('http://localhost:5500/post-comment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username: username, content: content }),
    })
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok.');
    })
    .then(data => {
      console.log('Success:', data);
      fetchComments(); // 重新加载评论
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }

注册脚本(script.js)：

document.addEventListener('DOMContentLoaded', function () {
    // 注册表单 
    const registerForm = document.getElementById('register-form');
    registerForm.onsubmit = function (event) {
        event.preventDefault();
        const username = document.getElementById('register-username').value;
        const password = document.getElementById('register-password').value;

        fetch('http://localhost:5500/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
        })
        .then(response => response.json())
        .then(data => {
        alert(data.message);
        })
        .catch((error) => {
        console.error('Error:', error);
        });

    };

    // 登录表单
    const loginForm = document.getElementById('login-form');
    loginForm.onsubmit = function (event) {
        event.preventDefault();
        const username = document.getElementById('login-username').value;
        const password = document.getElementById('login-password').value;
    
        fetch('http://localhost:5500/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, password }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.message === 'Authentication successful') {
                // 存储用户名到LocalStorage
                localStorage.setItem('username', username);
    
                // 跳转到主页
                window.location.href = 'index.html';
            } else {
                alert(data.message);
            }
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    };


});

css文件（style.css)：

/* || 一般设置 */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  min-width: 800px;
  margin: 0 auto;
}

/* || 排版 */

h1, h2, h3 {
  font-family: 'Long Cang', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Noto Sans SC', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || 标题布局 */

header {
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
}

main, header, nav, article, aside, footer, section {
  background-color: rgba(29, 149, 125, 0.5);
  padding: 1%;
}

h1 {
  flex: 5;
  text-transform: uppercase;
}

header img {
  display: block;
  height: 60px;
  padding-top: 20.15px;
}

nav {
  height: 50px;
  flex: 100%;
  display: flex;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a, nav span {
  display: inline-block;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.row {
  display: flex;
  justify-content: space-around;
}

figure {
  margin: 10px;
}

.media-container {
  display: flex;
  align-items: flex-start;
}

.video-container {
  margin-right: 20px; 
}

.audio-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.audio-item h3 {
  margin: 0;
  padding: 5px 0; /* 为标题添加一些垂直空间 */
}

.audio-item {
  margin-bottom: 10px; /* 为每个音频项添加一些垂直空间 */
}

/* || 主体布局 */

.user-greeting {
  position: absolute; /* 使元素相对于最近的定位祖先元素定位 */
  top: 0;
  left: 0;
  margin: 30px; /* 或根据需要调整 */
  z-index: 10; /* 确保它不会被其他元素遮挡 */
}

header {
  position: relative; /* 这将允许 .user-greeting 相对于 header 定位 */
  /* 其他样式 */
}


main {
  display: flex;
}

article, section {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  padding: 0; /* 设置padding为0，防止内边距影响图片大小 */
}

aside a {
  display: block;
  width: 100%; /* 设置宽度为100%，允许<a>标签占满整个容器 */
  float: none; /* 如果不需要浮动，可以去掉float属性 */
}

aside img {
  display: block; /* 使图片块级显示，去掉图片下方的默认间隙 */
  width: 100%; /* 图片宽度为100%，使其占满<a>标签 */
  height: auto; /* 设置高度为auto，保持图片比例不变 */
  max-width: 100%; /* 最大宽度为100%，确保图片不会超出其容器 */
}


footer {
  margin-top: 10px;
}

#comments-section {
  margin-bottom: 20px;
}


#comment-content {
  width: 100%;
  height: 100px;
}

/* 评论列表样式 */
.comment {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
}

四、连接数据库

首先在浏览器下载mysql并创建用户，推荐这个教程，我跟着几分钟就弄好了
https://blog.csdn.net/weixin_39289696/article/details/128850498
注意，账号密码要记得，后面还要用

然后，在vscode下载的mysql插件中建立数据库并连接在这里插入图片描述
点击NoSQL，create connection，然后建立连接，输入你在本地电脑mysql的用户名（一般为root），密码，点击链接即可
在这里插入图片描述
连接成功后：
在这里插入图片描述
之后在里面创建数据库，我命名为 Inuyasha，然后创建两个表，创建表的sql和表的结构如下，大家可以自己去创建一下：

1、users表

CREATE TABLE
    `users` (
        `user_id` int NOT NULL AUTO_INCREMENT,
        `username` varchar(50) NOT NULL,
        `password` varchar(255) NOT NULL,
        `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (`user_id`),
        UNIQUE KEY `username` (`username`)
    ) ENGINE = InnoDB AUTO_INCREMENT = 11 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci

在这里插入图片描述
2、comments表

CREATE TABLE
    `comments` (
        `id` int NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
        `user` char(50) NOT NULL COMMENT 'User Name',
        `content` char(200) NOT NULL COMMENT 'Comment Content',
        `create_time` datetime DEFAULT NULL COMMENT 'Create Time',
        PRIMARY KEY (`id`)
    ) ENGINE = InnoDB AUTO_INCREMENT = 19 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = 'Table for storing user comments'

在这里插入图片描述

五、使用方法

  • 安装node.js依赖的package
    工程里有一个package.json，里面有我们要安装的东西
    在这里插入图片描述

  • 终端输入： npm install --dependencies 进行安装
    在这里插入图片描述

  • 打开Node.js终端，输入 node Node.js在这里插入图片描述

  • 在login.html文件下 点击右下角下载好的live server，进入登录界面在这里插入图片描述

  • 注册并登录在这里插入图片描述

可以在数据库中看到注册前和注册后users表的对比查看数据库是否连接成功：
注册前：
在这里插入图片描述
注册：
在这里插入图片描述
注册后：
在这里插入图片描述
成功插入到数据库users表中就说明数据库连接成功了

发表评论，点击发送后评论就会显示在网页上面：
在这里插入图片描述
查看数据库，成功插入表中：
在这里插入图片描述
有问题随时来讨论！

WangZiYi2003
关注
  • 19
    点赞
  • 踩
  • 101
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
Web大作业总结
2301_76780969的博客
06-24 2210
大家好，本作品为本人大二Web期末大作业，采用了html+css+JavaScript制作而成的静态网页，我技术有限😭，并且由于期末时间原因，我选择了制作一个静态的网页。说实话这也是自己第一次随机主题制作网页，做的时候我也很迷茫，最终参考其他朋友们的建议，制作了一个类似于个人空间的网页。（我知道自己做的很丑😥，大家担待着看）总结一下本次web课程，虽然时间短暂，但是让我对前端编程有了一个更高一级的认识，说实话我感觉前端的设计比后端的更难编写，更何况这学期完成的还是一个普通的静态网页。
Javaweb期末大作业（教务管理）
07-09
通过一学期学习JavaWeb 课程以及自己学习完成，完成了教务系统应有的基本功能，界面设计美观，大方，采用sql server开发 ,适合期末大作业参考学习
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
如何使用HTML制作个人网站（ web期末大作业）
网页设计与制作
03-27 1925
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web网页制作期末大作业
11-17
分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得
web期末大作业网页设计-个人介绍-纯html+css
@MIKE小助手
06-18 4877
web期末大作业网页设计-个人介绍-纯html+css
Web前端大作业制作个人网页(html+css+javascript)
weixin__BJ050106的博客
01-10 1456
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
VX_WJ88950106的博客
01-08 559
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
web编程期末大作业
往事随风
06-26 1847
web编程期末大作业
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H374.zip
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、Ja
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H330.zip
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H480.zip
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 ...
web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页...
【web前端期末大作业】HTML班级网页设计 制作我们的班级网页(web前端学生网页设计作品)
12-18 1169
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web前端期末大作业——HTML+CSS简单的旅游网页设计与实现
最新发布
HTML网页设计
04-16 1856
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
web前后端交互技术期末大作业
05-18
好的，那你需要完成一个网页应用，包括前端和后端，实现前后端的交互。具体的要求可以根据你们学校或老师的要求来定，一般来说，需要包含以下几个方面： 1. 前端技术：HTML、CSS、JavaScript，以及常用的前端框架和库，如jQuery、Bootstrap等。 2. 后端技术：服务器端语言，如PHP、Java、Python等，数据库管理系统，如MySQL、Oracle等，以及常用的后端框架和库，如Spring、Django等。 3. 数据库设计和实现：包括ER图的设计、数据库表的创建和数据的插入、查询、修改和删除操作。 4. 前后端交互：通过HTTP协议实现前后端数据的传输和交互，包括前端发送请求、后端处理请求、后端返回数据、前端解析数据等步骤。 5. 安全性设计：包括输入数据的校验、防止SQL注入、防止XSS攻击等。 6. 界面设计和用户体验优化：界面美观、易用、响应速度快等。 7. 其他附加功能：如文件上传、邮件发送、短信发送等。 这些都是需要考虑的方面，你可以根据自己的兴趣和能力来选择实现的功能和技术。同时，还需要注意代码的可读性、可维护性和可扩展性等方面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值