02. 导入并运行脚手架

8479 字约 17 分钟读完3530 次阅读更新于 2026/5/3

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

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

解压脚手架

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

导入数据库

通过Navicat创建 film_comment_system 的数据库，然后导入film_comment_system.sql文件即可
数据库里面有一个表叫 admin
image.png

IDEA导入项目

idea打开film_comment_system文件夹导入项目
image.png
image.png
image.png
在 maven里面配置 阿里云镜像
image.png
修改数据库配置
image.png

启动Springboot工程

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

启动Vue工程

进入vue工程目录
image.png
配置npm的淘宝镜像
npm config set registry https://registry.npmmirror.com/
image.png
安装完成后会多出一个 node_modules的目录出来
image.png

打开package.json，点击dev选项启动项目
image.png

注意：我们是启动了2个工程，我们的SpringBoot是9090端口访问，前端vue是5173端口访问，这是2个完全不同的工程，不用混淆了！

启动vue成功后，访问 http://127.0.0.1:5173/login
image.png
当你看到这个页面之后，那说明你的前端启动完成了

什么是接口？什么是页面？

接口是后端提供数据的http请求，前端通过axios这样的工具就是向后端的接口请求数据，然后渲染到页面
什么是页面？就是vue工程启动成功之后在浏览器里面访问的这个页面就是vue的页面，页面是展示用的

登录

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

脚手架的内容

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

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

功能点

后端

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

前端

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