在PhpStorm中实现显示文章管理界面
程序员文章站
2022-04-29 14:40:53
...
1.http://localhost/phpMyAdmin/—>选择youhe数据库—>新建articlev2表;
//==========创建articlev2表==========↓
新建数据表
名字:
articlev2
字段数:
6
//==========创建articlev2表==========↑
//==========编辑articlev2表的字段信息==========↓
编辑字段信息:
名字 输入
id
类型 选择
MEDIUMINT
索引 选择
PRIMARY
A_I(自增)
勾选
文章id
名字 输入
title
类型 选择
VARCHAR
长度/值 输入
60
注释 输入
文章标题
名字 输入
content
类型 选择
VARCHAR
长度/值 输入
255
注释 输入
文章内容
名字 输入
publish
类型 选择
INT
长度/值 输入
10
默认 输入
定义
0
注释 输入
文章发布
未发布0/已发布1)
名字 输入
pubdate
类型 选择
DATE
注释 输入
发布时间
名字 输入
addtime
类型 选择
DATE
注释 输入
添加时间
存储引擎 选择
MyISAM
点击 保存
//==========编辑articlev2表的字段信息==========↑
2.PhpStorm—>admin—>controller—>创建Article.php文件
D:\phpStudy\WWW\demo\application\admin\controller\Article.php
修改内容:
<?php
namespace app\admin\controller;
use think\Controller;
class Article extends Base
{
public function lst()
{
// $artres= \think\Db::name('articlev2')->alias('a')->join('cate c','c.id = a.cateid','LEFT')->field('a.id,a.title,a.pic,a.click,a.time,c.catename')->paginate(3);
$artres= \think\Db::name('articlev2')->select();
$this->assign('artres',$artres);
return $this->fetch();
}
public function add()
{
if(request()->isPost()){
$data=[
'title'=>input('title'),
'keywords'=>input('keywords'),
'desc'=>input('desc'),
'cateid'=>input('cateid'),
'content'=>input('content'),
'time'=>time(),
];
if($_FILES['pic']['tmp_name']){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('pic');
// 移动到框架应用根目录/public/uploads/ 目录下
// echo ROOT_PATH ; die;
$info = $file->move(ROOT_PATH . 'public' . DS . '/static/uploads');
// var_dump($info); die;
if($info){
// 成功上传后 获取上传信息
$data['pic']='/static/uploads/'.date('Ymd').'/'.$info->getFilename();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
// echo $info->getFilename(); die;
}else{
// 上传失败获取错误信息
return $this->error($file->getError());
}
}
$validate = \think\Loader::validate('article');
// dump($validate);
if($validate->check($data)){
$db= \think\Db::name('article')->insert($data);
if($db){
return $this->success('添加文章成功!','lst');
}else{
return $this->error('添加文章失败!');
}
}else{
return $this->error($validate->getError());
}
return;
}
$cateres=db('cate')->select();
$this->assign('cateres',$cateres);
return $this->fetch();
}
public function edit()
{
if(request()->isPost()){
$data=[
'id'=>input('id'),
'title'=>input('title'),
'desc'=>input('desc'),
'cateid'=>input('cateid'),
'content'=>input('content'),
];
if($_FILES['pic']['tmp_name']){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('pic');
// 移动到框架应用根目录/public/uploads/ 目录下
// echo ROOT_PATH ; die;
$info = $file->move(ROOT_PATH . 'public' . DS . '/static/uploads');
// var_dump($info); die;
if($info){
// 成功上传后 获取上传信息
$data['pic']='/static/uploads/'.date('Ymd').'/'.$info->getFilename();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
// echo $info->getFilename(); die;
}else{
// 上传失败获取错误信息
return $this->error($file->getError());
}
}
$validate = \think\Loader::validate('articlev2');
if($validate->check($data)){
$db= \think\Db::name('articlev2')->update($data);
if($db){
return $this->success('修改文章成功!','lst');
}else{
return $this->error('修改文章失败!');
}
}else{
return $this->error($validate->getError());
}
return;
}
$arts= \think\Db::name('articlev2')->find(input('id'));//要查询数据
dump($arts);
$cateres=db('cate')->select();
$this->assign('cateres',$cateres);
$this->assign('arts',$arts);
return $this->fetch();
}
public function del(){
if(db('articlev2')->delete(input('id'))){
return $this->success('删除文章成功!','lst');
}else{
return $this->error('删除文章失败!');
}
}
}
3.PhpStorm—>admin—>controller—>创建Article.php文件—>创建Base.php文件
D:\phpStudy\WWW\demo\application\admin\controller\Base.php
内容:
<?php
namespace app\admin\controller;
use think\Controller;
class Base extends Controller
{
public function _initialize()
{
if(!session('id')){
$this->error('请先登录系统!',url('Login/index'));
}
}
}
4.D:\phpStudy\WWW\demo\application\admin\view\Article\lst.html
修改内容:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/>
<script type="text/javascript"
src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script>
</head>
<style type="text/css">
ul.pagination li{
float: left;
}
div.list-page{
width: 400px;
margin: 0 auto;
text-align: center;
}
</style>
<body>
<div class="container clearfix">
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="__PUBLIC__/admin">首页
</a><span class="crumb-step">></span><span class="crumb-name">文章管理</span></div>
</div>
<div class="result-wrap">
<form name="myform" id="myform" method="post">
<div class="result-title">
<div class="result-list">
<a href="{:url('add')}"><i class="icon-font"></i>新增文章</a>
</div>
</div>
<div class="result-content">
<table class="result-tab" width="100%">
<tr>
<th width="3%">ID</th>
<th>文章标题</th>
<th>内容</th>
<th>发布</th>
<th>发布时间</th>
<th>添加时间</th>
<th>操作</th>
</tr>
{volist name="artres" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.title}</td>
<td>{$vo.content}</td>
<td>
{if $vo.publish eq 0}
<td>未发布</td>
{else /}
<td>已发布</td>
{/if}
</td>
<td>{$vo.pubdate}</td>
<td>{$vo.addtime}</td>
<td>
<a class="link-update" href="{:url('edit',array('id'=>$vo
['id']))}">修改</a>
<a class="link-del" onclick="return confirm('你确定要删除该文章吗
?');" href="{:url('del',array('id'=>$vo['id']))}">删除</a>
</td>
</tr>
{/volist}
</table>
</div>
</form>
</div>
</div>
<!--/main-->
</div>
</body>
</html>
5.D:\phpStudy\WWW\demo\application\admin\view\Article\add.html
修改内容:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/>
<script type="text/javascript"
src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script>
<script type="text/javascript"
src="__PUBLIC__/static/admin/ueditor/ueditor.config.js"></script>
<script type="text/javascript"
src="__PUBLIC__/static/admin/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/admin/ueditor/lang/zh-cn/zh-
cn.js"></script>
</head>
<body>
<div class="container clearfix">
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a
href="__PUBLIC__/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name"
href="__PUBLIC__/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 width="10%"><i class="require-red">*</i>文章标题:</th>
<td>
<input class="common-text required" id="title" name="title"
size="50" value="" type="text">
</td>
</tr>
<tr>
<th>关键词:</th>
<td><input class="common-text" name="keywords" size="50" value=""
type="text"></td>
</tr>
<tr>
<th>描述:</th>
<td><textarea name="desc" class="common-textarea" id="desc"
cols="20" style="width: 50%;" rows="5"></textarea></td>
</tr>
<tr>
<th>所属栏目:</th>
<td>
<select name="cateid">
{volist name="cateres" id="vo"}
<option value="{$vo.id}">{$vo.catename}</option>
{/volist}
</select>
</td>
</tr>
<tr>
<th>缩略图:</th>
<td><input type="file" name="pic" /></td>
</tr>
<tr>
<th>内容:</th>
<td><textarea name="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>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用
UE.getEditor('editor')就能拿到相关的实例
UE.getEditor('content',{initialFrameWidth:1500,initialFrameHeight:400,});
</script>
</body>
</html>
6.D:\phpStudy\WWW\demo\application\admin\view\Article\edit.html
修改内容:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/>
<script type="text/javascript"
src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script>
<script type="text/javascript"
src="__PUBLIC__/static/admin/ueditor/ueditor.config.js"></script>
<script type="text/javascript"
src="__PUBLIC__/static/admin/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/admin/ueditor/lang/zh-cn/zh-
cn.js"></script>
</head>
<body>
<div class="container clearfix">
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a
href="__PUBLIC__/admin/design/">首页</a><span class="crumb-step">></span><a class="crumb-name"
href="__PUBLIC__/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="id" value="{$arts.id}">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th width="10%"><i class="require-red">*</i>文章标题:</th>
<td>
<input class="common-text required" id="title" name="title"
size="50" value="{$arts.title}" type="text">
</td>
</tr>
<tr>
<th>内容:</th>
<td><textarea name="content" class="common-textarea" id="content"
cols="30" style="width: 98%;" rows="10">
<?php echo htmlspecialchars_decode($arts['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>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用
UE.getEditor('editor')就能拿到相关的实例
UE.getEditor('content',{initialFrameWidth:1500,initialFrameHeight:400,});
</script>
</body>
</html>
没有格式的文章管理表
http://www.iheyu.com/demo/public/index.php/admin/article/lst.html
添加样式:
先在PhpStorm中做好备份(把原lst.html内容复制粘贴到lst1.html中)
D:\phpStudy\WWW\demo\application\admin\view\Article\lst1.html
7.DreamWarecs6中—>先做好文章管理表—>拆分—>把代码复制到PhpStorm中
D:\phpStudy\WWW\demo\application\admin\view\Article\lst.html
内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p align="center">文章管理
</p>
<div align="center">
<table width="618" border="1">
<tr>
<td width="27">id</td>
<td width="102">标题</td>
<td width="117">内容</td>
<td width="51">发布</td>
<td width="84">发布时间</td>
<td width="86">添加时间</td>
<td width="105">操作</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><form id="form1" name="form1" method="post" action="">
<div align="center">
<input type="submit" name="delete" id="delete" value="删除" />
<input type="submit" name="edit" id="edit" value="修改" />
</div>
</form></td>
</tr>
</table>
</div>
<p align="center"> </p>
</body>
</html>
页面有样式没有添加的管理员,不对!
http://www.iheyu.com/demo/public/index.php/admin/article/lst.html
8.D:\phpStudy\WWW\demo\application\admin\view\Article\lst.html
修改内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p align="center">文章管理
</p>
<div align="center">
<table width="618" border="1">
<tr>
<td width="27">id</td>
<td width="102">标题</td>
<td width="117">内容</td>
<td width="70">发布</td>
<td width="100">发布时间</td>
<td width="100">添加时间</td>
<td width="105">操作</td>
</tr>
{volist name="artres" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.title}</td>
<td>{$vo.content}</td>
<td>
{if $vo.publish eq 0}
未发布
{else /}
已发布
{/if}
</td>
<td>{$vo.pubdate}</td>
<td>{$vo.addtime}</td>
<td><form id="form1" name="form1" method="post" action="">
<div align="center">
<a class="link-update" href="{:url('edit',array('id'=>$vo['id']))}">修改</a>
<a class="link-del" onclick="return confirm('你确定要删除该文章吗?');" href="{:url('del',array('id'=>$vo['id']))}">删除</a>
</div>
</form></td>
</tr>
{/volist}
</table>
</div>
<p align="center"> </p>
</body>
</html>
****************************************************************************************************************************
未定义变量: vo(bug)
D:\phpStudy\WWW\demo\application\admin\view\Article\lst.html
{volist name="artres" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.title}</td>
<td>{$vo.content}</td>
<td>
{if $vo.publish eq 0}
未发布
{else /}
已发布
{/if}
</td>
<td>{$vo.pubdate}</td>
<td>{$vo.addtime}</td>
<td><form id="form1" name="form1" method="post" action="">
<div align="center">
<input type="submit" name="delete" id="delete" value="删除" />
<input type="submit" name="edit" id="edit" value="修改" />
</div>
</form></td>
</tr>
{/volist}
</table>
</div>
<p align="center"> </p>
</body>
</html>
http://www.iheyu.com/demo2/public/index.php/admin/article/lst.html
***************************************************************************************************************************
但是,在浏览器里面操作下面的"修改"和“删除”是按键没反应的!
9.D:\phpStudy\WWW\demo\application\admin\view\Article\lst.html
<td><form id="form1" name="form1" method="post" action="">
<div align="center">
<a class="link-update" href="{:url('edit',array('id'=>$vo['id']))}">修改</a>
<a class="link-del" onclick="return confirm('你确定要删除该文章吗?');" href="{:url('del',array('id'=>$vo['id']))}">删除</a>
</div>
</form></td>
</tr>
{/volist}
把"修改"和“删除”样式改了,可以删除”了!
http://www.iheyu.com/demo/public/index.php/admin/article/lst.html
上一篇: 原生js动态添加样式表
下一篇: 有关高考的文章推荐10篇