【Springboot+Vue+MP+ElementUI+axios项目实战记录】

news2024/11/10 15:40:00

写在最前:仅用于记录项目中遇到的问题,并不一定解决

1、 想要实现,点击配置自动跳转页面

在这里插入图片描述
在这里插入图片描述

2、 虽然使用了push追加了url,但是在跳转下一个,比如
在这里插入图片描述

配置跳转到用户会因为之前的url是http://localhost:8080/admin/pagetwo,push()
在这里插入图片描述

会出现重复的路径

在使用 $router.push() 方法时,它会向当前 URL 后追加新的路径,并根据新的 URL 进行页面跳转。因此,如果你在使用 $router.push() 方法时传递的路径以 / 开头,那么它会将路径解释为绝对路径,从而从根路径开始跳转,而不是从当前路径开始跳转。
在这里插入图片描述

为了解决这个问题,你可以在 $router.push() 方法中传递绝对路径,而不是相对路径。可以通过使用 $route 对象来构建绝对路径。
假设你想要跳转到 /admin/pagetwo,无论当前 URL 是什么,你可以使用以下代码:
在这里插入图片描述

3、 如何绘制假数据
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

可以使用tableData数组绑定数据

4、 如何动态数据绑定
在这里插入图片描述

首先,data对象定义了该组件的数据属性,包括total和tableData,它们的初始值为null。
其次,created生命周期函数是在组件创建之后立即执行的函数,用于初始化组件的数据和状态。在这个例子中,我们使用axios库发送了一个GET请求到指定的URL,并将获取到的数据赋值给tableData和total。在这里,我们通过this来引用Vue组件的实例,并将其赋值给一个变量_this,以确保在axios回调函数中能够正确引用Vue实例的数据。

5、 文本框无法写入数据
在这里插入图片描述

原因
进行了双向数据绑定,但是未在data()中进行定义
在这里插入图片描述

6、 绑定点击重置的清除事件
在这里插入图片描述在这里插入图片描述

设置@click绑定点击事件
当你在Vue组件中使用数据时,需要使用this关键字来引用组件实例中的数据。这是因为Vue组件中的数据是在组件实例中定义的,而不是全局作用域中的变量。因此,使用this来引用组件实例可以确保你在操作正确的数据。例如,如果你在Vue组件中定义了一个名为message的数据属性,你可以通过this.message来引用它,而不是直接使用message来引用它。
7、 增加多选框和批量删除按钮

在这里插入图片描述
在这里插入图片描述

el-table-column type=“selection”
使用selection表示可选

后端数据库

8、 解决跨域问题
在这里插入图片描述

9、 后端数据通过访问url访问

在这里插入图片描述

10、 从后端拿数据,前端渲染
在这里插入图片描述

axios
使用命令 npm install axios

在这里插入图片描述

11、 数据无法被前端接收

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
使用
在这里插入图片描述检测对象类型

12、 使用/home无法正常访问
![在这里插入图片描述](https://img-blog.csdnimg.cn/16dc250c7e3a4c468b78fb77e257ac36.png
使用path:‘/Home’,无法正常访问
在这里插入图片描述

13、 导航栏多次刷新显示冗余

路由守卫

14、 上下页切换导航栏会被同时选中

在这里插入图片描述
在这里插入图片描述

15、 雪花算法

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

不指定id,主键设置自增,

16、 绑定登录注册界面的弹窗
在这里插入图片描述

:visible.sync=“dialogFormVisible” 先设置为false,通过设置点击事件
在这里插入图片描述

更改为true

17、 将login和register都写入index页面中会导致耦合性太高
首先,将register与login设为与index同级,防止变成子路由,其次在index中设置点击事件,更改路径
最后使用created()函数,访问即打开登录页面
在这里插入图片描述

为了避免与后台登录混淆使用/user/login
在这里插入图片描述

18、 使用mybatisplus快速生成代码出现无法注入为bean
观察发现
在这里插入图片描述在这里插入图片描述

自动生成的不提供@Mapper注解,推测忘记加上,加上后继续测试,发现仍然报错
在这里插入图片描述

使用包扫描成功解决,这一点在官网也有所体现
在这里插入图片描述在这里插入图片描述

19、 数据不能双向绑定

位置定义错误,应该定义在data中,在外部定义一般用来表达静态,不需要数据绑定,减少资源浪费。
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

20、 动态分页
1、 引入element-ui
在这里插入图片描述

2、 设置page点击事件,以及出初始数据加载
在这里插入图片描述

21、 新增用户,前后端绑定
在这里插入图片描述

直接在url后面追加即可
在这里插入图片描述

数据双向绑定
在这里插入图片描述

后端restful规范
在这里插入图片描述

插入成功
22、如何保证数据成功操作
在这里插入图片描述

在添加用户返回状态值,如果true为成功,false为失败
在这里插入图片描述

在前端可以拿到data,只需要判断resp.data的值即可
在这里插入图片描述在这里插入图片描述

22、 findById查询用户,前后端类型不匹配

在这里插入图片描述
在这里插入图片描述

后端使用List
在这里插入图片描述

改成getById即可
23、 修改用户信息,提示操作错误,重复主键

在这里插入图片描述在这里插入图片描述在这里插入图片描述

使用saveOrUpdate在这里插入图片描述

具体来说
24、 删除记录后,需要用户自行刷新
在这里插入图片描述

加入window.location.reload();即可解决

25、 RESTful规范主要包含以下几种HTTP请求方法
在这里插入图片描述在这里插入图片描述

26、 图片如何上传以及展示
在这里插入图片描述

使用element-UI作为模板
在这里插入图片描述在这里插入图片描述

生成的链接数据绑定

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

27、 日期选择
在这里插入图片描述

引入模板
在这里插入图片描述

修改v-model即可
在这里插入图片描述

效果展示
在这里插入图片描述

28、 解决2016-05-01T16:00:00.000+00:00数据太长
修改成LocalDate
在这里插入图片描述在这里插入图片描述在这里插入图片描述

目录
1、 想要实现,点击配置自动跳转页面 1
2、 虽然使用了push追加了url,但是在跳转下一个,比如 1
3、 如何绘制假数据 2
4、 如何动态数据绑定 4
5、 文本框无法写入数据 5
6、 绑定点击重置的清除事件 6
7、 增加多选框和批量删除按钮 7
8、 解决跨域问题 11
9、 后端数据通过访问url访问 12
10、 从后端拿数据,前端渲染 12
11、 数据无法被前端接收 14
12、 使用/home无法正常访问 15
13、 导航栏多次刷新显示冗余 16
14、 上下页切换导航栏会被同时选中 16
15、 雪花算法 17
16、 绑定登录注册界面的弹窗 18
17、 将login和register都写入index页面中会导致耦合性太高 18
18、 使用mybatisplus快速生成代码出现无法注入为bean 19
19、 数据不能双向绑定 21
20、 动态分页 24
21、 新增用户,前后端绑定 24
22、 findById查询用户,前后端类型不匹配 26
23、 修改用户信息,提示操作错误,重复主键 27
25、 RESTful规范主要包含以下几种HTTP请求方法 28
26、 图片如何上传以及展示 29
28、 解决2016-05-01T16:00:00.000+00:00数据太长 31

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/481151.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【SpringBoot】MyBatisPlus代码生成器

项目准备 数据库 MySql 5.7 新建数据库votedb,新建两个测试表user、vote_theme user表 vote_theme表 建表代码如下 -- ---------------------------- -- Table structure for user -- ---------------------------- DROP TABLE IF EXISTS user; CREATE TABLE…

muduo 网络库数据流分析

最近自己实现了一个 Tiny_WebServer 服务器,是一个半同步半反应堆的模式,具体可以看我 github 上面的描述。但是春招实习二面被面试官表示项目太简单了,疯狂被怼分布式、集群等知识,故想进一步重构项目,无奈我实现的 T…

Anaconda Prompt安装pytorch

详解Anaconda安装pytorch的全过程 1.首先切换Anaconda的镜像地址,切换的原因我想大家应该明白😊 在anaconda prompt中输入以下四行命令 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add ch…

医学图像分割之Attention U-Net

目录 一、背景 二、问题 三、解决问题 四、Attention U-Net网络结构 简单总结Attention U-Net的操作:增强目标区域的特征值,抑制背景区域的目标值。抑制也就是设为了0。 一、背景 为了捕获到足够大的、可接受的范围和语义上下文信息,在标…

Anaconda安装教程

最新Anaconda3安装教程 1.Anaconda3下载 官网下载地址 缺点: 下载速度比较慢,对速度有要求的小伙伴往下看 通过清华镜像加速的方式下载比较快 清华镜像加速地址 2.Anaconda3安装 双击安装包,点击next 点击 I agree 选择使用的用户&am…

攻防世界-Crypto-不仅仅是Morse

题目描述:题目太长就不拷贝了,总之,就是对以下字符进行解密 --/.-/-.--/..--.-/-..././..--.-/..../.-/...-/./..--.-/.-/-./---/-/...././.-./..--.-/-.././-.-./---/-.././..../..../..../..../.-/.-/.-/.-/.-/-.../.-/.-/-.../-.../-.../…

QML应用动画(Applying Animations)

目录 一 扩展可点击图像元素版本2(ClickableImage Version2) 1 第一个火箭 2 第二个火箭 3 第三个火箭 动画可以通过以下几种方式来应用: 属性动画 - 在元素完整加载后自动运行; 属性动作 - 当属性值改变时自动运行&#xf…

通讯录的实现(静态入手版)

🍉博客主页:阿博历练记 📖文章专栏:c语言(初阶与进阶) 🎁代码仓库:阿博编程日记 🌹欢迎关注:欢迎友友们点赞收藏关注哦 文章目录 🍭前言&#x1f…

python学习之【类和对象】

前言 五一快乐! 上一篇文章python学习——【第八弹】中,给大家介绍了python中的函数,这篇文章接着学习python中的类和对象。 我们知道,python中一切皆对象。在这篇文章开始之前,我们先了解一下编程界的两大阵营——面…

[渗透教程]-004-长城防火墙GFW的原理

文章目录 1. baidu.com 请求过程2. GFW原理2.1 GFW拦截方法1:DNS渲染2.2 通过IP黑名单2.3 VPN阻断1. baidu.com 请求过程 家庭的路由器具备了交换机的功能.域名–>ip,优先检测本地的缓存,没有的话就查找DNS服务器,传输层对应该层的数据进行封装增加了端口的信息,网络层对传输…

[230502]英语阅读长难句分析|共6个

🍣五月份第二篇笔记🍣 40:0/3 41: 3/3 目录 题目 40-1 (1)句子结构分析 (2)生词 (3)原题 40-2 (1)句子结构分析 (2&#…

2022年度项目管理软件排名揭晓:哪些软件在市场中脱颖而出?

在项目管理软件的选择过程中,用户会倾向于参考一些软件排名来辅助自己进行选择。软件排名方面推荐参考G2,一个国外的靠谱软件评测网站,类似于软件版的“大众点评”,软件评价来自于真实用户,网站通过多维度的算法&#…

springboot3+react18+ts实现一个点赞功能

前端&#xff1a;vitereact18tsantd 后端&#xff1a;springboot3.0.6mybatisplus 最终效果大致如下&#xff1a; 后端&#xff1a; 引入pom依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring…

PMP/高项 03-项目进度管理

项目进度管理 概念 项目进度管理&#xff08;Schedule Management) 项目进度管理又叫项目工期管理&#xff08;Duration Management)或项目的时间管理(Time Management) 是一种为管理项目按时完成项目所需的各个过程 进度管理过程 规划进度管理 定义活动 排列活动顺序 估算活…

jQuery -- 常用API(上)

1. jQuery选择器 1.1 jQuery基础选择器 原生 JS 获取元素方式很多&#xff0c;很杂&#xff0c;而且兼容性情况不一致&#xff0c;因此 jQuery 给我们做了封装&#xff0c;使获取元素统一标准。 语法&#xff1a;$(“选择器”) // 里面选择器直接写 CSS 选择器即可&#xff…

【毕业设计】基于springboot + vue微信小程序商城

目录 前言一、视频展示二、系统介绍三、项目地址四、运行环境五、创新点/亮点六、设计模块①前台②后台 七、系统功能模块结构图八、 准备阶段①使用真实支付②使用模拟支付九、使用说明十、登录后台十一、后台页面展示十二、微信小程序页面展示关于我 前言 【毕业设计】基于s…

IPsec中IKE与ISAKMP过程分析(快速模式-消息2)

IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息1&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息2&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息3&#xff09;_搞搞搞高傲的博客…

数据结构与算法基础(王卓)(31):折半插入排序、希尔排序

目录 折半插入排序 Project 1: 问题&#xff1a;缺少在插入元素之前的移动元素的操作 Project 2:&#xff08;最终成品、结果&#xff09; 希尔排序 Project 1:&#xff08;个人思路&#xff09; 标准答案&#xff1a;&#xff08;PPT答案&#xff09; 解释说明&#xff…

etcd的Watch原理

在 Kubernetes 中&#xff0c;各种各样的控制器实现了 Deployment、StatefulSet、Job 等功能强大的 Workload。控制器的核心思想是监听、比较资源实际状态与期望状态是否一致&#xff0c;若不一致则进行协调工作&#xff0c;使其最终一致。 那么当你修改一个 Deployment 的镜像…

数据结构篇三:双向循环链表

文章目录 前言双向链表的结构功能的解析及实现1. 双向链表的创建2. 创建头节点&#xff08;初始化&#xff09;3. 创建新结点4. 尾插5. 尾删6. 头插7. 头删8. 查找9. 在pos位置前插入10. 删除pos位置的结点11. 销毁 代码实现1.ListNode.h2. ListNode.c3. test.c 总结 前言 前面…