02. 导入并运行脚手架

7490 字约 15 分钟读完7025 次阅读更新于 2026/5/3

什么是脚手架，脚手架的优势

快速生成一个基本的项目，这个项目没有跟项目相关的任何内容，纯粹是一个开发的基本模板，通过一个基础的成型的简单的项目模板我们来快速开发项目，这样的话效率会比较高，省去了一些无用的流程，更多的去关注项目本身功能的开发！
我们的目的是：快速开发完成项目
脚手架约束一些版本号，这样就不会因为版本问题出错
最终大大降低了大家的学习成本，可以在短期内快速实习自己的功能开发。

解压脚手架

image.png
记住：这个system文件夹是项目的根文件夹，用idea打开这个文件夹运行项目
改名为 farm _system，后续我们用idea打开这个** farm _system** 文件夹就可以运行项目了

IDEA导入项目

复制这个路径
image.png
image.png
image.png

启动Springboot工程

通过 maven导入Springboot项目依赖
image.png
启动Springboot工程
image.png
启动成功
image.png
访问 localhost:9090 验证后端是否启动成功
image.png

启动Vue工程

进入vue工程目录
image.png
配置npm的淘宝镜像
npm config set registry https://registry.npmmirror.com/

我们是实战项目教学，不是零基础教学，你们要先去学一下** Java基础、JavaWeb，前端的基础：html、css、js**
帮助大家快速学会项目，自己可以独立做项目

启动vue成功后，访问 http://127.0.0.1:5173/login
image.png

导入数据库

创建数据库 farm_system
image.png
导入成功后会出现 admin 的数据库表
image.png
在SpringBoot工程的 application.yml 文件里配置数据库
image.png

登录

在前端输入账号和密码点击登录，如果进入到后台的主页，说明脚手架配置成功
image.png

脚手架的内容

Springboot工程目录
image.png
image.png
前端vue工程目录
image.png

数据交互的配置文件
image.png

功能点

后端

登录、注册接口、修改密码的接口
管理员增删改查接口

前端

集成了登录页面Login.vue、注册页面Register.vue
后台的框架页面 Manager.vue
后台主页 Home.vue
个人中心页面 Person.vue
修改密码页面 Password.vue