springboot+vue全栈开发

-化繁为简

已于 2023-01-14 13:47:21 修改

阅读量3.1k

点赞数 4

于 2023-01-12 21:19:37 首次发布

本文链接：https://blog.csdn.net/qq_45811584/article/details/128666030

版权

SpringBoot+Vue全栈开发

前后端框架：

在这里插入图片描述

主要学习下前端框架

项目目录结构：

在这里插入图片描述
如果项目是web项目，可以有webapp目录

springboot项目创建配置

在这里插入图片描述

本地springboot项目创建resolving maven下载很慢的问题，有待解决！！！

开发环境热部署

导入maven依赖

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>

在application.properties中配置devtools

在这里插入图片描述

路由映射

在这里插入图片描述

Method匹配

在这里插入图片描述

参数传递

在这里插入图片描述

注意点1

在这里插入图片描述

而且加了@RequestParam，则该参数是必填参数！可加上required=false取消必选！

注意点2

@RequestBody请求，前端以JSON数据请求请求

SpringBoot文件上传+拦截器

文件上传原理

在这里插入图片描述

代码实现：

在这里插入图片描述

具体结合reggie和groupmanagement项目

拦截器：

在这里插入图片描述

RestFul风格

介绍：

在这里插入图片描述

特点：

在这里插入图片描述

HTTP状态码

在这里插入图片描述

Springboot结合restful

在这里插入图片描述

示例：

在这里插入图片描述

Swagger

在这里插入图片描述

Mybatisplus

ORM

在这里插入图片描述

Mybatisplus介绍

在这里插入图片描述

添加依赖

在这里插入图片描述

全局配置

在这里插入图片描述

springboot默认数据源是org.apache.tomcat.jdbc.pool.DataSource，在实际开发中我们若要使用我们比较熟悉或者性能比较好的数据源，则可以通过sprng.datasource.type来设定

在这里插入图片描述

crud：注解方式

在这里插入图片描述

Mybatisplus设置主键自增或者其他策略

在这里插入图片描述

实体类中的属性，但是在数据库表中不存在该字段

在这里插入图片描述

详情见Mybatisplus官网文档

两个表：user，orders。一对多的关系

select u.id,u.username,u.password,u.birthday,o.orders from user u left join orders o on u.id =o.uid

多表查询

在这里插入图片描述

分页查询

编写配置文件

在这里插入图片描述

业务应用代码

page：表示起始值 pageSize：表示每页条数

返回的结果数据在：pageInfo这个对象中，还包含总页数，总记录数
在这里插入图片描述

Page对象介绍

pageInfo对象结果

在这里插入图片描述

并没有找到pages：总页数，或者getPages。原因：在Ipage接口中有个default修饰的getPages()，实现类Page可以不实现这个方法

在这里插入图片描述

jdk1.8特性

在这里插入图片描述

Vue框架快速上手

介绍：

在这里插入图片描述

MVVM模式

在这里插入图片描述

快速导入代码：

在这里插入图片描述

注意点Debug

html标签中的属性是以空格分隔，而不是’，'!!!

vue脚手架安装注意事项：

链接：https://www.jb51.net/article/259834.htm

vscode前端服务器终止

ctrl+c再Y

保存再运行

所有的前端文件都得分别保存后才能正确运行！！！

vue报错

很可能是组件自动import了其它的包，手动删除即可解决！！！

数据不显示

很可能是方法名称大小写问题

语法示例：

在这里插入图片描述

vue各种指令

在这里插入图片描述

后期详细整理一下各种指令的用法

组件化开发

安装环境

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4BdPKIxz-1673526954467)(C:\Users\25817\AppData\Roaming\Typora\typora-user-images\image-20230105212511724.png)]

在这里插入图片描述

查看npm安装的包及安装位置

在这里插入图片描述

Vue项目创建

在指定目录下，先cmd再vue create 项目名

介绍

在这里插入图片描述

组件：例如导航栏等。

组件的构成

在这里插入图片描述

App.vue是根组件

组件间的传值

在这里插入图片描述

ElementUI

在这里插入图片描述

下载依赖

我们从网上下载的项目没有node_modules依赖，项目无法运行，我们只需在终端npm install即可下载缺失的依赖

因为依赖信息都保存再package.json文件中。

图标库

在这里插入图片描述

好处：可以不使用图片，icon等了。

Axios的使用

介绍

在这里插入图片描述

axios基于ajax

GET网络请求

在这里插入图片描述

POST网络请求

在这里插入图片描述

axios自动会把请求体里的数据转为json格式传给后端

异步回调问题

在这里插入图片描述

其他请求方式

在这里插入图片描述

代码实例

在这里插入图片描述

跨域问题

介绍原因

在这里插入图片描述

springboot解决方案

全局配置

在这里插入图片描述

Vue整合axios

在这里插入图片描述

axios不用Vue.use

在这里插入图片描述

VueRouter

在这里插入图片描述

创建路由

在这里插入图片描述

路由重定向

在这里插入图片描述

路由嵌套

在这里插入图片描述

动态路由

在这里插入图片描述

上面写法有误，在export default中加上props:[“id”]

在这里插入图片描述

编程式导航

在这里插入图片描述

导航守卫

在这里插入图片描述

Vuex

介绍

在这里插入图片描述

状态管理

在这里插入图片描述

State

在这里插入图片描述

Mutation

在这里插入图片描述

Action

在这里插入图片描述

Vuex这一块内容比较核心和复杂，具体熟悉还需要多看文档和联系！

MockJS

介绍

在这里插入图片描述

使用方法

在这里插入图片描述

正则代码实例

在这里插入图片描述

vue-element-admin

介绍安装

在这里插入图片描述

模板讲解：

跨域认证

Session认证

在这里插入图片描述

Token认证

在这里插入图片描述

JWT

在这里插入图片描述

具体代码实现

在这里插入图片描述

springboot代码实现

在这里插入图片描述

springboot+vue-element-templa

将后台管理模板与后端进行集成

api文件：里面放所有发网络请求的代码

axios与request的关系

链接：https://www.zzki.cn/jsnews/340.html

项目界面：侧边栏+项目信息

找一个合适的后台管理模板，来搭配具体的项目应用信息

云服务器

购买服务器

springboot+vue云端环境配置与项目部署

在这里插入图片描述

-化繁为简

关注

4
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
springboot+vue全栈开发

SpringBoot+Vue全栈开发简洁入门版，新手小白也能快速学会！
复制链接

扫一扫