网站开发（十一）实战后台首页管理和文章管理
2017-08-17 13:07
615 查看
首页管理和文章管理的增删改和前面制作的栏目管理基本步骤都是相同的，所以这篇文章算是实战类
在left.html中给它们的href加上代码:
两个文件夹与Cate文件夹内容一样，基本内容也一样，只是有些命名和个别模块需要变换
以上是First和Article的前端代码
接下就需要写First和Article的控制器（同样和Cate控制器同级创建）
注意首页管理有上传图片的操作
php代码和前端代码是需要注意的
完成了前端的增删改，数据库建表，控制器php，就完成了整个模块
最后还有一点就是图片的上传位置，是上传到了更目录下的自动生成Uploads文件夹下，如果没有自动生成，就先在First控制器下的add函数中写上代码
dump($data);die();
然后执行之后再将代码注释就ok了
两个模块的增删改实战就这些
后台首页管理效果
后台文章管理效果
一、添加动态超链接
先给首页管理和文章管理添加动态超链接，添加方式和栏目管理一样在left.html中给它们的href加上代码:
href="__ MODULE __/First/lst"
href="__MODULE__/Article/lst"
二、创建First和Article文件夹（与Cate文件夹同级）
两个文件夹与Cate文件夹内容一样，基本内容也一样，只是有些命名和个别模块需要变换
1、First下edit.html,add,lst代码
add
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/jscss/admin/design/">作品管理</a><span class="crumb-step">></span><span>新增首页</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th><i class="require-red">*</i>栏目标题：</th>
<td>
<input class="common-text required" id="title" name="f_title" size="50" value="" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>缩略图：</th>
<td>
20000
<input name="f_pic" id="" type="file"><!--<input type="submit" onclick="submitForm('/jscss/admin/design/upload')" value="上传图片"/>--></td>
</tr>
<tr>
<th>内容：</th>
<td><textarea name="f_content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>edit
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/jscss/admin/design/">作品管理</a><span class="crumb-step">></span><span>修改栏目</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
<input type="hidden" name="f_id" value="{$firsts.f_id}">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th><i class="require-red">*</i>栏目标题：</th>
<td>
<input class="common-text required" id="title" name="f_title" size="50" value="{$firsts.f_title}" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>缩略图：</th>
<td><input name="f_pic" id="" type="file">
<if condition="$firsts['f_pic'] neq null">
<img src="__ROOT__{$firsts.f_pic}" height="30" />
<else/>
暂无图片
</if>
</td>
</tr>
<tr>
<th>内容：</th>
<td><textarea name="f_content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10">{$firsts.f_content}</textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>lst
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin">首页</a><span class="crumb-step">></span><span class="crumb-name">首页文章管理</span></div>
</div>
<div class="search-wrap">
<div class="search-content">
<form action="/jscss/admin/design/index" method="post">
<table class="search-tab">
<tr>
<th width="120">选择分类:</th>
<td>
<select name="search-sort" id="">
<option value="">全部</option>
<option value="19">精品界面</option><option value="20">推荐界面</option>
</select>
</td>
<th width="70">关键字:</th>
<td><input class="common-text" placeholder="关键字" name="keywords" value="" id="" type="text"></td>
<td><input class="btn btn-primary btn2" name="sub" value="查询" type="submit"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="result-wrap">
<form name="myform" id="myform" method="post">
<div class="result-title">
<div class="result-list">
<a href="__CONTROLLER__/add"><i class="icon-font"></i>新增文章</a>
<a id="batchDel" href="javascript:void(0)"><i class="icon-font"></i>批量删除</a>
<a id="updateOrd" href="javascript:void(0)"><i class="icon-font"></i>更新排序</a>
</div>
</div>
<div class="result-content">
<table class="result-tab" width="100%">
<tr>
<th>ID</th>
<th>标题</th>
<th>图片</th>
<th>操作</th>
</tr>
<volist name="firsts" id="vo">
<tr>
<td>{$vo.f_id}</td>
<td>{$vo.f_title}</td>
<td>
<if condition="$vo['f_pic'] neq null"><!-- neq意味不等于，null为空 -->
<img src="__ROOT__{$vo.f_pic}" height="30">
<else/>
暂无图片
</if>
</td>
<td>
<a class="link-update" href="__CONTROLLER__/edit/id/{$vo.f_id}">修改</a>
<a class="link-del" href="__CONTROLLER__/del/id/{$vo.f_id}" onclick="return confirm('你要删除栏目{$vo.f_title}吗?');">删除</a>
</td>
</tr>
</volist>
</table>
<div class="list-page"> 2 条 1/1 页</div>
</div>
</form>
</div>
</div>
<!--/main-->
</div>
</body>
</html>
2、Article下edit.html,add,lst代码
add
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/jscss/admin/design/">作品管理</a><span class="crumb-step">></span><span>新增首页</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th><i class="require-red">*</i>栏目标题：</th>
<td>
<input class="common-text required" id="title" name="a_title" size="50" value="" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>是否推荐：</th>
<td>
<input class="common-text required" id="title" name="a_rem" size="50" value="1" type="checkbox">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>缩略图：</th>
<td><input name="a_pic" id="" type="file"><!--<input type="submit" onclick="submitForm('/jscss/admin/design/upload')" value="上传图片"/>--></td>
</tr>
<tr>
<th>内容：</th>
<td><textarea name="a_content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>edit
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/jscss/admin/design/">作品管理</a><span class="crumb-step">></span><span>修改栏目</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
<input type="hidden" name="a_id" value="{$articles.a_id}">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th><i class="require-red">*</i>栏目标题：</th>
<td>
<input class="common-text required" id="title" name="a_title" size="50" value="{$articles.a_title}" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>是否推荐：</th>
<td>
<input class="common-text required" id="title" name="a_rem" size="50" value="1" type="checkbox" <if condition="$articles['a_rem'] eq 1">
checked="checked"</if>>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>缩略图：</th>
<td><input name="a_pic" id="" type="file">
<if condition="$articles['a_pic'] neq null">
<img src="__ROOT__{$articles.a_pic}" height="30" />
<else/>
暂无图片
</if>
</td>
</tr>
<tr>
<th>内容：</th>
<td><textarea name="a_content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10">{$articles.a_content}</textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>lst
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<include file="Common:header"/>
<include file="Common:left"/>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin">首页</a><span class="crumb-step">></span><span class="crumb-name">首页文章管理</span></div>
</div>
<div class="search-wrap">
<div class="search-content">
<form action="/jscss/admin/design/index" method="post">
<table class="search-tab">
<tr>
<th width="120">选择分类:</th>
<td>
<select name="search-sort" id="">
<option value="">全部</option>
<option value="19">精品界面</option><option value="20">推荐界面</option>
</select>
</td>
<th width="70">关键字:</th>
<td><input class="common-text" placeholder="关键字" name="keywords" value="" id="" type="text"></td>
<td><input class="btn btn-primary btn2" name="sub" value="查询" type="submit"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="result-wrap">
<form name="myform" id="myform" method="post">
<div class="result-title">
<div class="result-list">
<a href="__CONTROLLER__/add"><i class="icon-font"></i>新增文章</a>
<a id="batchDel" href="javascript:void(0)"><i class="icon-font"></i>批量删除</a>
<a id="updateOrd" href="javascript:void(0)"><i class="icon-font"></i>更新排序</a>
</div>
</div>
<div class="result-content">
<table class="result-tab" width="100%">
<tr>
<th>ID</th>
<th>标题</th>
<th>图片</th>
<th>是否推荐</th>
<th>操作</th>
</tr>
<volist name="articles" id="vo">
<tr>
<td>{$vo.a_id}</td>
<td>{$vo.a_title}</td>
<td>
<if condition="$vo['a_pic'] neq null"><!-- neq意味不等于，null为空 -->
<img src="__ROOT__{$vo.a_pic}" height="30">
<else/>
暂无图片
</if>
</td>
<td>
<if condition="$vo['a_rem'] eq 1">
<span style="color: red;">已推荐</span>
<else/>
未推荐
</if>
</td>
<td>
<a class="link-update" href="__CONTROLLER__/edit/id/{$vo.a_id}">修改</a>
<a class="link-del" href="__CONTROLLER__/del/id/{$vo.a_id}" onclick="return confirm('你要删除栏目{$vo.a_title}吗?');">删除</a>
</td>
</tr>
</volist>
</table>
<div class="list-page"> 2 条 1/1 页</div>
</div>
</form>
</div>
</div>
<!--/main-->
</div>
</body>
</html>以上是First和Article的前端代码
接下就需要写First和Article的控制器（同样和Cate控制器同级创建）
三、添加数据库
1.First数据表
2.Article数据表
四、写First和Article控制器
First控制器
<?php
namespace Admin\Controller;
use Think\Controller;
class FirstController extends Controller {
public function lst(){
$first=D('first');
$firsts=$first->select();
$this->assign('firsts',$firsts);//分配数据
$this->display();
}
public function add(){
$first=D('first');
if(IS_POST){
$data['f_title']=I('f_title');
$data['f_content']=I('f_content');
$data['time']=time();
//上传图片
if ($_FILES['f_pic']['tmp_name']!='') {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './Uploads/'; // 设置附件上传（子）目录
$upload->rootPath = './'; // 设置附件上传根目录
$info=$upload->uploadOne($_FILES['f_pic']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$data['f_pic']=$info['savepath'].$info['savename'];//article_pic 为数据库字段
}
}
//dump($data);die();
if($first->create($data))
{
if($first->add()){
$this->success('新增首页文章成功',U(lst));
}else{
$this->error('新增文章首页失败');
}
}
else{
$this->error($first->getError());
}
return;
}
$this->display();
}
public function edit(){
$first=D('first');
if(IS_POST){
$data['f_id']=I('f_id');
$data['f_title']=I('f_title');
$data['f_content']=I('f_content');
$data['time']=time();
//上传图片
if ($_FILES['f_pic']['tmp_name']!='') {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './Uploads/'; // 设置附件上传（子）目录
$upload->rootPath = './'; // 设置附件上传根目录
$info=$upload->uploadOne($_FILES['f_pic']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$data['f_pic']=$info['savepath'].$info['savename'];//article_pic 为数据库字段
}
}
//dump($data);die();
if($first->create($data))
{
if($first->save()){
$this->success('修改首页文章成功',U(lst));
}else{
$this->error('修改文章首页失败');
}
}
else{
$this->error($first->getError());
}
return;
}
$firstid=I('id');
$firsts=$first->find($firstid);
$this->assign('firsts',$firsts);
$this->display();
}
public function del(){
$first=D('first');
if($first->delete(I('id'))){
$this->success('删除首页文章成功',U(lst));
}
else{
$this->error('删除首页文章失败');
}
}
}Article控制器
<?php
namespace Admin\Controller;
use Think\Controller;
class ArticleController extends Controller {
public function lst(){
$article=D('article');
$articles=$article->select();
$this->assign('articles',$articles);//分配数据
$this->display();
}
public function add(){
$article=D('article');
if(IS_POST){
$data['a_title']=I('a_title');
$data['a_rem']=I('a_rem');
$data['a_content']=I('a_content');
$data['time']=time();
//上传图片
if ($_FILES['a_pic']['tmp_name']!='') {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './Uploads/'; // 设置附件上传（子）目录
$upload->rootPath = './'; // 设置附件上传根目录
$info=$upload->uploadOne($_FILES['a_pic']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$data['a_pic']=$info['savepath'].$info['savename'];//article_pic 为数据库字段
}
}
//dump($data);die();
if($article->create($data))
{
if($article->add()){
$this->success('添加文章成功',U(lst));
}else{
$this->error('添加文章失败');
}
}
else{
$this->error($article->getError());
}
return;
}
$this->display();
}
public function edit(){
$article=D('article');
if(IS_POST){
$data['a_id']=I('a_id');
$data['a_title']=I('a_title');
$data['a_rem']=I('a_rem');
$data['a_content']=I('a_content');
$data['time']=time();
//上传图片
if ($_FILES['a_pic']['tmp_name']!='') {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './Uploads/'; // 设置附件上传（子）目录
$upload->rootPath = './'; // 设置附件上传根目录
$info=$upload->uploadOne($_FILES['a_pic']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$data['a_pic']=$info['savepath'].$info['savename'];//article_pic 为数据库字段
}
}
//dump($data);die();
if($article->create($data))
{
if($article->save()){
$this->success('修改文章成功',U(lst));
}else{
$this->error('修改文章失败');
}
}
else{
$this->error($article->getError());
}
return;
}
$articleid=I('id');
$articles=$article->find($articleid);
$this->assign('articles',$articles);
$this->display();
}
public function del(){
$article=D('article');
if($article->delete(I('id'))){
$this->success('删除文章成功',U(lst));
}
else{
$this->error('删除文章失败');
}
}
}注意首页管理有上传图片的操作
php代码和前端代码是需要注意的
完成了前端的增删改，数据库建表，控制器php，就完成了整个模块
最后还有一点就是图片的上传位置，是上传到了更目录下的自动生成Uploads文件夹下，如果没有自动生成，就先在First控制器下的add函数中写上代码
dump($data);die();
然后执行之后再将代码注释就ok了
两个模块的增删改实战就这些
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- ASP.NET MVC5网站开发文章管理架构（七）
- 博客园 闪存 首页 新随笔 联系 管理 订阅 订阅 随笔- 65 文章- 2 评论- 23 用C#.NET调用Java开发的WebS
- 北风网ASP.net版小孔子文章管理系统(CMS)2.0版本实战系列课程+通用OA系统全程开发
- ASP.NET MVC5网站开发咨询管理的架构（十一）
- 使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理
- 【网站管理1】_dede织梦后台如何发布文章
- ASP.NET MVC5网站开发咨询管理的架构（十一）
- 十一、轻松搭建网站管理后台
- ASP.NET MVC5 网站开发实践(二) Member区域 - 文章管理架构
- 使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理
- 使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理
- 网站后台管理中生成首页失败
- ASP.NET MVC5网站开发文章管理架构（七）
- 网站开发（十三）首页文章循环显示和显示文章内容