這次主要是把一些用戶邏輯的前端頁面寫好,然後定義好後臺的一些接口,方便後臺的編寫.
其實工作的話,整體是工程多一些,難度不是很大.
一、登陸、註冊
這部分工作實在是比較簡單...
主要就是花點時間寫好看一點,注重一下驗證邏輯
效果如下:
代碼(具體的資源文件可以去github找):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Eye_Tracking</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<link rel="stylesheet" href="./animate.css">
<link rel="stylesheet" href="./style.css">
<!-- Modernizr JS -->
<script src="./js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body class="style-3">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<span class="title">Ctrl_I</span>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">
<!-- Start Sign In Form -->
<div class="fh5co-form animate-box" data-animate-effect="fadeInRight">
<h2>登錄</h2>
<div class="form-group">
<label for="userName" class="sr-only">userName</label>
<input type="text" class="form-control" id="userName" placeholder="賬號" autocomplete="off">
</div>
<div class="form-group">
<label for="password" class="sr-only">password</label>
<input type="password" class="form-control" id="password" placeholder="密碼" autocomplete="off">
</div>
<div class="form-group">
<label for="remember"><input type="checkbox" id="remember">記住賬號</label>
</div>
<div class="form-group">
<p>沒有賬號？ <a href="signUp">註冊</a> | <a href="forgot">忘記密碼?</a></p>
</div>
<div class="form-group">
<button onclick="login()" value="登錄" class="btn btn-primary">登陸</button>
</div>
</div>
<!-- END Sign In Form -->
</div>
</div>
<div class="row" style="padding-top: 100px; clear: both;">
<div class="col-md-12 text-center"><p><small>© All Rights Reserved.<a href="https://github.com/zekdot/Ctrl_I" target="_blank" title="Ctrl_I">Ctrl_I team</a></small></p></div>
</div>
</div>
<!-- jQuery -->
<script src="./js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="./js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="./js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="./js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="./js/main.js"></script>
</body>
<script>
function check() {
if($("#userName").val()=='') {
alert("請輸入用戶帳號!");
$("#userName").focus();
return false;
}
if($("#password").val()==''){
alert("請輸入登錄密碼!");
$("#password").focus();
return false;
}
return true;
}
function login() {
var userName = $("#userName").val();
var password = $("#password").val();
// window.location.href="signUp";
if(check()){
$.ajax(
{
async: false,
url: "login",
data: {"userName": userName, "password": password},
type: "post",
dataType: "json",
success: function (data) {
if(data.result == 1){
// $(window).attr("location","signUp");
window.location.href="index";
// alert("test");
}
else{
alert("用戶名不存在或密碼錯誤");
}
},
error: function () {
alert("fail");
}
});
}
}
</script>
</html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Eye_Tracking</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" href="style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body class="style-3">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<span class="title">Ctrl_I</span>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">
<!-- Start Sign In Form -->
<div class="fh5co-form animate-box" data-animate-effect="fadeInRight">
<h2>註冊</h2>
<div class="form-group">
<div class="alert alert-success" role="alert">您的信息已保存</div>
</div>
<div class="form-group">
<label for="userName" class="sr-only">用戶名</label>
<input type="text" class="form-control" id="userName" placeholder="用戶名" autocomplete="off">
</div>
<div class="form-group">
<label for="email" class="sr-only">郵箱</label>
<input type="email" class="form-control" id="email" placeholder="郵箱" autocomplete="off">
</div>
<div class="form-group">
<label for="password" class="sr-only">密碼</label>
<input type="password" class="form-control" id="password" placeholder="密碼" autocomplete="off">
</div>
<div class="form-group">
<label for="re-password" class="sr-only">確認密碼</label>
<input type="password" class="form-control" id="re-password" placeholder="確認密碼" autocomplete="off">
</div>
<div class="form-group">
<p>已有賬號? <a href="signIn">登錄</a></p>
</div>
<div class="form-group">
<button onclick="register()" value="註冊" class="btn btn-primary">註冊</button>
</div>
</div>
<!-- END Sign In Form -->
</div>
</div>
<div class="row" style="padding-top: 60px; clear: both;">
<div class="col-md-12 text-center"><p><small>© All Rights Reserved.<a href="https://github.com/zekdot/Ctrl_I" target="_blank" title="Ctrl_I">Ctrl_I team</a></small></p></div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
<script>
var show = false;
function check() {
if($("#userName").val()=='') {
alert("用戶名不能爲空");
$("#userName").focus();
return false;
}
else if($("#email").val()==''){
alert("郵箱不能爲空");
$("#email").focus();
return false;
}
else if(!checkEmail($("#email").val())){
$("#email").focus();
return false;
}
else if($("#password").val()==''){
alert("密碼不能爲空");
$("#password").focus();
return false;
}
else if(($("#re-password").val()) != ($("#password").val())){
alert("兩次密碼輸入不一致");
return false;
}
else{
show = true;
return true;
}
}
function checkEmail(){
var email= $("#email").val();
var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if(myReg.test(email)){
return true;
}else{
alert("郵箱格式錯誤!");
return false;
}
}
$(".btn-primary").click(function () {
if($(".alert-success").css("display")=="none" && show){
$(".alert-success").show();
}else{
$(".alert-success").hide();
}
})
function register() {
var userName = $("#userName").val();
var password = $("#password").val();
var email = $("#email").val();
if(check()){
$.ajax(
{
async: false,
url: "register",
data: {"userName": userName, "password": password,"email":email},
type: "post",
dataType: "json",
success: function (data) {
// alert(data.result);
window.location.href="signIn";
},
error: function () {
alert("fail");
}
});
}
}
</script>
</html>
二、個人信息頁面
之前主要是完成了網站的主頁,文章等功能.現在加入用戶的個人信息修改以及歷史文章閱讀等功能
列出主要結構代碼:
<!DOCTYPE html>
<html>
<body>
<!-- header-section-starts -->
<div class="header" id="header">
<div class="container">
<div class="logo">
<a href="http://localhost:8081/index.html"><img src="index_files/logo.png" alt=""></a>
</div>
<div class="social-icons header-social-icons">
<a href="#"><i class="twitter"></i></a>
<a href="#"><i class="facebook"></i></a>
<a href="#"><i class="dribble"></i></a>
<a href="#"><i class="rss"></i></a>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<h3>Many things difficult to <span>design</span> prove easy to performance.</h3>
</div>
</div>
<div class="navigation-strip">
<div class="container">
<div class="nav_content">
<div class="home">
<a href="http://localhost:8081/index.html"><img src="index_files/home1.png" alt=""></a>
</div>
<div class="search">
<form>
<input type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}">
<input type="submit" value="">
</form>
</div>
<span class="menu"></span>
<div class="top-menu">
<ul>
<li><a href="http://localhost:8081/about.html">About Us</a></li>
<li><a href="http://localhost:8081/portfolio.html">Portfolio</a></li>
<li><a class="active" href="http://localhost:8081/blog.html">Blog</a></li>
<li><a onclick="hiddenDebug()">Features</a></li>
<li><a href="http://localhost:8081/contact.html">Contact</a></li>
<div class="clearfix"></div>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu" ).slideToggle( "slow", function() {
// Animation complete.
});
});
</script>
<!-- script for menu -->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="content" id="content">
<div class="container">
<div class="row">
<div class="col-lg-12 col-xl-4 col-md-12 col-sm-12">
<div class="card">
<div class="card-body">
<div class="text-center">
<div class="userprofile social">
<div class="userpic"> <img src="assets/img/avatar/avatar-1.jpeg.jpg" alt="" class="userpicimg"> </div>
<h3 class="username">小橘子</h3>
<p>程序媛,山東濟南</p>
<div class="text-center mb-2">
<span><i class="fa fa-star text-warning"></i></span>
<span><i class="fa fa-star text-warning"></i></span>
<span><i class="fa fa-star text-warning"></i></span>
<span><i class="fa fa-star-half-o text-warning"></i></span>
<span><i class="fa fa-star-o text-warning"></i></span>
</div>
<div class="socials text-center"> <a href="" class="btn btn-circle btn-primary ">
<i class="fa fa-facebook"></i></a> <a href="" class="btn btn-circle btn-danger ">
<i class="fa fa-google-plus"></i></a> <a href="" class="btn btn-circle btn-info ">
<i class="fa fa-twitter"></i></a> <a href="" class="btn btn-circle btn-warning "><i class="fa fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-xl-8 col-md-12 col-sm-12">
<div class="card">
<div class="card-header">
<h4>詳細信息</h4>
</div>
<div class="card-body">
<p><b>用戶 ID :</b> Orange233</p>
<p><b>用戶暱稱 :</b> <span contenteditable="true">Orange Lee </span></p>
<p><b>郵箱 :</b> [email protected]</p>
<p><b>電話 :</b> +86 12345678900 </p>
<p><b>地址 : </b> 山東濟南舜華路1500號,山東大學齊魯軟件學院 </p>
<p class="mb-0"><b>簡介 : </b> <span contenteditable="true"> 這是我呀~~~</span></p>
<button id="info_update">保存</button>
</div>
</div>
</div>
</div>
<div class="row profile-card">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card col-lg-12 col-md-12 col-sm-12">
<div class="card-body">
<div class="">
<div class="col-md-12">
<div class="media mt-0">
<div class="media-body">
<h4 class="media-heading">習近平:奮力開創中部地區崛起新局面<br>
<small class="text-muted"><i class="fa fa-clock-o"></i> Yesterday, 2:00 am</small> </h4>
<p>中共中央總書記、國家主席、中央軍委主席習近平5月20日至22日在江西考察，主持召開推動中部地區崛起工作座談會並發表重要講話。他強調，要堅持以新時代中國特色社會主義思想爲指導，全面貫徹黨的十九大和十九屆二中、三中全會精神，貫徹新發展理念，在供給側結構性改革上下更大功夫，在實施創新驅動發展戰略、發展戰略性新興產業上下更大功夫，積極主動融入國家戰略，推動高質量發展，不斷增強中部地區綜合實力和競爭力，奮力開創中部地區崛起新局面。</p>
<ul class="nav nav-pills pull-left">
<li><a href="" title=""><i class="fa fa-thumbs-o-up"></i> 794</a></li>
<li><a href="" title=""><i class="fa fa-commenting-o"></i> 253</a></li>
<li><a href="" title=""><i class="fa fa-share"></i> 24</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </section> -->
</div>
<br><br><br><br>
</div>
</body>
</html>