【SpringBoot+Vue】001-项目框架搭建

目录

【远程仓库搭建】

【前端项目搭建】

1. 安装Vue CLI

2. 安装成功后，检查版本

3. 创建前端vue项目

【后端项目搭建】

1. 选择Spring启动器（基于IDEA2023.1）

2. 选择项目依赖

3. 创建项目

4. 更新数据库连接配置

---

【远程仓库搭建】

（1）在Gitee上新建一个仓库，复制URL

（2）打开IDEA，选择从VCS获取，输入仓库url，克隆

（3）在克隆好的文件夹内分别创建前端项目和后端项目，后续就可以将前后端项目一起上传Gitee

---

【前端项目搭建-Vue2】

1.Vue.js

Vue3文档https://cn.vuejs.org/guide/introduction.htmlVue2官方文档https://v2.cn.vuejs.org/v2/guide/

2. 安装Vue CLI

Vue CLI官方文档https://cli.vuejs.org/zh/guide/installation.html

使用如下命令行创建

npm update -g @vue/cli

3. 安装成功后，检查版本

4. 创建vue2项目

（1）使用以下命令行在当前文件夹下创建，关键字create后面为自定义的项目名称

vue create vue

（2）项目自定义选择

（3）创建成功提示

（4）使用VSCode打开项目，项目目录结构如下：

（5）项目启动

在命令行窗口，或者在VSCode中打开终端，输入命令启动 

npm run serve

5. 创建Vue3项目

（1）使用以下命令行在当前文件夹下创建，这句命令不可更改（关键字init后面非自定义项目名称），后续创建过程中，会让你输入项目名称

npm create vue@latest

（2）项目自定义选择

（3） 创建成功后，按照页面提供给你的绿色指令执行即可。最终项目启动成功。

至此，前端Vue项目搭建成功！

---

【后端项目搭建】

 1. 选择Spring启动器（基于IDEA2023.1）

 2. 选择项目依赖

SpringBoot版本，当jdk使用1.8版本时，SpringBoot需使用2.x版本，否则会编译报错，或者将jdk升级到17版本。

Developer Tools -> Lombok

Web -> Spring Web（SpringMVC）

SQL -> MySQL Driver、MyBatis Framework

 3. 创建项目

点击创建，项目则创建成功。文件目录结构如下：

打开pom.xml更新依赖

 如果依赖下载较慢，可以百度阿里依赖镜像配置。。。

4. 更新数据库连接配置

上述配置完成后，直接启动项目会报以下错误：

读取不到数据源，配置数据源即可

在application.properties文件下设置数据库相关配置项：

#数据库连接配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/database?serverTimezone=GMT%2b8
spring.datasource.username=username
spring.datasource.password=password

其中url中的database替换为自己本地的数据库名称

username和password根据本地mysql数据库的用户名密码修改

至此，后端SpringBoot项目搭建成功！