以下代码可以去https://github.com/x-hansong/bidoubbs下载
由于这个是针对手机开发的论坛,首先,我使用的是jquery mobile框架,也就是前端的元素,不了解的可以去jQuery Mobile 教程入门一下.此外,针对手机页面的特点,我们不能像电脑页面一样用富文本编辑器,只能用普通的输入框.所以我们的前端只需要有一个标题输入框,一个文本输入框,一个单选按钮,一个图片上传控件,一个提交按钮就够了.
注意:虽然我用的是jquery mobile,但是这个框架有点不成熟,它默认用ajax加载所有页面,每次切换页面并没有加载其他页面的全部内容,只加载page内的内容,也就是说如果你的js写在head标签内,就不能使用,因为并没有被加载,这个问题也是困扰我很久.后来解决办法是将js写在首页,因为首页(第一个打开的网页)的内容是全部加载的.然后我用的是最新的1.4.3,把js写在page内就会导致页面无法打开.反正就是各种麻烦.还有就是表单提交要注意把ajax关掉,不然无法实现跳转.
为什么jquery mobile这么麻烦我还要用呢,因为一开始用的时候只发现它的优点--简单,界面设计好看.后来发现这些问题已经是开发了一大半了,就继续用下去了.当然了,这个框架用熟悉了还是比较好用的,只是对于初学者来说要学的东西就更多了.现在我也明白了为什么有人说初学者不要用框架,用原始的东西最好.因为框架浓缩了别人的思想精华,但是里面涉及到很多的基础知识,作为初学者去用难免有些地方不理解.本来用框架是为了提高开发效率,最后因为框架的使用反而降低了效率.说了这么多,用不用框架也是见仁见智.下面的前端代码我是使用了jquery mobile来写的,可以用普通的html代码替代.
我的代码结构是这样的,用一个templates文件夹存放前端的代码,根目录存放后台代码.然后用include语句把前端和后台的代码连接到一起.其实写在一个文件里面也是一样的效果,只是分开写比较直观,容易管理.
首先贴出前端代码:
templates/create.php
<!DOCTYPE html>
<html>
<head>
<?php header("Content-type: text/html; charset=utf-8"); ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div data-role="page" id="create">
<div data-role="header">
<a href="index.php" class="ui-btn-left ui-icon-back ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left " data-rel="back" >返回</a>
<h1>发布逗贴</h1>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["REQUEST_URI"]);?>" method="post"
data-ajax="false" >
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="fullname">标题</label>
<input type="text" name="title" id="title">
</li>
<li class="ui-field-contain">
<label for="bday">内容</label>
<textarea placeholder="请输入帖子内容..." name="content" id="editor" ></textarea>
</li>
<li class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择分类：</legend>
<?php
foreach ($category as $id => $name) {
echo '<label for="',$id,'">',$name,'</label>
<input type="radio" name="classic" id="',$id,'" value="',$name,'">';
}
?>
</fieldset>
</li>
<li class="ui-field-contain">
<input type="submit" value="提交">
</li>
</ul>
</form>
<p><?php echo $error ?></p>
</div>
</body>上面代码是典型的html+php混编.这一节内容有点多,分为两节来讲.下一篇将介绍后台的数据操作及调试工具.