SpringBoot+Vue开发笔记

news2024/11/20 6:22:32

参考:https://www.bilibili.com/video/BV1nV4y1s7ZN?p=1

----------------------------------------------------------概要总结----------------------------------------------------------

1、MVC架构:
View:与用户交互
Controller:负责协调分发任务
Model:数据处理

2、@Controller与@RestController区别
@Controller返回页面和数据
@RestController只返回数据,通常json形式

3、上传文件
MultipartFile类处理数据

4、拦截器
作用:权限检查
步骤:写一个类继承拦截接口,然后添加到WebMvcConfigurer的拦截器注册中

5、Swagger
自动生成完善的Restful文档
添加@EnableOpenApi注解即可。

6、MyBatis使用
主要是定义好mapper接口

7、MyBatisPlus使用
只适合于单表查询
只对mapper定义接口做改造,继承BaseMapper<T>即可

8、跨域请求问题
同源策略导致的,在Controller类中增加@CrossOrigin注解即可

9、跨域认证方案
JSON Web Token(JWT)的token方案,
流程:客户端用户登录 -> 服务端生成Token -> 客户端接收到Token。客户端下次请求带上Token -> 服务端解析后拿到用户信息 -> 根据用户信息查到用户的其他关联信息

10、vue+springboot的服务端部署
vue通过build打包后放到ngnix固定目录,ngnix配置后重启即可访问前端
springboot程序打包成jar包后java -jar启动即可
 

---------------------------------------------------------------------------------------------------------------------------

1、全栈知识

后端:SpringBoot + MyBatisPlus

前端:Vue + ElementUI

公共云部署:前后端项目集成打包与部署

2、MVC架构

Controller:协调作用

如果请求的是页面和数据,使用@Controller注解即可;如果只是请求数据,则可以使用@RestController注解

3、SpringBoot实现文件上传功能

 

 4、拦截器

 

 编写代码示例:

 拦截器注册:

 5、Restful的特点

REST并不是一个标准,它是客户端和服务端交互时的设计原则,基于这种原则的Web API更加简洁、更有层次。

幂等性:重复进行一个请求和一次请求的效果相同,这里指的是服务器的资源应该是相同的。

返回错误:4XX一般是客户端错误,5XX一般是服务器错误

6、Swagger

能够自动生成完善的Restful API文档,同时并根据后台代码的修改同步更新,同时提供完整的测试页面来调试API。

Swagger3.0的使用方式(区别于2.x版本的方式)

主函数中增加@EnableOpenApi注解

访问:http://localhost:8080/swagger-ui/index.html

7、 Mybatis使用示例

(1)添加依赖

(2)全局配置

(3)定义User对象

(4)定义Mapper接口

(5)controller中定义接口

CRUD操作汇总:

8、MyBatisPlus最简单使用示例

在上面第(4)Mapper接口定义替换如下,其他保持不变。

9、MyBatis多表查询

单表查询MyBatisPlus比较快,多表查询就不能用MyBatisPlus了。

直接在xxxMapper.xml中编写sql多表查是可以的,或者使用Mybatis的如下方法:

(1)定义User类

多了一个orders字段,该字段不在user表中。

数据库中不存在orders字段,需要自己完成映射

(2)Mapper中定义接口

@Result(column="id", property="id") 将数据库的值赋值给类,前面代表表里面的字段,后面代表类里面的字段

@Result(column="id", property="orders", javaType=List.class, many=@Many(select="com.example.mpdemo.mapper.OrderMapper.selectByUid"))

此id代表用户id,需要根据此字段信息映射到orders字段,此时用到了OrderMapper下的selectByUid来根据id查订单。

many表示多个订单,是一对多的关系,id的值传给selectByUid方法,最终的值交给orders属性。

(3)一对一场景

10、MyBatisPlus的条件查询

使用MyBatisPlus中包装的QueryWrapper

示例如下:

11、MyBatisPlus的分页查询

12、Vue工具集

npm:前端的pip工具

vue cli:Vue官方提供的构建工具,通常称为脚手架。它是基于webpack构建,也可以通过项目内的配置文件进行配置。

创建工程:vue create <project>

13、Vue中的组件

14、vue的组件间传值

 15、element-ui组件

 16、第三方图标库

 17、Axios网络通信

Promise是基于ajax的网络库,XMLHttpRequests是ajax的内部类。

发送请求示例:

Vue组件生命周期:

  • Created:app组件被创建完毕
  • Mounted:app组件被挂载完毕

一般网络请求在created中进行请求。

18、axios请求的跨域问题

报错信息:

根因:

出现了跨域问题。

比如:

前端请求:localhost:8080,它运行在了8080端口上。

后端请求:localhost:8088,它运行在了另一个端口上。

两者域名一样,协议都是http也是一样的,只有端口不一样,即不同源。

解决方案:

解决方案一(全局解决方案):

解决方案二:controller中增加注解

Vue整合实操:

最终vue的编写:

19、vueRouter路由

(1)声明式导航

路由js的示例:

包含子路由的方式:

动态路由方法:

动态路由示例:

(2)编程式导航

(3)导航守卫

20、Vuex状态管理

21、MockJS

22、vue-element-admin

 23、跨域认证

(1)Session认证

 

 (2)Token认证

 

 (3)JWT技术

 

 前两部分都是base64转为字符串,第三部分使用加密算法对前两部分进行加密。

 

 

流程:客户端用户登录 -> 服务端生成Token -> 客户端接收到Token

客户端下次请求带上Token -> 服务端解析后拿到用户信息 -> 根据用户信息查到用户的其他关联信息

24、springboot+vue阿里云部署

(1)安装工具

安装Mysql

安装Ngnix

配置JDK

(2)Vue部署

Ngnix作为web服务器,提供web服务

Vue工程中:npm run build(把vue文件变成html代码)

所有打包出来的代码都会放在dist目录

总结:

(3)Springboot部署

执行sql文件创建表格

把target下的jar包上传到linux上,通过如下命令执行程序

Nohup java -jar xx.jar > logName.log 2>&1 &

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

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

相关文章

浅谈下API初步认知

当我们谈论API&#xff0c;我们指的是应用程序接口&#xff08;Application Programming Interface&#xff09;。API允许不同的软件应用程序之间互相通信和交互。它定义了一组规定和协议&#xff0c;用于确定数据传输和请求的格式、方法和功能。 API的作用是在软件开发中提供一…

运动蓝牙耳机什么款式好、适合运动的蓝牙耳机推荐

夏天到了&#xff0c;越来越多的年轻人会选择在一天的忙碌之后通过简单的运动缓解疲劳。而在运动装备的选择上&#xff0c;除了常规的衣服、鞋之外&#xff0c;耳机也成为了当下年轻群体的必备项&#xff0c;尤其是在运动的过程中听听喜欢的音乐或者电台能够更好地放松身心。那…

Go init 顺序 使用建议

init函数的主要作用&#xff1a; 初始化不能采用初始化表达式初始化的变量。程序运行前的注册&#xff0c;例如初始化数据库链接。实现sync.Once功能。其他 init函数的主要特点&#xff1a; init函数先于main函数自动执行&#xff0c;不能被其他函数调用&#xff1b;init函数…

LeetCode每日一题Day3——1. 两数之和

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;算法修炼之练气篇&#xff08;C\C版&#xff09; &#x1f353;专栏&#xff1a;算法修炼之筑基篇&#xff08;C\C版&#xff09; &#x1f433;专栏&#xff1a;算法修炼之练气篇&#xff08;Python版&#xff09; …

Java编程常用数据转换:String与int互转、Date与String互转、BigDecimal与int比较

一、String与Int互转 在 Java 中要将 String 类型转化为 int 类型时&#xff0c;需要使用 Integer 类中的 parseInt() 方法或者 valueOf() 方法进行转换。 String str "555555555"; int a Integer.parseInt(str); // 方式1 int b Integer.valueOf(str).intValu…

从虚拟到现实:数字孪生助力建筑创新

随着科技的不断进步&#xff0c;数字孪生技术正逐渐成为建筑行业的新宠。数字孪生是一种将实体世界与数字世界相结合的技术&#xff0c;通过将现实世界中的物体、系统或过程以数字化的方式进行建模和仿真&#xff0c;实现了真实世界与虚拟世界的互通。 在建筑行业中&#xff0c…

酷开系统 | 酷开科技,让数据变得更有价值!

身处信息时代&#xff0c;我们每个人时刻都在生成、传递和应用数据&#xff0c;数据已经成为了现代社会中宝贵的资源之一&#xff0c;而在人工智能领域&#xff0c;数据更是被称为人工智能的“燃料”。 而在AI的发展中&#xff0c;只有拥有高质量、多样性且充分代表性的数据集…

Sqli-labs1~65关 通关详解 解题思路+解题步骤+解析

Sqli-labs 01关 (web517) 输入?id1 正常 输入?id1 报错 .0 输入?id1-- 正常判断是字符型注入&#xff0c;闭合方式是这里插一句。limit 100,1是从第100条数据开始&#xff0c;读取1条数据。limit 6是读取前6条数据。 ?id1 order by 3-- 正常判断回显位有三个。?id…

途乐证券|医药板块走高,神奇制药、双成药业涨停,科源制药等拉升

医药板块3日盘中震动走高&#xff0c;截至发稿&#xff0c;睿智医药涨超15%&#xff0c;景峰医药、神奇制药、双成药业等涨停&#xff0c;誉衡药业、科源制药涨约7%&#xff0c;精华制药、赛托生物涨约6%。 途乐证券指出&#xff0c;医药商场当前仍处于磨底行情&#xff0c;但行…

手机商城免费搭之java商城 电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

​ 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前…

Kali搭建Suricata环境及使用方式

这个和上一个snort如出一辙&#xff0c;并且兼容snort的规则&#xff0c;有一个有的没的我就不赘述了&#xff0c;直接开整&#xff01; 开整&#xff01; 0x01 环境0x02 配置0x03 使用 0x01 环境 kali2021 && suricata apt install suricata #安装 suricata-updat…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 5

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

远程仓库的操作

一、远程仓库的操作命令 git remote # 查看当前项目关联的远程库 我事先关联了一个GitHub的远程仓库&#xff0c;关于如何关联远程仓库&#xff0c;可以看这篇文章远程仓库GitHub和Gitee_林涧泣的博客-CSDN博客 git remote add [仓库服务器名] [远程仓库地址] # 关联远程仓库…

天气API强势对接

&#x1f935;‍♂️ 个人主页&#xff1a;香菜的个人主页&#xff0c;加 ischongxin &#xff0c;备注csdn ✍&#x1f3fb;作者简介&#xff1a;csdn 认证博客专家&#xff0c;游戏开发领域优质创作者,华为云享专家&#xff0c;2021年度华为云年度十佳博主 &#x1f40b; 希望…

【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking,论文

论文&#xff1a;https://arxiv.org/abs/2211.08824 代码&#xff1a;https://github.com/WWangYuHsiang/SMILEtrack 文章目录 AbstractIntroductionRelated WorkTracking-by-DetectionDetection methodData association method Tracking-by-Attention Methodology架构概述外观…

汽配企业为什么需要MES管理系统解决方案

众所周知&#xff0c;汽配组装是汽车制造的关键环节&#xff0c;而汽配行业变革以精益为终极目标。制造业要想脱颖而出&#xff0c;就需要采用MES生产管理系统&#xff0c;以实现制造、物流、质量的精益化管理。在快速的流水线节拍生产下&#xff0c;汽配MES管理系统不仅提高了…

备忘录模式——撤销功能的实现

1、简介 1.1、概述 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤。当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原。当前很多软件都提供了撤销&#xff08;Undo&#xff09;操作&#xf…

Mybatis引出的一系列问题-Mybatis缓存机制的探究

Mybatis 使用到了两种缓存&#xff1a;本地缓存&#xff08;local cache&#xff09;和二级缓存&#xff08;second level cache&#xff09;。 一级缓存默认是开启的&#xff0c;而且不能关闭&#xff0c;MyBatis的一些关键特性&#xff08;例如通过<association>和<…

亚马逊采集淘宝(实现跨平台电商商品同步)

跨平台电商已成为当前电商行业的发展趋势&#xff0c;亚马逊作为全球的电商平台之一&#xff0c;为了更好地服务消费者&#xff0c;近期开始采集淘宝商品&#xff0c;并实现同步。 1. 亚马逊采集淘宝商品的背景 近年来&#xff0c;随着全球电商市场的不断扩大&#xff0c;跨平…

aspose-words、itextpdf完美解决java将word、excel、ppt、图片转换为pdf文件

我是傲骄鹿先生&#xff0c;沉淀、学习、分享、成长。 如果你觉得文章内容还可以的话&#xff0c;希望不吝您的「一键三连」&#xff0c;文章里面有不足的地方希望各位在评论区补充疑惑、见解以及面试中遇到的奇葩问法 面对日常开发过程中&#xff0c;将各种文件转换为pdf文件的…