简单的项目总结
之前和我的上级去做了一个网上报名活动，我负责了报名以及展示，以及整个后台。
结合需求 弄了一个页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>广西-投票</title>
<link rel="stylesheet" href="__STATIC__/home/css/apply.css" />
<link rel="stylesheet" href="__STATIC__/home/css/nav.css" />
<script type="text/javascript" src="__STATIC__/home/js/jquery-2.1.0.js"></script>
<script src="__STATIC__/home/uploadify/jquery-1.7.2.min.js"></script>
<script src="__STATIC__/home/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="__STATIC__/home/css/uploadify.css">
<script type="text/javascript" src="__STATIC__/home/js/index.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/apply.js"></script>
</head>
<body>
<section class="container">
<div class="apply-box">
<h3 class="tit"><span>我在广西哪些年</span>摄影大赛 - 报名表</h3>
</div>
<div class="apply-content">
<div class="clear apply-text">
<label class="label">姓<i class="i-2">名</i></label>
<div class="input">
<input type="text" id="name" name="name" placeholder="请输入姓名" />
</div>
</div>
<div class="clear apply-text">
<label class="label">手<i class="i-2">机</i></label>
<div class="input">
<input type="text" name="tel" id="tel" placeholder="请填写真实手机号码" />
<span>请务必填写真实的手机号码,手机号码将作为您核对中奖信息的重要依据.</span>
</div>
</div>
<div class="clear apply-text">
<label class="label">性<i class="i-2">别</i></label>
<div class="input">
<input class="input-radio" type="radio" name="sex" id="boy" value="1" checked/> <b class="check"></b><label> 先生</label>
<input class="input-radio" type="radio" name="sex" id="girl" value="0"/> <b></b><label> 女士</label>
</div>
</div>
<div class="clear apply-text">
<label class="label">年<i class="i-2">龄</i></label>
<div class="input">
<select id="age" name="age">
<option value="">20~30</option>
<option value="">30~40</option>
<option value="">40~50</option>
<option value="">50~60</option>
<option value="">60~70</option>
<option value="">70~80</option>
<option value="">其他</option>
</select>
</div>
</div>
<div class="clear apply-text">
<label class="label">邀<i class="i-3">请</i><i class="i-3">码</i></label>
<div class="input">
<input type="text" name="Invitation_code2" id="Invitation_code2" placeholder="选填项" />
<span>请填写相应的邀请码.</span>
</div>
</div>
<div class="clear apply-text">
<!--<label class="label">上传图片</label>
<div class="input">
<input id="file_upload" type="file" multiple="true" >
<img style="display:none" id="upload_org_code_img" src="" width="150" height="150">
<input id="file_upload_image" name="url" type="hidden" multiple="true" value="" style="width: 100%;height: 40vmin;background-color: #ebebeb;">
<span>图片要求:上传一张图片,图片格式为jpeg,大小不得超过10M.</span>
</div>-->
<div id="top">
<div id="title">个人中心</div>
<!-- 图片提交表单 -->
<form id="upfile" class="" action="{:url('upload')}" method="post" enctype="multipart/form-data" style="display:none">
<input id="upimg" type="file" name="img" value="" style="display:none" onchange="sm();">
</form>
<div id="top-touxiang">
<div id="touxiang">
<div><img src="" alt="头像" onclick="upload();" style="width:14rem;height:14rem;border-radius:400px;"></div>
<div></div>
</div>
</div>
</div>
</div>
<td>
</td>
<div class="clear apply-text">
<label class="label">照片地址</label>
<div class="input">
<input type="text" name="address" id="address" placeholder="选填项" />
<span>例:广西省南宁市中山路8号.</span>
</div>
</div>
<div class="clear apply-text">
<label class="label">参赛宣言</label>
<div class="input">
<textarea type="text" name="slogan" id="slogan" placeholder="参赛宣言" rows="3" cols="20"></textarea>
<span>请填写不少于50字的参赛宣言.</span>
</div>
</div>
<button id="btn">提交</button>
</div>
</section>
<section>
<h2>照片标准</h2>
<div>
</div>
</section>
<!--导航栏-->
<section class="tabbar">
<ul>
<li><a href="index.html" class="index">首页</a></li>
<li><a href="apply.html" class="apply">报名</a></li>
<li><a href="rank.html" class="rank">榜单</a></li>
<li><a href="mine.html" class="mine">我的</a></li>
</ul>
</section>
<script>
function upload(){
document.getElementById('upimg').click();
}
function sm(){
document.getElementById('upfile').submit();
}
</script>
<script>
$(function(){
$("#btn").click(function (){
var name = $("#name").val();
//姓名正则 {汉字2-5}
var nameReg = /^[\u4E00-\u9FA5]{2,5}$/;
var tel = $("#tel").val();
//电话正则 {11位数，不得随意数字，}
var phoneReg = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
var sex = $('input:radio:checked').val();
//填写不得为空
//图片值
var picture =$('#file_upload_image').val();
var requeryreg = /\S/;
var slogan = $("#slogan").val();
var address = $("#address").val();
var age = $('#age option:selected').text();
var Invitation_code2 = $("#Invitation_code2").val();
//验证姓名
if(!nameReg.test(name)){
alert('请您填真实姓名');
return false;
}else if(!phoneReg.test(tel)) {
alert('请您填真实电话');
return false;
}else if(!requeryreg.test(picture)) {
alert('请您上传参赛图片');
return false;
}else if(address==''){
alert('请您输入该照片拍摄地址');
return false;
}else if(!requeryreg.test(slogan)){
alert('请您输入参赛宣言');
return false;
}else{
alert(name);
alert(tel);
alert(sex);
alert(age);
alert(Invitation_code2);
alert(picture);
alert(address);
alert(slogan);
}
});
});
</script>
/*$("#file_upload").uploadify({
'swf' : "__STATIC__/home/uploadify/uploadify.swf",
'uploader' : "/home/vote/upload",
'buttonText' : '图片上传',
'fileTypeDesc' : '图片',
'fileObjName' : 'photo',
'fileTypeExts' : '*.jpeg: *.gif; *.jpg; *.png',
'fileSizeLimit' : "10MB",//上传文件大小限制数
'multi': false,//设置上传时是否可以选择多个,true可以,false禁止选中多个
'onUploadSuccess' : function(file, data, response) {
if(response){
var obj = JSON.parse(data);
$("#upload_org_code_img").attr("src", obj.data);
$("#upload_org_code_img").show();
$("#file_upload_image").attr("value", obj.data);
}
}
});
});*/
/* if (!nameReg.test(name)) {
$('.name_tips').show();
setTimeout(function(){
$('.name_tips').hide();
},1000);
return false;
}*/
//验证成功传入后台
</body>
</html>
基本上一个简单的报名需要的数据都设置了，还用正则设置了填写规范要求。
代码不拖拉，格式工整，不然会很难看
这里的图片上传，我写的并不好，需要的效果是可以直接拖拽使用，我做的也是这个效果。不过我的这个图片上传不显示上传成功，所以被毙了。
后来花了很多时间去查看别的大佬是怎么写的
推荐一个是升级版的Huploadify （有的技术贴有免费的）
这个上传太多了 网上太多了
class Votelist extends Controller
{
protected $join_model;
protected function _initialize()
{
parent::_initialize();
$this->join_model = new joinModel();
}
public function index()
{
$search = input("post.search");
if (empty($search)) {
$wherelist = array(
'status' => 1,
);
} else {
if (preg_match("/[\x7f-\xff]/", $search)) {
//封装模糊查询 赋值到数组
$wherelist = array(
'turename' => array('like', '%' . $search . '%'),
'status' => 1,
);
} else {
//封装模糊查询 赋值到数组
$wherelist = array(
'numberid' => array('like', '%' . $search . '%'),
'status' => 1,
);
}
}
$data = $this->join_model->where($wherelist)->order('score desc')->limit(0,10)->select();
$nowpage=1;
return view('index', ['data' => $data,'nowpage'=>$nowpage]);
}
public function append(){
$nowpage = input('post.nowpage');
$keyword=input('post.keyword');
if (empty($search)) {
$wherelist = array(
'status' => 1,
);
} else {
if (preg_match("/[\x7f-\xff]/", $search)) {
//封装模糊查询 赋值到数组
$wherelist = array(
'turename' => array('like', '%' . $search . '%'),
'status' => 1,
);
} else {
//封装模糊查询 赋值到数组
$wherelist = array(
'numberid' => array('like', '%' . $search . '%'),
'status' => 1,
);
}
}
$perpage=10;
$nowpage=$nowpage+1;
$start = ($nowpage-1)*$perpage;
$data = $this->join_model->where($wherelist)->order('score desc')->limit($start,$perpage)->select();
if(empty($data)){
exit;
}
$data[0]['nowpage']=$nowpage;
echo json_encode($data);
exit;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/nav.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/votelist.css" />
<script src="__STATIC__/home/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/jquery-2.1.0.js"></script>
</head>
<body onload="countTime()">
<!--banner-->
<section>
<img class="img-view banner-img" src="__IMAGE__/banner.png" />
<div class="timeout">
<div class="timeout">
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</div>
</div>
</section>
<section>
<ul class="lu-margin clear">
<li class="li-float tab"><a href="/home/votelist/index">首页作品</a></li>
<li class="li-float"><a href="/home/ranklist/index">参赛榜单</a></li>
</ul>
</section>
<!--参赛作品-->
<section class="container pad-5">
<!--搜索-->
<form action="{url:('index)}" method="post">
<div class="search clear">
<input type="text" name="search" id="keyword" placeholder="请输入编号或名字" />
<button id="btn">搜索</button>
</div>
</form>
<div class="clear" id="clear">
{foreach name ="data" key="k" item="v"}
<div class="col-5" >
<div class="box">
<img class="img-view csz-img" src="__ROOT__{$v.picture}" alt="" />
<span class="no-number">NO.{$v.numberid} | <span>第{$k+1}名</span></span>
<div class="csz-tit">
<span>{$v.turename} | </span>
<span>{$v.score}</span>
</div>
<a class="tou-p" id="tou-p" href="/home/votedetail/index?voteid={$v.id}">投票</a>
</div>
</div>
{/foreach}
<input type="hidden" value="{$nowpage}" id="nowpage">
</div>
</section>
<!--导航栏-->
<section class="tabbar">
<ul>
<li><a href="/" class="index">首页</a></li>
<li><a href="/index.php/home/vote/index" class="apply">报名</a></li>
<li><a href="/index.php/home/ranklist/index" class="rank">榜单</a></li>
<li><a href="/index.php/home/myinfo/index" class="mine">我的</a></li>
</ul>
</section>
<script type="text/javascript" src="__STATIC__/home/js/nav.js" ></script>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str="2018/12/12 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime,1000);
}
</script>
<script type="text/javascript">
//文档高度
function getDocumentTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//可视窗口高度
function getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
function getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
window.onscroll = function () {
//监听事件内容
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
//当滚动条到底时,这里是触发内容
var nowpage=$("#nowpage").val();
var keyword=$("#keyword").val();
$.ajax({
//async:false, //请求是同步或异步 默认为true 为true时不用写
type: "POST", //设置类型
url: "/home/votelist/append",
dataType: "json",
data:{"nowpage":nowpage,"keyword":keyword},
success: function (res) {
console.log(res);
var str = "";
$.each(res,function (k,v) {
if(k==0){
$("#nowpage").val(v.nowpage);
}
var paixu = parseInt(nowpage)*10+parseInt(k)+1;
str+='<div class="col-5" >'+
'<div class="box">'+
'<img class="img-view csz-img" src="'+__ROOT__v.picture+'" alt="" />'+
'<td class="rtd"><span class="first" title="'+v.question_name+'"></span></td>'+
' <span class="no-number">NO.'+v.numberid+' | <span>第'+paixu+'名</span></span>'+
'<div class="csz-tit">'+
' <span>'+v.turename+' | </span>'+
'<span>'+v.score+'</span>'+
'</div>'+
'<a class="tou-p" id="tou-p" href="/home/votedetail/index?voteid='+v.id+'">投票</a>'+
' </div>'+
' </div>';
});
$("#clear").append(str);
},
error: function (data) {
}
});
//异步请求数据,局部刷新dom
}
}
</script>
</body>
</html>
这里去查了资料弄了一个手指下拉可以刷新的js效果 ，封装了一个模糊查询。
这里有个点是请教的，在于我们做下滑刷新也可以看成一种另类的分页，触发的条件就在下滑到屏幕底。使用append函数，然后拼接就好了，这里有个关键的点在于你怎么每次刷新都将你当前的页面数传给后台，我实在前台设置一个hidden，后台有详细代码，算是明了的。
总得来说，就是一个很简单的页面加一套展示信息加下滑刷新页面的例子，有些地方对于刚开始的我的确需要费点功夫，过了几个月贴在这里总结一番，
代码写工整，不拖拉。不然就是挖坑。