前后端分离项目(springboot+vue+mybatis)-教学文档(SpringBoot3+Vue2)-4 (正在编写)

这里写目录标题

  • [1. 第一天 安装环境](#1. 第一天 安装环境)
    • [1.1 所需环境](#1.1 所需环境)
    • [1.2 idea 安装(破解)](#1.2 idea 安装(破解))
    • [1.3 vs code 安装(免费)](#1.3 vs code 安装(免费))
    • [1.4 phpstudy 安装(免费)](#1.4 phpstudy 安装(免费))
    • [1.5 navicat (破解)](#1.5 navicat (破解))
    • [1.6 node v16](#1.6 node v16)
    • [1.7 apipost (软件)](#1.7 apipost (软件))
    • [1.8 apifox(网页)](#1.8 apifox(网页))
    • [1.8 注意事项](#1.8 注意事项)
  • [2. 第二天 创建springBoot](#2. 第二天 创建springBoot)
    • [2.1 概念](#2.1 概念)
    • [2.2 创建](#2.2 创建)
    • [2.3 目录介绍与配置](#2.3 目录介绍与配置)
    • [2.4 三大层次](#2.4 三大层次)
      • [2.4.1 概念](#2.4.1 概念)
      • [2.4.2 Controller层(控制层)](#2.4.2 Controller层(控制层))
      • [2.4.3 Service层(业务层)](#2.4.3 Service层(业务层))
      • [2.4.4 Mapper层 (持久层)](#2.4.4 Mapper层 (持久层))
        • [2.4.4.1 概念](#2.4.4.1 概念)
        • [2.4.4.2 mybatis](#2.4.4.2 mybatis)
        • [2.4.4.3 注解开发与文档开发](#2.4.4.3 注解开发与文档开发)
    • [2.5 容器管理](#2.5 容器管理)
    • [2.6 启动](#2.6 启动)
  • [3. 第三天 后端基础](#3. 第三天 后端基础)
    • [3.1 接口概念](#3.1 接口概念)
    • [3.2 封装接口(JSON返回)](#3.2 封装接口(JSON返回))
    • [3.3 request](#3.3 request)
      • [3.3.1 request methods(请求方式)](#3.3.1 request methods(请求方式))
        • [3.3.1.1 GET (查询)](#3.3.1.1 GET (查询))
        • [3.3.1.2 POST (数据提交)](#3.3.1.2 POST (数据提交))
        • [3.3.1.3 PUT (修改)](#3.3.1.3 PUT (修改))
        • [3.3.1.4 DELETE (删除)](#3.3.1.4 DELETE (删除))
      • [3.3.2 request parameter (传参方式)](#3.3.2 request parameter (传参方式))
        • [3.3.2.1 query(路由传参)](#3.3.2.1 query(路由传参))
        • [3.3.2.1 path(携带参数)](#3.3.2.1 path(携带参数))
        • [3.3.2.3 body (多参数)](#3.3.2.3 body (多参数))
      • [3.3.3 注意](#3.3.3 注意)
    • [3.4 数据库](#3.4 数据库)
      • [3.4.1 数据库基础](#3.4.1 数据库基础)
      • [3.4.2 xml企业级数据库规范](#3.4.2 xml企业级数据库规范)
    • [3.5 封装抛错管理](#3.5 封装抛错管理)
  • [4. 第四天 创建vue](#4. 第四天 创建vue)
    • [4.1 概念](#4.1 概念)
    • [4.2 创建](#4.2 创建)
    • [4.3 目录结构](#4.3 目录结构)
    • [4.4 配置全局样式](#4.4 配置全局样式)
    • [4.5 第一个界面](#4.5 第一个界面)
      • [4.5.1 创建vue](#4.5.1 创建vue)
      • [4.5.2 vue结构说明](#4.5.2 vue结构说明)
      • [4.5.3 路由封装和路由守卫](#4.5.3 路由封装和路由守卫)
    • [4.6 封装requests](#4.6 封装requests)
    • [4.7 解决跨域问题](#4.7 解决跨域问题)
    • [4.8 element-ui](#4.8 element-ui)
      • [4.8.1 介绍](#4.8.1 介绍)
      • [4.8.2 配置](#4.8.2 配置)
      • [4.8.3 使用](#4.8.3 使用)
  • [5. 第五、六天 实现登录功能](#5. 第五、六天 实现登录功能)
    • [5.1 第五天 基础版登录](#5.1 第五天 基础版登录)
      • [5.1.1 编写后端](#5.1.1 编写后端)
      • [5.1.2 后端测试](#5.1.2 后端测试)
      • [5.1.3 编写前端](#5.1.3 编写前端)
      • [5.1.4 前端连接后端](#5.1.4 前端连接后端)
    • [5.2 第六天 登录强化](#5.2 第六天 登录强化)
      • [5.2.1 前端保存信息](#5.2.1 前端保存信息)
        • [5.2.1.1 保存信息](#5.2.1.1 保存信息)
        • [5.2.1.2 读取信息](#5.2.1.2 读取信息)
      • [5.2.2 验证码功能实现](#5.2.2 验证码功能实现)
      • [5.2.3 身份鉴权](#5.2.3 身份鉴权)
        • [5.2.3.1 token](#5.2.3.1 token)
        • [5.2.3.2 jwt](#5.2.3.2 jwt)
        • [5.2.3.3 配置](#5.2.3.3 配置)
  • [6. 第七天 基础功能的实现](#6. 第七天 基础功能的实现)

1. 第一天 安装环境

1.1 所需环境

python 复制代码
idea 23.3.8 # 用于编写前端/后端
vscode # 用于编写前端/操作数据库
phpstudy 5.7.* # 用于封装数据库
navicat # 用于操作数据库
node # 构建前端项目
apifox # 测试接口(首选,网页端)
apipost # 测试接口(桌面版)

1.2 idea 安装(破解)

  1. 首先打开idea,再关闭
  2. 打开破解包,找到对应的bat一键破解

1.3 vs code 安装(免费)

1.4 phpstudy 安装(免费)

1.6 node v16

1.7 apipost (软件)

1.8 apifox(网页)

1.8 注意事项

路径:一定要是英文路径,不能有中文,文件/文件夹名称尽量不能有空格

安装navicat时一定要断网,名字起规范

2. 第二天 创建springBoot

2.1 概念

2.2 创建

2.3 目录介绍与配置

2.4 三大层次

2.4.1 概念

2.4.2 Controller层(控制层)

2.4.3 Service层(业务层)

2.4.4 Mapper层 (持久层)

2.4.4.1 概念
2.4.4.2 mybatis
2.4.4.3 注解开发与文档开发

2.5 容器管理

2.6 启动

3. 第三天 后端基础

3.1 接口概念

3.2 封装接口(JSON返回)

3.3 request

3.3.1 request methods(请求方式)

3.3.1.1 GET (查询)
3.3.1.2 POST (数据提交)
3.3.1.3 PUT (修改)
3.3.1.4 DELETE (删除)

3.3.2 request parameter (传参方式)

3.3.2.1 query(路由传参)
3.3.2.1 path(携带参数)
3.3.2.3 body (多参数)

3.3.3 注意

  1. get请求无法传递body参数
  2. 浏览器网址只能模拟get请求

3.4 数据库

3.4.1 数据库基础

3.4.2 xml企业级数据库规范

3.5 封装抛错管理

4. 第四天 创建vue

4.1 概念

4.2 创建

4.3 目录结构

4.4 配置全局样式

4.5 第一个界面

4.5.1 创建vue

4.5.2 vue结构说明

4.5.3 路由封装和路由守卫

4.6 封装requests

4.7 解决跨域问题

4.8 element-ui

4.8.1 介绍

4.8.2 配置

4.8.3 使用

5. 第五、六天 实现登录功能

5.1 第五天 基础版登录

5.1.1 编写后端

5.1.2 后端测试

5.1.3 编写前端

5.1.4 前端连接后端

5.2 第六天 登录强化

5.2.1 前端保存信息

5.2.1.1 保存信息
5.2.1.2 读取信息

5.2.2 验证码功能实现

5.2.3 身份鉴权

5.2.3.1 token
5.2.3.2 jwt
5.2.3.3 配置

6. 第七天 基础功能的实现

element方法说明

echart方法说明

富文本方法说明

菜单创建

表单创建

注册功能

相关推荐
雨辰AI5 小时前
生产级实测:SpringBoot3 + 达梦数据库接口从 200ms 优化至 20ms 完整调优指南
java·数据库·spring boot·后端·政务
OpenTiny社区5 小时前
这次更新太良心!GenUI SDK v1.2.0 轻量化 + 稳流式 + 超强 Playground
前端·vue.js·ai编程
秃头网友小李5 小时前
前端难点:Element Plus 样式覆盖 —— :deep()、CSS 变量与滚动状态类名
前端·vue.js
砍材农夫7 小时前
物联网实战|Spring Boot + Netty 搭建 MQTT 消息路由与流转层
java·spring boot·后端·物联网·spring
lazy H8 小时前
Spring Boot 项目如何连接 Redis?新手入门配置和常见错误总结
ide·spring boot·redis·后端·学习·intellij-idea
SXJR8 小时前
spring boot + langchain4j +milvus实现向量存储
java·spring boot·后端·大模型·milvus·rag·langchain4j
王木风8 小时前
Spring Boot + LLM 工程化:把短视频流水线拆成 16 个独立角色的踩坑记录
人工智能·spring boot·后端·开源·新媒体运营·音视频·agent
武子康8 小时前
Java-27 深入浅出 Spring - 实现简易Ioc-03 在上节的业务下手动实现IoC 从 XML 配置到 BeanFactory 反射注入
java·后端·mybatis
英勇无比的消炎药8 小时前
吃透 Sender 交互逻辑:提交快捷键事件与方法实战运用
vue.js
心之伊始9 小时前
Spring AI Chat Memory 实战:用 JDBC 给 Java Agent 加会话记忆
java·spring boot·agent·spring ai·chat memory