layui如何将表单显示在页面的正中间_博客功能篇：文章发布与修改和将数据存储到数据库处理...

博客要有文章展示，首先得有发文章的地方。因此我们在做完登录功能之后，接着现在就开始做文章发布功能了。

文章发布功能包含了2块内容，一块是文章的创建，另一块是分类的创建。

文章发布页面

我们在template文件夹下创建一个article文件夹，并在里面新建一个publish.html：

{% include "partial/header.html" %}
<div class="layui-container">
    <div class="publish">
        <div class="layui-form">
            <input type="hidden" name="id" value="{
    {
    article.Id}}">
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{
    {
    article.Title}}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章分类</label>
                <div class="layui-input-block">
                    <input type="text" name="category_name" value="{
    {
    article.Category.Title}}" autocomplete="off"
                           class="layui-input" list="category_name">
                    <datalist id="category_name">
                        {% for item in categories %}
                        <option value="{
    {
    item.Title}}"></option>
                        {% endfor %}
                    </datalist>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input type="text" name="keywords" value="{
    {
    article.Keywords}}" placeholder="多个请用英文,隔开" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="默认提取文章前150个字" class="layui-textarea" rows="3">{
    {
    article.Description}}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <textarea name="content" class="layui-textarea" id="text-editor">{
    {
    article.ArticleData.Content}}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="article-publish">确认提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</bu