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://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
register.html文件
<!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 这位兄弟 ================
案例网盘文件提取码测试
福橘挂会机: 代码一样,没有呼吸灯的效果
Ly_Online: 这个你得去学学爬虫和python的自动化测试框架
不是猪猪: 有没有人遇到过(gw_backend.c.533) connect() /home/root/lighttpd/sockets/test.socket-0: Connection refused
XK_0416: 您好,请问一下,这个里面的alsa_play.c,alsa_record,alsa_play.c,head4audio.h和Makefile是需要自己书写的是吗,如果不是的话,它默认是保存在什么地方
hijkstra123: 你好!我使用Qt的qcamera类,编译器提示我,setCaptureMode()和setViewfinder()这两个方法都找不到。 刚开始学习Qt,烦请指点一下吧,谢谢