SpringBoot3+ Vue3+ 快速开发框架
前言
新建项目时总有很多东西要配置,此处为个人关于SpringBoot3+Vue3快速开发框架,包含了普通开发过程中大部分的依赖,适用于新手开发
一、SpringBoot3+
1.pom.xml依赖
- 一键获取
<dependencies>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.21</version>
</dependency>
<!--JDBC-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--MyBatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>
<!--MyBatis Plus-->
<!-- <dependency>-->
<!-- <groupId>com.baomidou</groupId>-->
<!-- <artifactId>mybatis-plus-boot-starter</artifactId>-->
<!-- <version>3.4.2</version>-->
<!-- </dependency>-->
<!--redis-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
<version>3.1.2</version>
</dependency>
<!--druid-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.14</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--test-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--SpringWeb-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--Security-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<!--JWt-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
<!--Swagger -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-boot-starter</artifactId>
<version>3.0.0</version>
</dependency>
</dependencies>
2. Utils
2.1 result
result实体类
public class Result<T> {
private Integer code;
private String msg;
private T data;
public Result() {
super();
}
public Result(Integer code, String msg, T data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public Result(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
@Override
public String toString() {
return "Result{" +
"code=" + code +
", msg='" + msg + '\'' +
", data=" + data +
'}';
}
}
result工具类
public class ResultUtil {
/**
* 成功
*
* @return
*/
public static Result success() {
return success("成功");
}
/**
* 成功带消息
*
* @param msg
* @return
*/
public static Result success(String msg) {
Result result = new Result(200, msg);
return result;
}
/**
* 成功带对象
*
* @param object
* @return
*/
public static Result success(Object object) {
Result result = new Result(200, "成功", object);
return result;
}
/**
* 成功带消息和对象
*
* @param msg
* @param object
* @return
*/
public static Result success(String msg, Object object) {
Result result = new Result(200, msg, object);
return result;
}
/**
* 失败
*
* @return
*/
public static Result error() {
return error("失败");
}
/**
* 失败带消息
*
* @param msg
* @return
*/
public static Result error(String msg) {
Result result = new Result(-1, msg);
return result;
}
/**
* 失败带对象
*
* @param object
* @return
*/
public static Result error(Object object) {
Result result = new Result(-1, "失败", object);
return result;
}
/**
* 失败带消息和对象
*
* @param msg
* @param object
* @return
*/
public static Result error(String msg, Object object) {
Result result = new Result(-1, msg, object);
return result;
}
}
3.application
application.yml是Spring Boot应用程序中的配置文件,它使用YAML(YAML Ain’t Markup Language)格式来配置应用程序的各种属性和设置
application.yml
# 数据源配置
spring:
datasource:
#jdbc
url: jdbc:mysql://youIP:3306/bhl?characterEncoding=utf-8
username: #youUsername
password: #youPassword
driver-class-name: com.mysql.cj.jdbc.Driver
#druid
type: com.alibaba.druid.pool.DruidDataSource
druid:
# 连接池初始化时创建的连接数量
initial-size: 5
# 连接池中保持的最小空闲连接数量
min-idle: 5
# 连接池中允许的最大活跃连接数量
max-active: 20
# 用于检验连接是否有效的SQL查询语句
validation-query: SELECT 1
jackson:
# 返回格式化日期
date-format: yyyy-MM-dd
time-zone: GMT+8
mvc:
# 前端参数格式化
format:
# String格式化日期
date: yyyy-MM-dd
redis:
host: localhost
port: 6379
password:
servlet:
multipart:
# 上传文件的最大大小限制
max-file-size: 10MB
# 请求的最大大小限制
max-request-size: 10MB
web:
resources:
static-locations: /upload/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
server:
# 服务器端口号配置
port: 8081
mybatis-plus:
configuration:
# 是否开启自动驼峰命名规则(camel case)映射
map-underscore-to-camel-case: true
# 这个配置会将执行的sql打印出来,在开发或测试的时候可以用
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# MyBaits 别名包扫描路径,通过该属性可以给包中的类注册别名
type-aliases-package: com.ysd.springboot.domain
# xml扫描,多个目录用逗号或者分号分隔(告诉 Mapper 所对应的 XML 文件位置)
mapper-locations: classpath:mapper/*.xml
global-config:
banner: off
二、vue3+
1.dependencies
- package.json
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.8.3",
"element-plus": "^2.3.10",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
}
2.main.js
- 全局引入
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import axios from 'axios';
// 设置全局的 Axios 实例
axios.defaults.baseURL = 'http://localhost:8081'; // 设置基础URL
const app = createApp(App);
app.config.globalProperties.$axios = axios;
// 使用Vue Router、Vuex和Element Plus
app.use(store).use(router).use(ElementPlus);
// 挂载Vue实例
app.mount('#app');