Springboot+Vue-element个人博客项目开发（一、项目环境搭建）

àì夳堔傛蜴生んèń 2023-10-02 22:22 12阅读 0赞

### 前言 ###

首先要明确，后端采用的是Springboot,管理平台采用的是Vue搭建，采用前后端分离方式开发，这也是绝大多数企业采用的方式**前后端分离，**也就是说我们使用Java将数据通过接口的方式暴露出来，然后前端只要通过接口地址就能获取到数据，这样在后期的维护过程中，对前后端的依赖性很小，可以减轻维护的压力。

贴上《on Java 8》中文教程地址：[《On Java 8》中文版 - 《《On Java 8》中文版》 - 技术池(jishuchi.com)![icon-default.png_t_M85B][]https://www.jishuchi.com/read/onjava8/11809][On Java 8_ - _On Java 8_ - _jishuchi.com_icon-default.png_t_M85B_https_www.jishuchi.com_read_onjava8_11809]

### 一、后端搭建 ###

首先第一步是创建后端项目

打开IDEA,有两种情况，创建过项目的和没创建过项目的，都会介绍

1. 创建过项目的

在File导航中选择File ->New ->Project

![fc607efbd92441418370971ffb203f53.png][]

2. 没创建过项目的，打开IDEA，点击New project

![dc7db63d3975402fbd5f958179331b9b.png][]

点击New-project创建新项目即可，

会出现以下界面，选择Spring Initializr创建一个springboot项目

![6ae361a166454d15971a17adbac442e0.png][]

填完组织名、项目名，选择Java版本、选择项目版本，其他为默认 ，点击next下一步

![d5946a04d09d4593aae20780b064185e.png][]

选择Web，选择版本，点击Next下一步

![e7612018c89c49aeaea0ddaa1a9483fc.png][]

选择项目存储路径，点击Finash完成

![015ae27e80754e88b5d48da794a816ad.png][] 初始化完成之后，项目目录如下

![5f44193d17114c8c8c703afa72c7cc4c.png][]

有些目录是 IDEA生成的东西，我们用不到，把它删除了，简化我们的目录，如下

![aa05de4ca8874e99930a7d1ca4be69a7.png][]

此时控制台如果会出现以下报错信息，说明maven版本不一致。

![e0222fd9aae14d44ba7e6ec733d9653a.png][]

点击File ->Seeting

![cb812c1670f740a591928f24165e9f0b.png][]

打开设置Build,Execution,Deployment -> Build Tools ->Maven

![6327636b4bc44065a3a23986a605e6fe.png][]

修改后点击OK即可

但此时控制台又爆红，查询原因得知是spring-boot版本问题

![5dc89f6805cd489696f088f28af061d4.png][]

点击左侧的pom.xml,通过Ctrl+F查找spring-boot

将版本改成默认可以使用的

![acdce10761a44fc98f2f3b10f6a3d0e3.png][]

如果需要找其他版本的包，推荐下面这个网址

[Maven Repository: spring-boot-starter-parent (mvnrepository.com)][Maven Repository_ spring-boot-starter-parent _mvnrepository.com]

![253dfe69a8d54d13bf62f52126665e98.png][]

点进去

![acf9b3306c604bc5b65827f0410706c2.png][]

任选一个点进去

![c35d768ded7944a89a02bdde532b74bb.png][]

偏题了，继续说项目

控制台在没有爆红之后，点击启动项目

![6b848236a3bf4382bed9014e603adf1f.png][]

出现以下情况就说明启动成功了，启动端口为8080

![4aa50c40071a410a9142e23a6dd7d980.png][]

打开浏览器，访问[http://localhost:8080][http_localhost_8080]，会出现404错误，是正常的，

![98934a9a4c0e44c3b2dcae9d41e58dee.png][]

再回到控制台，会发现多了三行信息，证明确实时访问了我们的项目，此时后端搭建完成

![232a19a757c64df7ac01eeb502cb023e.png][]

到这里，后端基本的搭建已经完成了，

计划是前端的搭建没那么快，要等到基本上的增删改查都完成之后，再进行前端的搭建

[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[On Java 8_ - _On Java 8_ - _jishuchi.com_icon-default.png_t_M85B_https_www.jishuchi.com_read_onjava8_11809]: https://www.jishuchi.com/read/onjava8/11809
[fc607efbd92441418370971ffb203f53.png]: https://img-blog.csdnimg.cn/fc607efbd92441418370971ffb203f53.png
[dc7db63d3975402fbd5f958179331b9b.png]: https://img-blog.csdnimg.cn/dc7db63d3975402fbd5f958179331b9b.png
[6ae361a166454d15971a17adbac442e0.png]: https://img-blog.csdnimg.cn/6ae361a166454d15971a17adbac442e0.png
[d5946a04d09d4593aae20780b064185e.png]: https://img-blog.csdnimg.cn/d5946a04d09d4593aae20780b064185e.png
[e7612018c89c49aeaea0ddaa1a9483fc.png]: https://img-blog.csdnimg.cn/e7612018c89c49aeaea0ddaa1a9483fc.png
[015ae27e80754e88b5d48da794a816ad.png]: https://img-blog.csdnimg.cn/015ae27e80754e88b5d48da794a816ad.png
[5f44193d17114c8c8c703afa72c7cc4c.png]: https://img-blog.csdnimg.cn/5f44193d17114c8c8c703afa72c7cc4c.png
[aa05de4ca8874e99930a7d1ca4be69a7.png]: https://img-blog.csdnimg.cn/aa05de4ca8874e99930a7d1ca4be69a7.png
[e0222fd9aae14d44ba7e6ec733d9653a.png]: https://img-blog.csdnimg.cn/e0222fd9aae14d44ba7e6ec733d9653a.png
[cb812c1670f740a591928f24165e9f0b.png]: https://img-blog.csdnimg.cn/cb812c1670f740a591928f24165e9f0b.png
[6327636b4bc44065a3a23986a605e6fe.png]: https://img-blog.csdnimg.cn/6327636b4bc44065a3a23986a605e6fe.png
[5dc89f6805cd489696f088f28af061d4.png]: https://img-blog.csdnimg.cn/5dc89f6805cd489696f088f28af061d4.png
[acdce10761a44fc98f2f3b10f6a3d0e3.png]: https://img-blog.csdnimg.cn/acdce10761a44fc98f2f3b10f6a3d0e3.png
[Maven Repository_ spring-boot-starter-parent _mvnrepository.com]: https://mvnrepository.com/search?q=spring-boot-starter-parent
[253dfe69a8d54d13bf62f52126665e98.png]: https://img-blog.csdnimg.cn/253dfe69a8d54d13bf62f52126665e98.png
[acf9b3306c604bc5b65827f0410706c2.png]: https://img-blog.csdnimg.cn/acf9b3306c604bc5b65827f0410706c2.png
[c35d768ded7944a89a02bdde532b74bb.png]: https://img-blog.csdnimg.cn/c35d768ded7944a89a02bdde532b74bb.png
[6b848236a3bf4382bed9014e603adf1f.png]: https://img-blog.csdnimg.cn/6b848236a3bf4382bed9014e603adf1f.png
[4aa50c40071a410a9142e23a6dd7d980.png]: https://img-blog.csdnimg.cn/4aa50c40071a410a9142e23a6dd7d980.png
[http_localhost_8080]: http://localhost:8080/
[98934a9a4c0e44c3b2dcae9d41e58dee.png]: https://img-blog.csdnimg.cn/98934a9a4c0e44c3b2dcae9d41e58dee.png
[232a19a757c64df7ac01eeb502cb023e.png]: https://img-blog.csdnimg.cn/232a19a757c64df7ac01eeb502cb023e.png