Javaweb之简单例子(一)

﹏ヽ暗。殇╰゛Y 2022-05-21 04:14 215阅读 0赞

## ##

### **Javawe**b 之简单例子(一) ###

目录：  
                                                                        一、简述  
                                                                        二、效果  
                                                                        三、搭建环境  
                                                                        四、使用MyEclipse创建WebProject  
                                                                        五、将WebProject挂载到Tomcat服务器，并启动服务器  
                                                                        六、使用浏览器访问  
                                                                        七、使用MySQL Query Browser创建数据库  
                                                                        八、连接数据库  
                                                                        九、总结

**一、简述**

简单的javaweb例子，使用html+Servlet,前后台使用ajax进行数据(json格式)交互。(中间件作业删减版)。

开发环境:MySQL5.0+MyEclipse8.5+Tomcat6.0+Google浏览器

软件打包：链接：https://pan.baidu.com/s/1H6tzvTlezG3fNsWBcZcdsg 密码：i195

注：有老铁反应例子中的tomcat有病毒，这个我也不确定，反正是我用过很长一段时间了。 如果有病毒请不要安装，请自行到官网下载tomcat，网址：http://tomcat.apache.org/。tomcat和mysql是以前在学校上课时候老师给我们的，我们有用过很长一段时间的，有没有毒我也不清楚；检查发现疑似有病毒，现已另外下载tomcat并上传，检测未发现病毒。

在线查毒：[https://www.virustotal.com/gui/][https_www.virustotal.com_gui] 、[https://www.virscan.org/language/zh-cn/][https_www.virscan.org_language_zh-cn]、[https://www.maldun.com/submit/submit\_file/][https_www.maldun.com_submit_submit_file]

例子打包：链接：https://pan.baidu.com/s/10dPwmW30cEHOKBjo2cIn9g 密码：o253

**二、效果**

**    通过浏览器访问，注册账户(账户信息保存到数据库中)，然后在登录页面输入账号信息，将账号信息通过Ajax以json数据格式提交到后台，后台通过比较数据库的信息，账号信息正确则跳转到登录成功的页面。**

![70][]

**三、搭建环境(细节待补充)**

1、安装JKD1.8，安装后需要配置java环境变量。 （注意Tomcat对JKD是有要求的，后面因为对验证码部分不兼容又安装了1.6版本）

2、安装Myeclipse8.5

3、安装Tomcat6.0

注意端口号的设置，默认是8080，如果被其他程序使用了，就适当修改，例子中端口号为8099，也可以在安装后在配置文件中可修改。同时应当注意编码的设置，例子中设置为UTF-8。配置文件：*tomcat安装*目录下的conf文件夹中的server.xml文件。

**            配置Tomcat环境变量(这是为了使用命令行方式操作Tomcat，比如启动，停止Tomcat)**

a）新建变量名：CATALINA\_BASE，变量值：**Tomcat的安装路径**

b）新建变量名：CATALINA\_HOME，变量值：**Tomcat的安装路径**

c）打开PATH，添加变量值：%CATALINA\_HOME%\\lib;%CATALINA\_HOME%\\bin

安装完成后，在浏览器访问:**localhost:8099    （例子中是8099，默认是8080）**如出现以下效果说明正确安装。

![70 1][]

4、安装MySQL5.0

注意编码的设置。例子中默认编码设置为UTF-8，也可以在安装后在配置文件中修改。或者在创建数据库时指定编码格式，若有需要还可以安装MySQL Query Browser数据库的可视化管理，方便新手管理数据库，例子中已安装。

5、将Tomcat添加到MyEclipse，(为编辑项目后，方便将项目挂载到Tomcat服务器)

![70 2][]

![70 3][]

注： 环境搭建好之后，就可以使用MyEclipse创建Javaweb项目(网站)，编辑完成后就可以挂载到Tomcat服务器上(本地)。然后启动Tomcat服务器，使用浏览器访问：localhost:端口号/项目名称      （这是访问默认首页，也可以指定访问某一页面localhost:端口号/项目名称/index.html，注意页面的路径，localhost也可以换为127.0.0.1）；如果项目中需要访问MySQL数据库，还需要先启动MySQL服务。

例子中使用到MySQL数据库，所以需要开启MySQL服务，如果要运行例子，记得导入数据文件(mytestdatabase.sql文件)到MySQL数据库。

然后将项目挂载到Tomcat服务器，启动Tomcat服务器，然后就可以正常访问网站，在同一个局域网内的主机也可以访问，相当于本例子中的主机就是一台"服务器",在其他主机的浏览器中输入：本主机的局域网IP：8099/项目名   就可以访问。

**四、使用MyEclipse创建WebProject**

打开MyEclipse创建工程

新建项目：

![70 4][]

![70 5][]

![70 6][]

![70 7][]

设置默认首页为index.html：将index.jsp改为index.html。记得将默认首页index.jsp改为index.html。

![70 8][]

打开web.xml修改默认首页：

![70 9][]

创建CSS、JS文件夹：

![70 10][]

![70 11][]

![70 12][]

创建其他文件夹，以及添加其他资源：

![70 13][]

五、将WebProject挂载到Tomcat服务器，并启动服务器

将项目添加到Tomcat服务器：

![70 14][]

启动Tomcat服务器：

![70 15][]

启动成功：

![70 16][]

六、使用浏览器访问

使用浏览器访问，在地址栏输入:127.0.0.1:8099/MyTestWebProj/index.html     (省掉index.html访问的是默认欢迎页)：

![70 17][]

七、使用MySQL Query Browser创建数据库

创建数据库

进入MySQL Query Browser：

![70 18][]

创建新的数据库：

![70 19][]

输入要创建的数据库的名称:“mytestdatabase”：

![70 20][]

创建表：

![70 21][]

输入表名：

![70 22][]

设置字符集：

![70 23][]

执行：

![70 24][]

完成后关闭窗口：

![70 25][]

创建成功：

![70 26][]

类似上述步骤，创建picture表：

![70 27][]

八、连接数据库 (以及编写代码)

导入连接数据库的jar包

![70 28][]

创建用户模型类(对应usersinfo表)，方便与数据库中的usersinfo表进行交互。

![70 29][]

![70 30][]

添加数据库操作类(直接操作数据库，对数据进行增删改查，一般不进行逻辑处理)

![70 31][]

添加服务类(调用数据库操作类，并进行逻辑处理，比如数据的过滤筛选等)

![70 32][]

创建servlet(控制前台与后台的数据交互)

![70 33][]

![70 34][]

然后Finish

![70 35][]

前台index.html页面以post方式请求LoginServlet

<!DOCTYPE html>
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>用户登录</title>
            <link rel="stylesheet" href="CSS/index.css">
            <style type="text/css">
    		</style>
    		<script type='text/javascript' src='JS/jquery.min.js'></script>
    		<script>
    			function ALogin()
    			{
    				var userName = $("#userName").val().trim();
    				var pwd = $("#pwd").val().trim();
    				if(( userName!="" && pwd!=""))
    				{
    					$.ajax({
    						type:"POST",    
    						async: true,	
    						dataType: "json",
    						url:"./servlet/LoginServlet",
    						data: {"userName": userName, "pwd": pwd},
    						success:function(data){
    							if(data.info=="true")
    							{
    								 window.location.href = "hello.html";
    							}
    							else 
    							{
    								alert("用户名或密码错误!!!");
    							}
    						},
    						error:function(data){
    							console.log(data);
    						}
    					});
    				}
    			}
    			window.onload=function()
    			{
    				$('#userName').focus();
    				ALogin();
    			}
    			
    			
    			document.onkeydown=keyDownSearch;
    			function keyDownSearch(e) 
    			{    
    				    
    				var theEvent = e || window.event;    
    				var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
    				if (code == 13) {    
    					ALogin();    
    					return false;    
    				}    
    				return true;    
    			} 
    		</script>
        </head>
    
        <body>
            <div class="wp_res">
        	
        	    <div class="main_res png">
                    <div class="form" >
                        <ul class="shuru">
    						<li>
                                <div  style="text-align:center;font-size:18px;">
                                    <span >用户登录</span>
        						</div>
    							
                            </li>
                            <li>
                                <div  class="text" >
                                    <span class="ico_f_cfm"></span>
        							<input id="userName" tabindex="3" id="psw1" name="psw1"  class="ipt_nor" value="" placeholder="用户名" type="text" maxlength="16">
    								
        						</div>
    							
                            </li>
                            <li>
                                <div  class="text">
                                    <span class="ico_f_pwd"></span>
        							<input id="pwd" tabindex="3" id="psw1" name="psw1"  class="ipt_nor" value="" placeholder="密码" type="password" maxlength="16">
        						</div>
                            </li>
    						<li>
    							<input type="button" class="btn_nor_2" onclick="ALogin()" id="login"title="登录" value="登录"/>
    						</li>
                        </ul>
        			<div class="footer">
    					<p>电信增值业务经营许可证粤B2-20171203号 粤ICP备10240715号</p>
    					<p>© 1927-2017 Genven_Liang</p>
                    </div>
        			</div>
                </div>
        	</div>
            
            
            </div>
        </body>
    </html>

添加一个登录成功后跳转到的页面hello.html

![70 36][]

![70 37][]

![70 38][]

后台获取前台在请求时传递的数据（编写LoginServlet.java代码）

shiyo遇到问题

![70 39][]

添加对应jar包

![70 40][]

添加注册页面register.html以及RegisterServlet

![70 41][]

![70 42][]

然后Finish

<!DOCTYPE html>
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>注册中心</title>
            <meta name="keywords" content="帐号注册">
            <meta name="description" content="账号注册">
            <link rel="stylesheet" href="CSS/register.css">
            <style type="text/css">.muHover {background:#efefef none repeat scroll 0 0;}</style>
    		<script type='text/javascript' src='JS/jquery.min.js'></script>
    		<script>
    				window.onload=function(){
    				
    				document.getElementById("register").onclick=function(){
    											var userName = $("#userName").val().trim();
    											var pwd = $("#pwd").val().trim();
    											var pwd2 = $("#pwd2").val().trim();
    											if((userName!="" && pwd!="" && pwd2!=""))
    											{
    											    if(pwd==pwd2 && pwd!="")
    											    {
    													$.ajax({
    														type:"POST",
    														async: true,
    														dataType: "json",
    														url:"./servlet/RegisterServlet",
    														data: {"userName": userName, "pwd": pwd},
    														success:function(data){
    														console.log(data);
    															if(data.info=="true")
    															{
    																alert("注册成功！");
    																window.location.href = "index.html";
    															}
    														},
    														error:function(data){
    															console.log(data);
    														}
    													});
    												}
    												else
    												{
    													document.getElementById("pwdyizhi").innerHTML="两次输入的密码不一致!!!";
    													document.getElementById("pwd").value="";
    													document.getElementById("pwd2").value="";
    													return false;
    												}
    												
    											}
    											else
    											{
    												alert("不能为空!!!");
    												return false;
    											}
    										}
    				}
    				
    		</script>
        </head>
    
        <body>
            <div class="wp_res">
        	<div class="header">
            	
    			<a href="./index.html" class="login" title="首页">首页<span class="ico_log png"></span></a>
             
            </div>
        	<div class="main_res png">
            	
                <div class="form">
             
                        <ul>
                            <li>
                                <div  class="text">
                                    <span class="ico_f_cfm"></span>
        							<input id="userName" tabindex="3" id="psw1" name="psw1"  class="ipt_nor" value="" placeholder="用户名" type="text" maxlength="16">
    							</div>
                            </li>
                            <li>
                                <div  class="text">
                                    <span class="ico_f_pwd"></span>
        							<input id="pwd" tabindex="3" id="psw1" name="psw1"  class="ipt_nor" value="" placeholder="密码" type="password" maxlength="16">
        						</div>
                            </li>
                            <li>
        						<div  class="text">
        							<span class="ico_f_cfm"></span>
        							<input id="pwd2" tabindex="4"  class="ipt_nor" placeholder="确认密码" value="" type="password" maxlength="16">
    								
                                </div>
    							<span id="pwdyizhi"></span>
                            </li>
    						
    						<li>
    							<input type="button" class="btn_nor_2" id="register"title="立即注册" value="立即注册"/>
    						</li>
                        </ul>
        			
                        <p class="txt_agree">注册即表示同意<a href="#">《XXX服务使用协议》</a></p>
        			</div>
                </div>
        		</div>
            
            <div class="footer">
    					<p>电信增值业务经营许可证粤B2-20171203号 粤ICP备10240715号</p>
    					<p>© 1927-2017 Genven_Liang</p>
            </div>
        </body>
       
    </html>

RegisterServlet.java文件

import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import net.sf.json.JSONObject;
    
    public class RegisterServlet extends HttpServlet {
    
    	/**
    	 * Constructor of the object.
    	 */
    	public RegisterServlet() {
    		super();
    	}
    
    	/**
    	 * Destruction of the servlet. <br>
    	 */
    	public void destroy() {
    		super.destroy(); // Just puts "destroy" string in log
    		// Put your code here
    	}
    
    	/**
    	 * The doGet method of the servlet. <br>
    	 *
    	 * This method is called when a form has its tag value method equals to get.
    	 * 
    	 * @param request the request send by the client to the server
    	 * @param response the response send by the server to the client
    	 * @throws ServletException if an error occurred
    	 * @throws IOException if an error occurred
    	 */
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		response.setContentType("text/html");
    		PrintWriter out = response.getWriter();
    		out
    				.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
    		out.println("<HTML>");
    		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
    		out.println("  <BODY>");
    		out.print("    This is ");
    		out.print(this.getClass());
    		out.println(", using the GET method");
    		out.println("  </BODY>");
    		out.println("</HTML>");
    		out.flush();
    		out.close();
    	}
    
    	/**
    	 * The doPost method of the servlet. <br>
    	 *
    	 * This method is called when a form has its tag value method equals to post.
    	 * 
    	 * @param request the request send by the client to the server
    	 * @param response the response send by the server to the client
    	 * @throws ServletException if an error occurred
    	 * @throws IOException if an error occurred
    	 */
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		String userName = request.getParameter("userName").trim();//获取要注册的用户名，并去掉两端空格
    		String pwd = request.getParameter("pwd").trim();//获取密码
    		
    		System.out.println("post--"+userName+"--"+pwd);
    		String b = "false";
    		
    		if(!userName.isEmpty() && !pwd.isEmpty())
    		{
    			UserInfoSrvc infoservice = new UserInfoSrvc();
    			if(infoservice.insert(userName, pwd))
    			{
    				b = "true";
    			}
    		}
    		
    		
    		response.setContentType("application/json;charset=UTF-8");
    		PrintWriter out = response.getWriter();
    		JSONObject json = new JSONObject();
    		json.put("info", b);
    		out.write(json.toString());//将信息返回前台
    		out.flush();
    		out.close();
    	}
    
    	/**
    	 * Initialization of the servlet. <br>
    	 *
    	 * @throws ServletException if an error occurs
    	 */
    	public void init() throws ServletException {
    		// Put your code here
    	}
    
    }

启动Tomcat服务器(此前应该启动了MySQL服务，否则连接不了数据库)，用浏览器访问

也可以在这里启动服务器

![70 43][]

九、总结

1、连接数据库之前记得开启MySQL服务。

![70 44][]

2、注意编码问题，MyEclipse编码设置，MySQL数据库编码设置(在安装MySQL Query Browser时可以设置默认编码，在创建表时也可以指定编码)

![70 45][]

3、数据库导入，导出

数据库导出(前提已经开启MySQL服务)

![70 46][]

输入命令mysqldump -u root -p123 mytestdatabase>D:\\mytestdatabase.sql       (将mytestdatabase数据库导出为mytestdatabase.sql文件)

![70 47][]

数据库导入：(也是去到MySQL安装目录下的bin目录，打开命令行窗口，输入命令)

mysql -uroot -p123 <D:\\mytestdatabase.sql

4、工程导入

![70 48][]

![70 49][]

![70 50][]

5、恢复窗口默认布局，调出其他窗口

![70 51][]

6、为类成员快速生成属性(getter、setter)

![70 52][]

7、页面的布局没有进行兼容性处理(特别是对其他浏览器的兼容），例子是基于谷歌浏览器进行布局的。

============================以下回复 [clc339981][] 这位兄弟 ================

案例网盘文件提取码测试

![20190223091708248.gif][]

[https_www.virustotal.com_gui]: https://www.virustotal.com/gui/
[https_www.virscan.org_language_zh-cn]: https://www.virscan.org/language/zh-cn/
[https_www.maldun.com_submit_submit_file]: https://www.maldun.com/submit/submit_file/
[70]: /images/20220521/609a9fe5ea4e478db137f1caf5c66fc4.png
[70 1]: /images/20220521/ed8a0b24bb1b4fef8684a2f9208d55a1.png
[70 2]: /images/20220521/98b331df9ee54430ad4a182e4b1d63bc.png
[70 3]: /images/20220521/aeddfa266d7444feaf9521434e77a516.png
[70 4]: /images/20220521/2bc0f1e8210646018374b8437e32d820.png
[70 5]: /images/20220521/1d9d5fd8d2f143a58d40d01ed100ab89.png
[70 6]: /images/20220521/faadf9866318449e8f06d2cdfffc36ad.png
[70 7]: /images/20220521/ef4899e66c3744839d06aab4b5afb7a6.png
[70 8]: /images/20220521/68d7439bd86347a8a02782a8a672f459.png
[70 9]: /images/20220521/7a6adf12de72418e8b5a156f50934573.png
[70 10]: /images/20220521/cd9b2b6ef15d4b3e8f4cb59278d3f466.png
[70 11]: /images/20220521/14ed87bb39be41a6b967d7bad0620a38.png
[70 12]: /images/20220521/5e1e9529770f48829584fedfecc419c4.png
[70 13]: /images/20220521/814c7818a48240119d25dd6004013914.png
[70 14]: /images/20220521/21ffbe8fb2a54c498ba8f352c5d9c0ce.png
[70 15]: /images/20220521/47307e297bfe45cd8b5a48336af99d7b.png
[70 16]: /images/20220521/95070900c2ee4bccb24234ee3d33e3f8.png
[70 17]: /images/20220521/b009e93802454dfc9bbaa07e5ef8c676.png
[70 18]: /images/20220521/242ac4229c3e49588fa7726b94af3a9f.png
[70 19]: /images/20220521/d632ec70b1bd4a72b24c3b9e043888b5.png
[70 20]: /images/20220521/05aeaab40b68468fa3f67c4de09cf2a1.png
[70 21]: /images/20220521/aee1a45bfc2c4ab088975734c9cfa7fd.png
[70 22]: /images/20220521/c58c248d180145a2b828163b747bdf6c.png
[70 23]: /images/20220521/57a8e45d1c9343efacf3cf0cba6492c0.png
[70 24]: /images/20220521/45197dda16c84a00be182d73cdeb0cb2.png
[70 25]: /images/20220521/97e93484aed44302b43fd8446fa114dd.png
[70 26]: /images/20220521/4ccaee0fe8584a368b0b02709d7b063a.png
[70 27]: /images/20220521/ce79ce44421049a1aa1f9e740105ac1e.png
[70 28]: /images/20220521/afb303ca05a34f93afaa50572c1776cb.png
[70 29]: /images/20220521/75d54d6d45f24dfca6ae9385be2458f0.png
[70 30]: /images/20220521/e16b6a31c992483b9861dc212627733e.png
[70 31]: /images/20220521/87a6ecdadfb34b859c514a3c9d756612.png
[70 32]: /images/20220521/63f145483fc0401ab340102dd8553946.png
[70 33]: /images/20220521/113c9d384d9248c781a717f94c5aac80.png
[70 34]: /images/20220521/b099f97e41eb44fb81915db0ee71c08c.png
[70 35]: /images/20220521/9841b4677d0c4b0780bf7a986ac5d00d.png
[70 36]: /images/20220521/5cfeafa3de9449dc8fd1a73ab7cb2143.png
[70 37]: /images/20220521/7499f143c5764689a41e9f95fb0f8f9e.png
[70 38]: /images/20220521/ff7789e2d1af4634ba0581a4a9e40f89.png
[70 39]: /images/20220521/7bc026daf3fe41e1a3221f5c7623d87c.png
[70 40]: /images/20220521/0b89594fa5f14d95a81c4b4c303d4ba8.png
[70 41]: /images/20220521/e90345bf983544008a8970253b3fe2b1.png
[70 42]: /images/20220521/64428cc003f640599eaa322247107798.png
[70 43]: /images/20220521/223dcc7bfd3d4d53ae313bdfa7897381.png
[70 44]: /images/20220521/551d78c6154746e889b6505c4e1bfbd2.png
[70 45]: /images/20220521/90657cc265a8435e9bf9ffb38985f89d.png
[70 46]: /images/20220521/58f3651355d04c929ad1aaf46fb50884.png
[70 47]: /images/20220521/eb6b11c6c505410197e40f4a4e60a4c3.png
[70 48]: /images/20220521/560bb064986f46c0891941b27f30d645.png
[70 49]: /images/20220521/f6a2e04a36694009a18e4905d21df2e9.png
[70 50]: /images/20220521/e54b9080b6ee4ad39d90ebd27f7533db.png
[70 51]: /images/20220521/6340663504174357a720744a36e218cd.png
[70 52]: /images/20220521/4c2488340c2e4e5b86a3cce780e4d1fb.png
[clc339981]: https://me.csdn.net/clc339981
[20190223091708248.gif]: /images/20220521/e953480fc32e4de4ac9d1ed1c4590980.png