springboot+vue3《开发小小博客》第三天》

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

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

演示开始

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

实现代码也非常简单

html部分 article.vue
 <el-card>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="index" type="index" label="序号" width="180" />
                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handDetail(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button type="danger" size="small" @click="handDel(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    background :current-page="pageAtions.pageNum" :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageAtions.pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="pageAtions.total">
                </el-pagination>
            </div>
        </el-card>

 js部分 article.vue
// 查询列表
const getArticleList = () => {
    var param = {
        pageNum: pageAtions.pageNum,
        pageSize: pageAtions.pageSize,
    }
    articlelist(param).then(res => {
        if (res.retCode == 1) {
            tableData.value = res.data.data;
            pageAtions.total = res.data.total;

        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

第二 修改功能 如图

查看详情
const handDetail = (index, row) => {
    formedit.title = row.title;
    formedit.id = row.id;
    articledetail(row.id).then(res => {
        if (res.retCode == 1) {
            var html = res.data.content;
            datailData.value = html
            dialogVisible.value = true;
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
修改提交
const Addsubmit = () => {
    var param = {
        content: editor.txt.html(),
        id: formedit.id,
        title: formedit.title,
        userId: local.getssontItem("userinfo").id
    }
    articleedit(param).then(res => {
        if (res.retCode == 1) {
            ElMessage({
                message: "修改成功",
                type: 'success',
            })
            getArticleList();
            dialogVisible.value = false;
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
  

第三 删除操作

删除js部分代码
const handDel = (index, row) => {
    ElMessageBox.confirm(
        '你确定删除当前文章吗?',
        '删除提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delInfo(row.id);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

const delInfo = (id) => {
    articledel(id).then(res => {
        if (res.retCode == 1) {
            ElMessage({
                message: "删除成功",
                type: 'success',
            })
            getArticleList();
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}