目录
Fdog系列(一):思来想去,不如写一个聊天软件,那就从仿QQ注册页面开始吧。
所有文章源码已整体打包上传至github,求星星!
1. 前言
接着第一篇用html完成了注册页面,第二篇,我们来完成后台数据处理,需要用的有Eclipse,tomcat,mysql数据库,还有云服务器(如果需要外部访问,可以购买一台云服务器,选择最低配置就好,我用的是腾讯云,使用代金券白嫖了四个月,可以通过下面二维码白嫖代金券。)
若没有Eclipse,这是博主之前写的Ecplise下载教程
若没有tomcat,点击下载tomcat7下载
若想买服务器,不如看看这个云服务器代金券
若要使用本地数据库不如看看这个MySQL数据库学习·如何安装SQL数据库和连接Navicat Premium
若要在服务器安装数据库,不如看看这个腾讯云云服务器Centos系统安装MySQL数据库详细教程
这里给大家提个醒,若JDK是1.7 ,tomcat,mysql,centos建议都用7的版本。不要问为什么,博主也是趟过坑的人!!!!
2. 创建javaweb项目
File->New->other->Web->Dynamic Web Project
第一个红框框选择你刚下载好的tomcat版本,还有路径。
第二个红框框有个注意点,现在一般用的是3.0,采用注解的方式,而博主的教程是2.5版本,需要配置web.xml,如果是初学者,建议选择2.5,有助于学习,我也将以2.5版本为例。
第三个红框框可以设置一些内容的版本,这里将java设置为1.7版本。
然后一直下一步,完成,如图。
我们点击下面的servers服务,点击蓝色文字,再次选择tomcat版本,并将项目添加,完成。如果下面没有servers选项,可在window->show View下找到servers,添加即可。
分别创建一个js文件夹,一个img文件夹,一个css文件夹(右键Webcontent->New->folder),然后将上篇写过的代码拿过来,可以直接将文件拖进Webcontent目录下,html文件直接拖到Webcontent下就好,哦,差点忘了,eclipse的默认字体大小极其不友好,建议大家将字体改成18,在Window->proferences搜索font,选择Colors and Fonts,选择Basic下面的Text font,将字体大小设置为你喜欢的值(这里建议18)。
创建好之后如图,至此,我们将昨天用HBuilder X写的内容全部移植到了Eclipse里面,
3. 创建Server
右击项目,New->other->Web->Servlet,什么是Servlet,其实就是一个java文件,然后通过网页去调用这个java文件处理业务逻辑,类似于两个java文件互相调用,只不过更加复杂而已。
创建好的java文件,默认有两个函数,一个是GET,一个是POST,这个是干什么的呢,GET和POST是HTTP请求的两种基本方法,要说它们的区别,最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。你可以看到有些链接后面有?user=xxxx&id=xxxx,这种就是GET请求方法。
4. 解决中文乱码问题
每一个学过javaweb的人应该都知道GET和POST提交乱码的问题,业务逻辑不可避免要传递中文数据,请在两个函数中添加如下代码,同时将Workspace下面的Text file encoding默认GBK改为utf-8(Window->Preferences->Workspace),可解决中文乱码问题。
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
}
除此自外,还可以创建Filter(过滤器),来处理乱码问题,有兴趣可以了解下,你不要问我为什么不用这个,因为我不会。
5. 响应后台数据
好了好了,我知道你已经等不及了,想要马上知道如何与前端交换数据。
一般情况下,我们都会使用表单提交的方式,向servlet发送数据,比如我们有一个表单
<form action="FdogMaven" method="post">
<input tyle="text" placeholder="昵称"/>
<input type="submit" value="提交" />
</form>
action属性表示要提交到哪个servlet,比如刚才我创建的servlet叫FdogMaven,这里action就写FdogMaven,method属性表示请求方式,这里选择POST。
然后我们在对应的FdogMaven里面的POST函数写一个处理语句:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
response.getWriter().append("我是花狗");
doGet(request, response);
}
然后运行它,点击提交按钮,将跳转至FdogMaven,并显示我是花狗。
好了,学到了这里,再来看看如何在文本框输入内容,在后台显示。
在文本框中加一个name属性,值为username。
<form action="FdogMaven" method="post">
<input tyle="text" name="username" placeholder="昵称"/>
<input type="submit" value="提交" />
</form>
在后台来接收这个值
String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
username = request.getParameter("username");
response.getWriter().append("你输入的昵称是:"+username);
doGet(request, response);
}
效果如下:
再回到我们的注册页面,你可能已经有疑问,点击发送短信之后,页面并没有发生跳转,但是后台已经将前台的数据处理完毕,并不像上面的这种,如何做到即执行了servlet,又不执行跳转呢?
第一种解决方法是使用转发,让页面跳转到servlet然后保存数据,再跳转回来,将保存的数据显示,代码如下:
String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
username = request.getParameter("username");
response.getWriter().append("你输入的昵称是:"+username);
doGet(request, response);
request.setAttribute("username", username); //保存昵称
request.getRequestDispatcher("index.jsp").forward(request,response);//注册页面
}
servlet返回的值,前端如何接收呢,这时就需要用到jsp了,需要将我们的html文件改成jsp文件,添加第一行代码,然后在文本框添加value值:
<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fdog注册</title>
</head>
<body>
<form action="AuthCode" name="form" method="post">
<input tyle="text" id="userName" name="username" placeholder="昵称"
value='<%=request.getParameter("username")==null?"":request.getParameter("username")%>'/>
<input type="submit" value="提交" />
</form>
</body>
</html>
效果如下:
第二种技术叫Ajax(异步获取请求),也是我推荐的一种,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
例如图中的发送短信按钮,转发虽然可以携带数据返回,但是如果首页有一些数据不需要在发送验证码的时候处理,则更应该是Ajax。
为按钮添加一个点击事件
<input type="button" id="codebutton" value="获取短信验证码" onclick="codeclick(this)"/>
编写对应js
var xmlhttp;
function codeclick(thisBtn) {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","FdogMaven",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xmlhttp.send("fname=Bill&lname=Gates");//如果是GET请求,可在send添加参数
xmlhttp.send();
}
好了,这篇就写到这里,下一篇的内容是如何生成随机数,如何连接数据库,如何发送短信(免费的),如何部署到服务器让其他人访问并注册。
如果需要源码可以添加我的微信群获取(官方群)
如果觉得好的,还可以给我来个一键三连哦!