vue+webpack+springboot+mysql入门项目搭建

最新推荐文章于 2025-06-18 20:15:56 发布

我爱吃兔兔

最新推荐文章于 2025-06-18 20:15:56 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript springboot vue 本地服务器

本文链接：https://blog.youkuaiyun.com/qq_36680300/article/details/97256645

本文介绍了如何搭建一个使用Vue、Webpack、SpringBoot和MySQL的入门项目。首先，分别创建Vue前端项目和SpringBoot后端项目，配置数据库连接。接着，前端通过axios对接后台接口，处理跨域问题。然后，前端项目打包，将dist文件夹内容放入SpringBoot项目的静态资源目录。最后，启动SpringBoot项目，实现前后端联调并测试成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、环境和工具：

后台编译器idea，maven+springboot+mybatis项目；
前端编译器vscode，vue项目；
数据库mysql，辅助工具sqlyog。

一、创建vue+webpack前端项目
vue init webpack + 项目名（默认已有node.js环境，创建中途配置按需选择即可）。

二、后台问题：
1、项目中引入了lombok插件进行日志打印。虽然pom.xml文件里配置了，但是有可能idea自动下完依赖之后log还是会报红，这个时候手动在settings，plugins里搜索lomback并下载。

2、结构目录

3、分页是可用的，但是是前端实现的，可能会改，编辑和删除的部分还没写。

三、后台连接mysql数据库
这里注意一点，一定要记得启动mysql服务。因为我自己用的是sqlyog，不太爱用命令行，mysql服务又设置了手动启动（默认是开机自启），所以每次都得netstart。
需要注意的地方不多，yml文件配置一下即可。

datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
password: xxx
url: jdbc:mysql://localhost:3306/vuedata?characterEncoding=utf8&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
username: xxx

四、前端与后台数据对接：
前端页面完成后，引入axios，简单测试$ajax即可，对接接口还是老实写axios代理跨域pro