CMS的后端管理系统
1.实现
前段html代码(都是在BOOTSTRAP上面找过来修改的,JS已经按照路径存放好了)
{% extends 'cms/base.html' %}
{% block title %}
{% if news %}
编辑新闻
{% else %}
发布新闻
{% endif %}
{% endblock %}
{% block head %}
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script src="{% static 'ueditor/ueditor.config.js' %}"></script>
<script src="{% static 'ueditor/ueditor.all.min.js' %}"></script>
<script src="{% static 'js/write_news.min.js' %}"></script>
{% endblock %}
{% block content-header %}
<h1>
{% if news %}
编辑新闻
{% else %}
发布新闻
{% endif %}
</h1>
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<form action="" class="form">
<div class="box-body">
<div class="form-group">
<label for="title-form">标题</label>
{% if news %}
<input type="text" class="form-control" name="title" id="title-form" value="{{ news.title }}"> {% else %}
<input type="text" class="form-control" name="title" id="title-form">
{% endif %}
</div>
<div class="form-group">
<label for="category-form">分类</label>
<select name="category" id="category-form" class="form-control">
{% for category in categories %}
{% if news and news.category_id == category.pk %}
<option value="{{ category.pk }}" selected>{{ category.name }}</option>
{% else %}
<option value="{{ category.pk }}">{{ category.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="desc-form">描述</label>
{% if news %}
<input type="text" class="form-control" id="desc-form" name="desc" value="{{ news.desc }}"> {% else %}
<input type="text" class="form-control" id="desc-form" name="desc">
{% endif %}
</div>
<div class="form-group">
<label for="thumbnail-form">缩略图</label>
<div class="input-group">
{% if news %}
<input type="text" class="form-control" id="thumbnail-form" name="thumbnail" value="{{ news.thumbnail }}">
{% else %}
<input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
{% endif %}
<span class="input-group-btn">
<label class="btn btn-default btn-file">
上传图片<input hidden type="file" class="btn btn-default" id="thumbnail-btn">
</label>
</span>
</div>
</div>
<div id="progress-group" class="form-group" style="display: none;">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0">
0%
</div>
</div>
</div>
<div class="form-group">
<label for="content-form">内容</label>
<script id="editor" type="text/plain">
{{ news.content|safe }}
</script>
</div>
</div>
<div class="box-footer">
<button id="submit-btn" data-news-id="{{ news.pk }}" class="btn btn-primary pull-right">发布新闻</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
现在是片段的积攒,后面会做详细的笔记总结。