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

tsx81429  金牌会员 | 2024-6-11 19:00:02 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 667|帖子 667|积分 2001

标题：学校老师的要求很开放，要本身做一个感兴趣的网页，要求使用基础的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与服务器举行数据交换。
  • 在页面上动态表现用户批评。
  • 确保用户提交的批评及时更新并正确存储到数据库。
以上模块协同工作，共同提供一个交互式的用户体验，答应用户在一个安全和友好的环境中举行注册、登录、内容查察、以及社区交流。
项目工程：

三、界面&代码

登岸界面

设计的很草率，能实现注册和登录的功能

登岸界面代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Login and Registration</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             background-color: #f7f7f7;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.             height: 100vh;
  15.             margin: 0;
  16.         }
  18.         form {
  19.             background-color: #fff;
  20.             padding: 20px;
  21.             margin: 10px;
  22.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  23.             border-radius: 8px;
  24.         }
  26.         input {
  27.             display: block;
  28.             width: 100%;
  29.             padding: 10px;
  30.             margin: 10px 0;
  31.             border: 1px solid #ddd;
  32.             border-radius: 4px;
  33.             box-sizing: border-box;
  34.         }
  36.         button {
  37.             width: 100%;
  38.             padding: 10px;
  39.             background-color: #5cb85c;
  40.             color: white;
  41.             border: none;
  42.             border-radius: 4px;
  43.             cursor: pointer;
  44.             font-size: 16px;
  45.             margin: 10px 0;
  46.         }
  48.         button:hover {
  49.             background-color: #4cae4c;
  50.         }
  52.         .container {
  53.             width: 300px;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <div class="container">
  59.         <!-- 登录表单 -->
  60.         <form id="login-form">
  61.             <input type="text" id="login-username" placeholder="用户名" required>
  62.             <input type="password" id="login-password" placeholder="密码" required>
  63.             <button type="submit">登录</button>
  64.         </form>
  65.       
  66.         <!-- 注册表单 -->
  67.         <form id="register-form">
  68.             <input type="text" id="register-username" placeholder="用户名" required>
  69.             <input type="password" id="register-password" placeholder="密码" required>
  70.             <button type="submit">注册</button>
  71.         </form>
  72.     </div>
  74.     <script src="script.js"></script>
  75. </body>
  76. </html>
复制代码
主界面：

主界面代码：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>犬夜叉爱好者网</title>
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  8.     <header>
  9.     <div id="user-greeting" class="user-greeting">
  10.         欢迎, <span id="username">访客</span>!
  11.     </div>
  12.     <h1>犬夜叉世界</h1>
  13.    
  14.     <img src="picture/Inuyasha.png" alt="犬夜叉图片">
  15.     <nav>
  16.     <ul>
  17.       <li><span>主页</span></li>
  18.       <li><a href="介绍.html">介绍</a></li>
  19.       <li><a href="图片.html">图片</a></li>
  20.       <li><a href="视频&音频.html">视频</a></li>
  21.       <li><a href="论坛.html">论坛</a></li>
  22.     </ul>
  23.   </nav>
  24.   </header>
  26.   <script>
  27.     // 页面加载时检查用户名
  28.     document.addEventListener('DOMContentLoaded', function () {
  29.         const storedUsername = localStorage.getItem('username');
  30.         if (storedUsername) {
  31.             document.getElementById('username').textContent = storedUsername;
  32.         } else {
  33.             document.getElementById('username').textContent = '访客';
  34.         }
  35.     });
  36.   </script>
  38.   <main>
  39.     <article>
  40.       <h2>欢迎</h2>
  41.       <p>欢迎来到"犬夜叉世界"——一个专注于日本动漫《犬夜叉》的综合性网站。在这里，您可以找到关于《犬夜叉》的各种信息，包括动漫介绍、收藏图片、收藏视频，以及我们自建的犬夜叉论坛。</p>
  42.       <hr />
  43.       <p>在"犬夜叉世界"，我们致力于为动漫爱好者提供一个全面、多元化的交流平台。我们的网站内容包括动漫介绍，详细介绍了《犬夜叉》的主要角色、故事情节和特色亮点。此外，我们还提供了一个丰富的图片库，收录了大量精美的《犬夜叉》角色图片和场景截图。</p>
  44.       <hr />
  45.       <p>在视频和音频收藏部分，我们收集了《犬夜叉》的精彩片段和音乐、剧场版动画和特别版动画，供您随时观看和回味。这些视频不仅可以让您重温动漫中的经典场景，还能让您感受到《犬夜叉》世界中的奇幻与浪漫。</p>
  46.       <hr />
  47.       <p>除了以上内容，我们还为您打造了一个专属的犬夜叉论坛。在这里，您可以与其他动漫爱好者分享心得、讨论剧情、交流感想。我们鼓励大家积极发表自己的看法，分享对《犬夜叉》的热爱与感悟。</p>
  48.       <hr />
  49.       <p>"犬夜叉世界"致力于为广大动漫爱好者提供一个优质、便捷的在线交流平台。我们诚挚邀请您加入我们的大家庭，与我们一起分享对《犬夜叉》的热爱，共同度过美好的时光。</p>
  50.       <hr />
  51.       <p>请随时关注我们的网站更新，以便获取更多精彩内容和活动信息。谢谢您的光临，"犬夜叉世界"期待您的加入！</p>
  52. </article>
  53. <aside>
  54.       <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
  55.       <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
  56. </aside>
  57. </main>
  58. <footer>
  59.       <p>网站作者：王子一</p>
  60.       <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
  61. </footer>
  62. </body>
  63. </html>
复制代码
先容界面：

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

图片界面代码：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>犬夜叉爱好者网</title>
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  8.     <header>
  9.     <h1>犬夜叉世界</h1>
  10.     <img src="picture/Inuyasha.png" alt="犬夜叉图片">
  11.     <nav>
  12.     <ul>
  13.       <li><a href="index.html">主页</a></li>
  14.       <li><a href="介绍.html">介绍</a></li>
  15.       <li><span>图片</span></li>
  16.       <li><a href="视频&音频.html">视频</a></li>
  17.       <li><a href="论坛.html">论坛</a></li>
  18.     </ul>
  19.   </nav>
  20.   </header>
  22.   <main>
  23.     <article>  
  24.         <h2>图片</h2>  
  25.         <div class="row">  
  26.           <figure>  
  27.             <img src="picture/Inuyasha.jpg"  
  28.             alt="图片1"  
  29.             width="350"  
  30.             height="250">
  31.             <figcaption>图片1</figcaption>  
  32.           </figure>  
  33.           <figure>  
  34.             <img src="picture/犬夜叉3.jpg"  
  35.             alt="图片2"  
  36.             width="350"  
  37.             height="250">
  38.             <figcaption>图片2</figcaption>   
  39.           </figure>  
  40.         </div>  
  41.         <div class="row">  
  42.           <figure>  
  43.             <img src="picture/犬夜叉6.jpg"  
  44.             alt="图片3"  
  45.             width="350"  
  46.             height="250">  
  47.             <figcaption>图片3</figcaption>  
  48.           </figure>  
  49.           <figure>  
  50.             <img src="picture/犬夜叉7.jpg"  
  51.             alt="图片4"  
  52.             width="350"  
  53.             height="250">  
  54.             <figcaption>图片4</figcaption>  
  55.           </figure>  
  56.         </div>  
  57.     </article>
  58.    
  59. <aside>
  60.       <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
  61.       <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
  62. </aside>
  63. </main>
  64. <footer>
  65.       <p>网站作者：王子一</p>
  66.       <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
  67. </footer>
  68. </body>
  69. </html>
复制代码
视频&音乐界面：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>犬夜叉爱好者网</title>
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  8.     <header>
  9.     <h1>犬夜叉世界</h1>
  10.     <img src="picture/Inuyasha.png" alt="犬夜叉图片">
  11.     <nav>
  12.     <ul>
  13.       <li><a href="index.html">主页</a></li>
  14.       <li><a href="介绍.html">介绍</a></li>
  15.       <li><a href="图片.html">图片</a></li>
  16.       <li><span>视频&音频</span></li>
  17.       <li><a href="论坛.html">论坛</a></li>
  18.     </ul>
  19.   </nav>
  20.   </header>
  22.   
  23.   <main>
  24.       <article>
  25.         <h2>视频&音频</h2>
  26.         <div class="media-container">
  27.           <div class="video-container">
  28.             <video
  29.               controls
  30.               width="500"
  31.               height="500"
  32.               autoplay
  33.               loop
  34.               muted
  35.               poster="picture/2.jpg">
  36.               <source src="picture/视频.mp4" type="video/mp4" />
  37.               <p>
  38.                 你的浏览器不支持 HTML5 视频观看。
  39.               </p>
  40.             </video>
  41.           </div>
  42.           <div class="audio-container">
  43.             <div class="audio-item">
  44.               <h3>Every Heart</h3>
  45.               <audio controls>
  46.                 <source src="music/BoA - Every Heart-ミンナノキモチ- (全心全意).mp3" type="audio/mp3" />
  47.                 <p>你的浏览器不支持 HTML5 音频收听。</p>
  48.               </audio>
  49.             </div>
  50.             <div class="audio-item">
  51.               <h3>Dearest</h3>
  52.               <audio controls>
  53.                 <source src="music/Gfanfan - Dearest.mp3" type="audio/mp3" />
  54.                 <p>你的浏览器不支持 HTML5 音频收听。</p>
  55.               </audio>
  56.             </div>
  57.             <div class="audio-item">
  58.               <h3>哀歌</h3>
  59.               <audio controls>
  60.                 <source src="music/和田薫 - 哀歌.mp3" type="audio/mp3" />
  61.                 <p>你的浏览器不支持 HTML5 音频收听。</p>
  62.               </audio>
  63.             </div>
  64.             <div class="audio-item">
  65.               <h3>ふたりの気持ち</h3>
  66.               <audio controls>
  67.                 <source src="music/和田薫 - ふたりの気持ち.mp3" type="audio/mp3" />
  68.                 <p>你的浏览器不支持 HTML5 音频收听。</p>
  69.               </audio>
  70.             </div>
  71.             <div class="audio-item">
  72.               <h3>时代を越える想い</h3>
  73.               <audio controls>
  74.                 <source src="music/和田薫 - 時代を越える想い (穿越时空的思念)(Moscow Recording Ver.).mp3" type="audio/mp3" />
  75.                 <p>你的浏览器不支持 HTML5 音频收听。</p>
  76.               </audio>
  77.             </div>
  78.           </div>
  79.         </div>
  80.       </article>
  81. <aside>
  82.       <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
  83.       <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
  84. </aside>
  85. </main>
  86. <footer>
  87.       <p>网站作者：王子一</p>
  88.       <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
  89. </footer>
  90. </body>
  91. </html>
复制代码
论坛界面：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>犬夜叉爱好者网</title>
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  8. <body>
  9.     <header>
  10.       <div id="user-greeting" class="user-greeting">
  11.         欢迎, <span id="username">访客</span>!
  12.     </div>
  13.     <h1>犬夜叉世界</h1>
  14.     <img src="picture/Inuyasha.png" alt="犬夜叉图片">
  15.     <nav>
  16.     <ul>
  17.       <li><a href="index.html">主页</a></li>
  18.       <li><a href="介绍.html">介绍</a></li>
  19.       <li><a href="图片.html">图片</a></li>
  20.       <li><a href="视频&音频.html">视频</a></li>
  21.       <li><span>论坛</span></li>
  22.     </ul>
  23.   </nav>
  24.   </header>
  26.   </script>
  28.   <main>
  29.     <article>
  30.       <section id="comments-section">
  31.         <!-- 评论展示区域 -->
  32.       </section>
  33.       
  34.       <!-- 评论提交表单 -->
  35.       <form id="comment-form">
  36.         <textarea id="comment-content" placeholder="写下你的评论..."></textarea>
  37.         <button type="submit">发送</button>
  38.       </form>
  39. </article>
  40. <aside>
  41.       <a href="picture/侧边栏.png"><img src="picture/侧边栏.png" alt="点击缩略图查看完整照片"></a>
  42.       <a href="picture/侧边栏2.png"><img src="picture/侧边栏2.png" alt="点击缩略图查看完整照片"></a>
  43. </aside>
  44. </main>
  45. <footer>
  46.       <p>网站作者：王子一</p>
  47.       <p><a href="mailto:1329690093@qq.com">这是我的邮箱</a> 有需要可以随时联系我。</p>
  48. </footer>
  50. <script src="common.js"></script>
  52. </body>
  53. </html>
复制代码
服务器搭建(Node.js)：
  1. const express = require('express');
  2. const mysql = require('mysql');
  3. const bodyParser = require('body-parser');
  4. const cors = require('cors');
  6. const bcrypt = require('bcrypt');
  7. const saltRounds = 10;
  9. const app = express();
  10. app.use(cors());
  11. app.use(bodyParser.json());
  13. app.use(express.json());
  14. app.use(express.urlencoded({ extended: true }));
  17. // 连接数据库配置
  18. const connection = mysql.createConnection({
  19.     host: 'localhost',
  20.     user: 'root',
  21.     password: 'nan198614',
  22.     database: 'Inuyasha'
  23. });
  25. connection.connect();
  27. // 注册端点
  28. app.post('/register', async (req, res) => {
  29.     try {
  30.         const { username, password } = req.body;
  31.         const hashedPassword = await bcrypt.hash(password, saltRounds);
  32.         const query = `INSERT INTO users (username, password) VALUES (?, ?)`;
  34.         connection.query(query, [username, hashedPassword], (err, results) => {
  35.             if (err) {
  36.                 // 处理错误，例如用户名已存在
  37.                 return res.status(500).json({ message: 'User registration failed' });
  38.             }
  39.             return res.status(200).json({ message: 'User registered successfully' });
  40.         });
  41.     } catch (err) {
  42.         res.status(500).json({ message: 'Server error' });
  43.     }
  44. });
  47. // 登录端点
  48. app.post('/login', async (req, res) => {
  49.     try {
  50.         const { username, password } = req.body;
  51.         const query = `SELECT * FROM users WHERE username = ?`;
  53.         connection.query(query, [username], async (err, results) => {
  54.             if (err || results.length === 0) {
  55.                 return res.status(401).json({ message: 'Authentication failed' });
  56.             }
  57.             const user = results[0];
  58.             const isValid = await bcrypt.compare(password, user.password);
  59.             if (isValid) {
  60.                 return res.status(200).json({ message: 'Authentication successful' });
  61.             } else {
  62.                 return res.status(401).json({ message: 'Authentication failed' });
  63.             }
  64.         });
  65.     } catch (err) {
  66.         res.status(500).json({ message: 'Server error' });
  67.     }
  68. });
  71. app.get('/get-comments', (req, res) => {
  73.     console.log('get-comments route was called');
  75.     const query = 'SELECT * FROM comments ORDER BY create_time DESC';
  77.     connection.query(query, (err, results) => {
  78.         if (err) {
  79.             // 处理可能发生的错误
  80.             return res.status(500).json({ message: 'Error retrieving comments' });
  81.         }
  82.         res.status(200).json(results);
  83.     });
  84. });
  87. // 发布评论端点
  88. app.post('/post-comment', (req, res) => {
  89.     const { username, content } = req.body;
  90.     const query = 'INSERT INTO comments (user, content, create_time) VALUES (?, ?, NOW())';
  92.     connection.query(query, [username, content], (err, results) => {
  93.         if (err) {
  94.             console.error(err); // 打印错误
  95.             return res.status(500).json({ message: 'Error posting comment', error: err.message });
  96.         }
  97.         res.status(200).json({ message: 'Comment posted successfully' });
  98.     });
  99. });
  102. const PORT = process.env.PORT || 5500;
  103. app.listen(PORT, () => {
  104.     console.log(`Server is running on port ${PORT}`);
  105. });
复制代码
批评处理脚本(common.js)
  1. // 页面加载时检查用户名并设置评论表单的事件监听器
  2. document.addEventListener('DOMContentLoaded', function () {
  3.     const storedUsername = localStorage.getItem('username');
  4.     if (storedUsername) {
  5.         document.getElementById('username').textContent = storedUsername;
  6.     } else {
  7.         document.getElementById('username').textContent = '访客';
  8.     }
  10.     // 当页面加载时，获取并显示评论
  11.     fetchComments();
  13.     // 处理评论提交
  14.     var commentForm = document.getElementById('comment-form');
  15.     if (commentForm) {
  16.       commentForm.onsubmit = function (event) {
  17.         event.preventDefault(); // 阻止默认提交行为
  18.         const username = storedUsername; // 从本地存储或其他地方获取用户名
  19.         const content = document.getElementById('comment-content').value;
  20.         postComment(username, content); // 异步发送评论到服务器
  21.     };
  22.     } else {
  23.         console.error('The comment form was not found.');
  24.     }
  25. });
  26.   
  27. function fetchComments() {
  28.   fetch('http://localhost:5500/get-comments')
  29.     .then(response => response.json())
  30.     .then(comments => {
  31.       const commentsSection = document.getElementById('comments-section');
  32.       commentsSection.innerHTML = ''; // 清空现有评论
  33.       comments.forEach(comment => {
  34.         console.log(comment.username);
  35.         const commentDiv = document.createElement('div');
  36.         commentDiv.className = 'comment';
  38.         // 创建显示用户名的元素
  39.         const usernameSpan = document.createElement('span');
  40.         usernameSpan.className = 'comment-username';
  41.         usernameSpan.textContent = comment.user; // 假设返回的对象有一个username属性
  43.         // 创建显示评论内容的元素
  44.         const contentDiv = document.createElement('div');
  45.         contentDiv.className = 'comment-content';
  46.         contentDiv.textContent = comment.content; // 假设返回的对象有一个content属性
  48.         // 创建显示评论时间的元素
  49.         const timeSpan = document.createElement('span');
  50.         timeSpan.className = 'comment-time';
  51.         timeSpan.textContent = new Date(comment.create_time).toLocaleString(); // 格式化时间，假设返回的对象有一个create_time属性
  53.         // 将用户名、评论内容和时间添加到评论的div中
  54.         commentDiv.appendChild(usernameSpan);
  55.         commentDiv.appendChild(contentDiv);
  56.         commentDiv.appendChild(timeSpan);
  58.         // 将完整的评论元素添加到评论区域
  59.         commentsSection.appendChild(commentDiv);
  60.       });
  61.     })
  62.     .catch(error => {
  63.       console.error('Error:', error);
  64.     });
  65. }
  67.   
  68.   // 发布评论的函数
  69.   function postComment(username, content) {
  70.     fetch('http://localhost:5500/post-comment', {
  71.       method: 'POST',
  72.       headers: {
  73.         'Content-Type': 'application/json',
  74.       },
  75.       body: JSON.stringify({ username: username, content: content }),
  76.     })
  77.     .then(response => {
  78.       if (response.ok) {
  79.         return response.json();
  80.       }
  81.       throw new Error('Network response was not ok.');
  82.     })
  83.     .then(data => {
  84.       console.log('Success:', data);
  85.       fetchComments(); // 重新加载评论
  86.     })
  87.     .catch(error => {
  88.       console.error('Error:', error);
  89.     });
  90.   }
复制代码
注册脚本(script.js)：
  1. document.addEventListener('DOMContentLoaded', function () {
  2.     // 注册表单
  3.     const registerForm = document.getElementById('register-form');
  4.     registerForm.onsubmit = function (event) {
  5.         event.preventDefault();
  6.         const username = document.getElementById('register-username').value;
  7.         const password = document.getElementById('register-password').value;
  9.         fetch('http://localhost:5500/register', {
  10.         method: 'POST',
  11.         headers: {
  12.             'Content-Type': 'application/json',
  13.         },
  14.         body: JSON.stringify({ username, password }),
  15.         })
  16.         .then(response => response.json())
  17.         .then(data => {
  18.         alert(data.message);
  19.         })
  20.         .catch((error) => {
  21.         console.error('Error:', error);
  22.         });
  24.     };
  26.     // 登录表单
  27.     const loginForm = document.getElementById('login-form');
  28.     loginForm.onsubmit = function (event) {
  29.         event.preventDefault();
  30.         const username = document.getElementById('login-username').value;
  31.         const password = document.getElementById('login-password').value;
  32.    
  33.         fetch('http://localhost:5500/login', {
  34.             method: 'POST',
  35.             headers: {
  36.                 'Content-Type': 'application/json',
  37.             },
  38.             body: JSON.stringify({ username, password }),
  39.         })
  40.         .then(response => response.json())
  41.         .then(data => {
  42.             if (data.message === 'Authentication successful') {
  43.                 // 存储用户名到LocalStorage
  44.                 localStorage.setItem('username', username);
  45.    
  46.                 // 跳转到主页
  47.                 window.location.href = 'index.html';
  48.             } else {
  49.                 alert(data.message);
  50.             }
  51.         })
  52.         .catch((error) => {
  53.             console.error('Error:', error);
  54.         });
  55.     };
  58. });
复制代码
css文件（style.css)：
  1. /* || 一般设置 */
  3. html, body {
  4.   margin: 0;
  5.   padding: 0;
  6. }
  8. html {
  9.   font-size: 10px;
  10.   background-color: #a9a9a9;
  11. }
  13. body {
  14.   width: 70%;
  15.   min-width: 800px;
  16.   margin: 0 auto;
  17. }
  19. /* || 排版 */
  21. h1, h2, h3 {
  22.   font-family: 'Long Cang', cursive;
  23.   color: #2a2a2a;
  24. }
  26. p, input, li {
  27.   font-family: 'Noto Sans SC', sans-serif;
  28.   color: #2a2a2a;
  29. }
  31. h1 {
  32.   font-size: 4rem;
  33.   text-align: center;
  34.   text-shadow: 2px 2px 10px black;
  35. }
  37. h2 {
  38.   font-size: 3rem;
  39.   text-align: center;
  40. }
  42. h3 {
  43.   font-size: 2.2rem;
  44. }
  46. p, li {
  47.   font-size: 1.6rem;
  48.   line-height: 1.5;
  49. }
  51. /* || 标题布局 */
  53. header {
  54.   margin-bottom: 10px;
  55.   display: flex;
  56.   flex-flow: row wrap;
  57. }
  59. main, header, nav, article, aside, footer, section {
  60.   background-color: rgba(29, 149, 125, 0.5);
  61.   padding: 1%;
  62. }
  64. h1 {
  65.   flex: 5;
  66.   text-transform: uppercase;
  67. }
  69. header img {
  70.   display: block;
  71.   height: 60px;
  72.   padding-top: 20.15px;
  73. }
  75. nav {
  76.   height: 50px;
  77.   flex: 100%;
  78.   display: flex;
  79. }
  81. nav ul {
  82.   padding: 0;
  83.   list-style-type: none;
  84.   flex: 2;
  85.   display: flex;
  86. }
  88. nav li {
  89.   display: inline;
  90.   text-align: center;
  91.   flex: 1;
  92. }
  94. nav a, nav span {
  95.   display: inline-block;
  96.   font-size: 2rem;
  97.   height: 3rem;
  98.   line-height: 1.7;
  99.   text-transform: uppercase;
  100.   text-decoration: none;
  101.   color: black;
  102. }
  104. .row {
  105.   display: flex;
  106.   justify-content: space-around;
  107. }
  109. figure {
  110.   margin: 10px;
  111. }
  113. .media-container {
  114.   display: flex;
  115.   align-items: flex-start;
  116. }
  118. .video-container {
  119.   margin-right: 20px;
  120. }
  122. .audio-container {
  123.   display: flex;
  124.   flex-direction: column;
  125.   justify-content: space-around;
  126. }
  128. .audio-item h3 {
  129.   margin: 0;
  130.   padding: 5px 0; /* 为标题添加一些垂直空间 */
  131. }
  133. .audio-item {
  134.   margin-bottom: 10px; /* 为每个音频项添加一些垂直空间 */
  135. }
  137. /* || 主体布局 */
  139. .user-greeting {
  140.   position: absolute; /* 使元素相对于最近的定位祖先元素定位 */
  141.   top: 0;
  142.   left: 0;
  143.   margin: 30px; /* 或根据需要调整 */
  144.   z-index: 10; /* 确保它不会被其他元素遮挡 */
  145. }
  147. header {
  148.   position: relative; /* 这将允许 .user-greeting 相对于 header 定位 */
  149.   /* 其他样式 */
  150. }
  153. main {
  154.   display: flex;
  155. }
  157. article, section {
  158.   flex: 4;
  159. }
  161. aside {
  162.   flex: 1;
  163.   margin-left: 10px;
  164.   padding: 0; /* 设置padding为0，防止内边距影响图片大小 */
  165. }
  167. aside a {
  168.   display: block;
  169.   width: 100%; /* 设置宽度为100%，允许<a>标签占满整个容器 */
  170.   float: none; /* 如果不需要浮动，可以去掉float属性 */
  171. }
  173. aside img {
  174.   display: block; /* 使图片块级显示，去掉图片下方的默认间隙 */
  175.   width: 100%; /* 图片宽度为100%，使其占满<a>标签 */
  176.   height: auto; /* 设置高度为auto，保持图片比例不变 */
  177.   max-width: 100%; /* 最大宽度为100%，确保图片不会超出其容器 */
  178. }
  181. footer {
  182.   margin-top: 10px;
  183. }
  185. #comments-section {
  186.   margin-bottom: 20px;
  187. }
  190. #comment-content {
  191.   width: 100%;
  192.   height: 100px;
  193. }
  195. /* 评论列表样式 */
  196. .comment {
  197.   margin-bottom: 10px;
  198.   padding: 5px;
  199.   border: 1px solid #ccc;
  200. }
复制代码
四、毗连数据库

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

点击NoSQL，create connection，然后创建毗连，输入你在当地电脑mysql的用户名（一样平常为root），暗码，点击链接即可

毗连成功后：

之后在里面创建数据库，我定名为 Inuyasha，然后创建两个表，创建表的sql和表的布局如下，大家可以本身去创建一下：
1、users表
  1. CREATE TABLE
  2.     `users` (
  3.         `user_id` int NOT NULL AUTO_INCREMENT,
  4.         `username` varchar(50) NOT NULL,
  5.         `password` varchar(255) NOT NULL,
  6.         `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  7.         PRIMARY KEY (`user_id`),
  8.         UNIQUE KEY `username` (`username`)
  9.     ) ENGINE = InnoDB AUTO_INCREMENT = 11 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci
复制代码

2、comments表
  1. CREATE TABLE
  2.     `comments` (
  3.         `id` int NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  4.         `user` char(50) NOT NULL COMMENT 'User Name',
  5.         `content` char(200) NOT NULL COMMENT 'Comment Content',
  6.         `create_time` datetime DEFAULT NULL COMMENT 'Create Time',
  7.         PRIMARY KEY (`id`)
  8.     ) 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表中就阐明数据库毗连成功了
发表批评，点击发送后批评就会表现在网页上面：

查察数据库，成功插入表中：

有问题随时来讨论！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81429

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表