非常激動的開通了我的第一個博客，在這里希望大家能多多指點，相互學習。
一個簡單的登錄界面
首先我們先把這個登錄分為三塊：
一、數據庫
數據庫我用的是MYSQL；
二、前端
三、后台
1、 后台代碼的編寫我使用的是eclipse
2、 容器我使用的是Tomcat7
3、 Jdk使用的是1.7版本
按照上面的順序來，第一步我們先創建數據庫；
在創建數據庫之前一定要先設計好我們登錄的時候需要哪些東西，用戶名和密碼肯定是需要的，所以數據表里肯定是有這兩個字段的，還有一個字段是想都不用想，鐵定需要的，那就是id，慣用的手法，id鐵定是主鍵，然后自增；用戶名就用username，密碼password。
設計好了必須要的字段之后我突然又想到，如果以后我們做注冊功能的話，是不是也能用同一張表呢，那這樣的話，我干脆現在就設計好吧。Username是用戶名，用戶名那就隨便用戶定義吧，我就另外再寫一個字段，就用name，注冊的時候就把名字給我寫進去吧，畢竟我要知道這個賬號是誰的，順便定個性別吧，是男的還是女的總要告訴我吧。好了，不想再定了，如果想定其他的就再去加吧。
廢話不多說，數據庫直接放上來：
好了，數據庫完成后，，對於新手來說前端沒必要寫的太復雜了，當然，也可以去copy一份，自己稍微改一下就好了，我呢就比較懶，就隨便去網上copy了一份，我看了一下，很簡單，js導了一個jquery.min的包，然后隨便搞了幾張圖片，放進去了。
接下來我就一步一步的把代碼放上來：
1、首先html代碼：
<div class="dowebok">
<div class="logo"></div>
<form action="login" accept-charset="utf-8" id="login_form" class="loginForm" method="post">
<div class="form-item">
<input id="username" name="username" type="text" autocomplete="off" placeholder="賬號/工號">
<!-- -->
</div>
<div class="form-item">
<input id="password" name="password" type="password" autocomplete="off" placeholder="登錄密碼">
<!-- -->
</div>
<div class="form-item"><button id="submit">登 錄</button></div>
<div class="reg-bar">
<a class="reg" href="javascript:">立即注冊</a>
<a class="forget" href="javascript:">忘記密碼</a>
</div>
</form>
</div>
好的，上面的代碼我想沒有哪里可以解釋的，已經簡單的不能再簡單了。
然后就是CSS代碼，畢竟做東西要有模有樣：
* { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; background: #fff url(images/backgroud.png) 50% 50% no-repeat; background-size: cover;} #username { background: url(images/emil.png) 20px 14px no-repeat; } #password { background: url(images/password.png) 23px 11px no-repeat; } .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(images/login.png) 0 0 no-repeat; } .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;} .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;} .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;} .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; } .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; } .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;} .reg-bar a { color: #fff; text-decoration: none; } .reg-bar a:hover { text-decoration: underline; } .reg-bar .reg { float: left; } .reg-bar .forget { float: right; } .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;} .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;} .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;} .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;} @media screen and (max-width: 500px) { * { box-sizing: border-box; } .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; } .logo { margin: 50px auto; } .form-item { width: auto; } .form-item input, .form-item button, .reg-bar { width: 100%; } }
Css代碼也是十分易懂的，不懂的童鞋度娘一下你就知道。
前端，數據庫都出來了，萬事俱備只欠后台了，畢竟真正做苦力的還是后台。
首先我們啥都不說，第一步就把數據庫配置好，叫人家去做苦力，你知道得先告訴人家去哪里搬磚是不。
我的數據庫配置文件寫在c3p0-config.xml里
<?xml version="1.0" encoding="utf-8" ?>
<c3p0-config>
<!-- 默認配置，如果沒有指定則使用這個配置 -->
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/yaj_stu</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="idleConnectionTestPeriodInMinutes" value="240" />
<property name="idleMaxAgeInMinutes" value="60" />
<property name="maxConnectionsPerPartition" value="250" />
<property name="minConnectionsPerPartition" value="40" />
<property name="partitionCount" value="2" />
<property name="acquireIncrement" value="10" />
<property name="statementsCacheSize" value="0" />
<property name="releaseHelperThreads" value="5" />
<property name="connectionTimeoutInMs" value="5000" />
</default-config>
<!-- 命名的配置 -->
<named-config name="51zixue"><!--這里是設置配置文件的名字 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/yaj_stu</property><!—3306后面跟數據庫名，不是表名 -->
<property name="user">root</property><!--mysql的登陸名 -->
<property name="password">root</property><!--如果沒密碼就可以設置成<property name="password"></property> -->
<property name="idleConnectionTestPeriodInMinutes" value="240" />
<property name="idleMaxAgeInMinutes" value="60" />
<property name="maxConnectionsPerPartition" value="250" />
<property name="minConnectionsPerPartition" value="40" />
<property name="partitionCount" value="2" />
<property name="acquireIncrement" value="10" />
<property name="statementsCacheSize" value="0" />
<property name="releaseHelperThreads" value="5" />
<property name="connectionTimeoutInMs" value="5000" />
</named-config>
</c3p0-config>
咳咳，一口老血吐在鍵盤上，為了防止有容易搞錯的的童鞋，我又加上了注釋。
好了，告訴它要去哪里搬磚了，現在就要告訴它怎么搬磚了。
首先，我先建了四個包備用：
當然，這是我寫完之后的包，里面是有東西的，剛建好的包是空的，包的顏色是白色的。
先從第一個包開始說，bean層放的實體類……完了，有童鞋要罵我了，別跟我扯什么實體類，你就直接告訴我到底是放啥？好，說白了就是你要在類里get、set一下的那個類！你不用管它是干啥的也不用管它的誰，不知道的，下課之后抄代碼，給我抄十遍你就自然知道了。
來啊，給朕上bean層的代碼：
package com.xh.bean; public class User { private int id; private String username; private String pwassword; private String name; private String sex; 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 getPwassword() { return pwassword; } public void setPwassword(String pwassword) { this.pwassword = pwassword; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } }
這下明白bean是干啥的了吧。
好了，搞定bean層之后，你以為要去dao層？
不！我們直接去web層造去。
本來想着一次把web層的代碼全部貼上來，但是想到，有童鞋在這里學習，那么就一步一步的來吧，到后面再把代碼一次復制上來。
首先，我們先在web層建一個servlet
@WebServlet(name="LoignServlet",urlPatterns="/login") public class LoignServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { } }
Ok之后我們就在 doPost里面寫代碼
登錄的時候是通過驗證username和password來登錄的，那么我們就先拿到username和password
@WebServlet(name="LoignServlet",urlPatterns="/login") public class LoignServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username=req.getParameter("username"); String password=req.getParameter("password"); } }
然后把User清空清空
@WebServlet(name="LoignServlet",urlPatterns="/login") public class LoignServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username=req.getParameter("username"); String password=req.getParameter("password"); User user=null; UserService userService=new UserService(); } }
這時候UserService會報錯，這是因為我們沒有這個類，然后就要去造它
package com.xh.service; import java.sql.SQLException; import com.xh.bean.User; import com.xh.dao.UserDao; public class UserService { public User login(String username,String password) throws SQLException{ UserDao userDao=new UserDao(); User user=userDao.login(username, password); return user; } }
UserService會報錯，因為里面的UserDao這個類我們沒有，接着我們就要去造UserDao
package com.xh.dao; import java.sql.SQLException; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanHandler; import com.mchange.v2.c3p0.ComboPooledDataSource; import com.xh.bean.User; public class UserDao { public User login(String username,String password) throws SQLException{ ComboPooledDataSource dataSource=new ComboPooledDataSource(); QueryRunner queryRunner=new QueryRunner(dataSource); String sql="select * from stu where username=? and password=?"; User user=queryRunner.query(sql, new BeanHandler<User>(User.class),username,password); return user; } }
Dao層里寫的SQL語句請注意了stu是我數據表的名字，請童鞋們不要搞錯了。
Dao層和service層全部搞定之后，我們就要回到web層里了。
package com.xh.web; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.xh.bean.User; import com.xh.service.UserService; @WebServlet(name="LoignServlet",urlPatterns="/login") public class LoignServlet extends HttpServlet{ /** * */
private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out=resp.getWriter(); String username=req.getParameter("username"); String password=req.getParameter("password"); User user=null; UserService userService=new UserService(); try { user=userService.login(username, password); } catch (SQLException e) { // TODO Auto-generated catch block
e.printStackTrace(); } if(user!=null){ resp.getWriter().write("登錄成功"); }else { System.out.println(user); out.print("<script language='javascript' charset='utf-8'>alert('err!!');window.location.href='/WebTest/ index.jsp';</script>"); } } }
判斷user不等於空之后就要跳轉到其他界面，因為我沒有寫其他界面，所以干脆來個
提示成功就好了，如果登錄失敗的話就跳回登錄界面，接着給我登錄。
我在項目中引入了
c3p0-0.9.5.2.jar
commons-beanutils-1.8.3.jar
commons-dbutils-1.6.jar
mysql-connector-java-5.1.42-bin.jar
等jar包。
好了，登錄操作我們就搞定了，下課！
對了，展示一下本堂課的成果↓
