SSM+Mysql+layui 新闻网站+文件上传功能(1)

该博客介绍了使用SSM(Spring、SpringMVC、MyBatis)框架结合MySQL数据库和layui前端组件,实现了一个包含文章发布、管理、下级反馈信息统计等功能的新闻网站。同时还涉及了文件上传功能,前端利用layui的upload模块。数据库设计包括4个表,用于存储文章、栏目、评论和管理员信息。在前端部分,借鉴了layui和echarts等工具,实现了数据可视化和文本编辑功能。
摘要由CSDN通过智能技术生成

SSM+Mysql+layui 项目开发记录(1)

目前实现主要功能

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">&#xe615;</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">&#xe669;</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 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值