前言
首先要进行项目分析，理清楚做的步骤，做到条理清晰
一、文件结构
二、前端页面
1.首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="css/index.min.css">
<script>
~function anonymous(window) {
let computedREM = function computedREM() {
let winW = document.documentElement.clientWidth,
desW = 640;
if (winW >= desW) {
document.documentElement.style.fontSize = '100px';
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
};
computedREM();
window.addEventListener('resize', computedREM);
}(window);
</script>
</head>
<body>
<main class="mainBox">
<header class="headerBox">
<img src="" alt="" class="title">
<a href="join.html" class="sign">我要参赛</a>
<div class="search">
<input type="search" placeholder="输入用户名查找">
<a href="javascript:;" class="searchBtn">搜索</a>
</div>
</header>
<section class="userList">
<ul>
<!--<li>
<a href="detail.html?userId=0">
<img src="img/man.png" alt="" class="picture">
<p class="title">
<span>canfoo</span>
|
<span>编号 #001</span>
</p>
<p class="slogan">同一个世界同一个梦想同一个世界同一个梦想</p>
</a>
<div class="vote">
<span class="voteNum">7</span>
<a href="javascript:;" class="voteBtn">投他一票</a>
</div>
</li>-->
</ul>
<div class="tip">暂时没有匹配的数据</div>
</section>
</main>
<script src="js/zepto.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/axios_default.js"></script>
<script src="js/component/nav.js"></script>
<script src="js/index.js"></script>
</body>
</html>
2.登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="css/register.min.css">
<script>
~function anonymous(window) {
let computedREM = function computedREM() {
let winW = document.documentElement.clientWidth,
desW = 640;
if (winW >= desW) {
document.documentElement.style.fontSize = '100px';
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
};
computedREM();
window.addEventListener('resize', computedREM);
}(window);
</script>
</head>
<body>
<main class="mainBox">
<header class="headerBox">
<img src="" alt="">
</header>
<section class="registerBox">
<div class="item">
<h3>用户名：</h3>
<input type="text" id="userName" placeholder="请填写您的真实姓名或者手机号码">
<span></span>
</div>
<div class="item">
<h3>密码：</h3>
<input type="password" id="userPass" placeholder="由6~12位数字和字母组成">
<span></span>
</div>
<a href="javascript:;" class="submit" id="submit">确认登录</a>
</section>
</main>
<script src="js/zepto.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/axios_default.js"></script>
<script src="js/md5.min.js"></script>
<script src="js/component/utils.js"></script>
<script src="js/component/nav.js"></script>
<script src="js/login.js"></script>
</body>
</html>
3.注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>注册</title>
<link rel="stylesheet" href="css/register.min.css">
<script>
~function anonymous(window) {
let computedREM = function computedREM() {
let winW = document.documentElement.clientWidth,
desW = 640;
if (winW >= desW) {
document.documentElement.style.fontSize = '100px';
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
};
computedREM();
window.addEventListener('resize', computedREM);
}(window);
</script>
</head>
<body>
<main class="mainBox">
<!--nav-->
<nav class="navBox">
<a href="index.html">首页</a>
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="detail.html"></a>
<a href="javascript:;">退出</a>
</nav>
<header class="headerBox">
<img src="" alt="">
</header>
<section class="registerBox">
<div class="item">
<h3>用户名：</h3>
<input type="text" id="userName" placeholder="请填写您的真实姓名">
<span id="spanName"></span>
</div>
<div class="item">
<h3>手机号码：</h3>
<input type="tel" id="userPhone" placeholder="请填写您常用的手机号">
<span id="spanPhone"></span>
</div>
<div class="item">
<h3>密码：</h3>
<input type="password" id="userPass" placeholder="由6~12位数字和字母组成">
<span id="spanPass"></span>
</div>
<div class="item">
<h3>确认密码：</h3>
<input type="password" id="userPassConfirm" placeholder="">
<span id="spanPassConfirm"></span>
</div>
<div class="item">
<h3>自我描述：</h3>
<textarea id="userBio" placeholder="限制在10~100字之间"></textarea>
<span id="spanBio"></span>
</div>
<div class="item">
<h3>性别：</h3>
<input type="radio" id="man" name="sex" checked>
<label for="man">男</label>
<input type="radio" id="woman" name="sex">
<label for="woman">女</label>
</div>
<a href="javascript:;" class="submit" id="submit">提交注册信息</a>
</section>
</main>
</body>
</html>
4.个人信息页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>个人信息</title>
<link rel="stylesheet" href="css/detail.min.css">
<script>
~function anonymous(window) {
let computedREM = function computedREM() {
let winW = document.documentElement.clientWidth,
desW = 640;
if (winW >= desW) {
document.documentElement.style.fontSize = '100px';
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
};
computedREM();
window.addEventListener('resize', computedREM);
}(window);
</script>
</head>
<body>
<main class="mainBox">
<!--nav-->
<nav class="navBox">
<a href="index.html">首页</a>
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="detail.html"></a>
<a href="javascript:;">退出</a>
</nav>
<header class="headerBox">
<div class="userInfo">
<img src="" alt="" class="picture">
<p class="info">
<span>canfoo</span>
|
<span>编号 #000</span>
</p>
<p class="bio">...</p>
<div class="vote">7</div>
</div>
<div class="slogan">同一个世界同一个梦想，同一个世界同一个梦想同一个世界同一个梦想</div>
<a href="javascript:;" class="voteBtn">投他一票</a>
</header>
<section class="voteList" id="voteMy">
<div class="title clearfix">
<div class="left">
<span></span>
<span></span>
</div>
<div class="center">投递我的人员</div>
<div class="right">
<span></span>
<span></span>
</div>
</div>
<ul class="list">
<li>
<a href="detail.html?userId=0">
<img src="" alt="" class="picture">
<p class="title">canfoo</p>
<p class="bio">...</p>
</a>
<div class="vote">
<span class="voteNum">7</span>
<a href="javascript:;" class="voteBtn">投他一票</a>
</div>
</li>
</ul>
</section>
<section class="voteList" id="myVote">
<div class="title clearfix">
<div class="left">
<span></span>
<span></span>
</div>
<div class="center">我投递的人员</div>
<div class="right">
<span></span>
<span></span>
</div>
</div>
<ul class="list">
<li>
<a href="detail.html?userId=0">
<img src="" alt="" class="picture">
<p class="title">canfoo</p>
<p class="bio">...</p>
</a>
<div class="vote">
<span class="voteNum">7</span>
<a href="javascript:;" class="voteBtn">投他一票</a>
</div>
</li>
</ul>
</section>
</main>
</body>
</html>
5.参赛页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>参加比赛</title>
<link rel="stylesheet" href="css/register.min.css">
<script>
~function anonymous(window) {
let computedREM = function computedREM() {
let winW = document.documentElement.clientWidth,
desW = 640;
if (winW >= desW) {
document.documentElement.style.fontSize = '100px';
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
};
computedREM();
window.addEventListener('resize', computedREM);
}(window);
</script>
</head>
<body>
<main class="mainBox">
<!--nav-->
<nav class="navBox">
<a href="index.html">首页</a>
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="detail.html"></a>
<a href="javascript:;">退出</a>
</nav>
<header class="headerBox">
<img src="" alt="">
</header>
<section class="registerBox">
<div class="item">
<h3>参赛标语：</h3>
<textarea placeholder="限制字数在10~100字以内 [一但输入就不能更改了哦]" style="line-height: .4rem; height: 3rem;"
id="slogan"></textarea>
<span id="spanSlogan"></span>
</div>
<a href="javascript:;" class="submit" id="submit">确认参赛</a>
</section>
</main>
</body>
</html>
二、后端
1.index.js
let matchRender = (function ($) {
let $userList = $('.userList'), $wrapper = $userList.find('ul'), $tip = $userList.find('.tip'),
$headerBox = $('.headerBox'), $searchBtn = $headerBox.find('.searchBtn')
let limit = 10,// 每页展示的数量
page = 1,// 当前是第几页
pageNum = 1,//总页数
total = 1,// 总条数
search = '',// 搜索的内容
isRun = false// 是否正在加载最新数据
// 获取数据
let queryData = function queryData() {
return axios.get('/getMatchList', {
params: {
limit, page, search
}
}).then(result => {
pageNum = parseFloat(result['pageNum'])
total = parseFloat(result['total'])
return result
}).then(bindHTML)
}
// 数据绑定
let bindHTML = function bindHTML(result) {
let { code, list = [] } = result
if (parseFloat(code) !== 0) {
// 获取数据失败，获取的数据不是我们想要的，非状态码的失败
if (parseFloat(code) !== 0) {
$wrapper.css('display', 'none')
$tip.css('display', 'block')
return
}
// 成功绑定数据
$wrapper.css('display', 'block')
$tip.css('display', 'none')
let $frg = $(document.createDocumentFragment())
lis.forEach((item, index) => {
let { id, name, picture, sex, matchId, slogan, voteNum, isVote } = item
$frg.append(
`<li>
<a href="detail.html?userId=${id}">
<img src="${picture}" alt="${name}" class="picture">
<p class="title">
<span>${name}</span>
|
<span>编号 #${matchId}</span>
</p>
<p class="slogan">${slogan}</p>
</a>
<div class="vote">
<span class="voteNum">${voteNum}</span>
${parseFloat(isVote) === 0 ? `<a href="javascript:;" class="voteBtn">投他一票</a>` : ``}
</div>
</li>`)
});
$wrapper.append($frg)
$frg = null
// 最新数据加载完成
isRun = false
}
}
return {
init: function init() {
// 展示第一页的内容
queryData()
// 下拉加载更多数据
$(window).on('scroll', () => {
let { clientHeight, scrollTop, scrollHeight } = document.documentElement
if ((clientHeight + scrollTop + 200) >= scrollHeight) {
// 即将到达页面底部，加载更多数据
if (isRun) return
if (page >= pageNum) return
isRun = true
page++
queryData()
}
})
// 点击搜索
$searchBtn.tap(() => {
isRun = true
search = $searchBtn.prev('input').val().trim()
page = 1
$wrapper.html('')
queryData()
})
}
}
})(Zepto)
matchRender.init()
2.login.js
let loginRender = (function ($) {
let $userName = $('#userName'),
$userPass = $('#userPass'),
$submit = $('#submit');
let fromURL = utils.queryURLParams()['fromURL'];
fromURL ? fromURL = decodeURIComponent(fromURL) : fromURL = 'index.html';
let submitFn = function submitFn() {
//=>可以验证输入的格式是否符合要求，如果不符合要求，没必要发送请求
axios.post('/login', {
name: $userName.val().trim(),
//=>HEX_MD5把一个字符串进行MD5加密处理
password: hex_md5($userPass.val().trim())
}).then(result => {
let code = parseFloat(result.code);
if (code === 0) {
//=>登录成功
// window.location.href = fromURL;
return;
}
alert('请检查用户名密码，登录失败了！');
});
};
return {
init: function init() {
$submit.tap(submitFn);
}
}
})(Zepto);
loginRender.init();
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
