Web前端开发环境搭建与配置

1. 基础准备:
HTML基础(HTML5)
CSS
JSP(javascript) : 静态模板元素
2. 需要提前安装的软件:

  1. HTML:
    HBuilder X:
    安装链接 : https://www.dcloud.io/ Visual Studio Code:
    安装链接 : https://vscode.en.softonic.com/ 使用W3CSchool学习HTML/CSS标签;
    网页链接:https://www.w3school.com.cn/
  2. JAVAScript应用开发环境搭建和配置:

JDK安装与配置:

安装链接:http://www.oracle.com JDK的配置:

JAVA_HOME:

打开计算机右键属性,打开设置 ,搜索

高级系统设置

hbuilder怎么配置java后端服务 hbuilder写java_环境变量


在系统属性中点击环境变量进行置:

hbuilder怎么配置java后端服务 hbuilder写java_java_02


在新建中创建一个JAVA_HOME环境变量如下:

hbuilder怎么配置java后端服务 hbuilder写java_前端_03


hbuilder怎么配置java后端服务 hbuilder写java_java_04

下面这一行为你前面所安装JDK的路径,不能出错!!!

在系统变量中找到Path系统变量 , 点击编辑:

hbuilder怎么配置java后端服务 hbuilder写java_前端_05


新建粘贴刚才JDK的路径:

hbuilder怎么配置java后端服务 hbuilder写java_java_06

然后进行三次逐级确定缺一不可!

打开cmd测试是否安装成功

输入javac 出现下面界面配置JDK成功:

hbuilder怎么配置java后端服务 hbuilder写java_环境变量_07

Tomcat安装与配置:

安装链接 : http://tomcat.apache.org 安装成功后 , 进行解压;

再次打开环境变量进行配置:

编辑Path变量

hbuilder怎么配置java后端服务 hbuilder写java_tomcat_08


新建环境变量 , 将刚保存的tomcat文件夹下bin文件的路径粘贴新建环境变量:

hbuilder怎么配置java后端服务 hbuilder写java_tomcat_09


返回环境变量,添加TOMCAT_HOME , 路径为tomcat文件的路径:

hbuilder怎么配置java后端服务 hbuilder写java_环境变量_10


再新建一个环境变量 , 名称为CATALNA_HOME , 路径与tomcat路径一致(上一个路径)

hbuilder怎么配置java后端服务 hbuilder写java_tomcat_11


三次确定后配置成功.打开控制台测试 , 输入startup.bat:

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_12


不要关掉cmd界面!!!测试是否成功需要启动tomcat

打开浏览器,输入:

http://localhost:8080/

若出现

hbuilder怎么配置java后端服务 hbuilder写java_tomcat_13


证明Tomcat配置成功!!!

cmd中输入shutdown.bat 关闭tomcat

Eclipse安装与配置:

安装链接 : http://www.eclipse.org 安装成功后解压 , 启动Eclipse

该图片为设置代码保存区域,可以调整:

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_14


再Eclipse中配置Tomcat :

再window中打开preferences

hbuilder怎么配置java后端服务 hbuilder写java_环境变量_15


检查JDK版本是否正确:

hbuilder怎么配置java后端服务 hbuilder写java_环境变量_16


检查JRE,没有进行添加:

hbuilder怎么配置java后端服务 hbuilder写java_java_17


搭建服务器 , 没有进行添加,添加为tomcat所安装的版本 :

hbuilder怎么配置java后端服务 hbuilder写java_java_18


hbuilder怎么配置java后端服务 hbuilder写java_eclipse_19


点击下一步 , 配置如图:

hbuilder怎么配置java后端服务 hbuilder写java_前端_20


配置成功后,框内会有servers:

hbuilder怎么配置java后端服务 hbuilder写java_java_21


点击 , 配置服务器 , 选则所安装tomcat的版本:

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_22


hbuilder怎么配置java后端服务 hbuilder写java_eclipse_23


双击

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_24


更改红色圈中的两处配置 , 如图:

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_25


然后再Eclipse中右键即可在Eclipse中运行Tomcat:

hbuilder怎么配置java后端服务 hbuilder写java_java_26

拜托一键三连叭~~~点个关注给点动力

hbuilder怎么配置java后端服务 hbuilder写java_eclipse_27