上午的学习内容请查看：
http://www.jianshu.com/p/c64dcabb299e
之前在MyEclipse配置好服务器、建立好了Web项目
首先我们将服务器和项目关联起来：
2017-07-11.png
2017-07-11 (1).png
2017-07-11 (2).png
Finish即可。
start服务器：
2017-07-11 (3).png
或者debug启动服务器：
2017-07-11 (12).png
启动服务器后在Chrome浏览器的URL输入框中输入：
http://localhost:8080/HelloWorld：
2017-07-11 (13).png
网页相应对应的jsp文件是：
2017-07-11 (14).png
若把This is my JSP page.替换为中文 刷新网页页面会导致页面显示乱码：
QQ图片20170711171335.png
解决编码问题方法查看：
http://blog.csdn.net/chszs/article/details/43113729
博客中的第7步，另外优化方法也最好都自己设置下。
另外老师建议，以后最好用utf-8编码方案！！！
优化过后老师建议删除原Web项目重建：
2017-07-11 (4).png
删除时注意打勾（将项目从硬盘上删除）：
2017-07-11 (5).png
重新建立Web项目后中文显示正常：
2017-07-11 (15).png
另外，我们可以查看新项目的配置文件：
2017-07-11 (16).png
2017-07-11 (17).png
休息一会儿，我们来看下面的学习内容：
先看我们要达到的效果：
QQ图片20170711173612.png
QQ图片20170711173723.png
下面先进行jsp文件的编写：
QQ图片20170711174338.png
index.jsp文件就是服务器接收到客户端请求命令后默认加载的文件，以显示：
QQ图片20170711174605.png
index.jsp关键代码：
<body>
<form id="form1" method="post" action="message" onsubmit="return check()">
用户名：<input type = "text" name = "username"/>
密码： <input type = "password" name = "pass"/>
<input type = "submit" value= "进入"/>
</form>
</body>
其中check()相关为判输入合法与否函数：
<script type="text/javascript">
function check() {
reg=/^[a-zA-Z0-9_\u0391-\uFFE5]{3,10}$/;
if(form1.username.value.trim()==""){
alert("请输入用于名");
form1.username.focus();
return false;
}
}
</script>
注意：该js脚本写在<head> 标签内部：
QQ图片20170711175256.png
index.jsp关键代码大致意思是：
添加相关输入、提交按钮元素后 post方法触发message动作，提交前先进行onsubmit="return check()" 以判断输入合法。
然后编写web.xml文件：
QQ图片20170711180041.png
其中的关键代码为：
<servlet>
<servlet-name>mess</servlet-name>
<servlet-class>com.zk.servlet.Message</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>mess</servlet-name>
<url-pattern>/message</url-pattern>
</servlet-mapping>
我理解此文件就是前端和后端联系的桥梁：
根据前端触发的message动作标识到mess(servlet-name)
再依据此对应到com.zk.servlet.Message（servlet-class）
我们再看com.zk.servlet包下的Message 文件：
QQ图片20170711180727.png
文件代码为：
public class Message extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("登陆成功") ;
String name = req.getParameter("username");
String pass = req.getParameter("pass");
System.out.println("user " + name+" In");
System.out.println(name + " 的密码是： " + pass);
}
}
注意编写时要善用ALT + / 快捷键以补全代码 和 import 相关文件！
文件就是用了写方法取出String 再进行了些打印动作。
总结下整个过程：
输入http://localhost:8080/HelloWorld/ 后显示index.jsp里面的内容。
前端index.jsp 默认提示输入用户名和密码，用户输入后点击进入按钮后 index.jsp 里面先判断输入是否合法 没问题后触发message动作
web.xml 文件用key-value逻辑讲前端*.jsp文件对应到后端 java文件。
message.java 使用一些函数方法提取String并打印。
建议下来稍微补下前端知识 有不理解的咱们在一群里再讨论，一起加油！
网友评论