很简单的一个项目 包含注册登录以及一些ajax的基础运用。
登陆界面 命名为Login.html：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="__PUBLIC__/Style/style/js/jquery-1.9.1.js"></script> <script src="__PUBLIC__/Style/style/js/jquery-2.1.1.js"></script> <style type="text/css"> .cyc_login_bg{ width: 100%; height: 100% } .cyc_login_Mbg{ background-color:lightskyblue; height: 120px; width: 80%; margin: auto; margin-top: 40%; } </style> </head> <body> <div class="cyc_login_bg"> <div class="cyc_login_Mbg"> <div> <div> 用户名：<input type="text" placeholder="用户名" name="uid" id="uid" style="margin-top: 15px"> </div> <div> 密码： <input type="password" placeholder="密码" name="pwd" id="pwd" style="margin-top: 15px"> </div> <!--<input name="" type="text" id="yzm" placeholder="请输入验证码" style="100px;">--> <!--<img src="{:U('verify')}" onClick="this.src=this.src+'?'+Math.random();" alt=""/>--> <input type="button" value="登录" id="checkLogin" style="margin-left: 55%;margin-top: 15px; float: left;"> <a href="__CONTROLLER__/zhuce" value="注册" id="zhuce" style="margin-left: 75%;margin-top: -20px; float: left;"> 注册</a> </div> </div> </div> </body> </html> <script type="text/javascript"> $('#checkLogin').click(function () { var uid = $("#uid").val(); var pwd = $("#pwd").val(); if (uid == '' || pwd == '') { alert('请输入用户名,密码'); return; } $.ajax({ url: "{:U('Index/checkLogin')}", data: {uid:uid,pwd:pwd}, type: "POST", dataType: "TEXT", success: function (date) { if (date == 0) { alert("账号或密码错误"); return; } else if (date == 1) { alert("登入成功"); window.location.href = "{:U('Index/index')}"; } } }) }) </script>
注册页面 命名 zhuce.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="__PUBLIC__/Style/style/js/jquery-1.9.1.js"></script>
<script src="__PUBLIC__/Style/style/js/jquery-2.1.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style="margin: auto; 80%; margin-top: 40%">
用户名：<input type="text" id="uid" name="uid"><br/><br/><br/>
密码： <input type="text" id="pwd" name="pwd"><br/><br/>
<input type="button" id ="btn" name="btn" value="注册" style="margin-left: 75%">
</div>
</body>
</html>
<script type="text/javascript">
$("#btn").click(function()
{
var uid = $("#uid").val();
$.ajax({
type: "POST",
url: "__CONTROLLER__/yhyz",
data: {
uid: uid,
},
dataType: "TEXT",
success: function(msg) {
if(msg == -1) {
alert("用户名已存在");
return;
}
else{
fangfa();
}
}
});
});
function fangfa(){
var uid = $("#uid").val();
var pwd = $("#pwd").val();
if(uid == '') {
alert('请输入用户名');
return;
}
if(pwd == '') {
alert('请输入密码');
return;
}
$.ajax({
type: "POST",
url: "__CONTROLLER__/zccl",
data: {
uid: uid,pwd:pwd,
},
dataType: "TEXT",
success: function(msg) {
if(msg == 1) {
alert("注册成功");
window.location.href = "{:U('Index/login')}";
}
}
})
}
</script>
页面：
index.html
<!DOCTYPE html> <html> <head> <title>算卦！</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. "> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/lib/weui.min.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/css/jquery-weui.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/demos/css/demos.css"> <style type="text/css"> .tab1_cyc_1 { width: 100%; text-align: center; font-family: 微软雅黑; } .tab1_cyc_2 { width: 80%; height: 100%; margin: auto; margin-top: 5%;; } </style> </head> <body ontouchstart> <div class="weui-tab"> <div class="weui-tab__bd"> <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"> <div class="tab1_cyc_1"> <h1 style="margin:auto">人物简介</h1> <div class="tab1_cyc_2"> 刘树红，1969年生于高青县高城镇。因小儿麻痹症致残，自幼天赋异禀，博学强记， 深得爷爷刘心恒（当地著名风水师）的真传，在六爻卦奇门遁甲、风水堪舆、择吉 日和姓名学等领域颇有研究。1999年参加预测活电脑之称的李顺祥高端研讨班，200 1年参加新派命理学家李涵辰面授班，2017年被吸收为国际周易研究会会员；被评为 2009年度“感动淄博”人物和淄博市道德模范；现为淄博市残疾人文化联合会副主席 、淄博市文史书画研究会副主席兼易学研究部主任。 <div> </div> </div> <!--<div id="tab2" class="weui-tab__bd-item">--> <!--<h1>页面二</h1>--> <!--</div>--> <!--<!–<div id="tab3" class="weui-tab__bd-item">–>--> <!--<!–<h1>页面三</h1>–>--> <!--<!–</div>–>--> <!--<div id="tab4" class="weui-tab__bd-item">--> <!--<h1>页面3</h1>--> <!--</div>--> </div> <div class="weui-tabbar"> <a href="__CONTROLLER__/index" class="weui-tabbar__item weui-bar__item--on"> <!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>--> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_button.png" alt=""> </div> <p class="weui-tabbar__label">人物简介</p> </a> <a href="__CONTROLLER__/index2" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_msg.png" alt=""> </div> <p class="weui-tabbar__label">价目表格</p> </a> <a href="__CONTROLLER__/index3" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_cell.png" alt=""> </div> <p class="weui-tabbar__label">联系我们</p> </a> </div> </div> <script src="__PUBLIC__/Common/jqueryui/lib/jquery-2.1.4.js"></script> <script src="__PUBLIC__/Common/jqueryui/js/jquery-weui.js"></script> <script> // $("#a").select({ // title: "选择职业", // items: ["法官", "医生", "猎人", "学生", "记者", "其他"] // }); </script> </body> </html>
index2
<!DOCTYPE html> <html> <head> <title>算卦！</title> <meta charset="utf-8"> <meta http-equiv=" <td class="tab2_cyc_td">别墅风水：</td>X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. "> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/lib/weui.min.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/css/jquery-weui.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/demos/css/demos.css"> <style type="text/css"> .tab1_cyc_1 { width: 100%; height: 100%; text-align: center; font-family: 微软雅黑; } .tab1_cyc_2 { width: 100%; height: 80%; font-size: 15px; margin: auto; } .tab2_cyc_tab { width: 100%; height: 80%; } .tab2_cyc_td { width: 25%; height: 5%; border: 1px black solid; } </style> </head> <body ontouchstart> <div class="weui-tab"> <div class="weui-tab__bd"> <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"> <div class="tab1_cyc_1"> <h1 style="margin:auto">价目表格</h1> <div class="tab1_cyc_2"> <table class="tab2_cyc_tab"> <tr> <td class="tab2_cyc_td">项目</td> <td class="tab2_cyc_td">分类</td> <td class="tab2_cyc_td">定价（元）</td> <td class="tab2_cyc_td">补充说明</td> </tr> <tr> <td class="tab2_cyc_td" rowspan="2">起名</td> <td class="tab2_cyc_td">个人起名：</td> <td class="tab2_cyc_td">300-600</td> <td class="tab2_cyc_td">3-6个</td> </tr> <tr> <td class="tab2_cyc_td">企业起名：</td> <td class="tab2_cyc_td">1000-10000</td> <td class="tab2_cyc_td">按企业规模</td> </tr> <tr> <td class="tab2_cyc_td" rowspan="8">风水</td> <td class="tab2_cyc_td">家居风水：</td> <td class="tab2_cyc_td">800-10000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">2000-20000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">公司风水：</td> <td class="tab2_cyc_td">10000-50000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">厂房风水：</td> <td class="tab2_cyc_td">8000-20000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">阴宅风水：</td> <td class="tab2_cyc_td">5000-50000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">阳宅风水：</td> <td class="tab2_cyc_td">2000-20000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">商铺风水：</td> <td class="tab2_cyc_td">1000-20000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">楼盘风水：</td> <td class="tab2_cyc_td">10000-100000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td" rowspan="4">预测</td> <td class="tab2_cyc_td">奇门占卜：</td> <td class="tab2_cyc_td"></td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">六爻占卜：</td> <td class="tab2_cyc_td">100-600</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">测字占卜：</td> <td class="tab2_cyc_td">100-600</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">解梦：</td> <td class="tab2_cyc_td">100-600</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td" rowspan="9">择日</td> <td class="tab2_cyc_td">嫁娶择日：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">会客经商：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">破土动工：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">丧葬择日：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">安神择日：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">合同签约：</td> <td class="tab2_cyc_td">600-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">出行择日：</td> <td class="tab2_cyc_td">300-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">搬迁择日：</td> <td class="tab2_cyc_td">200-1000</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">择日剖妇产：</td> <td class="tab2_cyc_td">600-1200</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td" rowspan="4">道场</td> <td class="tab2_cyc_td">开锁子：</td> <td class="tab2_cyc_td">3000-</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">安镇宅舍：</td> <td class="tab2_cyc_td">5000-</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">送替身：</td> <td class="tab2_cyc_td">3000-</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">安神开光：</td> <td class="tab2_cyc_td">3000-20000</td> <td class="tab2_cyc_td"></td> </tr> </table> <div> </div> </div> </div> <div class="weui-tabbar"> <a href="__CONTROLLER__/index" class="weui-tabbar__item weui-bar__item--on"> <!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>--> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_button.png" alt=""> </div> <p class="weui-tabbar__label">人物简介</p> </a> <a href="__CONTROLLER__/index2" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_msg.png" alt=""> </div> <p class="weui-tabbar__label">价目表格</p> </a> <a href="__CONTROLLER__/index3" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos//images/icon_nav_cell.png" alt=""> </div> <p class="weui-tabbar__label">联系我们</p> </a> </div> <script src="__PUBLIC__/Common/jqueryui/lib/jquery-2.1.4.js"></script> <script src="__PUBLIC__/Common/jqueryui/js/jquery-weui.js"></script> <script> // $("#a").select({ // title: "选择职业", // items: ["法官", "医生", "猎人", "学生", "记者", "其他"] // }); </script> </body> </html>
index3:
<!DOCTYPE html> <html> <head> <title>算卦！</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. "> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/lib/weui.min.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/css/jquery-weui.css"> <link rel="stylesheet" href="__PUBLIC__/Common/jqueryui/demos/css/demos.css"> <style type="text/css"> .tab1_cyc_1 { width: 100%; height: 100%; font-family: 微软雅黑; } .tab3_cyc_1 { width: 100%; height: 45%; font-size: 15px; margin: auto; } .tab3_cyc_tab { width: 100%; height: 50%; text-align: center; margin: auto; } .tab2_cyc_td { width: 30%; height: 15%; border: 1px black solid; } .tab3_cyc_h1 { text-align: center; } </style> </head> <body ontouchstart> <div class="weui-tab"> <div class="weui-tab__bd"> <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"> <div class="tab1_cyc_1"> <div class="tab3_cyc_h1"> <h1>联系我们</h1> </div> <div class="tab3_cyc_1"> <table class="tab3_cyc_tab"> <tr> <td class="tab2_cyc_td" rowspan="9">个人详细信息</td> <td class="tab2_cyc_td">姓名：</td> <td class="tab2_cyc_td">刘树红</td> </tr> <tr> <td class="tab2_cyc_td">网上称呼：</td> <td class="tab2_cyc_td">弘易居士</td> </tr> <tr> <td class="tab2_cyc_td">电话：</td> <td class="tab2_cyc_td">13386437032</td> </tr> <tr> <td class="tab2_cyc_td">手机：</td> <td class="tab2_cyc_td">13386437032</td> </tr> <tr> <td class="tab2_cyc_td">地址：</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">QQ：</td> <td class="tab2_cyc_td">297402672</td> </tr> <tr> <td class="tab2_cyc_td">邮箱：</td> <td class="tab2_cyc_td">shys688@163.com</td> </tr> <tr> <td class="tab2_cyc_td">个人网站：</td> <td class="tab2_cyc_td"></td> </tr> <tr> <td class="tab2_cyc_td">银行账户：</td> <td class="tab2_cyc_td">农行：6228480288731692076</td> </tr> </table> </div> <div style=" 100%; height: 30%;text-align: center;position: relative; margin-top: 8%"> <h2>扫描二维码加微信</h2> <img src="__PUBLIC__/Suan/images/weixin.jpg" style=" 28%;margin: auto;"> </div> </div> </div> </div> <div class="weui-tabbar"> <a href="__CONTROLLER__/index" class="weui-tabbar__item weui-bar__item--on"> <!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>--> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_button.png" alt=""> </div> <p class="weui-tabbar__label">人物简介</p> </a> <a href="__CONTROLLER__/index2" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos/images/icon_nav_msg.png" alt=""> </div> <p class="weui-tabbar__label">价目表格</p> </a> <a href="__CONTROLLER__/index3" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="__PUBLIC__/Common/jqueryui/demos//images/icon_nav_cell.png" alt=""> </div> <p class="weui-tabbar__label">联系我们</p> </a> </div> </div> </body> <script src="__PUBLIC__/Common/jqueryui/lib/jquery-2.1.4.js"></script> <script src="__PUBLIC__/Common/jqueryui/js/jquery-weui.js"></script> </html>
控制器 命名Index：
<?php namespace SuanController; use ThinkController; class IndexController extends Controller { /* _ooOoo_ o8888888o 88" . "88 (| -_- |) O = /O ____/`---'\____ .' \| |// `. / \||| : |||// / _||||| -:- |||||- | | \ - /// | | | \_| ''---/'' | | .-\__ `-` ___/-. / ___`. .' /--.-- `. . __ ."" '< `.___\_<|>_/___.' >'"". | | : `- \`.;` _ /`;.`/ - ` : | | `-. \_ __ /__ _/ .-` / / ======`-.____`-.___\_____/___.-`____.-'====== `=---=' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 佛祖保佑 永无BUG */ public function index(){ $this->display(); } public function index1(){ $this->display(); } public function index2(){ $this->display(); } public function login(){ $this->display(); } public function checkLogin() { $uid = I('post.uid'); $pwd = I('post.pwd'); $AAA = M('user')->field('pwd')->where("uid = '{$uid}'")->find(); if ($AAA['pwd'] == $pwd) { $this->ajaxReturn(1); } else { $this->ajaxReturn(0); } } public function zhuce(){ $this->display(); } public function yhyz() { $uid = I('post.uid'); $cxsl = M('user')->where("uid = '{$uid}'")->count(); if($cxsl>=1) { $this->ajaxReturn(-1); } else if($cxsl==0) { $this->ajaxReturn(1); } } public function zccl(){ $user = M("user"); $data['uid'] = I('post.uid'); $data['pwd'] = I('post.pwd'); $uid = I('post.uid'); $pwd = I('post.pwd'); if($uid != "" && $pwd != ""){ $user->data($data)->add(); } $this->ajaxReturn(1); } }
ok 完成。