2023 最新版IntelliJ IDEA 2023.1创建Java Web前（vue3）后端（spring-boot3）分离项目详细步骤（图文详解）

╰+攻爆jí腚メ 2024-05-04 08:15 61阅读 0赞

#### 文章目录 ####

*  ? 接上篇
 *  ?? 项目构建所需的相关工具
 *   *  Java
     *  IDEA
     *  maven
     *  NodeJS
     *  Vue
     *  Visual Studio Code
 *  ? 后端项目创建详细步骤
 *   *  ? 1、开始创建新项目
     *  ? 2、输入项目名称、选择项目存储位置、项目管理工具（Maven）、选择JDK以及Java版本而后 Next
     *  ? 3、选择spring boot版本、选择需要的插件而后Create
     *  ? 4、等待创建完成，这是创建完成后的项目结构
     *  ? 6、配置端口号，如果需要使用数据库或者Redis等，也是在这个文件里面进行配置
     *  ? 7、创建接口
     *   *  ? 7.1 首先需要在主包（一定得是主包，不然扫描不到这个接口）中创建一个命名为controller（也可以用其它名字，不过为了规范，基本是使用这个来命名）的包
         *  ? 7.2 在创建的controller包中新建一个 类 ，这里命名为 hello，在hello类中写测试接口
     *  ? 8、点击项目名称右边的绿色的三角形符号、运行spring-boot，
 *  ? 前端vue项目创建详细步骤
 *   *  ? 1、vue脚手架全局安装
     *  ? 2、vue创建
     *  ? 3、使用VScode打开项目修改请求端口，而后启动项目
     *   *  ? 3.1 vue.config.js文件中的接口相关配置
         *  ? 3.2 启动vue 项目
 *  ? 最后

## ? 接上篇 ##

[2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤（图文详解）][2023 _IntelliJ IDEA 2023.1_Java Web]

本篇使用当前Java Web开发主流的spring-boot3框架来创建一个Java前后端分离的项目，前端使用的也是目前前端主流的vue3进行一个简单的项目搭建，让你距离Java全栈开发更近一步 ?☠️。

## ?? 项目构建所需的相关工具 ##

### Java ###

*  使用版本： “17.0.1” 2021-10-19 LTS
 *  官方地址：[https://www.oracle.com/java/technologies/downloads/][https_www.oracle.com_java_technologies_downloads]
 *  DOS查询：java --version
 *  如果不是这个版本的建议使用使用这个版本，别去使用20版本来创建

### IDEA ###

*  使用版本： IntelliJ IDEA 2023.1
 *  官方地址：[https://www.jetbrains.com/zh-cn/idea/download/\#section=windows][https_www.jetbrains.com_zh-cn_idea_download_section_windows]

### maven ###

*  使用版本：apache-maven-3.9.2
 *  官方地址：[https://maven.apache.org/download.cgi][https_maven.apache.org_download.cgi]

### NodeJS ###

*  使用版本：18.16.0
 *  官方地址：[https://nodejs.org/en][https_nodejs.org_en]

### Vue ###

*  脚手架版本：@vue/cli 5.0.8
 *  vue版本：3.0 ^
 *  官方地址：[https://cn.vuejs.org/][https_cn.vuejs.org]

### Visual Studio Code ###

*  官方地址：[https://code.visualstudio.com/][https_code.visualstudio.com]
 *  个人网盘：[阿里云网盘下载][Link 1]

## ? 后端项目创建详细步骤 ##

### ? 1、开始创建新项目 ###

![在这里插入图片描述][e0ea7fecdab048adadb532dfb3152a1c.png]

### ? 2、输入项目名称、选择项目存储位置、项目管理工具（Maven）、选择JDK以及Java版本而后 Next ###

注：这里没有JDK17的可以在JDK项目中去选择后进行下载

![在这里插入图片描述][a5cf41b5abe2401bb11f11d7de42e050.png]

### ? 3、选择spring boot版本、选择需要的插件而后Create ###

注：因为只是作为一个示例版本，这里只选择了 spring web，你可以视情况去选择插件，后期如果需要也可以在 pom.xml文件中进行新增

![在这里插入图片描述][ca6f6683a99f4a85815f9df796703a9a.png]

### ? 4、等待创建完成，这是创建完成后的项目结构 ###

注：这时已经可以点击项目名称右侧的绿色小三角形启动项目了，但是我们没有写接口，即使启动了也没法做相关测试  
![在这里插入图片描述][2721480d1ee34b22a553400a8d69a7df.png]

### ? 6、配置端口号，如果需要使用数据库或者Redis等，也是在这个文件里面进行配置 ###

![在这里插入图片描述][78f43d72bd694dccac925a5abf5deaf1.png]

### ? 7、创建接口 ###

#### ? 7.1 首先需要在主包（一定得是主包，不然扫描不到这个接口）中创建一个命名为controller（也可以用其它名字，不过为了规范，基本是使用这个来命名）的包 ####

![在这里插入图片描述][84c8d09b109d4b2389eecf99fa41ef43.png]

#### ? 7.2 在创建的controller包中新建一个 类 ，这里命名为 hello，在hello类中写测试接口 ####

![在这里插入图片描述][ba62ed0bdbcf42b587342d562c7d40fe.png]

package com.example.springboot3demo.controtler;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    @RestController
    public class hello {
        
    	@GetMapping("/hello")
    	public String index(){
        
    		return "hello spring-boot3";
    	}
    }

### ? 8、点击项目名称右边的绿色的三角形符号、运行spring-boot， ###

下面两图运行后的IDEA界面以及浏览器请求接口的界面  
![在这里插入图片描述][e13e7cb25ebd48c485c68b708491b1a2.png]

![在这里插入图片描述][57b5ca039914483592647fb6d78230cb.png]

## ? 前端vue项目创建详细步骤 ##

相对于后端的搭建，前端就轻松很多了，只需要输入命令即可完成项目搭建和下载、启动，使用VScode编辑项目

### ? 1、vue脚手架全局安装 ###

npm i -g @vue/cli-init

### ? 2、vue创建 ###

在项目目录位置打开cmd窗口，而后输入以下命令，app是项目名，你可以自定义

vue create app

默认选择的就是Vue 3，enter确认就可以了  
![在这里插入图片描述][897f6391339a4cee8c07eb9a9fa0c181.png]

### ? 3、使用VScode打开项目修改请求端口，而后启动项目 ###

此时，前端只要是用 /api开头的请求，都会被转发至 我们新创建的那个项目下，至于怎么请求，可以参考我这里给出的链接这篇文章，就不做赘言了  
[axios和async / await的基本用法][axios_async _ await]

![在这里插入图片描述][3e794b4b90044dcb86e4582c09495fce.png]

#### ? 3.1 vue.config.js文件中的接口相关配置 ####

const {
        
      defineConfig
    } = require('@vue/cli-service')
    module.exports = defineConfig({
        
      transpileDependencies: true,
      lintOnSave: false, //关闭语法检查
      assetsDir: "static",
      devServer: {
        
        port: "8000",
        proxy: {
        
          '/api': {
        
            target: 'http://127.0.0.1:9000',
            pathRewrite: {
        
              '^/api': '/api'
            },
            changeOrigin: true,
            ws: true
          }
        }
      },
    })

#### ? 3.2 启动vue 项目 ####

npm run server

## ? 最后 ##

至此、完成以上步骤，你就可以搭建一个属于自己的Java前后端分离项目了，完结撒花 ?。

今天也是2023年度的六一儿童节，祝愿我们所有的小朋友节日快乐，身体健康，幸福成长。?

[2023 _IntelliJ IDEA 2023.1_Java Web]: https://blog.csdn.net/weixin_51033461/article/details/130637008
[https_www.oracle.com_java_technologies_downloads]: https://www.oracle.com/java/technologies/downloads/
[https_www.jetbrains.com_zh-cn_idea_download_section_windows]: https://www.jetbrains.com/zh-cn/idea/download/#section=windows
[https_maven.apache.org_download.cgi]: https://maven.apache.org/download.cgi
[https_nodejs.org_en]: https://nodejs.org/en
[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_code.visualstudio.com]: https://code.visualstudio.com/
[Link 1]: https://www.aliyundrive.com/s/guXrvBcrHZP
[e0ea7fecdab048adadb532dfb3152a1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/7a5ab1c93fa54f5894f2e677a72ab3e6.png
[a5cf41b5abe2401bb11f11d7de42e050.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/2617b784dc1a4463a7554061973c1a01.png
[ca6f6683a99f4a85815f9df796703a9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/d90f49ade77848339876b54c224ae86a.png
[2721480d1ee34b22a553400a8d69a7df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/21ff8a1641de43ecab8c8789a9787cee.png
[78f43d72bd694dccac925a5abf5deaf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/636113374cc84ff3b01de9588669500f.png
[84c8d09b109d4b2389eecf99fa41ef43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/28662dabf3d744fbacd8df8ed1db2cef.png
[ba62ed0bdbcf42b587342d562c7d40fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/5f1abec9fdcb4640b783fb2ae3abef4a.png
[e13e7cb25ebd48c485c68b708491b1a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/ae85f77a5a4b4475a5ae36cf33d762d6.png
[57b5ca039914483592647fb6d78230cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/e18f5d72b67a43d8b5b917e0741b7f75.png
[897f6391339a4cee8c07eb9a9fa0c181.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/2cb4b1ecb0bc44a1a4a804938e9b1019.png
[axios_async _ await]: https://blog.csdn.net/weixin_51033461/article/details/118938930?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168559870016800192254925%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168559870016800192254925&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-118938930-null-null.268%5Ev1%5Econtrol&utm_term=axios&spm=1018.2226.3001.4450
[3e794b4b90044dcb86e4582c09495fce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/f0b8d39176cb4a99ba0d90b5bba3f9de.png