《Vue.js+SpringBoot全栈开发实战》全套教学课件

Vue.js+SpringBoot

全栈开发实战第1章Vue.js+SpringBoot全栈开发概述全套可编辑PPT课件本章学习Vue.js+SpringBoot全栈开发核心技术栈的组成Vue.js+SpringBoot全栈开发周边技术栈的组成Vue.js+SpringBoot全栈开发的优势开发工具的选择

21.1Vue.js+SpringBoot全栈开发核心技术栈的组成Vue.js：前端组件化开发SpringBoot：后端开发框架

31.2Vue.js+SpringBoot全栈开发周边技术栈的组成NaiveUI：支持Vue.js3的前端UI框架md-editor-v3：Markdown插件NGINX：Web服务器SpringSecurity：安全服务框架SpringMVC：基于MVC设计模式的轻量级Web开发框架SpringData：数据访问技术Hibernate：对象关系映射框架H2：嵌入式数据库引擎MySQL：关系型数据库

41.3Vue.js+SpringBoot全栈开发的优势开源跨平台全栈开发支持企业级应用支持构建微服务业界主流

51.4开发工具的选择前端开发工具：VisualStudioCode、Eclipse、WebStorm、SublimeText后端开发工具：Eclipse、IntelliJIDEA

61.5总结本章主要介绍Vue.js+SpringBoot全栈开发架构的技术组成及技术优势。Vue.js+SpringBoot全栈开发架构的核心是指Vue.js和SpringBoot。业界还常使用NaiveUI、md-editor-v3、NGINX、SpringMVC、SpringData、Hibernate、H2、MySQL和SpringSecurity等周边技术。本章还介绍开发Vue.js+SpringBoot全栈开发应用所具备的优势及需要的开发工具。

71.6习题请简述Vue.js+SpringBoot全栈开发架构的技术组成。请简述Vue.js+SpringBoot全栈开发周边技术栈的组成。请简述Vue.js+SpringBoot全栈开发的优势。

8Vue.js+SpringBoot

全栈开发实战第2章Vue.js基础本章学习Vue.js产生的背景Vue.js的下载安装VueCLI的常用操作实例1：创建第一个Vue.js应用探索Vue.js应用结构

102.1Vue.js产生的背景Vue.js与jQuery的不同Vue.js与React、Angular优势对比Vue.js、React、Angular三者怎么选

112.2Vue.js的下载安装安装Node.js和npmNode.js与npm的关系安装npm镜像安装VueCLI安装VueDevtools

122.3VueCLI的常用操作获取帮助创建应用创建服务启动应用编译应用

132.4实例1：创建第一个Vue.js应用使用VueCLI初始化应用运行Vue应用增加对TypeScript的支持

142.5探索Vue.js应用结构整体项目结构项目根目录文件node_modules目录public目录src目录

152.6总结本章介绍Vue.js的基本概念、VueCLI及如何来创建第一个Vue.js应用。并通过探索一个“hello-world”应用，了解到了Vue.js应用的结构组成。

162.7习题请简述Vue.js与React、Angular异同点。安装VueCLI，并使用VueCLI创建一个Vue.js应用。

17Vue.js+SpringBoot

全栈开发实战第3章Vue.js应用实例本章学习创建应用实例data的property与methods生命周期

193.1创建应用实例Vue.js与jQuery的不同Vue.js与React、Angular优势对比Vue.js、React、Angular三者怎么选

203.2data的property与methods安装Node.js和npmNode.js与npm的关系安装npm镜像安装VueCLI安装VueDevtools

213.3生命周期获取帮助创建应用创建服务启动应用编译应用

223.4总结本章介绍Vue.js的基本概念、VueCLI及如何来创建第一个Vue.js应用。并通过探索一个“hello-world”应用，了解到了Vue.js应用的结构组成。

233.5习题请简述Vue.js与React、Angular异同点。安装VueCLI，并使用VueCLI创建一个Vue.js应用。

24Vue.js+SpringBoot

全栈开发实战第4章Vue.js组件本章学习组件的基本概念组件交互方式让组件可以动态加载使用缓存组件keep-alive

264.1组件的基本概念实例3：一个Vue.js组件的示例什么是组件组件的复用Vue组件与Web组件的异同点

274.2组件交互方式实例4：通过prop向子组件传递数据实例5：监听子组件事件实例6：兄弟组件之间的通信实例7：通过插槽分发内容

284.3让组件可以动态加载实现组件动态加载的步骤实例8：动态组件的示例

294.4使用缓存组件keep-alive实例9：keep-alive的例子keep-alive配置详解

304.5总结本章介绍Vue组件的基本概念和基本用法，包括组件之间的交互、组件的动态加载、组件的缓存等。

314.6习题请简述组件的基本概念和基本用法。请简述组件之间的交互方式有哪些。请简述如何实现组件的动态加载。请简述如何实现缓存的组件。

32Vue.js+SpringBoot

全栈开发实战第5章Vue.js模板本章学习模板概述实例10：插值实例11：在模板中使用指令实例12：在模板中使用指令的缩写使用模板的一些约定

345.1模板概述<template>标签来声明模板Vue允许以声明方式将渲染的DOM绑定到组件实例的数据上

355.2实例10：插值文本原始HTML代码绑定HTMLattributeJavaScript表达式

365.3实例11：在模板中使用指令理解指令中的参数理解指令中的动态参数理解指令中的修饰符

375.4实例12：在模板中使用指令的缩写使用v-bind缩写使用v-on缩写

385.5使用模板的一些约定对动态参数值约定对动态参数表达式约定对访问全局变量的约定

395.6总结本章详细介绍了Vue.js模板的用法，包括插值和指令。

405.7习题请简述Vue模板的作用。请简述Vue支持哪几种插值的类型。请简述在模板中使用指令有哪几种用法。请简述使用模板时有哪些注意事项。

41Vue.js+SpringBoot

全栈开发实战第6章Vue.js计算属性与监听器本章学习通过实例理解“计算属性”的必要性实例13：一个计算属性的例子计算属性缓存与方法的关系为什么需要侦听器

436.1通过实例理解“计算属性”的必要性任何包含响应式数据的复杂逻辑，建议都应该使用计算属性

446.2实例13：一个计算属性的例子声明计算属性模拟数据更改

456.3计算属性缓存与方法的关系方法计算属性：缓存

466.4为什么需要侦听器理解侦听器实例14：一个侦听器的例子

476.5总结本章介绍Vue.js计算属性与监听器。使用计算属性与监听器是为了模板变得复杂和难以理解。

486.6习题请简述使用计算属性的作用。请编写一个计算属性的实际例子。请简述使用监听器的作用。请编写一个监听器的实际例子。

49Vue.js+SpringBoot

全栈开发实战第7章Vue.js表达式本章学习条件表达式for循环表达式v-for的不同使用场景

517.1条件表达式实例15：v-if的例子实例16：v-else的例子实例17：v-else-if的例子实例18：v-show的例子v-if与v-show的关系

527.2for循环表达式实例19：v-for遍历数组的例子实例20：v-for遍历数组设置索引的例子实例21：v-for遍历对象property的例子实例22：数组过滤的例子实例23：使用值的范围的例子

537.3v-for的不同使用场景实例24：在<template>中使用v-for的例子实例25：v-for与v-if一同使用的例子实例26：在组件上使用v-for的例子

547.4总结本章详细介绍了Vue.js表达式，包括条件表达式和for循环表达式。

557.5习题简述Vue条件表达式的类型。编写一个Vue条件表达式的例子。简述Vuefor循环表达式的使用场景。编写一个Vuefor循环表达式的例子。

56Vue.js+SpringBoot

全栈开发实战第8章Vue.js事件本章学习什么是事件实例28：多事件处理器的例子事件修饰符

588.1什么是事件实例27：监听事件的例子理解事件处理方法处理原始的DOM事件为什么需要在HTML代码中监听事件

598.2实例28：多事件处理器的例子

608.3事件修饰符什么是事件修饰符理解按键修饰符理解系统修饰键

618.4总结本章详细介绍了Vue事件的概念、事件使用的例子以及事件修饰符。

628.5习题请简述什么是事件以及事件的作用。编写一个多事件处理器的例子。请简述什么是事件修饰符。

63Vue.js+SpringBoot

全栈开发实战第9章Vue.js表单本章学习理解表单输入绑定实例29：表单输入绑定的基础用法实例30：值绑定

659.1理解表单输入绑定对于text和textarea元素，使用valueproperty和input事件。对于checkbox和radio元素，使用checkedproperty和change事件。对于select元素，将value作为prop，并将change作为事件。

669.2实例29：表单输入绑定的基础用法文本多行文本复选框单选框选择框

679.3实例30：值绑定复选框单选框选择框

689.4总结本章详细介绍了Vue.js表单的用法，包括表单输入绑定和值绑定。

699.5习题请简述什么是表单的输入绑定。请编写一个表单输入绑定的例子。请编写一个表单值绑定的例子。

70Vue.js+SpringBoot

全栈开发实战第10章Vue.jsHTTP客户端本章学习初识HttpClient认识网络资源实例31：获取API数据

7210.1初识HttpClient使用axios来作为Vue应用程序提供了HTTP客户端功能。

7310.2认识网络资源

7410.3实例31：获取API数据引入vue-axios获取API数据运行应用

7510.4总结本章介绍了如何通过vue-axios来访问HTTPAPI的过程。

7610.5习题编写一个示例，通过vue-axios来访问一个指定的HTTPAPI。

77Vue.js+SpringBoot

全栈开发实战第11章SpringBoot概述本章学习传统企业级应用开发之痛与革新SpirngBoot2总览实例32：快速开启第一个SpirngBoot项目实例33：如何进行SpringBoot项目的开发及测试

7911.1传统企业级应用开发之痛与革新Java大事件Java企业级应用现状革新约定大于配置

8011.2SpirngBoot2总览解决传统Spring开发过程中的痛点SpringBoot的目标SpringBoot不是什么SpirngBoot2新特性

8111.3实例32：快速开启第一个SpirngBoot项目配置环境通过SpringInitializr初始化一个SpringBoot原型用Gradle编译项目探索项目如果提升Gradle的构建速度

8211.4实例33：如何进行SpringBoot项目的开发及测试编写项目构建信息编写程序代码编写测试用例运行SpringBoot程序的几种方式其他运行程序的方式

8311.5总结本章介绍SpringBoot的基础概念及基本用法，包括如何使用SpringInitializr初始化一个SpringBoot原型，如何开发一个Web应用。本章也介绍了如何来编写SpringBoot的测试用例。

8411.6习题使用SpringInitializr初始化一个SpringBoot原型。开发一个基于SpringBoot的Web应用。编写上述Web应用的测试用例。

85Vue.js+SpringBoot

全栈开发实战第12章Spring框架核心概念本章学习Spring框架总览依赖注入与控制反转AOP编程

8712.1Spring框架总览模块化的Spring框架使用Spring的好处依赖注入VS.控制反转Spring框架常用模块

8812.2依赖注入与控制反转IoC容器和bean配置元数据实例化容器两种注入方式bean范围注意singletonbean引用prototypebean时的陷阱JSR-330规范注解SpringBoot中的bean及依赖注入

8912.3AOP编程AOP核心概念SpringAOP功能和目标AOP代理使用@AspectJ实例34：演示SpringAOP用法

9012.4总结本章介绍Spring框架核心概念，内容包括依赖注入、控制反转、AOP等。Spring框架是SpringBoot的基石，因此，如果想学好SpringBoot，则必须要理解Spring框架。

9112.5习题请简述依赖注入和控制反转的异同点。请简述AOP的概念以及作用。

92Vue.js+SpringBoot

全栈开发实战第13章SpringMVC及常用MediaType本章学习SpringMVC简介实例35：JSON类型的处理实例36：XML类型的处理实例37：文件上传的处理

9413.1SpringMVC简介MVC是三层架构吗SpringMVC中的自动配置

9513.2实例35：JSON类型的处理控制器及实体返回JSON类型WebAPI常用调试方式

9613.3实例36：XML类型的处理返回XML类型第三方XML框架

9713.4实例37：文件上传的处理MultipartResolver通过Form表单来上传文件的例子RESTfulAPI的文件上传

9813.5总结本章介绍SpringMVC，以及针对常用MediaTyp的处理。常用的MediaTyp包括JSON、XML和文件。

9913.6习题请简述MVC模式的基本概念及实现方式。请编写程序，实现使用SpringMVC处理JSON格式的数据。请编写程序，实现使用SpringMVC处理XML格式的数据。请编写程序，实现使用SpringMVC处理文件的上传。

100Vue.js+SpringBoot

全栈开发实战第14章数据持久化本章学习JPA概述SpringDataJPA实例38：SpringDataJPA与Hibernate、SpringBoot集成实例39：数据持久化实战

10214.1JPA概述JPA的产生背景实体（Entity）实体中的主键实体间的关系实体中的可嵌入类实体继承管理实体查询实体数据库模式创建

10314.2SpringDataJPASpringData是什么SpringDataJPA特性如何使用SpringDataJPA核心概念查询方法定义资源库的接口定义查询方法创建资源实例SpringData自定义实现

10414.3实例38：SpringDataJPA与Hibernate、SpringBoot集成初始化SpringBoot项目原型集成H2MySQL安装及使用

10514.4实例39：数据持久化实战定义实体添加资源库编写测试用例使用MySQL数据库运行测试查看效果

10614.5总结本章详细介绍了数据持久化的技术，内容包括SpringDataJPA、Hibernate、H2、MySQL等等。基于这些技术，我们只要定义实体类和资源库的接口，即可实现对数据库的CURD操作。

10714.6习题请简述数据持久化的概念。请简述JPA有哪些核心内容。请简述SpringDataJPA有哪些特性。编程实现SpringDataJPA与Hibernate、SpringBoot集成，并对MySQL进行CURD操作。

108Vue.js+SpringBoot

全栈开发实战第15章集成SpringSecurity本章学习基于角色的权限管理SpringSecurity概述实例40：SpringSecurity与SpringBoot集成

11015.1基于角色的权限管理什么是角色基于角色的访问控制哪种方式更好

11115.2SpringSecurity概述SpringSecurity的认证模型SpringSecurity的安装模块SpringSecurity5新特性及高级功能

11215.3实例40：SpringSecurity与SpringBoot集成初始化SpringBoot项目原型添加Web支持编写代码运行

11315.4总结本章介绍基于角色的权限管理的概念，并介绍了如何在SpringBoot应用中集成SpringSecurity。通过SpringSecurity开源轻松实现对于SpringBoot应用的安全管理。

11415.5习题请简述基于角色的权限管理的概念。请简述SpringSecurity的概念及特性。请基于SpringSecurity编写程序，实现对应用的安全管理。

115Vue.js+SpringBoot

全栈开发实战第16章实战1：基于Vue.js和SpringBoot的互联网应用本章学习应用概述模型设计接口设计权限管理

11716.1应用概述“新闻头条”的核心功能初始化数据库

11816.2模型设计用户模型设计新闻模型设计

11916.3接口设计GET/admins/hi：用于验证用户是否登录认证通过；如果没有通过，则弹出登录框。POST/admins/news：用于创建新闻。GET/news：用于获取新闻列表。GET/news/:newsId：用于获取指定newsId的新闻详情。

12016.4权限管理当用户发送登录请求后，如果后台服务对用户信息认证失败，则会响应“401”状态码给客户端（浏览器），则浏览器会自动弹出登录框要求用户再次输入账号密码。如果认证通过，则登录框会自动消失，用户可以做进一步的操作。

12116.5总结本章主要介绍基于Vue.js和SpringBoot架构的互联网应用“新闻头条”的整体架构设计，主要涉及：应用架构设计、模型设计、接口设计、权限管理等部分。

12216.6习题请简述，一个完整的互联网应用应该如何设计？包含哪些内容？

123Vue.js+SpringBoot

全栈开发实战第17章实战2：前端UI客户端应用本章学习前端UI设计实现UI原型实现路由器

12517.1前端UI设计首页UI设计新闻详情UI设计。

12617.2实现UI原型初始化news-ui添加NaiveUI创建新闻列表组件实现新闻列表原型设计实现新闻详情原型设计

12717.3实现路由器理解路由的概念使用路由插件创建路由如何使用路由修改新闻列表组件新闻详情组件增加返回按钮事件处理运行应用

12817.4总结本章主要介绍news-ui前端UI客户端应用是如何来实现原型设计的，内容包括首页UI设计和新闻详情UI设计。主要涉及Vue.js、NaiveUI等技术框架。

12917.5习题请使用Vue技术，实现一个前端UI客户端应用的原型。

130Vue.js+SpringBoot

全栈开发实战第18章实战3：后端服务器应用本章学习初始化后台应用初步实现登录认证实现新闻编辑器实现新闻列表展示实现新闻详情