孤注一掷、-优快云博客

对电子书查询和保存做参数校验集成spring-boot-starter-validation对保存接口和查询接口增加参数校验校验不通过时，前端弹出错误提示首先pom.xml中添加内置依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validat

2022-03-05 16:08:07 550

电子书管理页面，点击某一行的删除按钮式，删除该行电子书后端增加删除接口前端点击删除按钮时调用后端删除接口删除时需要有一个确认框添加：注意要使用@DeleteMapping。{id}会自动映射 @PathVariable Long id修改：添加气泡确认窗新增删除事件最后返回事件。注意：由于后端id使用的是long类型，前端是number类型，雪花算法id在前后端交互时会产生精度损失，造成前端获取的id与后端不同，产生问题。解决方法：将lon...

2022-03-04 22:11:18 906

原创 6-9 雪花算法与新增功能

新增工具类：/** * Twitter的分布式自增ID雪花算法 **/@Componentpublic class SnowFlake { /** * 起始的时间戳 */ private final static long START_STMP = 1609459200000L; // 2021-01-01 00:00:00 /** * 每一部分占用的位数 */ private final static long

2022-03-04 21:30:33 225

原创 6-8 完成电子书编辑功能

分三步：一、增加后端保存接口二、点击保存时，调用保存接口三、保存成功刷新列表修改：一般保存、更新类的接口用PostMapper。注意，要加上@RequestBody 注解。json方式post提交要用这个注解。当用form表单方式post提交时不用注解。保存成功后，会去刷新列表。所以不需要返回任何东西。保存的请求参数和domain中的一样。save既支持新增，也要支持更新。根据传进来的req的id，有值说明是更新。修改：在点击保存的时候...

2022-03-04 20:20:25 225

原创 6-7 制作电子书表单

去ant design vue 上寻找异步关闭框编辑框显示电子书表单。修改：点击编辑按钮会调用edit 方法。新增：修改：下面实现点击每一行编辑按钮，弹出编辑框。修改：方法带上record参数。上面slot是按钮的渲染，record即对应一行一行的数据，然后将模态框中的内容修改为整个表单：对应的model，绑定了一个变量ebook，这是一个新的响应式变量。所以我们要在下面定义一下。新增一个响应式变量ebook：修改：...

2022-03-04 18:30:00 281

原创 6-6 前后端分页功能整合

前端修改列表查询分页参数前端修改接受列表查询结果电子书管理页面和首页都需要改。pagination 表格分页组件内置了一些属性：current，pageSize等下面作出修改：下面修改首页布局。写1000大小是为了全部展示出来。结果：...

2022-03-04 17:38:06 526

原创 6-5 封装分页请求参数和返回参数

首先封装请求参数，新建：用泛型来写list。让EbookReq继承PageReq。修改：测试：结果：这样分页就变成一个动态的参数了，是由前端传进来的。

2022-03-04 15:05:09 538

原创 6-4 使用PageHelper实现后端分页

首先，引入插件 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.13</version&

2022-03-04 14:35:12 501

原创 6-3 电子书表格展示

在ant design 上寻找表格实例：代码如下：<template> <a-table :columns="columns" :data-source="data"> <template #name="{ text }"> <a>{{ text }}</a> </template> <template #customTitle> <span>.

2022-03-04 11:06:13 639

原创 6-2 增加电子书管理页面

增加一个页面需要增加三部分的内容：单独页面、菜单和与页面绑定的路由。作出以下改动，取消懒加载：将vue页面命名改为page.vue 和 my-page.vue 的风格。首先修改路由：然后加一个菜单，作以下处理：添加一个页面：测试结果：并且点击可以跳转：...

2022-02-28 18:10:16 404

原创 5-9 SpringBoot AOP的使用

配置AOP，打印接口耗时、请求参数、返回参数。新建：@Aspect@Componentpublic class LogAspect { private final static Logger LOG = LoggerFactory.getLogger(LogAspect.class); /** * 定义一个切点 */ @Pointcut("execution(public * com.swk.*.controller..*Controller.

2022-02-28 17:36:43 577

原创 5-8 SpringBoot拦截器的使用

配置拦截器，打印接口耗时新建：@Component public class LogInterceptor implements HandlerInterceptor { private static final Logger LOG = LoggerFactory.getLogger(LogInterceptor.class); @Override public boolean preHandle(HttpServletRequest request, H

2022-02-28 16:47:59 625

原创 5-7 SpringBoot过滤器的使用

配置过滤器，打印接口耗时。新建如下：内容：@Component public class LogFilter implements Filter { private static final Logger LOG = LoggerFactory.getLogger(LogFilter.class); @Override public void init(FilterConfig filterConfig) throws ServletException.

2022-02-28 16:24:02 228

原创 5-6 使用axios拦截器打印前端日志

打日志是前端常用的简单的调试方式。每次调用后端接口之前打一个日志，发送的结果的回调函数里面，我们再打一个日志。撒大声地axios提供了拦截器功能，我们可以在拦截器里面，把请求日志和返回参数一起打印出来。这样业务代码里面就不用去打。先在main.ts中添加如下：/** * axios拦截器 */axios.interceptors.request.use(function (config) { console.log('请求参数：', config); retur..

2022-02-28 15:49:27 1551

原创 5-5 Vue CLI多环境部署

一、增加开发和生产配置文件这个只能访问本机，一般会添加一个不同环境的配置，如下在web文件夹中新增新增如下：使用process.env.xxx读取环境变量。然后作如下修改双击测试结果如下：下面修改编译：（打成静态的包，即dist文件夹下的内容，发布的话就是发布这些静态文件）这里可以修改启动的端口：将axios请求域改为读配置文件：测试结果成功：然后添加如下：这样使代码更加简洁测...

2022-02-28 13:34:48 561

原创 5-4 电子书列表界面展示

安装图标库npm install --save @ant-design/icons-vue然后导入图标库，对main.js修改如下：在EbookService.java中添加动态sql来使不加条件时查询全部的电子书信息。Home.vue调整如下：<template> <a-layout> <a-layout-sider width="200" style="background: #fff"> <a-menu.

2022-02-27 18:06:37 381

原创 5-3 Vue3数据绑定显示列表数据

Vue的核心功能：数据双向绑定。前端拿到后端的数据，将它显示到页面上。初始化的一些逻辑，建议都写到生命周期函数如：onMounted里面。setup就放一些参数定义，方法定义。setup执行的时候界面还没渲染好，这时候如果去操作界面元素会报错。因此要多利用生命周期钩子函数。页面改动如下：执行后。可知整个执行的逻辑。接下来就要把后端拿到的数据放到页面上去。首先从response里面把队一行的电子书列表数据拿出来，第一种方法：将一个数据变成ref变量。.

2022-02-27 16:31:51 1241

原创 5-2 集成HTTP库axios

执行如下命令：npm install axios@0.21.0 --save显示集成结果。在Home.vue中作如下修改。运行后端和前端，如下报错是前后端分离常见的跨域问题。后端不信任前端，来自一个IP端口的页面（vue项目），要访问另一个IP端口的资源（SpringBoot请求接口），会产生跨域访问。新建跨域配置文件，@Configurationpublic class CorsConfig implements WebMvcConfigurer {

2022-02-27 15:58:09 378

原创 4-7 制作vue自定义组件

将header和footer提取成公共的组件。props用于父子组件之间传递数据新建the-header和the-footer组件，如图：在App.vue中，添加<script>.....</script>1.import组件页面2.components加入该组件3.在template中使用组件如图：the-footer组件同理。注：勾选这个可以追加到上一次提交。...

2022-02-25 22:36:56 405

原创 4-6 网站首页布局开发

App.vue中修改为以下内容：<template> <a-layout id="components-layout-demo-top-side-2"> <a-layout-header class="header"> <div class="logo" /> <a-menu v-model:selectedKeys="selectedKeys1" theme="dark"

2022-02-25 21:50:03 415 3

原创 4-5 集成Ant Design Vue

UI界面方法一：基于原生的html，css，js。方法二：基于第三方css库，如bootstrap。但是有些组件要求引入jQuery。方法三：基于Vue 的 UI 组件。Vue UI组件用法相通。安装 ant design vue，执行以下命令。npm install ant-design-vue@2.0.0-rc.3 --save安装成功。下面引入，在main.ts里加配置。在home页面添加一个danger按钮启动后结果：...

2022-02-25 17:50:50 450

空空如也

空空如也