springboot+vue笔记

Xuxiansir

已于 2024-04-21 18:57:10 修改

阅读量1.5k

点赞数 22

文章标签：笔记

于 2024-04-16 15:42:38 首次发布

本文链接：https://blog.csdn.net/Xuxiansir/article/details/137779816

版权

字节，位，

一个汉字占多少字节和编码有关，

UTF8一个汉字占3个字节，GBK一个汉字占2个字节。

字 word
字节 byte
位 bit，来自英文bit，音译为“比特”，表示二进制位。
字长是指字的长度

1字=2字节(1 word = 2 byte)
1字节=8位(1 byte = 8bit)

1 Byte = 8 Bits

1 KB = 1024 Bytes

1 MB = 1024 KB

1 GB = 1024 MB

前后端开发项目全栈开发

目标

掌握JavaEE企业级开发框架的使用，能够利用SpringBoot开发Web应用。

掌握Web前端开发框架Vue的使用，能够完成前后端分离开发。

掌握云端环境的配置与使用，能够完成前后端程序的打包部署。

BS:(Browser/Server,浏览器/服务器架构模式)。

CS:(Client/Server,客户端/服务器架构模式)。

毕设流程

选题

环境搭建

Java --jdk1.8环境

Idea，2019,2023

Vue-node.js14（16+）

Vscode

Mysql 5.7+ 8.0+

Navicat12,14,15+

Maven（springboot pom.xml ）3.6.3

写代码，

程序概要设计，程序的详细设计

图，表

原型图，er图，数据库表结构，数据流图

原型图：电脑，手画，目的看清楚

搭建后端，https://blog.csdn.net/yuran06/article/details/122012790
数据库建表，
搭建前端，https://blog.csdn.net/qq_42040242/article/details/130748414
前后端数据通讯，
写一个模块可以调用数据库数据，展示到前端。
复制模块来写其他模块

整体测试
验收，写论文

springboot框架和ssm框架区别

1.框架组成

- ssm框架是由spring + spring mvc + mybatis这三个框架组合而成的。

- spring boot框架则是基于spring框架的基础上进行封装，并集成了大量的第三方库，使得开发者可以更加便捷地搭建web应用。

2. 配置方式
- ssm框架需要手动配置xml文件，且配置相对繁琐。
- spring boot框架则采用约定优于配置的方式，自动化了大部分的配置，让开发者只需要关注业务逻辑即可。

3. 开发模式
- ssm框架属于传统的mvc模式，整体结构较为复杂。
- spring boot框架则是基于spring框架的依赖注入、aop等特性，采用面向对象编程思想，使得代码结构更加清晰简单。

引用SSM框架与Springboot框架的区别_ssm和springboot的区别-CSDN博客

创建一个springboot项目

先安装并配置好java、idea、Maven（修改配置如规定使用Java8，springboot2.6.1等，修改阿里云镜像），

然后在IDEA中新建一个Spring Initializr Project，

配置好Maven位置，下载需要的插件Plugins（lombok，Mybatis）

勾选 enable annotation processing（编译时注解来生成java类，和lombok一起可以帮忙简化代码的书写）
在pom.xml（Maven项目的核心配置文件）根据需要添加相关包

配置开发环境热部署

代码在src下的Java目录

. model层
model层即数据库实体层，也被称为entity层，pojo层。
一般数据库一张表对应一个实体类，类属性同表字段一一对应。
. dao层
dao层即数据持久层，也被称为mapper层。
dao层的作用为访问数据库，向数据库发送sql语句，完成数据的增删改查任务。
. service层
service层即业务逻辑层。
service层的作用为完成功能设计。
service层调用dao层接口，接收dao层返回的数据，完成项目的基本功能设计。
. controller层
controller层控制层。
controller层的功能为请求和响应控制。
controller层负责前后端交互，接受前端请求，调用service层，接收service层返回的数据，最后返回具体的页面和数据到客户端。

HelloworldApplication是可运行的类文件，放着springboot的启动程序

resources下放一些资源

application.properties配置文件

test目录下放java的测试程序

图片、css、js关于网站相关的静态资源可以放在static目录下

HTML等模板可以放在template目录下

但我要做的是前后端分离的开发，前端的项目不会放在这里

前端通过vue框架来完成

Controller层

@Controller和@RestController

Spring Boot提供了@Controller和@RestController两种注解来标识此类负责接收和处理HTTP请求。

如果请求的是页面和数据，使用@Controller注解即可;

如果只是请求数据，则可以使用@RestController注解。

@Controller通常与Thymeleaf模板引擎结合使用。

但我们要做的是前后端分离，后端不会涉及到页面相关内容，所以使用@RestController即可（返回数据是以文本形式交给前端的）

mvc模式

model用来存储封装数据

Controller控制器，做协调和控制的

View视图，用来显示数据

路由映射

RequestMapping注解主要负责URL的路由映射。它可以添加在Controller类或者具体的方法上。
如果添加在Controller类上，则这个Controller中的所有路由映射都将会加上此映射规则，如果添加在方法上，则只对当前方法生效。
RequestMapping注解包含很多属性参数来定义HTTP的请求映射规则。常用的属性参数如下:
value:请求URL的路径，支持URL模板、i正则表达式method: HTTP请求方法
consumes:请求的媒体类型(Content-Type)，如application/json
produces:响应的媒体类型
params,headers:请求的参数及请求头的值

符号*匹配任意字符（任意加一层可以找到），符号**匹配任意路径，符号?匹配单个字符。

通配符 /test/**,意味着/test/a/b/c都行。
/test/*意味着只能/test/abcc。

有通配符的优先级低于没有通配符的，比如/user/add.json比/user/*.json优先匹配。

Method匹配

HTTP请求Method有GET、POST、PUT、DELETE等方式。HTTP支持的全部Method
公
@RequestMapping注解提供了method参数指定请求的Method类型，包括RequestMethod.GET、RequestMethod.POST、RequestMethod.DELETE.RequestMethod.PUT等值，分别对应HTTP请求的Method

post用于修改和写入数据，

get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据
Method匹配也可以使用@GetMapping、@PostMapping等注解代替。

参数传递

@RestController
public class HelloController {
    //http:localhost:8080/hello
    //http:localhost:8080/hello?nickname=zhansan&phone=123
    //@RequestMapping(value = "/hello",method = RequestMethod.GET)
    @GetMapping("/hello")
    public String hello(String nickname, String phone) {
        System.out.println(phone);
        return "你好" + nickname;
    }
}

访问http:localhost:8080/hello?nickname=zhansan&phone=123

前端的链接传递参数给Nickname和phone

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

静态资源访问

前后端分离static是不会存放内容的
实操：
当没有配置静态资源时，直接“/”后接静态资源名称即可访问（localhost:8080/test.jpg）
如果不想放在根路径下直接访问，而希望在资源前面加一个统一路径images方便管理，可以通过static path设置虚拟路径（也叫过滤规则）

文件上传

form-data 格式

上传功能：将用户传来的文件存储到web服务器的本地

文件上传，比如用户上传自己的头像、需要在前端有对应的表单

程序要部署到 linux系统上去，也就是云端，所以我们要动态的获取到web服务器的位置。

电脑截图时颜色泛白，高曝光解决方法 - 知乎 (zhihu.com)

throws IOException是Java中的throws语句。

throws是方法可能抛出异常的声明。(用在声明方法时，表示该方法可能要抛出异常)

语法：[(修饰符)](返回值类型)(方法名)([参数列表])[throws(异常类)]{......}

public void doA(int a) throws

Exception1,Exception3{......}

拦截器

用户提交的请求都先到达（自定义的）拦截器，调用prehandle，最终到控制器的目标方法中，到页面渲染结束，再调用afterCompletion
prehandle调用的最频繁（例如用户想要提交一个请求，但是没有登录，拦截器可以拦截下请求不让它直接到控制器调用方法，而是先登录）
定义拦截器一般会在后面加Interceptor（然后继承一个系统的拦截器类HandlerInterceptor)

RESTful服务

是风格不是规范

HTTP状态码

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

在RESTful架构中，每个网址代表一种资源，所以URI中建议不要包含动词，只包含名词即可，而且所用的名词往往与数据库的表格名对应。
URL中不要包含动词（传统的比如http://xxx/del?id=10，删除用户，但是RESTful需要delete http://xxx/user/10）

Swagger2

springboot3以上版本去用springdoc-openapi

SpringBoot集成Swagger3-CSDN博客

Mybatis快速上手

@Repository和@Controller、@Service、@Component的作用差不多，都是把对象交给spring管理。@Repository用在持久层的接口上，这个注解是将接口的一个实现类交给spring管理。

原来的UseController

package com.example.helloworld.controller;

import org.apache.catalina.User;
import org.springframework.web.bind.annotation.*;

@RestController
public class UserController {
    @GetMapping("/user/{id}")
    public String getUserById(@PathVariable int id){
        System.out.println(id);
        return "根据ID获取用户信息";
    }
    @PostMapping("/user")
    public String save(User user) { return"添加用户";}
    @PutMapping("/user")
    public String update(User user) { return "更新用户";}
    @DeleteMapping(" /user/{id}")
    public String deleteById(@PathVariable int id){
        System.out.println(id);
        return"根据ID删除用户";
    }
}

前期准备工作

1. 数据库准备

2. 添加依赖

3. 添加全局配置

4. 添加 @MapperScan 注解(把主包加上mapper包，这样mapper东西才能生效)

接下来完成简单的user表的增删改查的操作

编写实体类User.java （先写一个实体类，如user（用Mybatisplus？lombok代码会很简单，就不用写get set方法和tostring））
```
 public class User {   
private int id;
 private String username;
 private String password;
 private String birthday;
 }
```

编写UserMapper接口，加入以下增删改查方法（@mapper，告诉这里是个mapper组件；查询只要写上@Selete声明即可，所有的操作都交给mybatis来实现）

@Mapper
 public interface UserMapper {
 @Insert("insert into user values(#{id},#{username},#{password},#
 {birthday})")
 int add(User user);
 @Update("update user set username=#{username},password=#
 {password},birthday=#{birthday} where id=#{id}")
 int update(User user);
 @Delete("delete from user where id=#{id}")
 int delete(int id);
 }
 @Select("select * from user where id=#{id}")
 User findById(int id);
 @Select("select * from user")
 List<User> getAll();

Vuex

Vuex 是什么？ | Vuex (vuejs.org)

Vue组件，可以去读state里面的数据

State（状态）

整体是vuex提供的store对象

Vue组件通过读取State里面的数据，可以渲染到视图上

State里面的东西渲染到vue组件上

那我们在vue组件上可以发送网络请求，像网络请求这种异步的操作我们需要通过dispatch的形式来去触发，通过dispatch来触发Actions。也就是异步的操作都有Actions来完成，当我们把这个数据下载出来后，应该要把数据设置到data上去，可能要去修改data的值，。这个时候，我们要去修改状态的话，需要通过commit，提交，提交Mutations，Mutations再被这个state修改。

Devtools调试工具，那个组件在什么时候修改了状态都可以通过它来观察。

mutations定义的一个方法，为了修改state的值

基于state可能有一些派生的状态，

getter需要提供派生出来的数据

有时候我们希望对state里面的数据进行进一步的过滤和处理

Mutations只能做同步的操作

Action可以做异步的操作

context上下文对象，它不是直接修改状态，而是提交Mutations （进而间接去修改state里面的数据）

之所以这么设计，是为了在Action里面去记录我们state里面的变化

Actions触发方法

vue里面的计算属性，可以基于你的data里面的数据或者是vuex里面的数据去进行一些基本的操作。他需要要的是一个方法，这个方法的名字可以随便定义，（这个方法的名字和count保持一致，这个方法你所返回的值是state.count,，然后上面div里只需要写一个count就可以了

然后，当state里面的count变化的时候，上面页面也会自动变化计算属性会自动监听数据）

快速把state里面的数据映射到computed里面去

Vue-element-admin

store: Vuex部分在index.js里做了全局状态管理，并分了3个模块

route：放路由的地方，在index.js里面定义了所有的路由

Views里面，放着各种的组件（关于页面相关的组件）

components：放着通用的组件（需要复用的组件）

api：封装着网络请求

layout：放着布局相关

前端封装会很多层

从登录开始分析

实际的登录是把账号密码传给后端，后端再返回一个token，它把token存储到了本地和浏览器

登录还会涉及到一个组件permission.js（路由导航里涉及到的，导航守卫）

后端只负责提供数据,路由由前端负责

JWT跨域认证

token是用户信息用加密算法加密生成后的东西

4.20

写后端登录接口时报错

修改了数据库名称为我所用到的数据库

spring.datasource.url=jdbc:mysql://localhost:3306/crmcar?useSSL=false

删除了以下全局配置

mybatis-plus.type-aliases-package=com.peanut.entity
mybatis-plus.mapper-locations=classpath:mappers

如何改变Vue 项目中.env.production文件中定义的变量(常量)

项目用的Vue版本为

"vue": "2.6.10"

当前调用后端接口定义在文件request.js中

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 5000 // request timeout
})

可以看到baseURL是来自环境变量中的VUE_APP_BASE_API

而VUE_APP_BASE_API定义在.env.xxx文件中,这里以production文件为例

在这里修改

将http前面的 / 去掉，用ctrl+s保存，还是重启项目

仍然访问的是9528接口

应该点上面❌然后选择保存后再重新启动

If the port is empty or not given, port 80 is assumed.
如果端口号为空或未给出，则假定为 80 端口

HTTPS 有一个类似的默认端口：443。

Xuxiansir

关注

22
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
springboot+vue笔记

一个汉字占多少字节和编码有关，UTF8一个汉字占3个字节，GBK一个汉字占2个字节。字 word字节 byte位 bit，来自英文bit，音译为“比特”，表示二进制位。字长是指字的长度1字=2字节(1 word = 2 byte)1字节=8位(1 byte = 8bit)
复制链接

扫一扫