Watch 2 Star 3 Fork 1

读心印 / qadmin

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于layui的后台模板 spread retract

Clone or download
article_add.html 11.46 KB
Copy Edit Web IDE Raw Blame History
读心印 authored 2019-05-13 15:57 . readme
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>添加文章 - QAdmin后台模板</title>
<link rel="stylesheet" href="./static/common/layui/css/layui.css">
<link rel="stylesheet" href="./static/admin/css/style.css">
<script src="./static/common/layui/layui.js"></script>
<script src="./static/common/jquery-3.3.1.min.js"></script>
<script src="./static/common/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--顶栏-->
<header>
<h1 v-text="webname"></h1>
<div class="breadcrumb">
<i class="layui-icon">&#xe715;</i>
<ul>
<li v-for="vo in address">
<a v-text="vo.name" :href="vo.url" ></a> <span>/</span>
</li>
</ul>
</div>
</header>
<div class="main" id="app">
<!--左栏-->
<div class="left">
<ul class="cl" >
<!--顶级分类-->
<li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
<a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
<i class="layui-icon" v-html="vo.icon"></i>
<span v-text="vo.name"></span>
<i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
</a>
<!--子级分类-->
<div v-for="vo2,index2 in vo.list">
<a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
<i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
</div>
</li>
</ul>
</div>
<!--右侧-->
<div class="right">
<!-- 配置文件 -->
<script type="text/javascript" src="./static/common/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./static/common/ueditor/ueditor.all.js"></script>
<fieldset class="layui-elem-field layui-field-title">
<legend>添加文章</legend>
</fieldset>
<form class="layui-form " action="">
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<img class="pic_url" src="./static/common/image/pic.png" height="200px" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">缩略图</label>
<div class="layui-input-inline">
<input type="text" name="pic" id="pic_url" placeholder="不上传就留空" autocomplete="off" class="layui-input">
</div>
<div class="layui-word-aux">
<button type="button" class="layui-btn" id="pic">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<input type="text" name="title" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">优先级</label>
<div class="layui-input-inline">
<input type="text" name="sort" placeholder="" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">置顶时有效 数小靠前 不填为99</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-inline" style="width: 200px">
<select name="type">
<option value="0">顶级分类</option>
<option value="9">前端</option>
<option value="11">&nbsp;&nbsp;&nbsp;html/css</option>
<option value="16">&nbsp;&nbsp;&nbsp;javascript</option>
<option value="20">&nbsp;&nbsp;&nbsp;jquery</option>
<option value="15">&nbsp;&nbsp;&nbsp;vue</option>
<option value="12">&nbsp;&nbsp;&nbsp;angular</option>
<option value="25">&nbsp;&nbsp;&nbsp;小程序</option>
<option value="13">后端</option>
<option value="17">&nbsp;&nbsp;&nbsp;php</option>
<option value="14">&nbsp;&nbsp;&nbsp;node.js</option>
<option value="18">&nbsp;&nbsp;&nbsp;python</option>
<option value="24">&nbsp;&nbsp;&nbsp;linux/shell</option>
<option value="19">数据库</option>
<option value="21">&nbsp;&nbsp;&nbsp;mysql</option>
<option value="22">&nbsp;&nbsp;&nbsp;redis</option>
<option value="23">&nbsp;&nbsp;&nbsp;mongodb</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">内容</label>
<div class="layui-input-block" style="width:1000px;">
<script id="container" name="body" style="height: 500px" type="text/plain"></script>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">关键词</label>
<div class="layui-input-inline">
<input type="text" name="key" placeholder="用英文豆号隔开" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">附件地址</label>
<div class="layui-input-inline">
<input type="text" name="file" id="file_url" placeholder="不上传就留空 可使用外链http://" autocomplete="off" class="layui-input">
</div>
<div class="layui-word-aux">
<button type="button" class="layui-btn" id="file">
<i class="layui-icon">&#xe67c;</i>在线上传
</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否置顶</label>
<div class="layui-input-block">
<input type="checkbox" value="1" name="top" lay-text="开启|关闭" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否显示</label>
<div class="layui-input-block">
<input type="checkbox" value="1" name="state" lay-text="开启|关闭" checked lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
var ue = UE.getEditor('container');
setTimeout(function () {
ue.setHeight(500)
},500)
layui.use(['form', 'upload'], function () {
var form = layui.form,
layer = layui.layer,
upload = layui.upload;
upload.render({
elem: '#file' //绑定元素
, url: "/admin/uploads/file.html" //上传接口
, done: function (res) {
//上传完毕回调
if (res.code == 1) {
$("#file_url").val(res.url);
} else {
layer.msg(res.info, function () { })
}
}, error: function () {
layer.msg("上传异常");
}
});
upload.render({
elem: '#pic' //绑定元素
, url: "/admin/uploads/pic.html" //上传接口
, done: function (res) {
//上传完毕回调
if (res.code == 1) {
$("#pic_url").val(res.url);
$(".pic_url").attr("src", res.url);
} else {
layer.msg(res.info, function () { })
}
}, error: function () {
layer.msg("上传异常");
}
});
form.on('submit(submit)', function (data) {
layer.load({ time: 0 });
$.post(data.form.action, data.field, function (e) {
layer.closeAll('loading');
if (e.code == 1) {
layer.msg(e.msg, { icon: 1, shade: 0.5, });
setTimeout(function () { window.location.href = e.url; }, 1000);
} else {
layer.msg(e.msg, { icon: 2, shade: 0.5, time: 2000, shadeClose: true });
}
})
return false;
});
});
</script>
<script src="./static/admin/js/config.js"></script>
<script src="./static/admin/js/script.js"></script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/flash127/qadmin.git
git@gitee.com:flash127/qadmin.git
flash127
qadmin
qadmin
master

Help Search