Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】

本文详细记录了从安装JDK、IDEA、WebStorm、Maven、Node.js及@Vue/cli,到配置MySQL的全过程,适合初学者快速搭建开发环境。同时提到了IDEA社区版连接数据库的限制,并推荐了Ultimate版。

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

这是我自己的环境搭建记录,分享给大家一起学习~~
后续还会再补充自己做的小项目【含前端和后端】
如有任何问题,欢迎大家批评指正!

一、安装JDK

  1. 百度搜索JDK8,在官网下载适配自己电脑型号的exe文件
    【JDK8和JDK1.8是一个东西,不同的叫法而已】
    在这里插入图片描述
  2. 双击运行exe文件,进行安装
    在这里插入图片描述
    在这里插入图片描述
    【安装的中途还会让你设置一下jre(Java Runtime Environment)的安装路径】
  3. 配置环境变量
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    【变量名就写JAVA_HOME,不要动】

在这里插入图片描述
4. 检查是否安装成功
在这里插入图片描述

二、安装IDEA集成开发环境

  1. 百度搜索IDEA,我下载的是社区版【Ultimate的配置过程基本一样】
    在这里插入图片描述
  2. 双击exe文件进行安装
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  3. 安装完成后,创建个项目试试,双击图标
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

三、安装webstorm

【这里就不放图了,主要步骤和IDEA是一样的】

  1. 百度搜索webstorm,官网下载
  2. 双击exe一步步next安装即可
  3. 安装完成后,打开后需要进行激活(需要教程的可以在评论区留下你的邮箱📫)

四、安装Maven包管理工具

  1. 官网下载编译好的Maven【 https://maven.apache.org/download.cgi 】
    在这里插入图片描述

  2. 解压到某个文件夹下
    在这里插入图片描述

  3. 配置环境变量
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    后边依次点击确定即可

  4. 验证是否安装成功
    在这里插入图片描述

  5. 配置本地仓库----修改settings文件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  6. 配置镜像----修改settings文件
    在这里插入图片描述

<mirror>
	<id>alimaven</id>
	<mirrorOf>central</mirrorOf>
	<name>aliyun maven</name>
	<url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
</mirror>
  1. 配置JDK----修改settings文件
    在这里插入图片描述
<profile>
      <id>jdk-1.8</id>
      <activation>
        <activeByDefault>true</activeByDefault>
        <jdk>1.8</jdk>
      </activation>
      
      <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>        
        <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
      </properties>
</profile>
  1. 在IDEA中配置Maven
    【对于当前的项目,想用maven进行管理,设置过程如下】:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    【想让所有新创建项目都默认通过maven进行管理,设置如下】:
    在这里插入图片描述
-DarchetypeCatalog=internal

在这里插入图片描述
……………………………………接下来创建一个基于Maven的普通Java 项目………………………

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

【如果是要创建一个Web项目,那模板就选web的那个就行】

五、安装配置Node.js,@Vue/cli

  1. 官网下载node.js
    在这里插入图片描述
  2. 安装【中途选择安装路径,其他Next即可】
  3. 检查是否安装成功
    在这里插入图片描述
  4. 修改环境变量,修改配置路径【node_global、node_cache】
    (如果不配置的话,npm install xxx 会默认安装到C盘的路径下)

在这里插入图片描述

npm config set prefix “……”
npm config get prefix
npm config set cache “……”
npm config get cache
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
5. 安装淘宝镜像cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org
在这里插入图片描述

  1. 安装vue脚手架3.x的版本,@vue/cli

cnpm install -g @vue/cli
vue -V
在这里插入图片描述
在这里插入图片描述

要是想安装指定版本的vue/cli,需要用下述命令:
npm install -g @vue/cli@3.11.0 // 后面为版本号

  1. 项目启动测试【webstorm中打开的项目】
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

六、安装配置MySQL

  1. 下载 【https://dev.mysql.com/downloads/windows/installer/8.0.html】
    在这里插入图片描述
  2. 双击进行安装
    Next
    Next
    Yes
    Execute Next
    Next
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Execute
Finish

在这里插入图片描述
3. 启动和停止MySQL命令【安装完默认就是开启的啦哈】
在这里插入图片描述
4. 连接MySQL数据库
方式一: 利用MySQL提供的客户端命令行工具】
在这里插入图片描述

在这里插入图片描述

方式二: 利用系统自带的命令行工具执行指令】
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

七、IDEA社区版连接MySQL

【IDEA社区版不支持连接数据库,我们需要下载一个插件】
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
【但是社区版的IDEA操作MySQL功能上非常局限,太不友好了,所以我准备换成Ultimate了!】
【安装过程类似于社区版,有需要激活教程的,可以在评论区留下你们的邮箱📫~】

后续的环境部署,请继续跟进:【续】Java小白 前端后端开发 环境搭建

### 推荐的Java前端可视化插件 在开发Java前端可视化应用程序时,选择合适的IDE插件至关重要。以下是几种推荐的Java IDE及其相关的前端可视化插件: #### 1. Eclipse IDE for Java EE Developers Eclipse IDE for Java EE Developers 是一个专门为Java EE开发者设计的集成开发环境。它集成了许多用于动态Web网站开发的工具,包括XML编辑器、查看工具以及JSP可视化编辑器[^1]。这些工具使得开发者能够更高效地进行Java前端开发,并且支持通过插件扩展功能。 #### 2. Visual Editor (VE) 插件 Visual Editor 是Eclipse官方提供的一个开源GUI插件,专为Java图形界面的可视化开发而设计。该插件可以根据用户的界面设计自动生成相应的Java代码,同时也可以将现有的Java代码转换为可视化的GUI编辑界面[^2]。尽管VE插件的功能强大,但其缺点在于需要启动一个额外的JVM来模拟执行GUI类,这可能导致性能问题。 #### 3. NetBeans IDE NetBeans IDE 提供了强大的JSPJSF可视化编辑器,允许开发者以拖放的方式构建复杂的Web界面。此外,NetBeans还支持HTML、CSSJavaScript的开发,适合全栈开发者使用[^3]。它的插件生态系统丰富,可以轻松扩展以满足不同的开发需求。 #### 4. IntelliJ IDEA Ultimate Edition IntelliJ IDEA Ultimate Edition 是JetBrains公司提供的旗舰级Java IDE,支持Java前端开发并通过插件提供可视化功能。虽然其默认配置可能不包含所有前端开发所需的工具,但可以通过安装如Web Tools Platform等插件来增强其功能[^3]。此版本功能全面,但启动速度相对较慢。 #### 示例代码:如何在Eclipse中安装Visual Editor插件 以下是一个简单的步骤示例,展示如何在Eclipse中安装Visual Editor插件: ```bash # 打开Eclipse # 转到 "Help" -> "Install New Software" # 在弹出的窗口中,点击 "Add" # 输入URL: http://www.eclipse.org/vep/update/ # 选择并安装 "Visual Editor" ``` ### 总结 根据具体需求偏好,可以选择上述任意一种IDE及其相关插件进行Java前端可视化开发。每种工具都有其独特的优势局限性,建议根据项目规模个人习惯做出选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值