![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
天蓬老师批改状态：合格
老师批语：页面间的跳转, js和php都可以实现, 但js更灵活
收藏
收藏
收藏
参考课程内容，完成后台文章修改及删除功能
内容列表首页index.blade.php新增js代码：
<script type="text/javascript">
//文章添加/修改
function add(id) {
window.location.href='/admins/content/add?id='+id;
}
// 文章删除
function del(id){
layer.confirm('确定要删除吗？', {
icon:3,
btn: ['确定','取消']
}, function(){
$.post('/admins/content/del',{id:id,_token:$('input[name="_token"]').val()},function(res){
if(res.code>0){
layer.msg(res.msg,{icon:2});
}else{
layer.msg(res.msg,{icon:1});
setTimeout(function(){window.location.reload();},1000);
}
},'json');
});
}
</script>完整的index.blade.php页面代码如下：
<!DOCTYPE html>
<head>
<title>内容管理</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/static/css/style.css" media="all">
<script type="text/javascript" src="/static/js/jquery3.4.1.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/phpcn.js"></script>
</head>
<body>
<div class="phpcn-pd-10 phpcn-bg-fff">
@csrf
<div class="phpcn-list-header phpcn-mb-20 phpcn-clear">
<div class="phpcn-row">
<div class="phpcn-title phpcn-ps-r">内容列表</div>
<button class="phpcn-button phpcn-bg-black phpcn-button-edit" onclick="add()" style="color:#fff;float:right;">添加</button>
<div class="phpcn-col-md6 phpcn-mt-20">
<div class="phpcn-form phpcn-bg-fff ">
<div class="phpcn-form-item phpcn-bg-fff ">
<div class="phpcn-input-block phpcn-col-md3">
<select name="type">
<option value="1" {{isset($type) && $type==1?'selected':''}}>标题</option>
<option value="2" {{isset($type) && $type==2?'selected':''}}>作者</option>
</select>
</div>
<div class="phpcn-input-block phpcn-col-md3">
<input type="text" name="wd" placeholder="搜索内容" class="phpcn-input" value="{{isset($wd)?$wd:''}}">
</div>
<div class="phpcn-input-block phpcn-col-md2 phpcn-ml-10">
<button class="phpcn-button" onclick="searchs()">搜索</button>
</div>
</div>
</div>
</div>
</div>
</div>
<table class="phpcn-table">
<thead>
<tr>
<th>ID</th>
{{-- <th>模版</th>--}}
<th>标题</th>
<th>分类</th>
<th>作者</th>
<th>修改时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach($lists as $item)
<tr>
<td>{{$item['id']}}</td>
<td>{{$item['title']}}</td>
<td>{{$item['cate_title']}}</td>
<td>{{$item['author']}}</td>
<td>{{date('Y-m-d H:i:s',$item['edit_time'])}}</td>
<td>{!!$item['status']==0?'待发布':'<span style="color:#FF5722">已发布</span>'!!}</td>
<td>
<button class="phpcn-button phpcn-bg-black phpcn-button-edit" onclick="add({{$item['id']}})">修改</button>
<button class="phpcn-button phpcn-bg-red phpcn-button-edit" onclick="del({{$item['id']}})">删除</button>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$links}}
</div>
<script type="text/javascript">
function searchs() {
var type=$('select[name="type"]').val();
var wd=$.trim($('input[name="wd"]').val());
window.location.href='/admins/content/index?type='+type+'&wd='+wd;
}
function add(id) {
window.location.href='/admins/content/add?id='+id;
}
// 文章删除
function del(id){
layer.confirm('确定要删除吗？', {
icon:3,
btn: ['确定','取消']
}, function(){
$.post('/admins/content/del',{id:id,_token:$('input[name="_token"]').val()},function(res){
if(res.code>0){
layer.msg(res.msg,{icon:2});
}else{
layer.msg(res.msg,{icon:1});
setTimeout(function(){window.location.reload();},1000);
}
},'json');
});
}
</script>
</body>
</html>完整的add.blade.php文章添加/修改页面代码如下：
<!DOCTYPE html>
<head>
<title>内容添加</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/static/css/style.css" media="all">
<script type="text/javascript" src="/static/js/jquery3.4.1.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/phpcn.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
</head>
<body>
<form class="phpcn-form phpcn-bg-fff phpcn-p-10 phpcn-clear">
@csrf
<input type="hidden" name="id" value="{{$id}}">
<div class='phpcn-l phpcn-col-xs6 phpcn-box-sizing'>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">标题</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="title" value="{{$article['title']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">副标题</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="subtitle" value="{{$article['subtitle']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">分类</label>
<div class="phpcn-input-inline phpcn-form-select">
<select name="cate_id" lay-filter="cate_id">
@foreach($lists as $item)
<option value="{{$item['id']}}" {{isset($article['cate_id']) && $article['cate_id']==$item['id']?'selected':''}}>{{$item['title']}}</option>
@endforeach
</select>
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">封面图</label>
<div class="phpcn-input-inline phpcn-form-file">
<button class="phpcn-button" type='button' onclick="$('#file_upload').click();"><i class="phpcn-icon phpcn-icon-jindutiaodaishangchuan"></i>选择文件</button>
<img id="pre_img" style="height: 38px;" onmouseover="show_img()" onmouseleave="hide_img()" />
<span style="color: gray;">封面图 为PNG/JPG/GIF 格式图片</span>
<iframe name="frame1" id="frame1" style="display: none;"></iframe>
<input type="hidden" name="cover_img" id="imgurl" value="">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">seo标题</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="seo_title" value="{{$article['seo_title']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">keyword</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="keyword" value="{{$article['keyword']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">文章摘要</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="descs" value="{{$article['descs']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">作者</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="author" value="{{$article['author']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">来源</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="from_site" value="{{$article['from_site']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">来源URL</label>
<div class="phpcn-input-inline">
<input type="text" class="phpcn-input" name="from_url" value="{{$article['from_url']}}">
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">评论</label>
<div class="phpcn-input-inline phpcn-form-radio">
<input type="radio" name="is_comment" value="1" title="开启" {{isset($article['is_comment']) && $article['is_comment']==1?'checked':''}}>
<input type="radio" name="is_comment" value="0" title="关闭" {{isset($article['is_comment']) && $article['is_comment']==0?'checked':''}}>
</div>
</div>
<div class="phpcn-form-item">
<label class="phpcn-form-lable">状态</label>
<div class="phpcn-input-inline phpcn-form-radio">
<input type="radio" name="status" value="1" title="开启" {{isset($article['status']) && $article['status']==1?'checked':''}}>
<input type="radio" name="status" value="0" title="关闭" {{isset($article['status']) && $article['status']==0?'checked':''}}>
</div>
</div>
</div>
<div class="phpcn-form-item phpcn-r">
<div class="phpcn-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" id='content' name="contents">{{isset($content['contents'])?$content['contents']:''}}</textarea>
</div>
</div>
</form>
<form target="frame1" enctype="multipart/form-data" action="/admins/image/index" method="post" style="display: none;">
@csrf
<input type="file" name="file_upload" id="file_upload" onchange="upload_img(this)">
</form>
<div class="phpcn-form-item phpcn-bg-fff phpcn-clear">
<div class="phpcn-tx-c">
<button type="button" class="phpcn-button" onclick="content_save();">保存</button>
<button type="button" class="phpcn-button phpcn-bg-black" onclick="cancel();">取消</button>
</div>
</div>
<script type="text/javascript">
//文章保存
function content_save() {
$.post('/admins/content/save',$('.phpcn-form').serialize(),function (res) {
if(res.code>0){
layer.alert(res.msg,{icon:2});
}else{
layer.msg(res.msg,{icon:1});
setTimeout(function(){window.location.href='/admins/content/index';},1000);
}
},'json')
}
// 取消
function cancel(){
history.go(-1);
}
init_editor();
function init_editor() {
var ue_width = $('.phpcn-col-xs6').width() - 20;
var ue_height = $(window).height() - 180;
var ue = UE.getEditor('content',{initialFrameWidth:ue_width,initialFrameHeight:ue_height});
}
</script>
</body>
</html>控制器Content.php代码：
<?php
namespace xpcms\Http\Controllers\admins;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use xpcms\Http\Controllers\Controller;
class Content extends Controller{
//内容管理首页
public function index(Request $req){
$type=(int)$req->type;
$wd=trim($req->wd);
$appends=['type'=>$type,'wd'=>$wd];
$objDb=DB::table('xpcms_article');
if ($type==1){
$objDb=$objDb->where('title','like','%'.$wd.'%');
}
if ($type==2){
$objD=$objDb->where('author','like','%'.$wd.'%');
}
$data=$objDb->orderBy('id','desc')->pages(10,$appends);
//把数组中某一个字段取出来作为一个单独的数组
$cate_id=array_column($data['lists'],'cate_id');
//whereIn 方法验证字段的值必须存在指定的数组里
$category=DB::table('xpcms_article_category')->whereIn('id',$cate_id)->cates('id');
//把分类的title加进去
foreach ($data['lists'] as $key=>$list){
$data['lists'][$key]['cate_title']=$category[$list['cate_id']]['title'];
}
$data['type']=$type;
$data['wd']=$wd;
return view('admins/content/index',$data);
}
//内容添加
public function add(Request $req){
$id=(int)$req->id;
$res=DB::table('xpcms_article_category')->lists();
$article=DB::table('xpcms_article')->where('id',$id)->item();
$content=DB::table('xpcms_article_content')->where('aid',$id)->item();
$data['lists']=$res;
$data['id']=$id;
$data['article']=$article;
$data['content']=$content;
return view('admins/content/add',$data);
}
//内容保存
public function save(Request $req){
$id = (int)$req->id;
$data['title'] = trim($req->title);
$data['subtitle'] = trim($req->subtitle);
$data['model_id'] = (int)$req->model_id;
$data['seo_title'] = trim($req->seo_title);
$data['keyword'] = trim($req->keyword);
$data['descs'] = trim($req->descs);
$data['author'] = trim($req->author);
$data['cover_img'] = trim($req->cover_img);
$data['author_editor'] = trim($req->author_editor);
$data['from_site'] = trim($req->from_site);
$data['from_url'] = trim($req->from_url);
$data['is_comment'] = (int)$req->is_comment;
$data['status'] = (int)$req->status;
$data['cate_id'] = (int)$req->cate_id;
$data['edit_time'] = time();
$data['add_time'] = time();
$detail['contents'] = $req->contents;
if ($data['title']==''){
exit(json_encode(array('code'=>1,'msg'=>'标题不能为空')));
}
if ($data['subtitle']==''){
exit(json_encode(array('code'=>1,'msg'=>'副标题不能为空')));
}
if ($data['cate_id']==''){
exit(json_encode(array('code'=>1,'msg'=>'分类必选')));
}
if ($data['author']==''){
exit(json_encode(array('code'=>1,'msg'=>'作者不能为空')));
}
if ($data['subtitle']==''){
exit(json_encode(array('code'=>1,'msg'=>'副标题不能为空')));
}
//判断是新增还是更新
if ($id){
$aid=DB::table('xpcms_article')->where('id',$id)->update($data);
}else{
$aid=DB::table('xpcms_article')->insertGetId($data);
}
if (!$aid) {
exit(json_encode(array('code' => 1, 'msg' => '文章保存失败')));
}
if ($id){
$res=DB::table('xpcms_article_content')->where('aid',$id)->update($detail);
exit(json_encode(array('code'=>0,'msg'=>'文章保存成功')));
}else{
$detail['aid']=$aid;
$res=DB::table('xpcms_article_content')->insert($detail);
}
if (!$res){
exit(json_encode(array('code'=>1,'msg'=>'文章保存失败')));
}else{
exit(json_encode(array('code'=>0,'msg'=>'文章保存成功')));
}
}
//内容删除
public function del(Request $req){
$id=(int)$req->id;
$res1=DB::table('xpcms_article')->where('id',$id)->delete();
$res2=DB::table('xpcms_article_content')->where('aid',$id)->delete();
if ($res1 && $res2){
exit(json_encode(array('code'=>0,'msg'=>'文章删除成功')));
}else{
exit(json_encode(array('code'=>1,'msg'=>'文章删除失败')));
}
}
}路由也需要新增：
// 内容管理
Route::get('admins/content/index', 'Content@index');//主页
Route::get('admins/content/add', 'Content@add');//添加
Route::post('admins/content/save', 'Content@save');//保存
Route::post('admins/content/del', 'Content@del');//删除运行后效果如图所示：
文章添加页面：
文章修改页面：
文章删除页面：
总结：还有文件上传这块没有弄，准备看了下一节文件上传的视频再去做。这里容易遇到的老坑是判断到底是新增还是修改，如果不进行判断，会把修改也弄成新增。
关于文章保存的js代码跳转，之前写的是：parent.window.location.reload();但是始终保存后跳转的是admins/home/index，后面就使用了window.location.href这个方法。
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
