Javaweb之简单例子(一)

Javaweb 之简单例子(一)

目录：
                                                                        一、简述
                                                                        二、效果
                                                                        三、搭建环境
                                                                        四、使用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.virscan.org/language/zh-cn/、https://www.maldun.com/submit/submit_file/

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

二、效果

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

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

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）如出现以下效果说明正确安装。

4、安装MySQL5.0

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

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

注：环境搭建好之后，就可以使用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创建工程

新建项目：

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

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

创建CSS、JS文件夹：

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

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

将项目添加到Tomcat服务器：

启动Tomcat服务器：

启动成功：

六、使用浏览器访问

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

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

创建数据库

进入MySQL Query Browser：

创建新的数据库：

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

创建表：

输入表名：

设置字符集：

执行：

完成后关闭窗口：

创建成功：

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

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

导入连接数据库的jar包

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

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

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

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

然后Finish

前台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",    <!--以post方式请求-->async: true,  <!--异步请求-->dataType: "json",<!--期望服务器返回的数据格式为json-->url:"./servlet/LoginServlet",<!--请求LoginServlet-->data: {"userName": userName, "pwd": pwd},<!--键值数据，前面的是键，后面的是值，后台在LoginServlet类可以根据这个键获取值-->success:function(data){<!--这个data是后台LoginServlet返回的信息-->if(data.info=="true")<!--如果返回的是"trueS"-->{window.location.href = "hello.html";<!--将本页面地址刷新为hello.html页面(相当于跳转页面并在本页面打开)-->}else <!--如果返回的是"false"-->{alert("用户名或密码错误!!!");}},error:function(data){console.log(data);<!--出错的话在控制台打印后台返回的信息-->}});}}window.onload=function()<!--页面刚加载时执行-->{$('#userName').focus();ALogin();}<!--监听键盘按下事件，当按下回车的时候，开始请求登录-->document.onkeydown=keyDownSearch;function keyDownSearch(e) {    <!--兼容FF和IE和Opera-->    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

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

shiyo遇到问题

添加对应jar包

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

然后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服务，否则连接不了数据库)，用浏览器访问

也可以在这里启动服务器

九、总结

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

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

3、数据库导入，导出

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

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

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

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

4、工程导入

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

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

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

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

案例网盘文件提取码测试

Javaweb之简单例子(一)相关推荐

webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
图片上传(加水印、缩略图、远程保存）的简单例子
图片上传(加水印.缩略图.远程保存)的简单例子(应用于51aspx.com) 该源码下载地址:http://51aspx.com/CV/ImageUpload 今天看到xiongeee发的文章使用使用 ...
java hashtable import,Hashtable的一个简单例子
该楼层疑似违规已被系统折叠隐藏此楼查看此楼以下是关于Hashtable的简单例子,谁知道别的遍历Hashtable的方法,请回复! package no1; import java.util.En ...
SAP MM采购定价过程的一个简单例子
SAP MM采购定价过程的一个简单例子本文以一个简单的例子阐述了SAP MM模块中采购定价的基本原理.本例中,假定采购订单里输入的是含税采购价,然后系统自动计算出物料最终的采购价格(含税价-税额=采 ...
.net中使用反射的简单例子
说明:由于工作原因,本人使用反射的机会不是很多,所以没有必要为了炫耀技术而使用这种技术,不过今天有人问到这方面的问题,所以做了一个简单例子,供初学者参考,代码如下: using System; usi ...
linux下Makefile中包含有shared library动态链接库文件时候的简单例子
如果不知道什么是makefile,可以首先看我的另一篇博客: linux下Makefile的简单例子及解释 http://www.cnblogs.com/lihaozy/archive/2012/08 ...
java 国际化例子_JavaSE 国际化简单例子
①在src下添加两个文件: base_zh_CN.properties Test=\u8fd9\u662f\u4e2d\u6587 base_en_US.properties Test=english ...
6翻了C语言,《嗨翻C语言》随书练习六 6章二叉树简单例子
二叉树简单例子/* <嗨翻C语言>随书练习 6章 2016-12-06 xiousheng@126.com 二叉树例子,警务罪犯判断档案系统,哈哈书中可以专家系统例子 */ #i ...
QT 信号与槽最简单例子
QT 信号与槽最简单例子 main.cpp 和 my_head.h源码: [cpp] view plaincopy #ifndef MY_HEAD_H #define MY_HEAD_H #inc ...

Javaweb之简单例子(一)

Javaweb 之简单例子(一)

Javaweb之简单例子(一)相关推荐

最新文章

热门文章