SpringBoot+Vue全栈开发
- 前后端框架：
- 项目目录结构：
- springboot项目创建配置
- - 开发环境热部署
- 路由映射
- Method匹配
- 参数传递
- - 注意点1
  - 注意点2
- SpringBoot文件上传+拦截器
- - 文件上传原理
  - 代码实现：
  - 拦截器：
- RestFul风格
- - 介绍：
  - 特点：
  - HTTP状态码
  - Springboot结合restful
  - 示例：
- Swagger
- Mybatisplus
- - ORM
  - Mybatisplus介绍
  - 添加依赖
  - 全局配置
  - crud：注解方式
  - 分页查询
  - - 编写配置文件
    - 业务应用代码
    - Page对象介绍
    - jdk1.8特性
- Vue框架快速上手
- - 介绍：
  - MVVM模式
  - 快速导入代码：
  - 注意点Debug
  - - html标签中的属性是以空格分隔，而不是'，'!!!
    - vue脚手架安装注意事项：
    - vscode前端服务器终止
    - 保存再运行
    - vue报错
    - 数据不显示
  - 语法示例：
  - vue各种指令
  - 组件化开发
  - - 安装环境
    - Vue项目创建
    - 介绍
    - 组件的构成
    - 组件间的传值
    - ElementUI
    - 下载依赖
    - 图标库
  - Axios的使用
  - - 介绍
    - GET网络请求
    - POST网络请求
    - 异步回调问题
    - 其他请求方式
    - 代码实例
    - 跨域问题
    - - 介绍原因
      - springboot解决方案
    - Vue整合axios
    - axios不用Vue.use
  - VueRouter
  - - 创建路由
    - 路由重定向
    - 路由嵌套
    - 动态路由
    - 编程式导航
    - 导航守卫
  - Vuex
  - - 介绍
    - 状态管理
    - State
    - Mutation
    - Action
  - MockJS
  - - 介绍
    - 使用方法
    - 正则代码实例
  - vue-element-admin
  - - 介绍安装
    - 模板讲解：
  - 跨域认证
  - - Session认证
    - Token认证
    - JWT
    - 具体代码实现
    - springboot代码实现
- springboot+vue-element-templa
- 云服务器
- springboot+vue云端环境配置与项目部署

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云端环境配置与项目部署

springboot+vue全栈开发相关推荐

ehcache springboot_阿里内部进阶学习SpringBoot+Vue全栈开发实战文档
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置烦琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
《SpringBoot+vue全栈开发实战项目》笔记
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
SpringBoot+vue全栈开发实战笔记太香了
Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能够快速 ...
springboot+vue全栈开发_springboot+vue(一)___开发环境以及前后端项目搭建
nodejs安装安装: nodejs官网地址:https://nodejs.org/en/ 安装node.js,安装路径我默认安装在C盘 ,可以改变路径安装配置全局安装路径和缓存现在配置全局模 ...
《Spring Boot+Vue全栈开发实战》读书笔记
写在前面嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...
Spring Boot+Vue全栈开发实战——花了一个礼拜读懂了这本书
很幸运能够阅读王松老师的<Spring Boot+Vue全栈开发实战>这本书!之前也看过Spring Boot与Vue的相关知识,自己也会使用了Spring Boot+Vue进行开发项目. ...
读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言第九章 Spring Boot缓存第十章 Spring Boot安全管理第十一章 S ...
阿里首推的“SpringBoot+Vue全栈项目”有多牛X？
Spring Boot致力于简化开发配置并为企业级开发提供一系列非业务性功能, 而Vue则采用数据驱动视图的方式将程序员从繁琐的DOM操作中解救出来.利用Spring Boot+Vue,我们可以快速开 ...
《1天搞定Spring boot +vue 全栈开发》后端学习笔记
前言课程 b站链接:1.课程介绍及环境准备_哔哩哔哩_bilibili 对springboot 的开发实践有很好的指导作用(原理涉及的不多),课程很干,适合初学者,但需要有Jave EE 基础. 涉 ...