接上篇

2023 最新版IntelliJ IDEA 2023.1创立Java Web 项目详细过程（图文详解

本篇运用当时Java Web开发干流的spring-boot3结构来创立一个Java前后端别离的项目，前端运用的也是目前前端干流的vue3进行一个简单的项目搭建，让你间隔Java全栈开发更近一步 ‍☠️。

‍ 项目构建所需的相关工具

Java

运用版别： “17.0.1” 2021-10-19 LTS
官方地址：www.oracle.com/java/techno…
DOS查询：java –version
假如不是这个版别的主张运用运用这个版别，别去运用20版别来创立

IDEA

运用版别： IntelliJ IDEA 2023.1
官方地址：www.jetbrains.com/zh-cn/idea/…

maven

运用版别：apache-maven-3.9.2
官方地址：maven.apache.org/download.cg…

NodeJS

运用版别：18.16.0
官方地址：nodejs.org/en

Vue

脚手架版别：@vue/cli 5.0.8
vue版别：vue3
官方地址：cn.vuejs.org/

Visual Studio Code

官方地址：code.visualstudio.com/
个人网盘：阿里云网盘下载

后端项目创立详细过程

1、开始创立新项目

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

2、输入项目名称、挑选项目存储方位、项目管理工具（Maven）、挑选JDK以及Java版别然后 Next

注：这儿没有JDK17的能够在JDK项目中去挑选后进行下载

3、挑选spring boot版别、挑选需求的插件然后Create

注：由于仅仅作为一个示例版别，这儿只挑选了 spring web，你能够视状况去挑选插件，后期假如需求也能够在 pom.xml文件中进行新增

4、等待创立完结，这是创立完结后的项目结构

注：这时现已能够点击项目名称右侧的绿色小三角形发动项目了，可是咱们没有写接口，即使发动了也没法做相关测试

6、装备端口号，假如需求运用数据库或者Redis等，也是在这个文件里边进行装备

7、创立接口

7.1 首要需求在主包（必定得是主包，否则扫描不到这个接口）中创立一个命名为controller（也能够用其它姓名，不过为了规范，基本是运用这个来命名）的包

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

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

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

下面两图运转后的IDEA界面以及浏览器恳求接口的界面

前端vue项目创立详细过程

相对于后端的搭建，前端就轻松很多了，只需求输入指令即可完结项目搭建和下载、发动，运用VScode编辑项目

1、vue脚手架全局安装

npm i -g @vue/cli-init

2、vue创立

在项目目录方位翻开cmd窗口，然后输入以下指令，app是项目名，你能够自定义

vue create app

默认挑选的便是Vue 3，enter确认就能够了

3、运用VScode翻开项目修正恳求端口，然后发动项目

此时，前端只要是用 /api开头的恳求，都会被转发至咱们新创立的那个项目下，至于怎样恳求，能够参阅我这儿给出的链接这篇文章，就不做赘言了 axios和async / await的基本用法

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:900',
        pathRewrite: {
          '^/api': '/api'
        },
        changeOrigin: true,
        ws: true
      }
    }
  },
})

3.2 发动vue 项目

npm run server

最后

至此、完结以上过程，你就能够搭建一个属于自己的Java前后端别离项目了，完结撒花。

今天也是2023年度的六一儿童节，祝愿咱们一切的小朋友节日快乐，身体健康，幸福生长。

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

接上篇