使用Python写一个WEB服务器（额外）

参考《FlaskWeb开发：基于Python的Web应用开发实战》第一部分第7章将原本的单文件web服务器拆分为一个合适的结构。

额外：

 为添加文章（class Novel）添加编辑器支持：

由于之前使用的flask_wtf的快速渲染，在没有编辑器的情况下码文章那叫一个蛋疼，所以为文章内容添加编辑器支持

简单搜索了一下没能搜索到相应的方案，这里是自己的一个思路：

以下是forms，Novel编辑修改表单

class EditNovelForm(FlaskForm):
    id = HiddenField('id')
    title = StringField('title')
    noveltext = TextAreaField('noveltet')
    time = HiddenField('time')
    auth_id = HiddenField('auth_id')
    submit = SubmitField('commit!')

以下是views，Novel编辑修改相关代码

@users.route('/n41/<n_id>',methods=['GET','POST'])
@login_required
def n_one(n_id):#编辑、添加
    editform = EditNovelForm()
    if editform.validate_on_submit():
        novel = Novel()
        novel.title = editform.title.data
        novel.noveltext = editform.noveltext.data
        novel.time = time.time()
        novel.auth_id = int(session['user_id'])
        if editform.id.data :#有ID 那就修改
            novel.id = editform.id.data
            db.session.query(Novel).filter_by(id=n_id).update(novel.todict()) #提交数据库 自定义了to_dict()方法
        else: #没ID 那就是添加
            db.session.add(novel)
        return redirect(url_for('users.nlist'))
    else :
        editform.time = HiddenField(time.time())#其实没有必要
        editform.auth_id = HiddenField(session['user_id'])#其实没有必要
        try :#修改
            novel = db.session.query(Novel).filter_by(id=n_id).first()
            editform.id.data = novel.id
            editform.title.data = novel.title
            editform.noveltext.data = novel.noveltext
        except :#添加
            pass
        return render_template('users/editnovel.html',editform=editform)

第一次获取页面会尝试从数据库查询文章，失败了就是新文章，所有字段为空

第二次从表单获取数据存入数据库

这里使用的是wangEditor，正确导入JS

 **额外说一点：在导入wangEditor.js、未导入jQuery的情况下，你也可以使用$(...)，但是使用$(...).val() /$(...).text() /$(...).html()就会报错，简直坑人啊！

html页面代码如下：

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block body %}
<div class="page-header">
	
	<h1>EditNovel</h1>
</div>
<div class="col-md-8">
	<div></div>
	<form action='#' method='post'>
	<input name = '_id' type="hidden" value = '{{editform.id.data}}'>
	<b>Tilte : </b><input id='_title' name = 'title' type='text' value = '{{editform.title.data}}'>
	<div name = 'noveltext' id = '_noveltext'>
	</div>
	<input name = 'submit' type='button' value = 'commit!' onclick = copydataandsubmit()>
	</form>
	<div style='display:none'>{{ wtf.quick_form(editform) }}</div>
	
	
</div>
	{% block script %}
	<script type="text/javascript" src="/static/editer/wangEditor.min.js"></script>
	<script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script>
	
		<script type="text/javascript">
			var E = window.wangEditor
			var editor = new E('#_noveltext')
			editor.create()
			editor.txt.html('{{editform.noveltext.data|safe}}')
		</script>
		<script>
		function copydataandsubmit(){
			$("#title").val($("#_title").val())
			$("#noveltext").html($("#_noveltext div div.w-e-text").html())
			$("#submit").click()
			}
		</script>
	{% endblock %}
{% endblock %}

解释一下：实际上页面上有两个表单，第一个表单按照 wangEditor的指导嵌入编辑器，并在表单添加一个按钮，绑定一个事件：将第一个表单中的输入对应的复制到第二个表单中，并触发第二个表单的提交

不直接使用自定义表单提交数据的原因是我不知道服务器是怎么样获取表单数据的

第二个表单对应的 id name class可以通过查看渲染后页面的源代码获得

主要需要的val有两个 title 和 noveltext 其他的都是非必须的（或者已知的 无需/不能更改的）