基于JDK1.8, idea2020.3, tomcat-8.5.78
目录:
1.安装jdk,配置环境变量
1.win + R 输入sysdm.cpl,打开系统属性
2.点击环境变量
3.编辑系统环境变量
变量名:
JAVA_HOME
java的安装路径 :(路径不可直接复制,记得换成你的jdk安装路径)
C:\Program Files\Java\jdk1.8.0_321
4.打开Path : 新添加两个路径(直接复制即可)
注意:如果Path不是以下图片竖着填,各路径需要英文分号隔开!!!
%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin
5.添加以下环境变量(复制即可)
变量名:
CLASSPATH
变量值:
.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar
测试(如下图则为成功):
java -version
配置JDK环境变量到此配置完成!!
2.安装idea(不在赘述)
3.安装tomcat
1.将tomcat8.5 解压到硬盘
2.配置环境变量
变量名:
TOMCAT_HOME
变量值:(路径不可直接复制,记得换成你的 tomcat 路径)
D:\apache-tomcat-8.5.78
4.打开Path : 新添加一个路径(直接复制即可)
%TOMCAT_HOME%\bin
5.测试双击 tomcat—> bin—> startup.bat
在浏览器输入:http://localhost:8080/ 出现如下则为成功。
cmd命令行界面输入startup出现如下也是成功:
注:双击startup.bat命令窗口乱码解决方案:
如果双击startup.bat能够正常启动,但是乱码的话,可以到tomcat目录找到conf文件夹中的logging.properties,将这里的UTF-8改GBK,再双击startup.bat命令窗口就不会乱码了。
4.设置账号密码(这里可有可无)
进入
http://localhost:8080/manager/status
localhost:8080/manager/html
localhost:8080/host-manager/html
等页面时需要账户密码
下面设置账户密码:
tomcat进入管理界面
找到tomcat目录的conf文件夹下的tomcat-users.xml,双击打开
tomcat的这部分默认是注释掉的,我们在下面添加:
<role rolename="admin-gui"/>
<role rolename="manager-gui"/>
<user username="你的名字" password="你的密码" roles="admin-gui,manager-gui"/>
</tomcat-users>
5.安装配置maven
1.将下载下载好的压缩包,解压至你想要安装的目录下。
2.复制Maven的根目录
3.配置Maven环境
win + R 输入sysdm.cpl,打开系统属性,配置环境变量
变量名:MAVEN_HOME
变量值(你自己的maven路径):D:\IDEA\tomcat\apache-maven-3.6.3-bin\apache-maven-3.6.3
Path中新建:%MAVEN_HOME%\bin
4.测试
mvn -v
如下则为成功:
5.对Maven进行修改(配置国内服务器等):
打开Maven的安装目录>conf文件夹>setting.xml将国内服务器代码放到下列位置
<mirror>
<id>nexus-aliyun</id>
<mirrorOf>*</mirrorOf>
<name>Nexus aliyun</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
改默认仓库的位置(先建立文件夹)
<localRepository>D:\Software\.m2\repository</localRepository>
6.在Idea上配置Maven工具
7.在idea下新建web工程
(上面的Maven配置不好无法进行这一步)
1.File > new > project > maven > create from archetype->maven-archetype-webapp,点击next即可
2.勾选override后选择自己maven所在位置,配好。
3.finish即可,等待创建完成
8.将tomcat配置到idea
选择Tomcat解压位置:
点击Fix:
选择如下(名字可修改,一般修改为项目名):
点击OK退出后运行测试(如下则成功):
9.新建html文件,进行Echarts可视化
1.下载Echarts.min.js
2.将echarts.min.js放入到新建的js文件夹里
2.在main下webapp新建test.html,测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1.安装echarts后,引入js文件 -->
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 定义显示图标的div -->
<div id="echart" style="width: 600px;height: 600px;"></div>
<script>
// 初始化 echarts 实例
var echart = echarts.init(document.getElementById('echart'))
// 配置图表所需的数据
var option = {
title: {
text: 'echart测试'
},
xAxis: {
data: ['java', 'C++', 'C', 'Python']
},
yAxis: {},
series: {
type: 'bar',
data: [123,456,324,555]
}
}
// 调用 setOption 方法绘制图表
echart.setOption(option)
</script>
</body>
</html>
3.运行 (记得路径一定要对)
或者浏览器输入 http://localhost:8080/你设置的名称/名称.html
运行结果如下图: