一，前端页面 /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. P1481 魔族密码（LIS变形）

    题目描述(题目链接:https://www.luogu.org/problem/P1481) 风之子刚走进他的考场,就…… 花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花) 风之 ...

  2. Day9 - A - Apple Catching POJ - 2385

    Description 有两棵APP树,编号为1,2.每一秒,这两棵APP树中的其中一棵会掉一个APP.每一秒,你可以选择在当前APP树下接APP,或者迅速移动到另外一棵APP树下接APP(移动时间可 ...

  3. Link Analysis_2_Application

    US Cities Distribution Network 1.1 Task Description Nodes: Cities with attributes (1) location, (2) ...

  4. JSTL1.0和JSTL1.1的区别

    这要从一个异常说起 According to TLD or attribute directive in tag file, attribute value does not accept any e ...

  5. leetcode445 Add Two Numbers II

    """ You are given two non-empty linked lists representing two non-negative integers. ...

  6. JDBC Connection Configuration配置正确，提示Error preloading the connection pool

    JDBC Connection Configuration配置正确,提示Error preloading the connection pool JDBC 请求报错,提示: 因为之前执行是正确的,这次 ...

  7. python-python基础2

    本章内容: 1.列表.元组 2.字典 3.集合 4.文件操作 5.字符编码与转码 一.列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 names= ...

  8. java 十大经典排序算法

    十大排序算法可以说是每个程序员都必须得掌握的了,花了一天的时间把代码实现且整理了一下,为了方便大家学习,我把它整理成一篇文章,每种算法会有简单的算法思想描述,为了方便大家理解,我还找来了动图演示:这还 ...

  9. NMEA-0183

    GPGSA( 当前卫星信息)    例:$GPGSA,A,3,01,20,19,13,,,,,,,,,40.4,24.4,32.2*0A    字段0:$GPGSA,语句ID,表明该语句为GPS DO ...

  10. 洛谷 P3435 [POI2006]OKR-Periods of Words

    题目传送门 解题思路: 这道题题面比较乱,先说一下这道题要求什么: 对于一个字符串,求它及它的所有前缀的一个答案串的长度之和,答案串就是对于一个字符串,找到一个它的一个前缀,这个前缀后面在复制一遍,得 ...