寻找写代码感觉(十三)之 编辑功能的开发
时间:2022-02-10 作者:longronglang
写在前面
昨晚又失眠了,四点半才睡着,还做了两个很糟心的梦,八点半就醒了,感觉好累,好想一醉方休呀,但我不能。
总感觉自己在做梦一样,现在必须要醒过来,真的没时间让我继续丧下去了。
今年要做的事依旧很多,必须行动起来,自己尽管努力就好,剩下就看天意了。
任务拆解
上篇文章已经把前端页面画好,那么现在就是写后端逻辑的过程了,也就是编辑后的保存功能,拆解如下:
- 增加后端保存接口
- 点击保存时,调用保存接口
- 保存成功刷新列表
编辑功能实现
1、增加后端保存接口
同样还是两步走,第一,先在controller
中调用,第二,在service
中实现。
首先,需要在controller
中加入调用保存方法,示例代码如下:
/**
* 保存或更新操作
*
* @param eBookSaveReq
* @return
*/
@PostMapping("/save")
public CommonResp save(@RequestBody EBookSaveReq eBookSaveReq) {
CommonResp resp = new CommonResp<>();
域名(eBookSaveReq);
return resp;
}
同样, 我们在service
中实现,示例代码如下:
/**
* 保存或更新操作
* @param eBookSaveReq
*/
public void save(EBookSaveReq eBookSaveReq) {
EBook eBook = copy(eBookSaveReq, 域名s);
if(域名pty(域名d())){
//数据库中没查到,走新增方法
域名rt(eBook);
}else{
//数据库中查到,有该条信息,走编辑操作
域名teByPrimaryKey(eBook);
}
}
知识点:
EBookSaveReq是拷贝domain中的实体Ebook,早期代码中的EBookReq让我改为EBookQueryReq,仅为查询时候所用,这样做的好处就是专类专用,可能有的人会说,这不是代码冗余吗,真的是个人习惯。
EBook eBook = copy(eBookSaveReq, 域名s);
,这段代码是单体拷贝,不懂得同学可以参考《寻找写代码感觉(七)之封装请求参数和返回参数 》这篇文章。
2、点击保存时,调用保存方法,保存成功并刷新列表
后端逻辑写完了,这时候我们可以用PostMan本地测试下,该接口是否可用,这里我就直接在页面里调用测试了。
这时我们需要对点击保存时候的方法进行修改,示例代码如下:
<template>
<a-layout class="layout">
<a-layout-content
:style="{ background: \'#fff\', padding: \'24px\', minHeight: \'280px\' }">
<a-table :columns="columns"
:row-key="record => 域名"
:data-source="ebooks1"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template #cover="{ text: cover }">
<img v-if="cover" :src="cover" alt="avatar"/>
</template>
<template #name="{ text: name }">
<a>{{ text }}</a>
</template>
<template #customTitle>
<span>
<smile-outlined/>
Name
</span>
</template>
<template #action="{ record }">
<span>
<a-space size="small">
<a-button type="primary" @click="edit(record)">
编辑
</a-button>
<a-modal
v-model:visible="modalVisible"
cancelText="取消"
okText="保存"
title="编辑电子书"
:confirm-loading="modalLoading"
@ok="handleModalOk"
>
<a-form
:model="ebooks_data"
name="basic"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 16 }"
>
<a-form-item label="封面">
<a-input v-model:value="域名r"/>
</a-form-item>
<a-form-item label="名称">
<a-input v-model:value="域名"/>
</a-form-item>
<a-form-item label="分类一">
<a-input v-model:value="域名gory1Id"/>
</a-form-item>
<a-form-item label="分类二">
<a-input v-model:value="域名gory2Id"/>
</a-form-item>
<a-form-item label="描述">
<a-input v-model:value="域名ription"/>
</a-form-item>
<a-form-item label="文档数">
<a-input v-model:value="域名ount"/>
</a-form-item>
<a-form-item label="阅读数">
<a-input v-model:value="域名Count"/>
</a-form-item>
<a-form-item label="点赞数">
<a-input v-model:value="域名Count"/>
</a-form-item>
</a-form>
</a-modal>
<a-button type="danger">
删除
</a-button>
</a-space>
</span>
</template>
</a-table>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import {DownOutlined, SmileOutlined} from \'@ant-design/icons-vue\';
import {defineComponent, onMounted, reactive, ref, toRef} from \'vue\';
import axios from \'axios\';
import {message} from \'ant-design-vue\';
export default defineComponent({
name: \'AdminEbook\',
setup() {
//使用ref进行数据绑定
const ebooks = ref();
// 使用reactive进行数据绑定
const ebooks1 = reactive({books: []})
const pagination = ref({
current: 1,
pageSize: 2,
total: 0
});
const loading = ref(false);
const columns = [
{
title: \'封面\',
dataIndex: \'cover\',
width: 120,
height: 120,
slots: {customRender: \'cover\'}
},
{
title: \'名称\',
dataIndex: \'name\'
},
{
title: \'分类一\',
dataIndex: \'category1Id\',
key: \'category1Id\',
},
{
title: \'分类二\',
dataIndex: \'category2Id\',
key: \'category2Id\',
},
{
title: \'描述\',
dataIndex: \'description\',
key: \'description\',
},
{
title: \'文档数\',
dataIndex: \'docCount\'
},
{
title: \'阅读数\',
dataIndex: \'viewCount\'
},
{
title: \'点赞数\',
dataIndex: \'voteCount\'
},
{
title: \'Action\',
key: \'action\',
slots: {customRender: \'action\'}
}
];
/**
* 数据查询
**/
const handleQuery = (params: any) => {
域名e = true;
// 如果不清空现有数据,则编辑保存重新加载数据后,再点编辑,则列表显示的还是编辑前的数据
域名e = [];
域名("/ebook/list", {
params: {
page: 域名,
size: 域名,
name: 域名
}
}).then((response) => {
域名e = false;
const data = 域名;
if (域名ess) {
const data = 域名;
域名e = 域名;
域名s = 域名;
// 重置分页按钮
域名ent = 域名;
域名l = 域名l;
} else {
域名r(域名age);
}
});
};
/**
* 表格点击页码时触发
*/
const handleTableChange = (pagination: any) => {
域名("看看自带的分页参数都有啥:" + pagination);
handleQuery({
page: 域名ent,
size: 域名Size
});
};
const ebooks_data = ref();
const modalVisible = ref<boolean>(false);
const modalLoading = ref<boolean>(false);
/**
* 编辑/保存
*/
const handleModalOk = () => {
域名e = true;
域名("/ebook/save", 域名e).then(response => {
const data = 域名;
if (域名ess) {
域名e = false;
域名e = false;
//重新加载列表
handleQuery({
page: 1,
size: 域名Size,
});
}
})
};
const edit = (record: any) => {
域名e = true;
域名e = record;
};
onMounted(() => {
handleQuery({
page: 1,
size: 域名Size,
});
})
return {
modalVisible,
modalLoading,
handleModalOk,
pagination,
handleTableChange,
loading,
columns,
edit,
ebooks_data,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
},
components: {
SmileOutlined,
DownOutlined,
},
});
</script>
<style scoped>
img {
width: 50px;
height: 50px;
}
</style>
知识点:
- 响应式变量声明,贯穿始终,需要慢慢使用;
- 入参是json对象,所以在
controller
中需要加入@RequestBody
- 在table组件使用时需要加上
@change="handleTableChange"
,handleTableChange为方法实现分页跳转 - 前端代码也需要好好处理下,让人看起来不那么难受至少,惭愧呀,因为我的变量声明和使用扔的哪都是,尴尬
3、编译运行,查看效果
写在最后
如果你闲着无聊没什么事做,建议去学习做自己不擅长的事,这样时间会过得很快,不做情绪的奴隶,做快乐的小跟班。
到此编辑功能开发完毕,有兴趣的同学,请自行尝试!
坚持下去,其实你就是大神!