<!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 ...
- ExpandableListActivity的基本使用方法 ，SimpleExpandableListAdapter的基本使用方法
activity_main.xml: <ExpandableListView android:id="@id/android:list" android:layout_wid ...
- Codeforces 1296E2. String Coloring (hard version)
这道题和HDU1257一模一样,一开始窝都用贪心直接解,没法理解为什么求一个最长下降序列,直到看了巨巨的题解,先给出一个定理,Dilworth's theorem,离散学不好,补题两行泪,该定理是说, ...
- springmvc教程（1）
idea搭建springmvc maven项目 jdk:1.8 maven:Bundled (Maven 3) idea版本: 开始搭建第一个springmvc maven项目 1.点击File-&g ...
- Lesson 5 Youth
How does the writer like to treat young people? People are always talking about 'the problem of yout ...
- ElasticSearch学习，入门篇（一）
概念解析 1.什么是搜索 搜索就是在任何场景下,找寻你想要的信息,这个时候你会输入一段要搜索的关键字,然后期望找到这个关键字相关的有效信息. 2.如果用数据库做搜素会怎么样 select * from ...
- vue :is 属性
为什么使用 :is ?DOM模板解析说明: 当使用DOM作为模板时(例如,将el选项挂载到一个已知的元素上),你会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容. ...
- 图片上传--base64
<?php defined('BASEPATH') OR exit('No direct script access allowed'); include_once (APPPATH . &qu ...
- Dive into re Module in Python
Dive into RE in Python Standard re module in python is powerful to handle text manipulation,such as ...
- 自定义对象使用 ArrayList 进行增删改查（dos程序）
马上要进行java基础考试了,闲着写一次博客,把这10周学的东西过一遍,可能没过全,.....但是我觉得增删改查是必须的,以前一直不会用ArrayList 自定义对象....... 案例如下:自己根 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-play-circle
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
