1
168zwq
V1
2023/05/10阅读:27主题:默认主题
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',
})
}
})
}
作者介绍
1
168zwq
V1