1.打开Eclipse，新建一个Dynamic Web Project，名字随意，不要用中文；
提示：
Dynamic web project 动态网络项目，动态web，包含动态信息，如jsp页面等。
Static web project 静态网络项目，静态web，不包含动态信息，仅包含静态页面文件。
web fragment project 项目网络碎片，是Servlet3.0支持的新特性，可以将一个web工程分成多个部分来开发调试。
2.新建一个login.jsp和或者是login.html，该页面具有登录的相关信息；
提示：
页面以及页面的所有资源都应该放在WebContent根目录。
<div class="login">
<form action="login.do" method="post">
<div class="box png">
<div class="logo png"></div>
<div class="input">
<div class="log">
<div class="name">
<label>用户名</label><input type="text" class="text" id="username" placeholder="用户名" name="username" tabindex="1" />
</div>
<div class="pwd">
<label>密 码</label><input type="password" class="text" id="password" placeholder="密码" name="password" tabindex="2" />
<input type="submit" class="submit" tabindex="3" value="登录" />
<input type="button" class="submit" tabindex="3" value="注册" onclick="toLcal()" />
<div class="check"></div>
</div>
<div class="tip"></div>
</div>
</div>
</div>
</form>
</div>
3.在下方找到servers插件，双击Tomcat v7.0 Server at localhost，找到Prots（8005，8080,8009），然后修改端口号8080为8088，其他的不需要修改；
提示：
如果使用的是MySQL数据库，也可以不改，MySQL数据库的默认端口号为3306。
Oracle数据库的默认端口号也是8080，为了防止Tomcat服务器端口与Oracle数据库端口发生冲突。
4.在Tomcat v7.0 Server at localhost上右键，选择Add and Remove…，把刚刚新建的工程添加进去；
5.启动tomcat，然后在浏览器上书写127.0.0.1:8088/项目名称/页面名称（或者localhost:8088/项目名称/页面名称），看看是否能够成功浏览页面;
提示：
如果出现文字乱码的情况，先右键Login.jsp打开配置，更改编码格式为utf-8，在Login.jsp源码中修改charset=utf-8。
6.在form表单的action属性上添加一个具体的请求名，比如说功能如果是登录的话，就写login.do，如果是注册的话，就写reg.do等；
7.在Eclipse的src下面新建一个包，比如nsy.test.servlet，然后再在该包下新建一个servlet，然后先设置编码格式，然后获取前台的数据，然后展示到页面上。
提示：
第一种方法，右键新建的nsy.test.servlet包，选择servlet文件，servlet窗口的第一步，是写明该servlet的名称，点击next，第二个窗口，修改第二个框的内容为你刚刚在页面所写的请求名，比如你在页面的action中写了login.do,那么在这里就只需要写/login.do即可，再点击next，勾选下方的service方法，如果不需要使用doget和dopost方法，则取消勾选doget和dopost方法。
第二种方法，右键新建的nsy.test.servlet包，创建一个java类，名称为LoginServlet，在superclass那一栏，点击browse，这个类要继承javax.servlet.http下的httpservlet，然后在创建的servlet里面，新建一个service方法，书写一个service，然后按alt+/，根据提示，选择参数的类型带有Http的那个方法。
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//1、设置编码格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//2、获取到前台发送的数据
String username = req.getParameter("username");
String password = req.getParameter("password");
PrintWriter pw = resp.getWriter();
//3、把用户名和密码发送给dao层进行数据库的处理并且拿到结果
UserDao dao = new UserDao();
NoteDao ndao = new NoteDao();
try {
if(dao.login(username, password)){
//登录成功之后，查询需要展示在主页面的日志的所有信息，并且得到一个日志的集合
ArrayList<Note> list = ndao.findAll();
//拿到集合之后，把该集合的内容存储起来发送给前台页面
req.getSession().setAttribute("list", list);
//通过转发跳到主页面
resp.sendRedirect("nguboke.jsp");//重定向
}
} catch (SQLException e) {
e.printStackTrace();
}
}
提示：
出现404错误的几种可能性：
(1).打开页面就出现404
a.服务器地址写错，或者是服务器根本没开；
b.把页面放在非webroot目录下的其他位置了；
(2).页面点击按钮或者是点击超链接的时候出现404
检查web.xml里面，看你的配置请求是否写错了；
8.在web.xml文件里面添加<servlet>标签和<servlet-mapping>标签，并填写好里面相应的值；
提示：
Tomcat7默认支持Servlet3规范，而Servlet3规范默认支持注解，所以在Eclipse创建Dynamic Web Project时，默认不会生成web.xml，也不会引用手动创建的web.xml。
第一种方法，创建项目时点击Next按钮，不要点击Finish，直到Web Module，勾选“Generate web.xml deployment descriptor”，这样创建项目会自动包含web.xml。
第二种方法，若在创建项目时忘记勾选，右击工程，选择Java EE Tools —> Generate Deployment Descriptor Stub，Eclipse会自动添加web.xml。如何打开域名+工程名就能够访问默认的页面：
在web.xml里面，有个标签叫做welcome-file-list，里面有个welcome标签，把你要默认打开的文件名更换里面的文件名，就可以实现。
9.web.xml如何接收到前端的请求以及如何访问指定的java代码
(1)你在前端点击按钮或者是点击超链接的时候，会发送一个请求给服务器；
(2)服务器会拿着这个请求到web.xml里面的<servlet-mapping>标签里面去和<url-pattern>标签里面的内容进行适配，一旦适配成功，就会拿着该<servlet-mapping>标签里面的<servlet-name>的值去<servlet>标签中寻找里面的<servlet-name>的值进行匹配，匹配成功，则会去运行该<servlet>标签里面的<servlet-class>里面的类里面的service方法；
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>cn.hckj.teaching.servlet.LoginServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>CheckUsernameServlet</servlet-name>
<servlet-class>cn.hckj.teaching.servlet.CheckUsernameServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>RegServlet</servlet-name>
<servlet-class>cn.hckj.teaching.servlet.RegServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>FindNoteServlet</servlet-name>
<servlet-class>cn.hckj.teaching.servlet.FindNoteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>CheckUsernameServlet</servlet-name>
<url-pattern>/checkUsername.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>RegServlet</servlet-name>
<url-pattern>/reg.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>FindNoteServlet</servlet-name>
<url-pattern>/showNoteDetail.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
10.创建mysql数据库，使用SQL语句创建一个test数据库，然后在test数据库中创建一个users表，最后在users表中插入几条数据；
CREATE DATEBASE test; //创建数据库
CREATE TABLE `users` (
`id` INT(20) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
PRIMARY KEY (`id`)
); //创建表
INSERT INTO `users` VALUES ('01','zhaolei','111','赵雷'); //插入数据
INSERT INTO `users` VALUES ('02','liyun','222','李云');
提示：
如何开启mysql数据库
(1).去官网下载mysql数据库安装文件，然后进行安装；
(2).下载一个mysql管理器，然后进行安装，然后使用mysql管理器就可以进行各种数据库操作了；
11.让java能够连接到mysql数据库
(1).把mysql的驱动包放到webcontent下面的web-inf下面的lib目录下；
提示：
Mysql的jdbc驱动包可以在mysql官网进行下载。
(2).在src的根目录下创建db_mysql.properties文件，用来保存mysql数据库的用户名、密码、URL地址和使用的驱动；
username=root
password=root
url=jdbc\:mysql\://localhost\:3306/test
driver=com.mysql.jdbc.Driver
提示：
创建db_mysql.properties文件，右键src，选择file，然后在出现的界面中，输入文件名和后缀，点击finish。
(3).在原始的包下新建一个utils的包，然后创建一个ConnectionUtils.java（数据库连接工具类），放置到该包下；
public class ConnectionUtils {
//定义之前写在properties里面的内容对应的变量名
static String username;
static String password;
static String url;
static String driver;
static {
try {
//调用方法，该方法就是用来获取properties里面的各种变量对应的值的
getParam();
//加载jar包文件
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 读取db_mysql.properties文件，并且把name所对应的值给取出来
* @throws IOException
*/
private static void getParam() throws IOException {
//下面4行的含义就是读取指定的文件
ClassLoader cl= ConnectionUtils.class.getClassLoader();//获取类加载器
InputStream is = cl.getResourceAsStream("db_mysql.properties");//通过类加载器来加载制定的文件
Properties pro = new Properties();//因为加载的文件是properties文件，所以创建一个Properties对象
pro.load(is);//使用该properties对象去读取该加载的文件流
//然后通过指定的key来获取对应的value
username = pro.getProperty("username");
password = pro.getProperty("password");
url = pro.getProperty("url");
driver = pro.getProperty("driver");
}
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(url, username, password);
}
public static void main(String[] args) throws SQLException {
getConnection();
}
}
(4).开启mysql数据库，然后在ConnectionUtils.java中执行该文件，如果控制台不报错，意味着数据库连接成功。
12.在src的原来的包下面创建一个dao包，该包的作用就是所有的数据库操作都在这里面进行；
13.在dao包下面新建一个UserDao的类，该类的作用就是用户的所有数据库操作都在这里面进行；
14.在UserDao下面新建一个方法，该方法就是用户的登录方法，具体内容参考UserDao.java文件；
public class UserDao {
public boolean login(String username,String password) throws SQLException{
//1、连接数据库
Connection conn = ConnectionUtils.getConnection();
//2、书写sql语句
String sql = "select * from users where username=? and password = ?";
//3、通过连接来创建一个用来加载sql语句的对象--PreparedStatement
PreparedStatement psmt = conn.prepareStatement(sql);
//4、查看sql语句中是否存在问号，有问号的话，根据问号的类型来进行塞值
psmt.setString(1, username);//第一个参数指的是第几个问号，从1开始，第二个参数指的是你要替换问号的数据
psmt.setString(2, password);//
//5、执行该加载sql语句的PreparedStatement对象，并且关注该sql语句是哪种，如果是增删改的话，那么执行的语句为executeUpdate，如果是查的话，执行的语句为executeQuery
//如果是增删改的话，执行了之后，返回的是一个int类型的值，代表的是这个sql语句执行之后影响到了几行，如果是查的话，那么返回的是一个ResultSet的对象，它里面包含了完整的查询的结果
ResultSet rs = psmt.executeQuery();
if(rs.next()){
return true;
}
return false;
}
public void reg(Users u) throws SQLException{
//1、连接数据库
Connection conn = ConnectionUtils.getConnection();
//2、书写sql语句
String sql = "insert into users(username,password,name) values(?,?,?)" ;
//3、通过连接来创建一个用来加载sql语句的对象--PreparedStatement
PreparedStatement psmt = conn.prepareStatement(sql);
//4、查看sql语句中是否存在问号，有问号的话，根据问号的类型来进行塞值
psmt.setString(1, u.getUsername());//第一个参数指的是第几个问号，从1开始，第二个参数指的是你要替换问号的数据
psmt.setString(2, u.getPassword());//
psmt.setString(3, u.getName());//
//5、执行该加载sql语句的PreparedStatement对象，并且关注该sql语句是哪种，如果是增删改的话，那么执行的语句为executeUpdate，如果是查的话，执行的语句为executeQuery
//如果是增删改的话，执行了之后，返回的是一个int类型的值，代表的是这个sql语句执行之后影响到了几行，如果是查的话，那么返回的是一个ResultSet的对象，它里面包含了完整的查询的结果
psmt.executeUpdate();
}
public boolean usernameIsIn(String username) throws SQLException{
//1、连接数据库
Connection conn = ConnectionUtils.getConnection();
//2、书写sql语句
String sql = "select * from users where username=?";
//3、通过连接来创建一个用来加载sql语句的对象--PreparedStatement
PreparedStatement psmt = conn.prepareStatement(sql);
//4、查看sql语句中是否存在问号，有问号的话，根据问号的类型来进行塞值
psmt.setString(1, username);//第一个参数指的是第几个问号，从1开始，第二个参数指的是你要替换问号的数据
//5、执行该加载sql语句的PreparedStatement对象，并且关注该sql语句是哪种，如果是增删改的话，那么执行的语句为executeUpdate，如果是查的话，执行的语句为executeQuery
//如果是增删改的话，执行了之后，返回的是一个int类型的值，代表的是这个sql语句执行之后影响到了几行，如果是查的话，那么返回的是一个ResultSet的对象，它里面包含了完整的查询的结果
ResultSet rs = psmt.executeQuery();
if(rs.next()){
return true;
}
return false;
}
}
15.在LoginServlet里面获取到前端的username和password之后，调用UserDao里面的login方法，完成用户的登录校验；
16.在UserDao下面继续新建一个reg的方法，我们发现里面的参数太多，所以我们把参数进行一个封装，即在原始包下新建一个pojo的包，然后新建一个Users的类，里面的字段和表Users保持一直，注意属性要使用private修饰，然后右键选择source，然后选择get和set…完成代码的自动构建；
public class Users {
private int id;
private String username;
private String password;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
17.在UserDao的reg方法里面，模拟之前的login方法，直接把内容copy过来，修改几个地方：
(1).修改sql语句；
(2).修改？号对应的setXXX的值；
(3).根据不同的返回类型来修改return的值，或者是去掉return；
(4).根据不同的sql语句的类型，来修改executeUpdate或者是executeQuery；
18.根据reg的方法，来实现注册的完整功能：
(1).创建一个reg.jsp的页面，并且修改请求为reg.do;
(2).创建一个RegServlet的类；
(3).在RegServlet类里面的service方法中获取到前台注册的所有信息；
(4).把信息封装成一个Users对象，然后传入到UserDao中的reg方法里面；
(5).注册成功之后，在页面进行打印展示；
19.如何实现在注册页面，用户名填写完成之后，就进行校验该用户名是否存在
(1).在UserDao里面添加一个判断用户名是否存在的方法，代码见UserDao.java文件；
(2).在reg.jsp页面的用户名的input标签上添加一个失去焦点事件，并且把当前input的value给传输到js中；
(3).在script标签里面写一个对应的函数，注意添加参数，先使用alert进行测试，看函数是否正常被触发，看值是否正确传送过来；
(4).在函数测试完成之后，把ajax的代码copy到当前函数里面，然后修改open后面的第二个参数，第二个参数修改为你要发送给后台的请求名比如，login.do,reg.do,checkUsername.do之类的，如果有数据要发送给后台的话，通过问号后面接key=value的形式进行传递，比如你要发一个判断用户名的请求，并且你还想把用户名传递给后台，那么你的写法是：”checkusername.do?username=”+username,前面的username是key，后面的username是变量名；
(5).创建一个请求名和ajax中的请求名对应的servlet，然后在service方法里面写一个输出语句，重启服务器刷新页面，测试看请求是否能够到达服务器！
(6).如果上一步能够正常的接收到ajax的请求的话，那么我们就按照之前LoginServlet的写法，把里面的代码copy过来，然后只获取username，然后调用UserDao里面的usernameIsIn的方法，把用户名传输过去，然后得到结果，进行打印出来，测试看是否成功！
(7).如果上一步能够正常的打印出用户名存在或者不存在的话，那么现在要做的就是把这个存在和不存在的数据发送给前台jsp页面，通过pw.write的方法来传输字符串；
(8).在js函数里面的if….里面alert一下xhr.responseText的值，看是否能够获取到后台发送的数据；
(9).能够正常接收到之后，在用户名的input窗口下面，新建一个span的标签，然后在接收到数据的js里面获取到该span标签对象，然后修改里面的innnerHTML的值；
按照第八步的书写，会发现，现在可以完成用户名是否存在的判断，但是判断之后，把鼠标继续放回到用户名的位置之后，数据没有清空，并且提示也仍然存在；
获取焦点事件onfoucs
未完待续………………………………..
