目前实现主要功能
1、文章的发布与管理
2、下级向上级反馈信息,统计结果
说明
边学边做的,首要目的是实现功能,借鉴前人经验,有很多地方还没理解弄懂,有不对的地方请大家指正。
数据库
使用mysql,共包含4个表
1、article:放文章信息,ca_id为外键,与栏目table关联。
(ar_content存储文章,3个长度存一个中文字符)
2、catalog:栏目信息,ca_idc和article表中的ca_id关联。
(很多文章不建议使用外键关联,关系设为restrict时,会导致数据删除不方便。)
3、comment:下级账户反馈的信息。
(这里的ar_id是外键,其实各个table的字段名尽量不要一样,可能会导致后期数据查询时引起歧义,这里偷懒没修改)
4、manager:账号信息表
数据库搭建借鉴了“兔小白”的项目,具体链接找不到了。
前端
后台管理界面使用layui,新闻显示页面从中意的网站上扒下来自己修改(涉及侵权吗?修改到什么程度就不算侵权?请教大家)。
引入echarts实现可视化。
引入ueditor实现文本编辑。
文章的的增删改查
前端代码:基于layui,子表使用到layui扩展功能soultable,上传文件用到了layui的upload模块。内容包含数据列表,增删改查按钮。
html代码:
//查询窗口
<div class="layui-row">
<form class="layui-form layui-col-md12">
<div class="layui-input-inline">
<input class="layui-input" placeholder="文章标题" name="wenzhang"
id="wenzhang" autocomplete="off" />
</div>
<div class="layui-input-inline">
<select class="layui-input-inline" name="bu" lay-filter="fastAdd"
id="bu">
<option value="">发文部门</option>
</select>
</div>
<div class="layui-input-inline">
<select class="layui-input-inline" name="leixing"
lay-filter="fastAdd" id="leixing">
<option value="">文章类型</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="layui-input-inline">
<select class="layui-input-inline" name="lan" lay-filter="fastAdd"
id="lan">
<option value="">文章栏目</option>
</select>
</div>
<button class="layui-btn" style="" data-type="reload" id="search1"
lay-submit="" lay-filter="search">
<i class="layui-icon"></i>
</button>
<a class="layui-btn layui-btn-primary layui-btn-small"
line-height: 1.6em;"
href="javascript:location.replace(location.href);">
<i class="layui-icon" style="line-height: 38px"></i>
</a>
</form>
</div>
//table主体
<table class="layui-table" id="test" lay-filter="test"></table>
//添加文章弹窗
<div class="layui-row" id="popAddTest" style="display: none;">
<div class="layui-col-md12">
<form class="layui-form layui-from-pane" action=""
style="margin-top: 20px" method="POST">
<div class="layui-col-md12" style="margin-left: -10px">
<!-- 文章栏目动态获取后台catalog-->
<div class="layui-form-item">
<label class="layui-form-label">文章栏目</label>
<div class="layui-input-block">
<select name="caId" id="caIdAdd" lay-search="" lay-filter="">
</select>
</div>
</div>
<!-- select选择文章类型 -->
<div class="layui-form-item">
<label class="layui-form-label">文章类型</label>
<div class="layui-input-block">
<select name="arDuty" lay-filter="" id="arDutyAdd"
lay-verify="required">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文章标题</label>
<div class="layui-input-block">
<input type="text" name="arTitle" id="arTitleAdd"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新闻简介</label>
<div class="layui-input-block">
<input type="text" name="arDetail" id="arDetailAdd"
autocomplete="off" class="layui-input">
</div>
</div>
<!-- ueditor实现 -->
<div class="layui-form-item" style="margin-top: 40px">
<label class="layui-form-label">文章内容</label>
<div class="layui-input-block">
<textarea id="arContentAdd" name="arContent" type="text/plain"
style="height: 500px;" lay-verify="required"></textarea>
</div>
</div>
<!-- 自动获取发布者名字,只读 -->
<div class="layui-form-item">
<label class="layui-form-label">发布者</label>
<div class="layui-input-block">
<input type="text" name="arUser" id="arUserAdd"
autocomplete="off" class="layui-input" lay-verify="required"
Readonly="true">
</div>
</div>
<!--************这里是上传图片的代码***************-->
<!--************这里添加的隐藏的输入框,用来传递images的参数***************-->
<div class="layui-form-item">
<label class="layui-form-label">展示照片:</label>
<div class="layui-upload layui-inline">
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
<button type="button" class="layui-btn" id="test1">上传图片</button>
<input type="hidden" name="arImage" class="image">
</div>
</div>
<!-- select选择新闻审核状态 -->
<div class="layui-form-item">
<label class="layui-form-label">审核状态</label>
<div class="layui-input-block">
<select name="arSpare1" lay-filter="" id="arSpare1Add"
lay-verify="required">
<option value="2">待审核</option>
<option value="1">已审核</option>
<option value="3">审核不通过</option>
</select>
</div>
</div>
<!-- select选择新闻发布状态 -->
<div class="layui-form-item">
<label class="layui-form-label">发布状态</label>
<div class="layui-input-block">
<select name="arState" lay-filter="" id="arStateAdd"
lay-verify="required">
<option value="2">待发布</option>
<option value="1">已发布</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">发布位置</label>
<div class="layui-input-block">
<select name