从零开始学JavaWeb

引言

  记得上学时,有位导师说过一句很经典的话:"编程语言只是工具,最重要的是掌握思想。"
笔者一直主要从事.net领域的开发工作。随着工作阅历的丰富,越来越深刻的理解当年导师说的那句话的意义。
"他山之石,可以攻玉",相互借鉴,然后为我所用,无疑是一种开放的态度。

一、基本目标

  同.net开发环境的搭建相比,javaweb开发环境的配置可谓相当"繁琐",所以这里会觉得微软Visual Studio IDE的强大。
本文是javaweb学习实践的一次较为详细的记录,希望能够对初学者带来一点帮助,少走弯路。

二、环境搭建

  Javaweb开发环境的搭建,笔者选择的IDE是IntelliJ IDEA(ideaIU-2016.3.4).安装 包括以下几点:

  • IDEA 安装
  • JDK安装和配置
  • appache-tomcat的配置
  • IDEA 构建Maven
1.IDEA 安装

  Windows安装包
  99693-20170312203133951-1508253815.png

2.JDK安装和配置

  JDK 8安装包
  安装完JDK后配置环境变量 计算机→属性→高级系统设置→高级→环境变量

  系统变量→新建 JAVA_HOME 变量
变量值填写jdk的安装目录(本人是 C:\Program Files\Java\jdk1.8.0_60)
99693-20170312220258420-1266305474.png

  系统变量→寻找 Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)
99693-20170312203855248-1073882995.png

  系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
99693-20170312203908607-840854296.png

  检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格)
若如图所示 显示版本信息 则说明安装和配置成功。
99693-20170312204130857-24960152.png

3.appache-tomcat的配置

  apache-tomcat-8.0.41
  配置Tomcat环境变量
  计算机→属性→高级系统设置→高级→环境变量
  在系统变量中添加以下变量

  1)新建TOMCAT_HOME变量
变量名:TOMCAT_HOME
变量值:F:\JavaSoftwares\tomcat\apache-tomcat-8.0.41
  2)新建CATALINA_HOME变量
变量名CATALINA_HOME
变量值F:\JavaSoftwares\tomcat\apache-tomcat-8.0.41
99693-20170312204430717-1073191742.png

  3)修改变量Path
在系统变量中找到Path变量名,双击或点击编辑,在末尾添加如下内容
;%CATALINA_HOME%\bin;%CATALINA_HOME%\lib
这里要注意,各个变量值之间一定要用;分隔。
99693-20170312204622670-1936265144.png

  4)启动Tomcat服务器
在cmd命令窗口下输入startup回车,运行如下图所示
99693-20170312204846451-1074845897.png

  5)测试Tomcat服务器是否安装成功
在浏览器中输入http://localhost:8080或http://127.0.0.1:8080
99693-20170312205023436-1424683748.png

三、创建JavaWeb Maven项目

1.maven配置

  1)下载 Apache Maven 3.3.9
其中包含针对不同平台的各种版本的Maven下载文件。
  2)解压maven压缩包. 我解压的路径为:D:\Maven\apache-maven-3.3.9
99693-20170312210635436-1218096874.png

  3)配置maven的环境变量
右键“计算机”,选择“属性”,之后点击“高级系统设置”,点击“环境变量”,来设置环境变量,有以下系统变量需要配置:
新建系统变量: MAVEN_HOME 变量值:E:\Maven\apache-maven-3.3.9
编辑系统变量 Path
添加变量值: ;%MAVEN_HOME%\bin
99693-20170312210834654-1711463065.png

  4)检测是否安装成功
最后检验配置是否成功:用win键+R,来打开命令行提示符窗口,即Dos界面,输入mvn --version 若出现以下情况说明配置成功
99693-20170312210949092-1808318332.png

2.idea配置JDK

  IDEA配置JDK
  打开IDEA IDE
  依次点开File -->ProjectStructure,点击左侧标签页,点击SDKs
  点击+号,选SDK
  在弹出框选择jdk路径(我本地C:\Program Files\Java\jdk1.8.0_60)
  点击OK,可以看到jdk配置好了
99693-20170312211308811-806830795.png

3.idea构建Maven

  如上maven已经下载并解压到本机(我本地D:\Maven\apache-maven-3.3.9)
  1) 找到/conf/setting.xml文件,用文本编辑器打开。由于Maven远程仓库在国外,所以在下载相关jar包时非常慢,将其配置为Alibaba的仓库,需添加下面代码:

<mirrors><!-- mirror| Specifies a repository mirror site to use instead of a given repository. The repository that| this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used| for inheritance and direct lookup purposes, and must be unique across the set of mirrors.|<mirror><id>mirrorId</id><mirrorOf>repositoryId</mirrorOf><name>Human Readable Name for this Mirror.</name><url>http://my.repository.com/repo/path</url></mirror>--><mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><mirrorOf>central</mirrorOf></mirror><mirror> <id>uk</id>  <mirrorOf>central</mirrorOf>  <name>Human Readable Name for this Mirror.</name>  <url>http://uk.maven.org/maven2/</url> </mirror><mirror><id>CN</id><name>OSChina Central</name><url>http://maven.oschina.net/content/groups/public/</url><mirrorOf>central</mirrorOf></mirror><mirror><id>nexus</id><name>internal nexus repository</name><!-- <url>http://192.168.1.100:8081/nexus/content/groups/public/</url>--><url>http://repo.maven.apache.org/maven2</url><mirrorOf>central</mirrorOf></mirror></mirrors>

  2)配置 IDEA默认设置
此处解决了『maven骨架生成项目速度慢的令人发指,都在Generating project in Batch mode等待,Idea状态显示栏还在不行runing,并没有卡死。查看debug信息发现,是maven获取archetype-catalog.xml导致。』的问题。
99693-20170312211553357-1105806186.png

  3)新建项目
注意:要选maven-archetype-webapp,而不是cocoon-22-archetype-webapp
99693-20170312211749842-729107319.png

99693-20170312212258279-989612713.png

99693-20170312212509326-219347032.jpg

99693-20170312212615936-142843018.jpg

99693-20170312212857842-152094471.jpg

  4)配置tomcat

4.配置tomcat

  配置tomcat
  在主页面打开ProjectStructure,点击图示的按钮或是按ctrl+shift+alt+s快捷键。

  打开ProjectStructure后,按照图示依次点击Facets->+号,在弹出的对话框个中选择Web.
99693-20170312213605639-517384949.jpg

  在弹出的对话框选择刚才创建的Maven项目(MavenDemo),点击ok.

  接着会出现图示的结构,点击Deployment Descriptors 对话框右侧的加号,会弹出一个图示的小对话框,选择web.xml所在的路径,点击Ok。
99693-20170312214005561-1115333518.jpg

  再次点击Web Resource Directories对话框右侧的加号,会弹出一个图示的小对话框,选择webapp所在的路径,点击Ok。
99693-20170312214241326-1900821596.jpg

  再次回到Project Structure,点击左侧 Artifacts,依次点击+号->Web Application:Exploded->From Modules.
99693-20170312214422154-518246885.jpg

  出现下图的对话框,点击Ok即可。
99693-20170312214608076-431329625.jpg

  接下来开始配置Tomcat。然后在右上角点击那个下拉框,再点击Edit Configurations
99693-20170312214803967-1689695319.png

  接着回到Server选项卡,配置一下Tomcat的基本参数,最后点击Ok即可
99693-20170312214933826-2133722257.png

四、调试
  以上已经完整地创建了一个maven架构的webapp
效果如下:
99693-20170312223611061-1701307221.png

99693-20170312223631904-1038606354.png

五、总结
  总的来说,第一次使用感觉很繁琐.
  这篇算是为JavaWeb之旅开个头.后续会逐渐深入.

转载于:https://www.cnblogs.com/lucky_hu/p/6539573.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VS2010 C++下编译调试MongoDB源码 r2.2.2

编译下载mongodb-src-r2.2.2用VS2010打开mongodb-src-r2.2.2\src\mongo\db\db_10.sln编译mongod项目调试先创建数据库文件夹"D:\mongodb\db"设置调试参数--dbpathD:\mongodb\dbF5运行调试

linux如何记录测试时长,如何测试Linux命令运行时间?

如何测试Linux命令运行时间&#xff1f;良许在工作中&#xff0c;写过一个 Shell 脚本&#xff0c;这个脚本可以从 4 个 NTP 服务器轮流获取时间&#xff0c;然后将最可靠的时间设置为系统时间。因为我们对于时间的要求比较高&#xff0c;需要在短时间内就获取到正确的时间。所…

软件工程概论个人作业02(四则运算2)

1、设计思想&#xff1a; 在四则运算1的基础上&#xff0c;多加了几个要求&#xff0c;是否有乘除法可以通过不同的选择然随机生成符号的函数有时候生成两个数字对应加减&#xff0c;有时候生成四个数对应加减乘除&#xff1b;括号没有实现&#xff1b;数值范围通过一个函数实现…

linux的yum详解,Linux之YUM 详解

一、yum是什么yum Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理大量系统的更新问题二、yum 的运用格式及常用参数yum [option] "包名"有些记不住的包名 可以使用通配符* 来一次安装多个前端一直的软…

tableview直接滚动至最后一行

类似聊天界面&#xff0c;tableview应该直接显示在最后一行&#xff0c;并且不应该有滚动的出现。 在网上查了很久&#xff0c;直接滚动至最后一行很容易实现&#xff0c;有两种方法比较好。 1. 调用scrollToRowAtIndexPath方法 -(void) scrollBottom{if ([self.messageData co…

c语言两个字符串比较,将两个字符串s1和s2比较,如果s1s2,数组编程:将2个字符串s1和s2比较。若s1s2输出1;若s1=s2,输出0;若s1s2,输出-1(不能用strcmp函数)...

满意答案zxd8611032014.04.15采纳率&#xff1a;55% 等级&#xff1a;9已帮助&#xff1a;563人#include<iostream.h>#include<string.h>int min(int a,int b){return ((a<b)?a:b);}void main(){char a[1000],b[1000];int lena,lenb,i,t,res,flag0;cin>&…

在线高清大图发布

ImageBrowser 解决了任意大小的在线高清大图的快速发布与显示&#xff0c;支持tif、jpg、png、bmp等多种图片格式&#xff0c;能够快速更新索引、跨平台部署和支持二次开发&#xff0c;可以在任何网站下调用和显示。可广泛应用于摄影、车展、古玩拍卖、建筑工程等领域。 实例地…

前端学习(2324):angular初步使用

app.component.html <div style"text-align:center"><h1>welcome to {{title}}</h1><div style"color:#f00000">我是歌谣</div><div>{{name}}</div> </div>app.component.ts import { Component } from…

前端学习(2325):angular之数据修改

app.component.html <div style"text-align:center"><h1>welcome to {{title}}</h1><div style"color:#f00000">我是歌谣</div><div>{{name}}</div> </div>app.component.ts import { Component } from…

c语言角谷定理递归,【C++】(递归+非递归)卖鸭子及角谷定理+递归模型+递归树...

ps&#xff1a;全文中如果有任何错误您看到并能指出来的话(尤其是递归树)感激不尽XDDDD每个问题包含&#xff1a;(1)题目描述(2)递归解决代码(3)非递归解决代码(4)递归模型(5)递归树(6)运行结果截图一、卖鸭子问题1.题目描述一个人赶着鸭子去每个村庄卖&#xff0c;每经过一个村…

前端学习(2325):angular之添加新组件

app.component.html <div style"text-align:center"><h1>welcome to {{title}}</h1><div style"color:#f00000">我是歌谣</div><div>{{name}}</div> </div>app.component.ts import { Component } from…

【批处理】shift用法举例

1 echo off 2 set sum03 call :sub sum 1 2 3 44 echo sum%sum%5 pause6 7 :sub8 set /a %1%1%29 shift /2 10 if not "%2""" goto sub 11 goto :eof View Code转载于:https://www.cnblogs.com/xiongjiawei/p/6564958.html

前端学习(2326):angular之用户输入数据

test1.component.html <p class"p1">test1 works!</p> <div (click)"clickDemo()" >我是div1的内容</div> <input (keyup)"onkey($event)" type"text">test1.component.spec.ts import { ComponentF…

前端学习(2327):angular之双向绑定

test1.component.html <p class"p1">test1 works!</p> <div (click)"clickDemo()" >我是div1的内容</div> <input (keyup)"onkey($event)" type"text"><form action"" #heroFrom"n…

前端学习(2328):angular之模板

test2.component.html <p>test2 works!</p> <a href"{{url}}">百度</a> <a [href]"url">百度2</a>test1.component.spec.ts import { ComponentFixture, TestBed } from angular/core/testing;import { Test2Compon…