留言板首页显示

最新推荐文章于 2022-06-17 12:41:26 发布

qq_25577301

最新推荐文章于 2022-06-17 12:41:26 发布

阅读量1.1k

点赞数

分类专栏： php

本文链接：https://blog.youkuaiyun.com/qq_25577301/article/details/52735843

版权

php 专栏收录该内容

19 篇文章

订阅专栏

今天让我们用写的简易框架来做一个留言板。首先有一个漂亮的留言页面，然后需要在数据库中建立一个表。字段如下：

然后加入几条数据。我们一会在首页把它显示出来。在框架中建立一个MessageController控制器。在模型文件目录中建立一个Message.php。在视图目录下也建立一个message目录，在message目录中建立一个index.php文件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<link href="public/js/Dialog/skin/default.css" rel="stylesheet" />
	<script src="public/js/jquery.js"></script>
	<script src="public/js/Dialog/artDialog.basic.js"></script>
	<style>
		.header{background-color: black;width:%100;height:50px;text-align: center;color:white;line-height:50px;}
		.content{
			width:%100;
			margin:20px;
		}
		.one{
			display: inline-block;
			width:300px;
			height:200px;
			border:1px solid black;
			clear:both;

		}
		.left{
			width:180px;
			padding:10px;
			float:left;
			word-wrap:break-word;
			word-break:break-all;

          
		}
		.left blockquote p{
			font-family:"微软雅黑","黑体","宋体";
      		font-size:12px;
			text-indent: 2em; 
			width:180px; 
			height:65px;
			overflow: hidden;

		}
		.right{
			width:10px;
			height:200px;
			background-color:black;
			float:right;
		}
		cite{
			width:;
		}
	</style>
</head>
<body>
	<div class="header">
		欢迎来到我的留言板
	</div>
	<div class="content">
		{% for item in data %}
			<div class="one" id="{{ item.id }}">
			<div class="left">
				<h4>{{ item.title }}</h4>
				<blockquote><p>{{ item.content }}</p><small><cite>{{ item.addtime }}</cite></small></blockquote>
			</div>
			<div class="right"></div>
			</div>
		{% endfor %}
	</div>
</body>
</html>
<script type="text/javascript">
	$('.one').on('click',function(){
		var id = $(this).attr('id');
		//查询数据库
		$.ajax({
     		'type': 'POST',

     		'url': "index.php?c=message&a=getOne&id="+id,

    		'data':'',

    		success: function(msg){
    			eval("var data="+msg);
    			var dialog = art.dialog({
    				title: '我是对话框',
    				content: '我是初始化的内容'
				});
      
				dialog.content(data.content).title(data.title);
    		}

		});
	})
</script>

首先我们获取所有的数据显示在留言首页。