一，前端页面 /views/login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/public/css/login.css">
<link rel="stylesheet" href="/public/css/bootstrap.css">
<script src="/public/js/jquery.js"></script>
<script src="/public/js/index.js"></script>
</head>
<body>
<div class="left">
 
</div>
<div class="right">
<div class="jgb">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
</div>
 
<p></p>
<h1>Welcome</h1>
<div class="form" id="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="repassword">密码</label>
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
</div>
已有账号？马上<a class="change" href="javascripte:;">登陆</a>
</div>
<div class="form" id="login">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="text" class="form-control" id="username" placeholder="User">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
还没注册？马上<a class="change" href="javascripte:;">注册</a>
</div>
 
</div>
</body>
</html>
 
二，样式文件  /public/css/login.css
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body{
padding: 60px 100px;
background: #ecf0f1;
position: relative;
}
.left{
width: 600px;
height: 600px;
border-radius: 10px;
background: url('/public/images/dl.jpg') center;
background-size: cover;
float: left;
}
.right{
width: 525px;
height: 600px;
padding: 10px;
float: left;
margin-left: 50px;
}
.jgb{
width: 100%;
height: 30px;
border-radius: 10px;
margin-bottom: 30px;
}
.jgb .j1{
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
}
.jgb .j2{
width: 60%;
height: inherit;
background: #f1c40f;
float: left;
}
.jgb .j3{
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
}
.form{
width: 100%;
padding: 10px 30px;
margin-top: 30px;
border: 1px solid #000;
}
a{
text-decoration: none;
color: #ecf0f1
}
p{
margin: 20px;
}
#login{
display: none;
}
 
三， js 文件  /public/js/index.js
$(function(){
var $register = $('#register');
var $login = $('#login');
 
$register.find('a.change').on('click',()=>{
$login.show();
$register.hide();
})
$login.find('a.change').on('click',()=>{
$login.hide();
$register.show();
})
/**
* 点击注册按钮 =》 通过 ajax =》提交数据
*/
$register.find('button').on('click',()=>{
$.ajax({
type:'post',
url:'/api/user/register',
data:{
username: $register.find('[name="username"]').val(),
password: $register.find('[name="password"]').val(),
repassword: $register.find('[name="repassword"]').val(),
},
dataType: 'json',
success:function(data){
console.log(data)
}
});
})
})
 
四，应用用的jquery，bootstrap文件在官网或者通过npm 即可自行下载

6 ~ express ~ 搭建用户注册前端页面的更多相关文章

  1. 四: 使用vue搭建网站前端页面

    ---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录      cd   目录路径/ 目录名 创建项目          ...

  2. express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域

    代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...

  3. vue- 项目之前端页面搭建1

    项目分析 首页 导航.登录注册栏.轮播图.地板导航登录注册 选项卡免费课 课程分类.筛选.课程列表免费课详情 课程封面视频.优惠活动倒计时.选项卡我的购物车 全选.商品价格统计购买结算 购买成功 我的 ...

  4. 搭建nginx代理，为前端页面跨域调用接口

    前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用. 这里写一篇博客,记录一下. 前端页面地址为127.0.0.1:9813/a.html 接口地址http:// ...

  5. Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

  6. 仿联想商城laravel实战---3、前端页面搭建（什么情况下需要路由接参数）

    仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结 一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...

  7. node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

    前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人 ...

  8. 用Express搭建 blog (一)

    Info 公司马上要举行 hack day 了,这次决定和小伙伴用 Express 作为框架来搭建我们的应用,所以昨天搭出来UI后,今天开始系统的学习下 Express. Start 首先是expre ...

  9. 用express搭建一个简单的博客系统

    转自:https://blog.csdn.net/qq_29721837/article/details/62055603 Express 简介 Express 是一个简洁而灵活的 node.js W ...

随机推荐

  1. WordPress获取首页网站链接和站点名称

    利用bloginfo 获取WordPress网站名称和主页链接 用法一: $blog_title = get_bloginfo('name'); //获取站点名称 $linkzmki = get_bl ...

  2. vmware fusion 进入 BIOS

    要进入bios有三种方法:1.>启动的时候按F2即可进入bios进行一些启动盘等选项的操作.但是,启动的时候很难第一时间按F2成功进入bios, 2.>修改vmware 进入bios之前的 ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 单片机ADC检测4-20mA电路，以及计算方法

    单片机ADC检测4-20mA电路,以及计算方法 转载:https://www.hongchangzidonghua.com/?id=24 1,手里有一个4-20mA输出的压力传感器,假设测量范围是0M ...

  5. python 字符串实例：检查并判断密码字符串的安全强度

    检查并判断密码字符串的安全强度 import string def check(pwd): #密码必须至少包含六个字符 if not isinstance(pwd,str) or len(pwd)&l ...

  6. 047、Java中使用if…else if…else判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  7. 007、Java中定义int型变量

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  8. 015、MySQL取今天是第几季度，往后几个月是第几季度

    #取今天是第几季度 SELECT QUARTER( curdate( ) ); #取往后几个月是第几季度 , INTERVAL MONTH ) ); , INTERVAL MONTH ) ); , I ...

  9. delphi日期GMT格式

    function TForm1.DateTimeToGMT(const DateTime: TDateTime): string;const WEEK: array[1..7] of PChar = ...

  10. redis学习（五）

    一.Redis 发布订阅 1.Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 2.Redis 客户端可以订阅任意数量的频道. 比如你订阅 ...