前言

利用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 for="name" class="iconfont iconzhanghao"></label><input id="name" type="text" placeholder="邮箱/用户名/登录手机"></div><!-- 密码 --><div class="user-pwd"><!-- 关联标签label和input的id保持一致 --><label for="pwd" class="iconfont iconmima"></label><input id="pwd" type="password" placeholder="请输入密码"><label class="iconfont iconclose-eye control_pwd"></label></div><!-- 注册按钮 --><button class="submit-btn">登录</button><!-- 相关操作 --><div class="other-box"><a href="#">忘记密码</a><a href="/register">立即注册</a></div></form></div>
</body>
</html>

2.注册

代码如下（示例）：

<!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/register.css"><!-- 引入jquery库 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body><!-- 注册大盒子 --><div class="register-box"><h1>账户注册</h1><!-- 表单 --><form><!-- 账户 --><div class="user-name"><!-- 关联标签label和input的id保持一致 --><label for="name" class="iconfont iconzhanghao"></label><input id="name" type="text" placeholder="请输入注册邮箱/用户名/手机"></div><!-- 密码 --><div class="user-pwd"><!-- 关联标签label和input的id保持一致 --><label for="pwd" class="iconfont iconmima"></label><input id="pwd" type="password" placeholder="请输入密码"><label class="iconfont iconclose-eye control_pwd"></label></div><!-- 确认密码 --><div class="user-pwd-confirm"><!-- 关联标签label和input的id保持一致 --><label for="pwd-confirm" class="iconfont iconquerenmima"></label><input id="pwd-confirm" type="password" placeholder="请再次输入密码"><label class="iconfont iconclose-eye control_pwd"></label></div><!-- 性别 --><div class="user-sex"><!-- 关联标签label和input的id保持一致 --><label class="iconfont iconxingbie"></label>男<input type="radio" value="1" checked name="sex">女<input type="radio" value="0" name="sex"></div><!-- 注册按钮 --><button class="submit-btn">注册</button><!-- 相关操作 --><div class="other-box"><input id="agree" type="checkbox"><label for="agree">已经阅读并同意</label><a href="#">相关协议</a><a href="/login">已有账号，点击登录</a></div></form></div>
</body>
</html>

2.login.css

代码如下（示例）：

body{background-image: url('../imgs/bg.jpg');/*背景图的引入语法*/background-repeat: no-repeat;/*背景图的重复平铺-no-repeat表示不重复*/background-size: cover;/*背景图尺寸-cover全屏显示*/background-attachment: fixed;/*背景图粘贴固定-不随鼠标滚动进行移动*/
}
.login-box{width: 600px;/*宽度*/height: auto;/*高度-auto表示自动,由内容撑开*/border: 1px solid #fff;/*边框:粗细 形状 颜色*/margin: 200px auto;/*外边距-上下200,左右居中--块级元素水平居中*/
}
/* 后代选择器 语法:父元素 子元素 */
.login-box h1{color: #fff;font-size: 30px;/*字体尺寸*/margin: 30px 0;/*上下边距30,左右为0*/text-align: center;/*字体水平居中--left、right、center、justfy两端对齐*/
}
form{width: 80%;margin: auto;
}
.user-pwd,
.user-name{height: 60px;border: 1px solid #fff;border-radius: 26px;/*边框圆角*/margin-bottom: 25px;/*下边距--垂直方向距离下一个元素的距离*/display: flex;/*弹性盒模型*/
}
.user-pwd label,
.user-name label{width: 60px;height: 60px;display: block;/*label标签默认为行级元素,无法直接设置宽高,因此display转为block块级元素*/line-height: 60px;/*行高--垂直方向居中-单元素设置*/text-align: center;/**/color: #fff;font-size: 30px;
}
.user-pwd input,
.user-name input{flex: 1;/*表示占据剩余空间,避免了手动计算*/background-color: transparent;/*背景色透明*//*去除边框border: none;border-width: 0px;border-style: none;*/border-width: 0px;outline: none;/*外侧轮廓线*/color: #fff;
}
/*设置提示文本颜色*/
.user-pwd input::-webkit-input-placeholder,
.user-name input::-webkit-input-placeholder{color: #fff;
}
/*登录按钮样式*/
.submit-btn{width: 100%;height: 60px;background: #fff;border: none;cursor: pointer;/*鼠标悬停变手*/border-radius: 26px;margin-bottom: 23px;columns: #555555;outline: none;/*去除轮廓线*/
}
.other-box{height: 60px;margin-bottom: 10px;
}
.other-box a{color: #555555;
}
/* 伪元素选择器last-child,表示选中最后一个a */
.other-box a:last-child{float: right;
}

三、结果图

用户注册登录页面的设计与实现相关推荐

asp实现注册登录界面_(06)ASP登录页面的设计思路
一．登录面页的设计思路登录页面有3个部分组成: 1. 用户名 2. 密码 3. 验证码登录页面的显示是由下图所示的index.asp文件在服务器端执行后返顺到浏览器显示的.这个index.asp文 ...
登录页面测试用例设计方法
具体需求: 有一个登陆页面, (假如上面有2个textbox, 一个提交按钮. 请针对这个页面设计30个以上的testcase.) 此题的考察目的:面试者是否熟悉各种测试方法,是否有丰富的Web测试经 ...
设计灵感|APP注册登录页面的设计形式
注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注册登录页面弄的想怒摔手机,最终都 ...
vue密码登录和账号登录页面的设计
1.login.vue文件 (1)在login.vue文件中引入两个组件,分别引用 import LoginAccount from "./cpns/login-account.vue&qu ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
UI设计灵感|注册登录页面怎样设计才更合理？
任何一个需要用户提供信息的表单设计,我们都需要从产品和设计两个角度来进行思考. 一个功能的体验是否足够好不仅仅在于设计,很多时候甚至在产品设计的阶段就已经被下了定义. 先从产品角度考虑,是因为产品的需 ...
用户注册登录页面实例 web前端开发HTML5 JavaScript css
根据清华大学出版社的HTML5网页前端设计实战课后实战代码与注释如下 <!doctype html> <html> <head> <meta charset ...
wxpython配合MySQL数据库完成用户登录页面的设计
文章目录一.创建user表 2.给表添加数据 3.利用wxpython创建登录界面 4.执行结果如图一.创建user表 # -*- coding: utf-8 -*- ""&q ...
拒绝平庸--浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

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

文章目录

前言

一、环境搭建

二、部分代码展示

1.登录

2.注册

2.login.css

三、结果图

用户注册登录页面的设计与实现相关推荐

最新文章

热门文章