thinkphp3.2.1入门之--简单案例实现时间：2014-10-8 10:06:03 作者：okrs 来源：OKRS.CN 查看：167 评论：1 内容摘要：以实现了页面展示包括动态展示大学图片、大学简介、用户评分、用户关注、用户登录 以实现了页面展示包括动态展示大学图片、大学简介、用户评分、用户关注、用户登录
index控制器：/web/App/Home/Controller/IndexController.class.php
<pre name="code" class="php"><?php
/*
* 该部分主要作用是生成大学页面，展示大学信息以及用户评分 关注 留言公共展示，主要： 1.根据url输入参数动态生成大学信息，包括大学图片以及简介等，并将变量输出到对应html模板 2.网站入口页面(首页)index.html关联
*/
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index() {
// $this->show ( 'F:\web\App\Home\Controller\index（控制器）\index方法' );
// 网站首页模板使用，index.html
$this->display ();
}
public function univpage($id) {
//用户登录状态查看 登录为1，未登录为0
session_start ();
$user_id = $_SESSION ["user_id"];
if ($user_id==null) {
$user_state=0;
}
else {
$user_state=1;
}
$this->user_state = $user_state;
// 根据输入id显示学校图片
// 图片路径
$picpath = '/images/' . $id . '.jpg';
// 进行模板变量赋值
$this->picpath = $picpath;
$this->univ_id = $id;
// 实例化模型
$Univ = M ( 'univ_basic_info' );
// 查找相关符合条件字段，使用数组默认为and关系，可添加'_logic'=>'or' 改为或
// 如果getField方法传入多个字段名称的话，默认返回一个关联数组(数组中包含数组)，以第一个字段的值为索引
$result = $Univ->where ( array (
'univ_id' => $id
) )->getField ( 'univ_introduce,interest_num,review_num' );
// dump($result);
// 读取数组第一个元素（也就是所有需要元素）
$result = current ( $result );
// dump($result);
$interest_num = $result ["interest_num"];
$univ_introduce = $result ["univ_introduce"];
$review_num = $result ["review_num"];
// echo $univ_introduce;
//用户登录表单控制器方法url
$login_url=U('Userinfo/login_submit');
// 将变量映射到html模板
$this->univ_introduce = $univ_introduce;
$this->interest_num = $interest_num;
$this->review_num = $review_num;
$this->login_url= $login_url;
$this->display ();
}
public function interest() {
// $this->show ( 'F:\web\App\Home\Controller\index（控制器）\index方法' );
$this->display ();
}
public function login() {
// $this->show ( 'F:\web\App\Home\Controller\index（控制器）\index方法' );
$this->display ();
}
}
展示模板：/web/App/Home/View/Index/univpage.html
<!-- 大学页面，展示大学相关信息 -->
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/App/Home/View/Index/review.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="uniinfo" id="uniinfo">
hello, {$picpath}! <img src={$picpath} height="200" width="288">
</br> hello, {$univ_introduce}!</br> 关注人数：{$interest_num}</br> 评分人数：{$review_num}</br>
用户状态：{$user_state}
<!-- 将从控制器方法传递来的变量在js标签当中复制，使得js可以方便调用 -->
<script>
var univ_id = {$univ_id};
/* alert(univ_id); 可以直接在相关的js及ajax调用*/
//用户登录状态参数 js判断此参数弹出登陆界面
var user_state={$user_state};
</script>
</div>
<!-- 用户评分部分 -->
<div class="background" id="background">
<div class="mainContent" id="mainContent">
<div class="gen3">
<div class="shop-rating">
<span class="title">感觉怎么样？</span>
<ul class="rating-level" id="stars2">
<li><a href="javascript:void(0);" class="one-star" value="20">20</a></li>
<li><a href="javascript:void(0);" class="two-stars"
value="40">40</a></li>
<li><a href="javascript:void(0);" class="three-stars"
value="60">60</a></li>
<li><a href="javascript:void(0);" class="four-stars"
value="80">80</a></li>
<li><a href="javascript:void(0);" class="five-stars"
value="100">100</a></li>
</ul>
<span id="stars2-tips" class="result"></span> <input type="hidden"
id="stars2-input" name="b" value="" size="2">
</div>
<!-- 引入js文件 -->
<script language="javascript" type="text/javascript"
src="/App/Home/View/Index/review.js"></script>
</div>
</div>
<!-- 点击用户关注-->
<!-- 首先判断用户是否登录 没有登录则弹出登录对话框-->
<div class="interest_button" id="interest_button">
<button type="button" onclick="loadXMLDoc()">关注</button>
<input type="button" onclick="popup_show()" value='登录' />
</div>
<!-- 没有登录弹出对话框 -->
<!-- 引入弹出登录对话框相关js 和css -->
<link rel="stylesheet" type="text/css"
href="/App/Home/View/Index/login_box.css">
<script language="javascript" type="text/javascript"
src="/App/Home/View/Index/login_box.js"></script>
<!-- <include file="Index/login" /> -->
<div class="sample_popup" id="popup"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag">您好，请先登录：</div>
<div class="menu_form_body">
<form action={$login_url} method="get">
<table>
<tr>
<th>Username:</th>
<td><input class="field" type="text" name="user_name"
onfocus="select();" /></td>
</tr>
<tr>
<th>Password:</th>
<td><input class="field" type="password"
name="user_password" onfocus="select();" /></td>
</tr>
<tr>
<th></th>
<td><input class="btn" type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</div>
<!-- 用户关注状态展示 -->
<div id="interest_state"></div>
<script language="javascript" type="text/javascript"
src="/App/Home/View/Index/interest.js"></script>
</body>
</html>
控制五星评分的js+css+php
js:/web/App/Home/View/Index/review.js
var TB = function() {
/*
* 该函数为ajax函数 主要是对实现用户点击评分五星，实现对大学评分
* 1.对浏览器进行判断
* 2.用户点击调用review.php脚本
* 3.传递参数
* */
// alert(univ_id)；
var T$ = function(id) {
return document.getElementById(id)
}
var T$$ = function(r, t) {
return (r || document).getElementsByTagName(t)
}
var Stars = function(cid, rid, hid, config) {
var lis = T$$(T$(cid), 'li'), curA;
for ( var i = 0, len = lis.length; i < len; i++) {
lis[i]._val = i;
lis[i].onclick = function() {
// 用户点击五角星时生成相应的分数
score = T$$(this, 'a')[0].getAttribute('value');
T$(rid).innerHTML = '<em>' + (T$(hid).value = score)
+ '分</em> - ' + config.info[this._val];
curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];
// ajax传递变量至php 保存到mysql
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,
// Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 执行数据库操作php脚本
// 注意此处url变量输入只能够使用？不能使用/
var url = "/App/Home/View/Index/review.php?score=" + score
+ "&univ_id=" + univ_id;
//alert(url);// 检验js传值是否成功
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
lis[i].onmouseout = function() {
curA && (curA.className += config.curcss);
}
lis[i].onmouseover = function() {
curA
&& (curA.className = curA.className.replace(
config.curcss, ''));
}
}
};
return {
Stars : Stars
}
}().Stars('stars2', 'stars2-tips', 'stars2-input', {
'info' : [ '极差', '不怎么好', '一般吧', '不错', '非常好' ],
'curcss' : ' current-rating',
'step' : 20
});
css:/web/App/Home/View/Index/review.css
ul,li {
margin: 0;
padding: 0;
border: 0;
}
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0;
position: relative;
z-index: 999;
font: 12px Arial;
color: #000;
line-height: 1.2em;
}
.shop-rating span {
height: 23px;
display: block;
line-height: 23px;
float: left;
}
.shop-rating span.title {
width: 125px;
text-align: right;
margin-right: 5px;
}
.shop-rating ul {
float: left;
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.rating-level,.rating-level a {
background: url(/images/o_star.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.rating-level li {
display: inline;
}
.rating-level a {
line-height: 23px;
height: 23px;
position: absolute;
top: 0px;
left: 0px;
text-indent: -999em;
*zoom: 1;
outline: none;
}
.rating-level a.one-star {
width: 20%;
z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
width: 60%;
z-index: 4;
}
.rating-level a.four-stars {
width: 80%;
z-index: 3;
}
.rating-level a.five-stars {
width: 100%;
z-index: 2;
}
.rating-level .current-rating,.rating-level a:hover {
background-position: 0 -28px
}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating
{
background-position: 0 -116px;
}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating
{
background-position: 0 -28px;
}
用户关注写入数据库的原生php脚本（js ajax如何调用thinkphp方法还未明了）
/web/App/Home/View/Index/review.php
<?php
/*
* 该部分主要是用户点击五星评分之后，将操作保存如数据库，主要包括：
* 1.获取js ajax传递过来的univ_id 以及分数score参数
* 2.univ_basic_info中增加用户评分数量
* 3.univ_basic_info计算用户评分平均分数
* */
//获取传递过来的变量分数score和大学id
$score = $_GET ["score"];
echo $score;
$id = $_GET ["univ_id"];
//连接数据库
include_once '/web/cnn.php';
mysql_select_db ( "univinfo", $con );
//更新数据库，并计算平均值
$sql = "UPDATE univ_basic_info SET review_num =review_num+1,average_score=('".$score."'
+(review_num-1)*average_score)/review_num WHERE univ_id ='" . $id . "'";
mysql_query ( $sql );
mysql_close ( $con );
控制用户登录对话框弹出的js+css
js
/web/App/Home/View/Index/login_box.js
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x) {
var win = window.open();
for ( var i in x)
win.document.write(i + ' = ' + x[i] + '<br>');
}
function popup_mousedown(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
if (ie && window.event.button != 1)
return;
if (!ie && e.button != 0)
return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else
popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else
document.onmousedown = new Function("return false;");
}
function popup_mousemove(e) {
if (!popup_dragging)
return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
element.style.left = (element.offsetLeft + mouseX - popup_mouseX) + 'px';
element.style.top = (element.offsetTop + mouseY - popup_mouseY) + 'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
function popup_mouseup(e) {
if (!popup_dragging)
return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else
document.onmousedown = popup_oldfunction;
}
function popup_exit(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
function popup_show() {
//alert('wewe');
//用过用户登录状态参数为0，表示没有登录则弹出登录窗口
if (user_state == 0) {
element = document.getElementById('popup');
drag_element = document.getElementById('popup_drag');
exit_element = document.getElementById('popup_exit');
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft
+ popup_mouseposX - 10)
+ 'px';
element.style.top = (document.documentElement.scrollTop
+ popup_mouseposY - 10)
+ 'px';
drag_element['target'] = 'popup';
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
}
function popup_mousepos(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else
document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else
document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else
document.addEventListener('mouseup', popup_mouseup, false);
css:
/web/App/Home/View/Index/login_box.css
@CHARSET "UTF-8";
div.sample_popup {
z-index: +1;
}
div.menu_form_header {
cursor: move
}
div.sample_popup div.menu_form_header {
border: 1px solid black;
border-bottom: 0px;
cursor: default;
width: 200px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('jscss/demoimg/200904/20title.png')
no-repeat;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
font-size: 13px;
color: #206040;
}
div.sample_popup div.menu_form_body {
border: 1px solid black;
width: 200px;
background: url('jscss/demoimg/200904/logbg.png')
no-repeat left bottom;
}
div.sample_popup img.menu_form_exit {
float: right;
margin: 4px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup table {
border-collapse: collapse;
width: 100%;
}
div.sample_popup th {
width: 1%;
padding: 0px 5px 1px 0px;
text-align: left;
font-family: "Times New Roman", Serif;
font-weight: 900;
font-size: 13px;
color: #004060;
}
div.sample_popup td {
width: 99%;
padding: 0px 0px 1px 0px;
}
div.sample_popup form {
margin: 0px;
padding: 8px 10px 10px 10px;
}
div.sample_popup input.field {
border: 1px solid #808080;
width: 95%;
font-family: Arial, Sans-Serif;
font-size: 12px;
}
div.sample_popup input.btn {
margin-top: 2px;
border: 1px solid #808080;
background-color: #DDFFDD;
font-family: Verdana, Sans-Serif;
font-size: 11px;
}
a {
color: #FF0000;
text-decoration: none;
}
用户点击关注js+php
js /web/App/Home/View/Index/interest.js
function loadXMLDoc()
/*
* 该函数为ajax函数 主要是对实现用户点击关注按钮，实现对大学关注
* 1.对浏览器进行判断
* 2.用户点击调用interest.php脚本
* 3.传递参数
* 4.判断用户是否登录，如果没有登录则弹出登录界面
* */
{
if (user_state==0)
{
// alert("请先登录");
//调用login_box.js当中的方法 统一页面直接调用
popup_show();
}
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("interest_state").innerHTML=xmlhttp.responseText;
}
}
//xmlhttp.open("GET","/App/Home/View/Index/js.txt",true);
//var url = "/App/Home/View/Index/interest.php?univ_id=" + univ_id;
var url = "/App/Home/View/Index/interest.php?univ_id=" + univ_id;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
用户关注操作写入数据库php
/web/App/Home/View/Index/interest.php
<?php
/*
* 该部分主要是用户点击页面关注按钮之后，将操作保存如数据库，主要包括： 1.获取js ajax interest.js文件传递过来的大学id参数 2.从session当中判断用户是否登录 3.从seesion当中获取登录用户的id 4.向univ_user_interest添加关注对应数据 5.修改univ_basic_info中大学用户关注数目
*/
// session获取参数
session_start ();
$user_id = $_SESSION ["user_id"];
$univ_id = $_GET ["univ_id"];
// 连接数据库
include_once '/web/cnn.php';
$sql = "SELECT count(*) as count FROM univ_user_interest WHERE univ_id ='" . $univ_id . "'and user_id='" . $user_id . "'";
$result = mysql_query ( $sql );
$row = mysql_fetch_array ( $result );
$ifexist = $row ['count'];
// echo $ifexist;
// 判断用户是否已经关注，如果没有则进行关注
if ($ifexist != 0) {
echo "您已经关注";
} else {
// 添加判断语句 判断where(user_id=$user_id, univ_id=$univ_id)是否已
// 经存在 不存在将用户关注信息添加到数据库
$sql = "INSERT INTO univ_user_interest (user_id, univ_id)
VALUES ('" . $user_id . "', '" . $univ_id . "')";
echo "关注成功";
mysql_query ( $sql );
// 数据表univ_basic_info 当中的关注数量interest_num增加1
$sql = "UPDATE univ_basic_info SET interest_num =interest_num+1 WHERE univ_id ='" . $univ_id . "'";
mysql_query ( $sql );
}
// 断开数据库连接
mysql_close ( $con ); |
|
|
