167 lines
6.9 KiB
HTML
167 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>文章管理</title>
|
|
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
#app {
|
|
max-width: 1200px;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
.action {}
|
|
|
|
.list {}
|
|
|
|
.list table {
|
|
width: 100%;
|
|
border-left: solid 1px #ddd;
|
|
border-top: solid 1px #ddd;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.list tr th,
|
|
.list tr td {
|
|
padding: 8px 10px;
|
|
border-right: solid 1px #ddd;
|
|
text-align: left;
|
|
border-bottom: solid 1px #ddd;
|
|
}
|
|
|
|
.content-div {
|
|
border: 1px solid #DCDFE6;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<script src="./kindeditor/kindeditor-all-min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div>
|
|
<div class="action">
|
|
<el-button @click="showAdd">新增</el-button>
|
|
</div>
|
|
<div class="list">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th width="40">编号</th>
|
|
<th>标题</th>
|
|
<th width="80">分类</th>
|
|
<th width="180">发表时间</th>
|
|
<th width="60">阅读数</th>
|
|
<th width="60">评论数</th>
|
|
<th width="60">状态</th>
|
|
<th width="140">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="art in list" :key="art.id">
|
|
<td>{{art.id}}</td>
|
|
<td>{{art.title}}</td>
|
|
<td>{{art.category}}</td>
|
|
<td>{{art.publish_time}}</td>
|
|
<td>{{art.view_count}}</td>
|
|
<td>{{art.comment_count}}</td>
|
|
<td>{{art.status == 1?'已发布':'草稿'}}</td>
|
|
<td>
|
|
<!-- 不需要传参则可以不写方法后的小括号 -->
|
|
<el-link @click="showEdit(art)">修改</el-link>
|
|
<el-popconfirm title="此操作将永久删除该文章数据,是否继续?" @confirm="deleteArticlebyId(art.id)">
|
|
<el-link slot="reference">删除</el-link>
|
|
</el-popconfirm>
|
|
|
|
<el-popconfirm title="此操作将会更改文章状态,是否继续?" @confirm="updateArticleStatus(art)">
|
|
<el-link slot="reference">{{art.status==1?'设为草稿':'发布文章'}}</el-link>
|
|
</el-popconfirm>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<el-dialog :visible.sync="showDialog" :close-on-click-modal="false">
|
|
<el-form ref="form" :model="form" label-width="100px" label-position="left">
|
|
<el-form-item label="文章标题">
|
|
<el-input v-model="form.title" :maxlength="50"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文章缩略图">
|
|
<el-input v-model="form.cover"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文章摘要">
|
|
<el-input type="textarea" :maxlength="500" :rows="4" v-model="form.description"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文章内容">
|
|
<div class="content-div">
|
|
<!-- <div id="toolbar"></div>
|
|
<div id="editor" style="height: 400px"></div> -->
|
|
<textarea v-model="form.content" id="editor_id" style="width:100%;height:300px;"></textarea>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="阅读数">
|
|
<el-input v-model="form.view_count"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="评论数">
|
|
<el-input v-model="form.comment_count"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="分类">
|
|
<el-select v-model="form.category" placeholder="请选择文章分类" style="width: 100%;">
|
|
<el-option label="默认分类" value="默认"></el-option>
|
|
<el-option value="生活"></el-option>
|
|
<el-option value="随笔"></el-option>
|
|
<el-option value="科技"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="发表时间">
|
|
<el-date-picker v-model="form.publish_time" type="datetime" style="width: 100%;"
|
|
placeholder="选择文章的发表时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<!-- slot插槽位footer表示该元素会放入到组件的footer -->
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showDialog = false">取 消</el-button>
|
|
<el-button type="primary" @click="saveArticle">保存数据</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./vue/dist/vue.js"></script>
|
|
<script src="./element-ui/lib/index.js"></script>
|
|
|
|
<script type="module">
|
|
Vue.config.productionTip = false;
|
|
Vue.config.silent = true;
|
|
// import Vue from './vue/dist/vue.esm-browser.js'
|
|
// vue 通过 Vue.createApp(选项)创建vue实例
|
|
import manage from './assets/manage.js'
|
|
new Vue(manage)
|
|
</script>
|
|
</body>
|
|
|
|
</html> |