<!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 即可自行下载
- 四: 使用vue搭建网站前端页面
---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录 cd 目录路径/ 目录名 创建项目 ...
- express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域
代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...
- vue- 项目之前端页面搭建1
项目分析 首页 导航.登录注册栏.轮播图.地板导航登录注册 选项卡免费课 课程分类.筛选.课程列表免费课详情 课程封面视频.优惠活动倒计时.选项卡我的购物车 全选.商品价格统计购买结算 购买成功 我的 ...
- 搭建nginx代理，为前端页面跨域调用接口
前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用. 这里写一篇博客,记录一下. 前端页面地址为127.0.0.1:9813/a.html 接口地址http:// ...
- Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- 仿联想商城laravel实战---3、前端页面搭建（什么情况下需要路由接参数）
仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结 一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...
- node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛
前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人 ...
- 用Express搭建 blog (一)
Info 公司马上要举行 hack day 了,这次决定和小伙伴用 Express 作为框架来搭建我们的应用,所以昨天搭出来UI后,今天开始系统的学习下 Express. Start 首先是expre ...
- 用express搭建一个简单的博客系统
转自:https://blog.csdn.net/qq_29721837/article/details/62055603 Express 简介 Express 是一个简洁而灵活的 node.js W ...
- 「CF5E」Bindian Signalizing
传送门 Luogu 解题思路 很显然的一点,任何一条可能成为路径的圆弧都不可能经过最高的点,除非这条路径全是最高点. 所以我们先把最大值抠掉,把剩下的按原来的顺序排好. 从前往后.从后往前扫两次,用单 ...
- pyhon 内置函数
chr() asci码 dir() 目录,显示目录. divmod(10,3) 返回商和余数 例如 (3, 1) 返回的为一个元组 可以用于分页 enumerate() ...
- Springboot配置文件内容加密
使用的是jasypt-spring-boot-starter,具体介绍可以参考 https://gitee.com/yangziyi2017/Jasypt-Spring-Boot 引入依赖 & ...
- （转）浅谈 Linux 内核无线子系统
前言 Linux 内核是如何实现无线网络接口呢?数据包是通过怎样的方式被发送和接收呢? 刚开始工作接触 Linux 无线网络时,我曾迷失在浩瀚的基础代码中,寻找具有介绍性的材料来回答如上面提到的那些高 ...
- Centos7下 Oracle11G自动备份
1.创建备份目录: [root@Centos ~]# mkdir -p /home/oracle/backup 2.设置目录权限: [root@Centos ~]# chown -R oracle:o ...
- jmeter里面Dug Sampler 和json提取器的用法
1.编写用户详情请求 2.查看结果树 一级一级往上查找父集 3.添加json提取器 步骤:点击[用户详情]请求->添加->后置处理器->json提取器 把查看结果树里面的JSON P ...
- Oracle 的DBA考证
转自 :https://www.cnblogs.com/chunge2050/archive/2013/04/16/3023730.html 详细的了解了几天之后,总结起来就是oracle为DBA认证 ...
- R分析实现对招聘网站薪资预测分析
1.首先确定数据分析目标——薪酬受哪些因素影响 确定变量: 因变量:薪资 自变量:(定性)-- 公司类别.公司规模.地区.行业类别.学历要求.软件要求. (定量)-- 经验要求(数值型) 分析目标:建 ...
- 官方关于Dialog的介绍
将Activity显示成Dialog的形式: Tip: If you want a custom dialog, you can instead display an Activity as a di ...
- 【蓝桥】第八届C语言C组第7题 Excel地址（进制变形题，stack()简单使用）转载
标题: Excel地址 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如, A表示第1列, B表示第2列, Z表示第26列, AA表示第27列, AB表示第28列, BA表示第53列, ...
