开发企业网站8 -- 新闻添加
2019-10-11 本文已影响0人
潘肚饿兵哥哥
<li><a data-href="index.php?m=admin&c=news_list" data-title="新闻列表" href="javascript:void(0)">新闻列表</a></li>
image.png
image.png
image.png
<{include file="header.html"}>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 新闻中心 <span class="c-gray en">></span> 新闻列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="page-container">
<div class="cl pd-5 bg-1 bk-gray"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> <a class="btn btn-primary radius" onclick="show_window('添加新闻', 'index.php?m=admin&c=news_add')" href="javascript:;"><i class="Hui-iconfont"></i> 添加新闻</a></span> <span class="r" >共有数据：<strong id="total"> <{$count}> </strong>条</span> </div>
<div class="mt-20">
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="80">ID</th>
<th width="80">新闻</th>
<th width="80">排序</th>
<th width="60">显示</th>
<th width="60">操作</th>
</tr>
</thead>
<tbody>
<{foreach $list as $v}>
<!-- 把数组中的值循环赋值，显示在表格中 -->
<tr class="text-c">
<!-- 选中项的name需要写一个数组，如果直接给定一个name的话，选中的所有项name都是这个给定的name -->
<td><input type="checkbox" value="<{$v.id}>" name="del[]"></td>
<td> <{$v.id}> </td>
<td> <{$v.name}> </td>
<td> <{$v.sort}> </td>
<!-- 判断是否显示 -->
<td class="td-status">
<{if $v.is_show == 1}>
<span class="label label-success radius">显示</span>
<{else}>
<span class="label label-danger radius">隐藏</span>
<{/if}>
</td>
<td class="f-14 td-manage">
<!-- 用前面封装好的show_window(在header.html页面)，来显示弹窗 -->
<!-- 修改页面在嵌入的子页面 -->
<!-- 添加不需要带id，但是修改要，要确认改的是哪一个 -->
<a style="text-decoration:none" class="ml-5" onClick="show_window('修改新闻','index.php?m=admin&c=news_add&id=<{$v.id}>')" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a>
<a style="text-decoration:none" class="ml-5" onClick="article_del(this,'<{$v.id}>')" href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a>
</td>
</tr>
<{/foreach}>
</tbody>
</table>
</div>
</div>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
/*资讯-单个删除功能*/
function article_del(obj,id){
layer.confirm('确认要删除吗？',function(index){
$.ajax({
type: 'POST',
url: 'index.php?m=admin&c=news_del',
//data:('id', id)等价于下面的 data:(id, id)
//这是一个键值对，前面的id是键，后面的是值
data:{id:id},
dataType: 'json',
success: function(data){
if(data == 1){
//这个text不给值就是获取值，给值就是修改值
//trim 取消空白，以防出现空白问题以致出错
//这个总量原本是一个数字,但是经过js获取之后，会变成一个字符串
//用parseInt把他转成一个数字
var total = parseInt($.trim($("#total").text()));
total = total - 1;
$(obj).parents("tr").remove();
$("#total").text(total);
layer.msg('删除成功!',{icon:1,time:2000});
}else{
layer.msg('删除失败!',{icon:2,time:2000});
}
},
error:function(data) {
console.log(data.msg);
},
});
});
}
//批量删除项
function datadel(){
//定义一个名为ID的变量
var id = '';
//$是一个函数名，只不过这个函数就只有这一个符号而已，他原本的名字叫jQuery
//这个函数的意思是：
//获取name=del[]的input标签，并且要含有checked属性的项
//当勾选她的时候，他就含有checked，这个之前已经写了
//然后遍历
//遍历的目的就是拿到id
$("input[name='del[]']:checked").each(function(){
//each要循环，循环到哪一个这个this就是哪一个
//val()获取里面的值
//获取值有些用text，有些用val
//区分的方法是：如果是表单元素就用val，其他的元素用text
//input、text、error/select等是表单元素
//这里用text是获取不到的
//这样就能拿到value的值
//因为在ajax里传输不能传数组，所以在这里就直接把他写成字符串
//+=是JS的字符串连接符
//此时的id已经拿到选项的id了，但是拿到的ID之间没有分隔符，所以加一个逗号
id += $(this).val()+',';
});
//如果用户一项都没有选中，就不能弹出退出按钮，需要判断用户是否选中要删除项
//如果id为空，证明用户没有选择任何一项
//这个id就是这个函数中定义的变量id
if(id == ''){
layer.msg('至少选择一个分类!',{icon:2,time:2000});
//在这里需要return，不写的话，会执行下去，用户一个都没有选就直接返回
//要选了才能看到下面的去人要删除吗
return false;
}
layer.confirm('确认要删除吗？',function(index){
$.ajax({
type: 'POST',
//将获取到的id提交到news_category_del.php页面进行处理
url: 'index.php?m=admin&c=news_del',
//data:('id', id)等价于下面的 data:(id, id)
//这是一个键值对，前面的id是键，后面的是值
data:{id:id},
dataType: 'json',
success: function(data){
//如果data=1，表示删除成功，那么要在页面上取消显示已删除的项
//同时，右上角的统计总数也要同时减去相应数量
//并且寻找到他的父级的tr，然后移除
//$(this).parents('tr')表示选中谁，就找谁的父级
if(data == 1){
//这个text不给值就是获取值，给值就是修改值
//trim 取消空白，以防出现空白问题以致出错
//这个总量原本是一个数字,但是经过js获取之后，会变成一个字符串
//用parseInt把他转成一个数字
// total是获取所有项的总量
var total = parseInt($.trim($("#total").text()));
//获取用户选中项的id
$("input[name='del[]']:checked").each(function(){
$(this).parents('tr').remove();
//每移除一项，总数就减1
total = total - 1;
});
//减完之后，把值（统计总数）写到页面中
$("#total").text(total);
layer.msg('删除成功!',{icon:1,time:2000});
}else{
layer.msg('删除失败!',{icon:2,time:2000});
}
},
error:function(data) {
console.log(data.msg);
},
});
});
}
</script>
</body>
</html>
image.png
image.png
image.png
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script> <!-- 配置文件 -->
ueditor是百度的产品，国外多用kindeditor
image.png
这个函数在header.html页面
// 弹出窗口 - 全屏
function show_window_full(title,url){
var index = layer.open({
type: 2,
title: title,
content: url
});
layer.full(index);
}
image.png
新闻：
id
cat_id 相当于新闻的分类标签
title 标题
thumb 缩略图
content 内容
publish_time 发布时间
add_time 新闻添加时间
resource 新闻来源 ，不能用from，他是关键字，写了还不会报错，但是会出错
remark 新闻摘要
read_num 点击量 阅读量
is_top 置顶
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类：</label>
<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
<select name="articlecolumn" class="select">
<option value="">==请选择分类==</option>
<option value="1">新闻资讯</option>
</select>
</span> </div>
</div>
<?php
require_once('init.php');
if( !empty($_POST)){
}else{
//修改功能：
//通过GET方法获取news_category.html带过来的id(这个ID在搜索框中)
$id = $_GET['id'];
//逻辑：如果获取到的ID大于0，表示有id，那么就是修改
//然后用数据库查询函数查出这个id
//然后用smarty把这个查到的值传递给
//else是做添加时默认选项功能
//else后面是把嵌入的news_category_add.html页面的显示和排序的默认值0和1设置默认值
//这样在添加的时候，就只需要填写名称了，有需要才填显示隐藏和排序
if($id > 0){
$row = get_row("select * from news where id=$id limit 1");
}else{
$row = [];
}
// 分类栏目先写名字和id就够用了
//根据sort进行排序，如果sort一样，再根据id进行降序排列
//然后把这个变量分配到news_add.html
$category = get_all("select id, name from news_category order by sort, id desc");
$smarty->assign('row', $row);
$smarty->assign('category', $category);
$smarty->display($tpl_name);
}
?>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类：</label>
<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
<select name="cat_id" class="select">
<option value="">==请选择分类==</option>
<{foreach $category as $v}>
<option value="<{$v.id}>"><{$v.name}></option>
<{/foreach}>
</select>
</span> </div>
</div>
image.png
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">关键词：</label>
<div class="formControls col-xs-8 col-sm-9">
<!-- placeholder是这个搜索栏中显示的提示字符 -->
<input type="text" class="input-text" value="<{$row.keywords}>" placeholder="多个关键词之间用英文半角逗号隔开" name="keywords">
</div>
</div>
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">摘要：</label>
<div class="formControls col-xs-8 col-sm-9">
<textarea name="remark" cols="" rows="" class="textarea" onKeyUp="$.Huitextarealength(this,100)"><{$row.remark}></textarea>
<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
</div>
</div>
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">来源：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="<{$row.resource}>" name="resource">
</div>
</div>
image.png
if( !empty($_POST)){
}else{
//修改功能：
//通过GET方法获取news_category.html带过来的id(这个ID在搜索框中)
$id = $_GET['id'];
//逻辑：如果获取到的ID大于0，表示有id，那么就是查询
//然后用数据库查询函数查出这个id
//然后用smarty把这个查到的值传递news_add.html
//else是做添加时默认选项功能
//else后面是把嵌入的news_add.html页面的显示时间默认值
//这样在添加的时候，如果没有给时间，就给一个默认当前时间
//
if($id > 0){
$row = get_row("select * from news where id=$id limit 1");
}else{
$row = ['publish_time'=>date('Y-m-d H:i:s')];
}
// 分类栏目先写名字和id就够用了，所以查询写id和name就够了
//根据sort进行排序，如果sort一样，再根据id进行降序排列
//然后把这个变量分配到news_add.html
$category = get_all("select id, name from news_category order by sort, id desc");
$smarty->assign('row', $row);
$smarty->assign('category', $category);
$smarty->display($tpl_name);
}
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">发布日期：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss'})"
name="publish_time" value="<{$row.publish_time}>"
readonly class="input-text Wdate">
</div>
</div>
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">是否置顶：</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal">
<div class="check-box">
<!-- 如果is_top = 1，则自动选中 checked -->
<input type="checkbox" id="checkbox-moban" name="is_top" value="1" <{if $row.is_top == 1}>checked<{/if}>>
<label for="checkbox-moban"> </label>
</div>
</div>
</div>
image.png
如果用 文件域的话：
<input type="file">
一是样式不好看，二是在不同的浏览器效果不同
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">缩略图：</label>
<div class="formControls col-xs-8 col-sm-9">
<span class="btn-upload form-group">
<input class="input-text upload-url" type="text" id="uploadfile" readonly style="width:200px">
<!-- 这里用a标签，js另外写文件上传按钮，并把下面的file文件域，html原本的上传样式隐藏 -->
<!-- 所以这里缩略图用的是上面的这个input和下面的a标签和js处理的 -->
<!-- 然后用户操作之后，会通过js‘把值写入到下面的原生的file中去 -->
<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
<input type="file" multiple name="file-2" class="input-file">
</span>
</div>
</div>
image.png
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">文章内容：</label>
<div class="formControls col-xs-8 col-sm-9">
<!-- 这里使用js写的，html原生的是文本域textarea，是一个多行文本框，input是单行文本框 -->
<!-- 这里其实也是textarea写的，只不过是用js加强了它的功能而已 -->
<!-- 这里的editor在本页最下方用js获取，所以如果这里改过的话，下面也相应的要修改 -->
<!-- 如果用的是textarea的话，需要一个name=“content”，这样表单才能把数据加入到post中 -->
<!-- 如果不写，js也会给他一个默认值，但是它就不是我们sql写好的content了 -->
<!-- 所以这里同样也需要加一个name -->
<!-- 具体写法，就是在此页面最下方的js变量中加第二个参数{"textarea":"content"} -->
<script id="editor" type="text/plain" style="width:100%;height:400px;"><{$row.content}></script>
</div>
</div>
var ue = UE.getEditor('editor', {"textarea":"content"});
//这里相当于<textarea name="content">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">阅读量：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="<{$row.read_num}>" name="read_num">
</div>
</div>
mt_rand和rand都能产生随机数，区别是：
mt_rand()是更好地随机数生成器，因为它跟rand()相比播下了一个更好地随机数种子；PHP文档也指出性能上比rand()快4倍，mt_getrandmax()所表示的数值范围也更大
if($id > 0){
$row = get_row("select * from news where id=$id limit 1");
}else{
// mt_rand() 使用 Mersenne Twister 算法返回随机整数。
//不给参数是0-21亿
$row = ['publish_time'=>date('Y-m-d H:i:s'), read_num=>mt_rand(0, 1000)];
}
image.png
<input type="hidden" name="id" value="<{$row.id}>">
<input class="btn btn-primary radius" type="submit" value=" 提交 ">
image.png
//表单验证 不需要验证的项都删掉（就是打红色星号的项留下，其他的删掉）
$("#form-article-add").validate({
rules:{
title:{
required:true,
},
cat_id:{
required:true,
},
},
message:{
title:{
required:"必须填写标题",
},
cat_id:{
required:"必须选择分类",
},
},
onkeyup:false,
focusCleanup:true,
success:"valid",
submitHandler:function(form){
// 把之前news_category_add.html页面写好的ajax提交代码直接复制过来粘到这里
// ajax提交：
$(form).ajaxSubmit({
type: 'post',
url: "index.php?m=admin&c=news_add",// 提交给谁
//data就是news_category_add.php页面$ret的值
success: function(data){
if(data == 1){
//time:2000这个函数弹出的弹窗默认不会自动关闭
//设置时间就是自动关闭提示信息的时间
layer.msg('操作成功!',{icon:1,time:2000});
//视频中这里不显示弹窗提示，因为程序执行时间太短，所以需要加定时器
//但是自己的是显示的
//这个函数表示：前面是要做的事，后面设置时间为2秒
//这个函数表示2秒之后执行函数里的内容
//setTimeout(function(){},2000);
setTimeout(function(){
//如果添加成功，在提示成功之后，关闭当前窗口
//并刷新父级窗口，显示新添加信息
//逻辑：程序自身无法杀自身，只能通过其他程序
//所以这里要先找到他的父级，再刷新父级，再通过父级关闭它
//之所以刷新在中间，而不是先关闭再刷新
//是因为关闭了它自己就没有子级父级的概念了
var index = parent.layer.getFrameIndex(window.name);
parent.location.reload();
parent.layer.close(index);
},2000);
}else{
layer.msg('操作失败!',{icon:2,time:2000});// 2000表示提示信息留存时间 icon是一个 X 字体图标
}
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg('error!',{icon:1,time:1000});
}
});
}
});
//在这里接收html页面传过来的三个值
$name = $_POST['name'];
$is_show = $_POST['is_show'];
//这个值有默认值，所以判断一下
//传值就使用传过来的值，空值就使用默认值0
$sort = !empty($_POST['sort'])?intval($_POST['sort']):0;
//修改功能，接收html页面传过来的id
//并进行判断。如果id大于0,就是修改，否则就是添加
// 如果执行成功，会通过下面的execute函数返回1，到news_category_add.html页面，进行添加操作
$id = $_POST['id'];
if($id > 0){
$sql = "update news_category set name='$name', is_show='$is_show', sort='$sort' where id='$id'";
}else{
//接收到上面传递过来的值之后，用sql语句将数据写入表中
$sql = "insert into news_category(name, is_show, sort) values ('$name','$is_show', '$sort')";
}
可以用一个变量接收整个post：
$data=$_POST;
而不是像以前那样：
$name = $_POST['name'];
一个一个的接收
此时的$data是一个数组，数组的项就是接收到的ajax提交数据
//unset（）函数用于销毁给定的变量。
//这个name是news_add.html的提交按钮的name
//这样除了file里的值没有，其他的都传过来了
unset($data['file']);
<?php
require_once('init.php');
if( !empty($_POST)){
$data = $_POST;
//之前的php中显示的时间格式是年月日时分秒，但是数据库中写的格式是int
//需要用strtotime转换为时间戳格式，否则会报错
$data['publish_time'] = strtotime($data['publish_time']);
//在添加之前，还要先把添加时间加进来 时间字段 = 当前时间戳
$data['add_time'] = time();
//unset（）函数用于销毁给定的变量。
//这个name是news_add.html的提交按钮的name
//这样除了file里的值没有，其他的都传过来了
unset($data['file']);
//然后，跟前面一样，如果data里的ID大于0就是修改，否则就是添加
if($data['id'] > 0){
}else{
//添加需要把id删掉，因为id是自增长的
unset($data['id']);
//添加的sql语句：
// implode 把数组元素组合为字符串
// array_keys 返回包含数组中所有键名的一个新数组
// $sql = "insert into news ("..")";这是一个整体，两个点的前后都是字符串，中间是变量
// ")"就是一个括号
//在这里还不能直接执行，会报错
//因为sql中的时间字段，数据库中写的是int类型
//但是实际显示的是2019-10-10 16：20：52这样的类型
//所以需要在这个if之前用 strtotime 函数把时间类型转换为时间戳
$sql = "insert into news (".implode(',',array_keys($data)).") values ('".implode ("','", array_values($data))."')";
}
$ret = execute($sql);
if($ret !== false){
echo 1;
}else{
echo 0;
}
}else{
//修改功能：
//通过GET方法获取news_category.html带过来的id(这个ID在搜索框中)
$id = $_GET['id'];
//逻辑：如果获取到的ID大于0，表示有id，那么就是查询
//然后用数据库查询函数查出这个id
//然后用smarty把这个查到的值传递news_add.html
//else是做添加时默认选项功能
//else后面是把嵌入的news_add.html页面的显示时间默认值
//这样在添加的时候，如果没有给时间，就给一个默认当前时间
//
if($id > 0){
$row = get_row("select * from news where id=$id limit 1");
}else{
// mt_rand() 使用 Mersenne Twister 算法返回随机整数。
//不给参数是0-21亿
$row = ['publish_time'=>date('Y-m-d H:i:s'), read_num=>mt_rand(0, 1000)];
}
// 分类栏目先写名字和id就够用了，所以查询写id和name就够了
//根据sort进行排序，如果sort一样，再根据id进行降序排列
//然后把这个变量分配到news_add.html
$category = get_all("select id, name from news_category order by sort, id desc");
$smarty->assign('row', $row);
$smarty->assign('category', $category);
$smarty->display($tpl_name);
}
?>
