网站会员注册怎么做,做网站优化公司,怎样在建设部网站查资质证书,开发板英文#x1f4dd;个人主页#xff1a;哈__
期待您的关注 目录
一、#x1f525;今日内容
二、#x1f30f;前端页面的改造
2.1新增电子书管理页面
2.2新增路由规则
2.3修改the-header代码
三、#x1f697;SpringBoot后端Ebook模块改造
3.1增加电子书增/改接口
3.1.… 个人主页哈__
期待您的关注 目录
一、今日内容
二、前端页面的改造
2.1新增电子书管理页面
2.2新增路由规则
2.3修改the-header代码
三、SpringBoot后端Ebook模块改造
3.1增加电子书增/改接口
3.1.1新增EbookSaveParam
3.1.2添加Controller代码
3.1.3在Ebook实体类上增加一个注解
3.2 增加电子书删除接口
四、测试
4.1添加功能测试
4.2修改功能测试。
4.3删除功能测试 一、今日内容 【wiki知识库】03.前后端的初步交互展现所有的电子书-CSDN博客 上一次带领大家把前端的首页部分实现了一下成功的从数据库当中取出了我们的信息并且展示在前端页面到了下图的部分。 今天主要是把这个网页的界面初步优化一下修改一下导航栏以及增加电子书管理模块。包含电子书的查询功能、新增功能、编辑功能和删除功能不包括文档管理。 二、前端页面的改造 2.1新增电子书管理页面 我在src下新建了admin文件夹这个文件夹中的内容是给网站管理员看到的所以放到了admin目录名字为admin-ebook.vue。 admin-ebook.vue的具体内容如下。这个文件里我注释掉了一些信息而且这个文件中的内容包含了页面需要的功能很多有的一些并不是今天要讲解的内容所以并没有使用到。今天主要就是想带着大家做出一个电子书管理的模块来。 templatea-layouta-layout-content:style{ background: #fff, padding: 24px, margin: 0, minHeight: 280px }pa-form layoutinline :modelparama-form-itema-input v-model:valueparam.name placeholder名称/a-input/a-form-itema-form-itema-button typeprimary clickhandleQuery({page: 1, size: pagination.pageSize})查询/a-button/a-form-itema-form-itema-button typeprimary clickadd()新增/a-button/a-form-item/a-form/pa-table:columnscolumns:row-keyrecord record.id:data-sourceebooks:paginationpagination:loadingloadingchangehandleTableChangetemplate #cover{ text: cover }img v-ifcover :srccover altavatar //templatetemplate v-slot:category{ text, record }!-- span{{ getCategoryName(record.category1Id) }} / {{ getCategoryName(record.category2Id) }}/span --/templatetemplate v-slot:action{ text, record }a-space sizesmall!-- router-link :to/admin/doc?ebookId record.id --a-button typeprimary文档管理/a-button!-- /router-link --a-button typeprimary clickedit(record)编辑/a-buttona-popconfirmtitle删除后不可恢复确认删除?ok-text是cancel-text否confirmhandleDelete(record.id)a-button typedanger删除/a-button/a-popconfirm/a-space/template/a-table/a-layout-content/a-layouta-modaltitle电子书表单v-model:visiblemodalVisible:confirm-loadingmodalLoadingokhandleModalOka-form :modelebook :label-col{ span: 6 } :wrapper-col{ span: 18 }a-form-item label封面a-input v-model:valueebook.cover //a-form-itema-form-item label名称a-input v-model:valueebook.name //a-form-itema-form-item label分类a-cascaderv-model:valuecategoryIds:field-names{ label: name, value: id, children: children }:optionslevel1//a-form-itema-form-item label描述a-input v-model:valueebook.description typetextarea //a-form-item/a-form/a-modal
/templatescript langtsimport { defineComponent, onMounted, ref } from vue;import axios from axios;import { message } from ant-design-vue;import {Tool} from /util/tool;export default defineComponent({name: AdminEbook,setup() {const param ref();param.value {};const ebooks ref();const pagination ref({current: 1,pageSize: 10,total: 0});const loading ref(false);const columns [{title: 封面,dataIndex: cover,slots: { customRender: cover }},{title: 名称,dataIndex: name},{title: 分类,slots: { customRender: category }},{title: 文档数,dataIndex: docCount},{title: 阅读数,dataIndex: viewCount},{title: 点赞数,dataIndex: voteCount},{title: Action,key: action,slots: { customRender: action }}];/*** 数据查询**/const handleQuery (params: any) {loading.value true;// 如果不清空现有数据则编辑保存重新加载数据后再点编辑则列表显示的还是编辑前的数据ebooks.value [];axios.get(/ebook/list, {params: {page: params.page,size: params.size,name: param.value.name}}).then((response) {loading.value false;const data response.data;if (data.success) {ebooks.value data.content.list;// 重置分页按钮pagination.value.current params.page;pagination.value.total data.content.total;} else {message.error(data.message);}});};/*** 表格点击页码时触发*/const handleTableChange (pagination: any) {console.log(看看自带的分页参数都有啥 pagination);handleQuery({page: pagination.current,size: pagination.pageSize});};// -------- 表单 ---------/*** 数组[100, 101]对应前端开发 / Vue*/const categoryIds ref();const ebook ref();const modalVisible ref(false);const modalLoading ref(false);const handleModalOk () {modalLoading.value true;ebook.value.category1Id categoryIds.value[0];ebook.value.category2Id categoryIds.value[1];axios.post(/ebook/save, ebook.value).then((response) {modalLoading.value false;const data response.data; // data commonRespif (data.success) {modalVisible.value false;// 重新加载列表handleQuery({page: pagination.value.current,size: pagination.value.pageSize,});} else {message.error(data.message);}});};/*** 编辑*/const edit (record: any) {modalVisible.value true;ebook.value Tool.copy(record);categoryIds.value [ebook.value.category1Id, ebook.value.category2Id]};/*** 新增*/const add () {modalVisible.value true;ebook.value {};};const handleDelete (id: number) {axios.delete(/ebook/delete/ id).then((response) {const data response.data; // data commonRespif (data.success) {// 重新加载列表handleQuery({page: pagination.value.current,size: pagination.value.pageSize,});} else {message.error(data.message);}});};const level1 ref();let categorys: any;/*** 查询所有分类**/const handleQueryCategory () {loading.value true;axios.get(/category/all).then((response) {loading.value false;const data response.data;if (data.success) {categorys data.content;console.log(原始数组, categorys);level1.value [];level1.value Tool.array2Tree(categorys, 0);console.log(树形结构, level1.value);// 加载完分类后再加载电子书否则如果分类树加载很慢则电子书渲染会报错handleQuery({page: 1,size: pagination.value.pageSize,});} else {message.error(data.message);}});};const getCategoryName (cid: number) {// console.log(cid)let result ;categorys.forEach((item: any) {if (item.id cid) {// return item.name; // 注意这里直接return不起作用result item.name;}});return result;};onMounted(() {handleQuery({page: pagination.value.current,size: pagination.value.pageSize,});});return {param,ebooks,pagination,columns,loading,handleTableChange,handleQuery,getCategoryName,edit,add,ebook,modalVisible,modalLoading,handleModalOk,categoryIds,level1,handleDelete}}});
/scriptstyle scopedimg {width: 50px;height: 50px;}
/style上边的内容很多但我们今天核心的前端调用部分是下边的代码。 const handleQuery (params: any) {loading.value true;// 如果不清空现有数据则编辑保存重新加载数据后再点编辑则列表显示的还是编辑前的数据ebooks.value [];axios.get(/ebook/list, {params: {page: params.page,size: params.size,name: param.value.name}}).then((response) {loading.value false;const data response.data;if (data.success) {ebooks.value data.content.list;// 重置分页按钮pagination.value.current params.page;pagination.value.total data.content.total;} else {message.error(data.message);}});}; 当我们进去这个页面的时候首先就会调用下方代码请求路径也恰好是我们后端之前写过的list接口用来分页查询电子书信息。 onMounted(() {handleQuery({page: pagination.value.current,size: pagination.value.pageSize,});});2.2新增路由规则 既然都要新增一个电子书的管理页面了那我们也要为这个页面分配一个能够匹配到的路由路径。 import { createRouter, createWebHistory, RouteRecordRaw } from vue-router
import HomeView from ../views/HomeView.vue
import AdminEbook from /views/admin/admin-ebook.vue
import AboutView from ../views/AboutView.vue
const routes: ArrayRouteRecordRaw [{path: /,name: home,component: HomeView},{path: /about,name: about,component:AboutView},{path: /admin/ebook,name: AdminEbook,component: AdminEbook},
]const router createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router2.3修改the-header代码 我们新增的组件是通过点击the-header组件中的按钮实现跳转的这里要修改一些代码。我在这个页面添加了一些路由用于跳转我们的组件。 templatea-layout-header classheaderdiv classlogo /diva-menuthemedarkmodehorizontalv-model:selectedKeyssselectedKeys1:style{ lineHeight: 64px }a-menu-item key/router-link to/首页/router-link/a-menu-itema-menu-item key/admin/ebookrouter-link to/admin/ebook电子书管理/router-link/a-menu-itema-menu-item key/aboutrouter-link to/about关于我们/router-link/a-menu-item/a-menu/a-layout-header
/template 至此我们前端改造成功接下来就是后端了。 三、SpringBoot后端Ebook模块改造 3.1增加电子书增/改接口 在我们点击新增按钮或者编辑按钮的时候会弹出一个窗口来添加或者修改电子书的信息当我们点击确定之后会向后端发送请求。请求接口是/ebook/save注意这里的save指代两个功能第一个是新增第二个是修改。 3.1.1新增EbookSaveParam 这个实体类用于封装我们前端传过来的电子书的信息。 Data
public class EbookSaveParam {private Long id;NotNull(message 【名称】不能为空)private String name;private Long category1Id;private Long category2Id;private String description;private String cover;private Integer docCount;private Integer viewCount;private Integer voteCount;
}3.1.2添加Controller代码 这里我直接使用的MybatisPlus封装好的函数 /*** 保存/修改电子书* param ebookQueryParam* return*/PostMapping(/save)public CommonResp save(Validated RequestBody EbookSaveParam ebookQueryParam){boolean res ebookService.saveOrUpdate(CopyUtil.copy(ebookQueryParam,Ebook.class));String message Boolean.TRUE.equals(res) ? 操作成功:操作失败;return new CommonResp(true,message,null);} 3.1.3在Ebook实体类上增加一个注解 我们要使用雪花算法生成的id存储在数据库当中。 /*** id*/TableId(type IdType.ASSIGN_UUID)private Long id; 当然除了雪花id还有其他的id可供选择。这里就不一一给大家说了。 3.2 增加电子书删除接口 删除功能的接口是下边图中所示。采用的是Restful风格的请求。 对应Controller代码。 /*** 删除电子书* param id 电子书id* return*/DeleteMapping(/delete/{id})public CommonResp delete(PathVariable(id) Long id){boolean res ebookService.removeById(id);String message Boolean.TRUE.equals(res) ? 删除成功:删除失败;return new CommonResp(true,message,null);} 四、测试 4.1添加功能测试 测试之前还要注释两行代码。因为我们的分类模块还没写这里不能传值。 随便加一个电子书上去。 结果还是没问题的。 4.2修改功能测试。 不在截图展示了点击编辑按钮之后哦修改数据我这里是正确的。 4.3删除功能测试 这时就有问题了我删除怎么成功不了那么你是否会分析原因呢先看看前端的打印。 仔细看看我们传过去的id是什么再看看你的数据库里是否有这个id 显然是没有的。 这里就要说一下前后端传输数据的数据精度丢失问题了因为我们传的数据是一个整形而且数值很大在传输的过程总是有精度问题得想要解决就需要在后端加一个配置类。 package com.my.hawiki.config;import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;/*** 统一注解解决前后端交互Long类型精度丢失的问题*/
Configuration
public class JacksonConfig {Beanpublic ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {ObjectMapper objectMapper builder.createXmlMapper(false).build();SimpleModule simpleModule new SimpleModule();simpleModule.addSerializer(Long.class, ToStringSerializer.instance);objectMapper.registerModule(simpleModule);return objectMapper;}
} 之后在运行代码试试。大功告成。 电子书管理页面的基本几个功能差不多就这么多了。
