springboot+vue3 《开发博客第二天》

案例目录 《个人小博客》
1、登录注册（带验证码）
2、发布小文章（添加文章）
3、文章管理（删改查）

项目技术栈介绍
前端：vue3+elementplus
后端：springboot+mybatisplus
jdk：1.8以上
数据库：mysql

演示开始

第一：前端部分（效果图）

实现代码也非常简单

页面是：addarticle.vue
div class="manage-container">
        <div class="button_info">
            <el-col>
                <el-card shadow="hover">
                    <h3>添加文章</h3>
                </el-card>
            </el-col>
        </div>
        <el-card>

            <el-form :model="form" label-width="120px">
                <el-row justify="start">
                    <el-col :span="20">
                        <el-form-item label="文章标题">
                            <el-input v-model="form.title" />
                        </el-form-item>
                    </el-col><br />
                    <el-col :span="20">
                        <el-form-item label="文章内容">
                            <div id="content"></div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="Reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

js部分 addarticle.vue
我们是使用了editor富文本编辑器 ，主要是开源免费的
let editor;
const createEditor = () => {
    editor = new E("#content");
    editor.config.zIndex = 0;
    editor.config.width = 700;
    editor.create();
};
const onSubmit = () => {
    var param = {
        title: form.title,
        content: editor.txt.html(),
        userId:local.getssontItem("userinfo").id
    }
    console.log(param)
    article(param).then(res => {
        if (res.retCode == 1) {
            ElMessage({
                message: "添加成功",
                type: 'success',
            })
            }else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
            })
        }
    })
}