目录
1天搞定SpringBoot+Vue全栈开发
Triones-n
编辑于 2024年02月23日 09:19

【笔记】SpringBoot+Vue全栈开发

【带时间戳】本笔记已完结！

【老师的微信公众号有免费的课件和文档，关注“软件练习生”公众号回复“Java”获取课件资料。关注回复关键字就可以（不会让你加群/微信的）】

【P1配置和下载文件居多，就不写了】

【有能力的朋友多多支持up拿完整的课件代码。本笔记代码部分不全，纯手打，会放在个人网站上，而且github有时候会加载不出来，我自己手打是因为手打记忆才深刻】

【https://b1ankc-mov.github.io/#】

【https://github.com/B1ANKC-MOV/SpringVue】

P2.SpringBootk快速上手，【】内为个人评论

2.SpringBoot快速上手 P2 - 00:00 Springboot的介绍

Springboot的介绍

  • Springboot旨在简化SSM（Spring\SpringMVC\Mybatis)的配置过程

2.SpringBoot快速上手 P2 - 02:34 Springboot的特点

Springboot的特点

之所以能够简化操作，Springboot做到了：

  • “约定优于配置”，用大量的默认配置代替手动配置的过程

  • 使用内嵌的Tomcat，用户无须再手动打包war文件让服务器使用

  • 定制Staters启动器，简化了Maven配置（帮你配置好了）。简化以前可能需要写几十个依赖的情况。（现在写一两个即可）

  • 使用纯Java配置

  • 后续维护时，Springboot提供了各种监控检测功能

（如若需要开发复杂项目还需继续学习Spring【不过Springboot完全够用了，除非是接口几千个的大项目，可能要考虑到后续并发量之类的问题，Springboot作为一个比较单体的东西，可能确实是不太应付得来】）

2.SpringBoot快速上手 P2 - 06:44 创建Springboot应用

创建Springboot应用

（up用的IDEA2020.3）

2.SpringBoot快速上手 P2 - 08:00 创建

创建：

  • Group处一般输入公司域名

  • Artifact处输入项目名称

  • SDK:1.8

  • Java version:8【没办法选择Java8的朋友可以把左上角的Server URL改成https://start.aliyun.com/，具体可以参考这篇文章[https://blog.csdn.net/imbzz/article/details/134691177]】

  • Web→Spring Web

  • 选择存放位置

  • 右下角会显示下载依赖的进度条，如果持续太久了可能是Settings→Build,Execution,Deployment→Build Tools→Maven里的配置路径出了问题（需要修改过阿里云镜像，要不然就很慢）

2.SpringBoot快速上手 P2 - 10:21 基本结构

基本结构：（基于maven）

  • 代码位于src下的java目录

  • resources下放置一些资源（自动放了一些文件夹和配置目录）static放置网站的静态资源，templates放置网站的html之类的模板，application.properties为重要的配置文件（但springboot无需配置）

  • test为java的测试

  • pom.xml【？？？为什么我没有这个文件】【二编有了，我下了2021的idea】

    • parent标签，可以认为是一个副级的项目，我们现在就是依赖于这个项目，不需要多做配置

    • dependencies，加入了一个依赖

  • main→java→com.example.xxx是主包，后续我们要写什么都需要放进主包

  • 启动程序为主包下的xxxApplication类

2.SpringBoot快速上手 P2 - 13:52 操作

操作：

  • 在主包下创建controller包，创建xxxController类

  • 在类中做@RestController标记以让此类变为控制器，可以接收客户端的请求

  • 具体如何接收需要在类中加入（公开的）方法（返回值设置成了文本）：pubilic String xxx(){ return "hello world";}。期望为浏览器访问后端时，能够看到此字符串。

  • 加入一个注解：@GetMapping("/xxx")。效果为浏览器可以发送http里的get请求来访问xxx()方法，具体访问方法时需要明确的链接地址：/xxx。

  • 浏览器如何访问？浏览器会固定使用http://的协议，后加一个域名，再往后是具体路径/path：http://localhost:8080/path。上面的/xxx就是此处的路径，这样就可以访问刚刚写的方法（默认localhost:80，但80是可以省略的，一般访问本地主机就写成localhost，但是Tomcat访问的是8080端口，所以需要写成localhost:8080)。

2.SpringBoot快速上手 P2 - 17:45 启动

启动：

  • 找到xxxApplication启动类，启动程序

  • 会在启动台里看见Springboot的标志

  • 在浏览器输入localhost:8080/xxx

  • 修改一定要重启项目（可以通过热部署解决）

2.SpringBoot快速上手 P2 - 20:14 热部署介绍

开发环境热部署

  • 在pom.xml中加入依赖

  • 在右上角的小按钮点一下，下载依赖

  • 加一些配置~

  • IDEA的配置【2021版本设置在Settings→Advanced Settings→Comiler里面】↓

P3.Springboot Controller

3.SpringBoot Controller P3 - 00:30 Web入门

Web入门

  • Spring Web提供了启动器starter，主要包含了三个组件：mvc、json、tomcat。

  • webmvc组件主要提供web开发的注解，（类似于控制器的注解）是web开发的基础框架

  • json组件主要提供了JSON数据的解析，使能够接收前端发送数据并返回

  • tomcat为自带的容器依赖

3.SpringBoot Controller P3 - 02:03 控制器介绍

控制器

  • mvc为后端开发的一种模式：m为Model，用于存储手法数据；c为Controller，用于协调控制；v为View(视图)，是用来显示数据的。

  • 在mvc模式下，从数据库中加载的数据首先被封装在Model中，通过Controller，绑定到View上（视图可以理解为html的页面）。所以控制器负责接收将数据交给浏览器与接收用户请求。用户操作时，实际上是对控制器发出请求，控制器取用数据，交给视图，最终响应给用户。

  • 既有页面又有数据：Controller(无法前后端分离）

  • 只有数据：RestController。RestController会将返回的对象数据转换为JSON格式（为了方便前端处理）。

3.SpringBoot Controller P3 - 06:29 路由映射

路由映射(控制器如何接收前端的请求）

  • RequestMapping(可以用在类或者方法上，上节课用在了方法上）

  • value参数：用于配置路径，支持普通字符串与正则表达式。可以规定前端用什么方法请求（比如get或post）

……↓

  • value的参数内容：

  • method的参数内容：

3.SpringBoot Controller P3 - 10:07 实际操作

实际操作

  • 使用RequestMapping

  • 加入value值：/hello。使hello方法能够接收前端的请求，前端通过/hello路径能够访问到该方法。（在地址栏里面发送的请求都是get请求）

  • 规定方法：加入method=RequestMethod.GET，规定只能通过get请求。(@RequestMapping(value="/hello",method=RequestMethod.GET等价于@GetMapping("/hello"))

3.SpringBoot Controller P3 - 13:10 参数传递

参数传递

  • @RequestParam可以将前端的数据绑定到控制器的方法上以获取前端传递的信息。

  • 在方法里面加入一个参数：String nickname。自动将前端输入的昵称传入nickname中。

  • 多个数据可以用&连接

3.SpringBoot Controller P3 - 16:06 控制器讲解

讲解控制器

  • 传参与定义参数名不一致，可以在前面加@RequestParam("nickname")（代表参数映射,加上这个注解，就代表这个参数是必须的，如果希望可选，可以再加required = false)(如果必须，没输入会报错，报错结果为status=400，一般意味着是客户端，也就是浏览器出了问题）

3.SpringBoot Controller P3 - 20:14 POST请求，APIPOST

  • 模拟post请求（本来需要通过专门的前端程序或者表单）（这里可以通过APIPOST进行前端调试）

（在地址栏里面发送的是get请求，不能直接/postTest（post请求的方法），会有405（4开头一般是浏览器的问题））

  • JSON类型需要使用{}传递

  • 如果需要接收JSON类型的数据需要加一个单独的注解@RequestBody

  • 需要注意类型与参数名都要对的上

  • 通配符（了解即可）/test/**,意味着/test/a/b/c都行。/test/*意味着只能/test/abcc。

P4.SpringBoot文件上传+拦截器

4.SpringBoot文件上传+拦截器 P4 - 00:23 静态资源访问

静态资源访问

  • 前后端分离static是不会存放内容的

  • 实操：

    • 当没有配置静态资源时，直接“/”后接静态资源名称即可访问（localhost:8080/test.jpg）

    • 如果不想放在根路径下直接访问，而希望在资源前面加一个统一路径images方便管理，可以通过static path设置虚拟路径（也叫过滤规则）

  • 如果在resource下额外创建了一个文件，将静态资源放在自创文件css中，则需要通过static locations进行修改（classpath是整个项目的类路径，在target下的classes，是一个固定的目录）

4.SpringBoot文件上传+拦截器 P4 - 06:05 文件上传

文件上传原理

  • 传输文件必须要把表单中的enctype（编码类型）改成form-data的类型。（修改后，例如表单中的字符串字段，还是使用文本形式进行传输；但如果上传的字段是文件，则会与上一个分开，用另外的形式上传）

  • 修改一些默认配置（限制）：

  • 在控制器方法中加入一个特殊的参数MultipartFile（Spring用来接收文件的类型）,通过此对象获取文件信息。

4.SpringBoot文件上传+拦截器 P4 - 11:19 实际操作

  • 实操：

    • 已有程序

  • 如何动态获取web服务器所在位置（怎么去获取服务器对应路径）：在方法里加入HttpServletRequest request参数（J2EE里面提供的原始类，此类代表网络请求，即前端发送的请求，一个request对象），通过此对象可以获取该对象的上下文对象（request.getServletContext，也就是该请求的上下文），其实也就是web服务器，通过web服务器得到对应的路径（getRealPath)，其实就得到了web服务器运行的目录，将其存储在自创的虚拟的/upload/目录中。

  • status：500，意味着后端出了问题（up是文件太大了）

  • 通过自定义函数savefile判断目录是否存在，如果不存在，则使用path与文件名创建目录，最后使用transferTo方法把文件传输到创建好的目录中。

  • 想让用户通过刚刚创建好的目录访问文件：spring.web.resources/static-locations=/upload/

4.SpringBoot文件上传+拦截器 P4 - 23:58 拦截器

拦截器

  • 对于不同控制器可能遇见的统一操作（例如获取用户名），做一个处理

  • 用户提交的请求都先到达（自定义的）拦截器，调用prehandle，最终到控制器的目标方法中，到页面渲染结束，再调用afterCompletion

  • prehandle调用的最频繁（例如用户想要提交一个请求，但是没有登录，拦截器可以拦截下请求不让它直接到控制器调用方法，而是先登录）

  • 定义拦截器一般会在后面加Interceptor（然后继承一个系统的拦截器类HandlerInterceptor)

  • 拦截器还需要注册，否则无法使用（需要在Java类里面完成，继承WebMvcConfiguer，一个专门做配置器的类，对于刚才创建的拦截器进行一个Login，然后定义你需要拦截的路径）

4.SpringBoot文件上传+拦截器 P4 - 28:50 实际操作

  • 实操（已有代码）

  • 继承了HandlerInterceptor（Ctrl+单击进入具体代码）：

  • up重写了prehandle方法，写完之后还需要配置才生效（此配置一般放在config下）：创建一个类，加入注解Configuration使其生效（效果为Springboot会自动读取此类）

  • 重写副类WebMvcConfigurer，里面提供了添加拦截器的方法：

  • 重写addInterceptors方法，调用其传递的registry对象，添加一个拦截器，将刚才Login的拦截器进行new，最后加入拦截路径（不加的话就是拦截所有，可以不加）

P5.RESTful服务+Swagger

5.RESTful服务+Swagger P5 - 00:00 构建RESTful服务

RESTful介绍

  • RESTful是一种软件服务架构设计风格

RESTful特点

  • 例如，将请求清晰分类，GET用于获取，POST用于新建，等等等等

RESTful API（符合此架构接口的必备特质）

在做BS架构程序时，想要符合RESTful风格，对应几种请求方法即可：

实际编程时如何实现RESTful风格：

  • URL中不要包含动词（传统的比如http://xxx/del?id=10，删除用户，但是RESTful需要delete http://xxx/user/10）

示例：（RESTful增删改查）（加{}意味其为动态，需要加入PathVariable注解）

5.RESTful服务+Swagger P5 - 12:18 实际操作

实操：

5.RESTful服务+Swagger P5 - 14:00 Swagger

Java内提供的测试工具

  • 通过Swagger动态生成web接口文档（方便前端使用），也可以进行端口测试

  • 在pom.xml加入依赖↑

  • 然后做一个基本的配置↓（在config下创建一个SwaggerConfig配置类）

5.RESTful服务+Swagger P5 - 15:57 一闪而过的注意事项

这里的说明很重要↓！！

使用：

6.MybatisPlus快速上手 P6 - 00:00 MybatisPlus

ORM介绍

Mybatis-Plus介绍

  • 添加依赖到pom.xml：（MybatisPlus其实依赖了Mybatis）（需要准备好Mysql数据库）

  • 加入配置（在.properties)：（使用什么连接池\数据库、数据库在哪、账号\密码、日志输出格式）（数据库的组件都在mapper包里，需要给出mapper包路径）

6.MybatisPlus快速上手 P6 - 07:55 配置实操

实操：

6.MybatisPlus快速上手 P6 - 10:22 实际操作

  • 加入控制器

  • 定义mapper相关的组件（要创建的是接口，不是类，名称都以要操作的表+mapper命名）（sql语句都用@注解来实现）

  • 新建user类，存储表中有的字段。（按住alt+insert加入get/set方法）（再加一个toString方法）

  • 加入注解使得方法生效@select("select * from user")(记得加入@mapper)

  • 通过@autowired注入参数usermapper内容，再使用find()方法返回用户列表。

  • 改成JSON

  • 插入user对象

  • int insert()代表插入几条记录，插入失败返回值为0

  • mysql插入会自增

  • mybatis会自动帮助你增删改，不需要再自写方法了，只需要告诉其user类

  • mybatis-plus：当表明与类名不一样时@TableName("表名“），（以告知mybatis）如果需要id作为组件自增@TableId(type=IdType.AUTO)。

  • 如果不加的话，数据库里面的id可能是自增的值，但是代码print不出来id的值

7.MybatisPlus多表查询及分页查询 P7 - 00:02 P7.多表/分页查询

P7.MybatisPlus多表查询及分页查询

多表查询（Mybatis）

  • 实际使用：

    • 要查同一用户下的所有订单：加入一个字段orders，字段orders并不存在，其属性为List集合，存放的是订单对象Orders。

  • 这个字段需要自行映射：

  • 前面意思是↑从数据库里面调取的id这一列需要赋值给user类中的id属性。关键在于映射orders：最后一行，标记需要使用id字段，需要映射orders，类型为集合list。还需要写一个方法：

  • many注解，意思是一个用户会有多个订单，后接需要调用哪个mapper的哪个方法。（对着mapper右键copy path选最后一个就行）。查询出来的订单最后传给了orders属性，就完成了映射。

  • 如果我们需要查订单的用户：需要用one注解

  • 条件查询：

分页查询

  • 加一个配置类

P8.Vue框架快速上手

8.Vue框架快速上手 P8 - 00:01 Vue框架快速上手

  • 需要前端基础html、css、js

  • MVVM基于MVC（Model-View-Controller)但是在Controller上作了修改

实操：

8.Vue框架快速上手 P8 - 11:36 实际操作

  • ！+回车，生成代码，去代码copy链接↓

  • 调用CreateApp的方法，且告知渲染至哪（扩展→Open in browser插件，run的时候就能从浏览器快速打开）

  • 演示代码文件

8.Vue框架快速上手 P8 - 16:29 演示代码文件

  • “：”后为变量或表达式，属性的绑定需要加“：”，不加会变成字段。

P9.Vue组件化开发

9.Vue组件化开发 P9 - 08:01 组件化开发

NPM使用

9.Vue组件化开发 P9 - 08:44 NPM简介

Vue CLI使用

9.Vue组件化开发 P9 - 10:20 Vue CLI使用

1.下载Node.js

2.安装vue（网络问题可以先输入npm config set registry https://registry.npm.taobao.org

再安装）

3.vue create hello创建项目

4.选择第三个选项

5.按图示意选择配置

6.选择版本3.x

7.选择不存储预选（N)

9.Vue组件化开发 P9 - 15:47 vue项目文件解析

  • 配置文件package.json（记录项目基本信息

  • src：写代码的目录

  • src下的main.js:主要用到模块化开发的思想（区别于组件化），目前前端项目基本通过import的方式导入各类模块。（早期的前端代码主要通过script标签去引入各类文件）

    • 第一行：通过vue导入其createApp方法

    • 第二行：导入了app.vue的app

    • 调用createApp方法，把app传过去，同时将其mount到了#app标签上（标签在public的index.html里）

  • <template>:放组件的标签、文本、结构，放置了——

    • img标签

    • helloworld标签（自定义组件，在components里面，可以删掉自己写）

  • <script>:放组件的一些行为

  • <style>：放组件的一些css的样式

怎么运行：

找到package.json，运行其指令【npm run serve】

怎么自定义组件：

  1. 使用import导入

  2. 导入结束后进行注册（1.2.都放在<script>标签里）

  3. 自创建.vue文件创建组件

    1. 添加<template>、<script>、<style>标签

    2. 在标签里简单加入内容即可

（可以安装Vetur插件着色代码）

P10.第三方组件element-ui

10.第三方组件element-ui P10 - 00:32 组件间的传值

组件间的传值

  • 组件可以由内部的Data提供数据，也可以由父组件通过prop的方式传值

  • 兄弟组件之间可以通过Vuex等统一数据源提供数据共享

项目演示：

  1. 终端输入vue create component-demo

  2. 把Linter取消选中

  3. 选择Vue2

  4. 创建

Vue2与Vue3的差异（主要在main.js中）：

  • Vue3通过create app创建Vue对象，Vue2通过new Vue创建Vue对象

  • Vue3使用的是.mount，Vue2使用的是.$mount

10.第三方组件element-ui P10 - 04:27 实际操作

【主要是打代码，代码会放在我自己的个人网站上，可以去看看】

10.第三方组件element-ui P10 - 17:37 Element-ui介绍

  • Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue、React、Angular等多个版本。

  • 文档地址：https://element.eleme.cn/#/zh-CN/

  • 安装：npm i element-ui

  • 引入Element

（如果node_modules没了，可以直接npm install重新下载依赖）

【接下来基本上是代码了，代码依旧放在个人网站】

第三方图标库

10.第三方组件element-ui P10 - 34:18 图标库

11.Axios网络请求 P11 - 00:03 Axios网络请求

Axios的使用

11.Axios网络请求 P11 - 00:32 Axios简介

  • Axios简介

主要是前端的一个网络请求框架，基本是基于Ajax

  • Axios的安装和导入

    • 安装：npm install axios

    • 导入：import axios from 'axios'

  • Axios是怎么发送请求的：

与Springboot的GetMapping对应

  • 发送GET请求（通过url传参）

↑如果请求成功，系统会调用.then()；如果请求失败或者出现了错误，则会调用.catch()。

.then()与.catch()就是promise相关的语法。

.then()内需要传入一个回调函数（function(response)),.catch()也需要传入一个回调函数(function(error)),这些都是定义的函数。

get请求如果想给后端传递数据，可以通过？String的方式传参（Springboot的时候说过）；如果参数较多，可以通过params，即，在后面再传一个参，参数是对象，对象内可以放多种配置。

最后还可以加一个.then()方法，不论成功或失败都执行该方法。

  • 发送POST请求（通过请求体传参）

用{}括起来，就会放在请求体内传参，而且需要注意的是：Axois会自动把请求体里面的数据转为JSON格式传送给后端。后端处理POST请求时，需要注意它是JSON的格式，作特殊的处理。

  • 异步回调问题

JavaScript最新的标准里面，async和await的语法结构。

前面GET和POST都涉及了异步回调获取数据的形式。如果需要同步获取数据，则可以通过前面加一个async（方法内必须有配对的await）实现。

当方法前面加了async之后，发送异步请求的前面就可以加上await，无须再添加回调函数（即.then())，直接拿到响应。以同步的形式取代异步的编程。不过常用的还是上面的方式。

（更详细的配置项可以去官网文档查询）

11.Axios网络请求 P11 - 10:19 实操

  • 实际操作

axios不能直接写在<script>标签内，因为网络请求下来的数据最终还是要交给data的。

目前虽然data中的电影信息是我们自己写的，但这些数据本应该是从数据库中查询出来交给前端的，最终再放在data里面去。

因为这个请求最终需要交给data，所以axios需要写在vue范围内（即export default{}内）。

Vue内部提供的一些生命周期的函数，即对于我们现在的组件App.vue来讲，从创建到加载、渲染、销毁，每一个阶段会有对应的函数。[例如： 该组件在程序运行时会被创建，接下来加载到界面（绑定/挂载到界面），当页面切换了（即切换到其他组件上了），该组件就会被销毁]

其中，created要和data平级（不能放在methods:里面，这里面放的是自定义的函数），当组件被创建的时候，created:function()会被自动调用。

还有一个类似的方法叫mounted，这个方法作用时间会稍微迟一点，被挂载（渲染到界面上）的时候调用。

其他的可以在vue官网上查看。

11.Axios网络请求 P11 - 16:12 和后端进行关联

首先，需要修改后端启动的端口：server.port=8088，再启动。

在created:function(){}里面写的axois.get("")←这个链接的发送需要有一个后端的接口，比如说，想要控制器查询所有的用户，url访问其中的一个控制器，localhost:8088/user/findAll，就能看见所有的数据。（如果要查看问题，可以右键→检查→network）

所以axois.get("")里面写↓

该处get请求一经发送，正好对应后端的@GetMapping，于是就拿到数据。（注意，虽然created先执行，但是里面的console.log()是异步回调函数，所以输出的文本先后并不代表方法调用的先后）

但是！还是会失败并报错的！

  • 这是跨域问题引起的↓

11.Axios网络请求 P11 - 32:26 跨域实操

解决方法：在控制器之前加注解@CrossOrigin，使得控制器里面所有的方法都允许被跨域。要么就加一个配置类，使得所有的控制器都能被跨域。（加完之后重启服务器）

拿到以后渲染到界面上：赋值给data，把response.data取出来，显示到表格里面。直接this.tableData = response.data就可以了。

解决回调函数this作用域的限制：改写.成then(response)=>{}

每个组件都要导入axios，以及写相同的域名localhost:8088，可以抽出来进行整合。（在main.js里面做一个统一的导入）

实操：

使用：

P12.前端路由VueRouter

12.前端路由VueRouter P12 - 00:01 P12

VueRouter安装与使用

12.前端路由VueRouter P12 - 06:25 安装VueRouter

导入：

安装时需要指定@3

模拟网易云音乐界面

12.前端路由VueRouter P12 - 08:21 模拟网易云

创建组件

（无需注册）[因为最后会是动态的显示][VueRouter会进行链接]

设置链接和组件的对应关系

新建Router文件夹放置VueRouter的东西

新建JS文件

注册

导入组件

描述组件和链接的对应关系

插入占位标签

导入Routes

在new Vue里面做一个router设置

12.前端路由VueRouter P12 - 16:54 启动项目

嵌套路由

引入TopList

或者在定义路由的时候设置其子路由

前面要导入

一对多跳转

获取动态的id值：

两种导航

导航守卫

P13.状态管理VueX

13.状态管理VueX P13 - 00:03 状态管理VueX

13.状态管理VueX P13 - 02:34 官网

（使用的是Vuex3)

基本概念

整体理念

State

13.状态管理VueX P13 - 15:35 实际使用

13.状态管理VueX P13 - 16:33 安装

13.状态管理VueX P13 - 16:41 导入

13.状态管理VueX P13 - 17:11 创建store对象

这块的代码放在单独的文件夹（store）内

13.状态管理VueX P13 - 19:30 注入store

P14.前端数据模拟MockJS

14.前端数据模拟MockJS P14 - 00:00 前端数据模拟MockJS

14.前端数据模拟MockJS P14 - 06:59 演示已创建项目

14.前端数据模拟MockJS P14 - 10:32 项目运行

14.前端数据模拟MockJS P14 - 14:03 MockJS数据生成规则

P15.vue-element-admin后台集成方案

15.vue-element-admin后台集成方案 P15 - 00:10 本节内容

Vue-element-admin介绍

网址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

模板演示

15.vue-element-admin后台集成方案 P15 - 03:27 模板演示

1.集成模板

2.基础模板

下载安装

源码分析

此项目为单纯的前端项目，mock里面的文件模拟前端的请求，所有数据都使用mock进行了模拟）

test是做单元测试的，里面有两个比较重要的配置文件，.development与.production。在开发阶段，会读取.development文件，所有网络请求都是基于VUE_APP_BASE_API发送的，后面自行改造的时候需要改变。

在项目打包部署的时候，读取另外一个BASE_API

还有一个比较重要的全局配置文件package.json

取消ESLint

运行项目

运行流程（原理）

比较重要的目录：

store

vuex的东西，对全局进行管理，里面有分了模块

router

放置路由的位置，index.js里面定义了项目用到的所有路由。

views

放了（与页面相关的）各种各样的组件

src

下的components放了一些通用的组件（经常需要复用的组件）

api里面是封装的网络请求

layout里面是布局相关的（但一般不需要什么变化）

流程分析：

15.vue-element-admin后台集成方案 P15 - 16:03 流程分析

15.vue-element-admin后台集成方案 P15 - 16:06 登录

1.登录

@指src目录

所以最后渲染的是login下的index.vue

15.vue-element-admin后台集成方案 P15 - 25:45 TOKEN

15.vue-element-admin后台集成方案 P15 - 27:45 permission

P16.跨域认证

16.JWT跨域认证 P16 - 00:15 教学内容

Session认证

16.JWT跨域认证 P16 - 05:24 TOKEN认证

Token认证

16.JWT跨域认证 P16 - 07:44 JWT（具体如何实现TOKEN认证）

16.JWT跨域认证 P16 - 13:29 JWT的实现

里面有生成token的代码

验证

16.JWT跨域认证 P16 - 16:19 代码示例

测试

解析没问题会拿到中间的载荷

16.JWT跨域认证 P16 - 24:00 运行项目

分析

P17.SpringBoot+vue-element-template

前后端集成

17.SpringBoot+vue-element-template P17 - 00:01 前后端集成

修改BASE_API

修改url

17.SpringBoot+vue-element-template P17 - 10:38 演示已有代码

18.云服务器使用

18.阿里云服务器使用 P18 - 00:04 部署项目

P19.SpringBoot+Vue云端环境配置

19.SpringBoot+Vue云端环境配置 P19 - 00:14 P19

19.SpringBoot+Vue云端环境配置 P19 - 10:13 启动

20.SpringBoot+Vue项目云端部署 P20 - 00:01 项目打包部署

所有打包好的都会放在dist目录下

把dist目录放在web服务器上供客户访问。

cv28218532