用户注册登录页面的设计与实现

最新推荐文章于 2024-10-22 15:34:50 发布

唐老鸭.

最新推荐文章于 2024-10-22 15:34:50 发布

阅读量1.3w

点赞数 17

文章标签： web nodejs mongodb css

本文链接：https://blog.csdn.net/printf_what/article/details/117876257

版权

本文详细介绍了如何使用HTML5、CSS、JavaScript、jQuery和mongodb搭建Web应用程序的登录注册页面。通过Node.js建立本地服务器，环境配置包括VSCode安装、Node.js的环境变量配置、npm模块管理及MongoDB的设置。文中还展示了登录、注册相关代码及样式表login.css的部分内容，并附带了完成后的界面截图。

摘要由CSDN通过智能技术生成

前言

利用HTML5、CSS、JavaScript、jQuery以及mongodb数据库的相关知识，使用vscode编译器对Web应用程序的开发，nodejs搭建本地服务器，主要实现了登录注册、首页部分功能

一、环境搭建

登录vscode官网下载安装Windows x64位的安装包
打开下载的安装包进行安装，成功后运行，并安装所需要的插件如：汉化插件chinese等等。插件列表如下：

插件名	作用
Auto Rename Tag	HTML修改标签时直接自动关联开始标签和结束标签，快速修改
Beautify	代码格式化，美化代码格式，例如换行、空格、缩进
Auto Close Tag	匹配标签，关闭对应的标签，即自动添加相对应的闭合标签
open in browser	用浏览器预览运行html文件

Node下载安装
1. 登录node官网下载安装包，安装方式有两种，一种是Windows安装包（.msi）形式，另一种是Windows（.exe）形式。
2. 双击已下载好的安装包，点击Run（运行），勾选协议选项，点击next（下一步）按钮
3. Node.js默认安装目录为"C:\Program Files\node js"，这里可以修改目录，不推荐放在C盘，个人安装在F盘vscode下
4. 测试系统环境变量，安装完成后，.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果是以.zip 格式安装，因为没有安装过程，所以需要手动将node.exe所在目录添加到环境变量path 中，查看系统变量验证。
Node配置环境变量
1. 打开CMD，分别测试node和npm版本；输入node -v以及npm -v；显示版本号则环境变量配置成功，通常默认认Node.js安装完毕后，会自动在系统的path环境变量中配置了node.exe的目录路径，但是由于机型设备不同，导致可能在安装完成后，dos命令输入node提示错误，不论是否成功，接下来我们手动设置系统变量和环境变量。
2. 配置环境
  1. 在安装的文件夹【F:\vscode\nodejs】下创建两个文件夹【node_global】及【node_cache】
  2. 创建完两个空文件夹之后，打开cmd命令窗口，输入npm config set prefix “F:\vscode\nodejs\node_global” npm config set cache “F:\vscode\nodejs\node_cache”
  3. 关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”；①系统变量：进入环境变量对话框，在系统变量下新建NODE_PATH，输入 F:\vscode\nodejs\node_global\node_modules②用户变量：将用户变量下的Path后新增一个设置，用;将其和之前设置分隔开，即 F:\vscode\nodejs\node_global
3. 测试
  1. 配置完后，安装个module模块测试下，安装个最常用的express模块，打开cmd窗口使用npm安装个模块测试下，npm 安装 Node.js 模块语法格式如下：npm install <module name>
  2. 在安装时可以使用淘宝定制的 cnpm 命令行工具代替默认的 npm，首先需要下载淘宝镜像，如下npm install cnpm -g --registry=http://registry.npm.taobao.org;设置npm config set registry http://registry.npm.taobao.org；验证是否安装成功安装完毕后检测cnpm是否安装成功，输入cnpm -v或者cnpm --version检测版本；查看当前镜像是否设置成功，把下面这个命令粘贴到 cmd 或终端上执行 npm get registry
  3. 设置缓存目录和日志目录存储位置；打开cmd输入npm config set prefix “F:\vscode\nodejs\node_global”
    和npmconfig set cache"F:\vscode\nodejs\node_cache"
4. 安装插件
  1. 进入后端项目目录zjk-blog文件下输入cmd进入命令运行框,输入npm install安装相关插件
  2. 打开后端项目目录zjk-blog文件下输入cmd进去命令运行框,输入node app.js启动后端项目,显示项目端口为localhost:3000以及数据库服务相关内容则为成功运行服务器端
MongoDB环境配置(这里就不多叙述了)
1. 3.x版本可见李子园的梦想博客
2. 4.x版本可见SJ2050博客

二、部分代码展示

1.登录

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <!-- 代码初始化,保证浏览器兼容,主流浏览器显示保持一致:chrome,FireFox,IE,Opera,safari -->
    <link rel="stylesheet" href="/public/css/base.css">
    <!-- 引入自定义样式表 -->
    <link rel="stylesheet" href="/public/css/login.css">
    <!-- 引入jquery库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 内部脚本 -->
</head>
<body>
    <!-- 登录页大盒子 -->
    <div class="login-box">
        <h1>账户登录</h1>
        <form>
            <!-- 账户 -->
            <div class="user-name">
                <!-- 关联标签label和input的id保持一致 -->
                <label