其余,index.jsp中引入的jQuery也须要换成本地的。
<script src=\"大众${basePath}/static/js/jQuery.js\公众></script>
本日我把页面重构了一下,添加了内容区和底栏(footer),我会把目前的代码上传的,有须要的自己去看就行了,我们就不在前台页面花费太多的韶光了。div + css,布局等等,这些东西往后有韶光的话,我单独开贴分享吧。
都已经写了三篇文章了,还没有写Java代码,实在有些说不过去。
1. 上岸页面
上岸页我已经写好了,现在看看效果,大略解释一下。
点击上岸按钮,可以跳转到上岸页面。
上岸按钮便是一个超链接。
JSP页面便是一个servlet,但是省去了很多写Servlet的麻烦,login.jsp已经写好了,就放在WebContent目录下。
昨天憋了一上午,总算写好了上岸页面。我不是专业做前真个,以是只做了一个大概样子。用了很多css3的属性,以是IE678上浏览的效果是不好的。
关于这个页面,本日我调度了一下,不想搞得那么繁芜了,我去掉了所有的图标和飞舞白云,关于css殊效,h5的话呢,往后单独拿出来解释吧,毕竟好多人都反应说太花哨了,由于是入门级的小项目,我也不想弄得那么繁芜了。
虽然页面单调了些,不过对付初学者来说,相对来说比较好理解。之前的页面的确有点太花哨了,还弄了几朵云飘来飘去的,说不定还影响性能,以是我把这些都去掉了。
2. 新的目录构造
之前的代码有很多冗余的地方,比如标题栏,每个页面都须要写一遍。而且js和css都是写在本页面的。实际开拓一样平常都不会这么做。以是,我把这些东西都分离出来了,放在各自的目录里。
以下是新的目录构造:
<%@ page language=\"大众java\公众 contentType=\公众text/html; charset=UTF-8\"大众
pageEncoding=\"大众UTF-8\"大众%>
<div class=\公众header\"大众>
<div class='834be6c99238fd69 logo'>原创笔墨</div>
<ul>
<li class='e6c99238fd69c93a first'><a href=\"大众index.jsp\公众>首页</a></li>
<li class='9238fd69c93a88f8 item'><a href=\"大众javascript:void(0)\"大众>原创故事</a></li>
<li class='fd69c93a88f85ea0 item'><a href=\"大众javascript:void(0)\"大众>热门专题</li>
<li class='c93a88f85ea014a3 item'><a href=\"大众javascript:void(0)\"大众>欣赏美文</li>
<li class='88f85ea014a3aa1e item'><a href=\公众javascript:void(0)\公众>资助</a></li>
</ul>
<div class='5ea014a3aa1eccc6 login'>
<span><a href=\公众login.jsp\"大众>上岸</a></span>
<span>|</span>
<span><a href=\"大众javascript:void(0)\"大众>注册</a></span>
</div>
</div>
这便是标题栏,往后新增的jsp页面,只须要把这个header.jsp引入就可以了。把稳,这种引入就相称于把里面的代码原封不动地拷贝进去,以是如果用相对路径引用资源文件,就还是以原来的页面为准。
引入办法:
<!-- 头部页面 --><%@include file=\公众common/header.jsp\"大众 %>
footer.jsp
<%@ page language=\"大众java\公众 contentType=\"大众text/html; charset=UTF-8\公众 pageEncoding=\公众UTF-8\公众%><div class='14a3aa1eccc66262 footer'> 免责声明:本站所有素材均来自网络,仅供学习互换。如果陵犯了您的权柄,请联系我,我会第一韶光删除侵权内容。</div>
taglib.jsp (一些公共的配置等)
<%@ page language=\"大众java\公众 contentType=\公众text/html; charset=UTF-8\公众 pageEncoding=\公众UTF-8\"大众%><% String path = request.getContextPath(); int port = request.getServerPort(); String basePath = null; if(port==80){ basePath = request.getScheme()+\"大众://\公众+request.getServerName()+path; }else{ basePath = request.getScheme()+\"大众://\公众+request.getServerName()+\"大众:\"大众+request.getServerPort()+path; } request.setAttribute(\"大众basePath\"大众, basePath);%>
basePath 便是项目的根路径。这样做的好处便是,使得JSP看起来很干净,没有那么多冗余的代码了。
大概便是这个样子,接下来,我们开始写业务。
3. 上岸功能的MVC流程上岸框中,目前只有用户名和密码这两个选项。
我们首先要做的便是将这两个值通报到后台。所谓的后台,实在便是Java代码。为了看起来比较清晰,我们在WebContent目录下新建一个controller包。
这是一个MVC分层的示意图
意思便是说,用户登录之后,我们须要验证它的用户名和密码是否精确,那么就须要将数据拿到数据库里面去匹配。总体的流程大概是这样:我先在前台获取用户名和密码,然后到controller层(掌握层),这一层须要接管你传过来的用户名和密码,进行一些基本的掌握。
然后连续将数据通报到service层,也便是业务层,这一层会根据详细的业务对你的数据进行判断和剖析,末了,才通报到dao层,这一层原则上便是和数据库进行交互的。多数是写sql语句然后操作数据库。
就比如说用户登录这个功能,我须要判断的便是
你这个用户是否存在?用户名和密码是否精确?终极,还须要将登录的标志返回给前台。
dao -> servide -> controller -> JSP
这样便是一个完全的流程。
4. 从JSP到controller层让我们打开login.jsp页面,引入jQuery
<script src=\"大众${basePath}/static/js/jQuery.js\"大众></script>
登录框的HTML代码:
<!-- 上岸框 -->
<div class='aa1eccc66262a3c9 content'>
<div class='ccc66262a3c97a7e logo'><i style='font-size:90px;' class=\"大众iconfont icon-denglu\"大众></i></div>
<div class='6262a3c97a7e6553 inputBox mt50 ml32'>
<input type=\"大众text\"大众 id=\公众username\"大众 autofocus=\"大众autofocus\公众 autocomplete=\公众off\"大众 maxlength=\公众60\"大众 placeholder=\"大众请输入账号/邮箱/手机号\公众>
<i style='font-size:20px;margin-left:-32px;opacity:0.8;' class='a3c97a7e65533987 iconfont icon-yonghuming'></i>
</div>
<div class='7a7e65533987a881 inputBox mt50 ml32'>
<input type=\公众password\公众 id=\"大众password\"大众 autofocus=\公众autofocus\"大众 autocomplete=\"大众off\"大众 maxlength=\公众60\公众 placeholder=\"大众请输入密码\"大众>
<i style='font-size:20px;margin-left:-32px;opacity:0.8;' class='65533987a881c4d5 iconfont icon-mima'></i>
</div>
<div class='3ffc834be6c99238 mt50 ml32'>
<button class=\"大众login_btn\"大众 onclick=\"大众#\"大众>上岸</button>
</div>
</div>
我们不才面写一个script块,js代码就全部写在这里。
给上岸按钮绑定一个点击事宜:
<div class='834be6c99238fd69 mt50 ml32'> <button class=\"大众login_btn\"大众 onclick=\"大众login()\公众>上岸</button></div>
上岸方法
function login(){ var username = $('#username').val(); var password = $('#password').val(); alert(username + \公众,\"大众 + password);}
当成功alert出来数据后,解释到此为止的代码是精确的。
接下来,利用jQuery的ajax方法,将数据提交到controller层。
function login(){ var username = $('#username').val(); var password = $('#password').val(); $.ajax({ type:\"大众post\"大众,//要求办法 url:\"大众${basePath}/controller/loginController.jsp\"大众,//要求地址 data:{\公众username\"大众:username,\"大众password\公众:password},//通报给controller的json数据 error:function(){ alert(\"大众上岸出错!
\"大众); }, success:function(data){ //返回成功实行回调函数。 } }); }
我已经都写好注释了,ajax方法在web开拓过程中,是被普遍利用的。
新建一个loginController.jsp ,这便是所谓的做事器端。
<%@ page language=\"大众java\"大众 import=\"大众java.util.\"大众 pageEncoding=\"大众UTF-8\"大众%><% //设置要求的编码 //request.setCharacterEncoding(\"大众UTF-8\公众); //获取客户端通报过来参数 String username = request.getParameter(\"大众username\公众); String password = request.getParameter(\公众password\"大众); System.out.println(username); System.out.println(password); //如果用户名和密码不为空 %>
从JSP页面到controller,用户名和密码是被装在一个叫做request的变量中,它实在也就相称于一个json,一个map,都是差不多的东西,这里就不详细解释了。当然了,他也是JSP九大隐式工具中的一员。
我们来测试一下,点击上岸按钮。
成功了!
可以看到数据已经成功通报到controller层了。
由于我们还没有数据表和JavaBean,以是我们先不急着写service层,先开始编写JavaBean吧。
5. 从JavaBean到数据库表。我们在src目录下新建一个存放JavaBean的包
关于JavaBean,如果不是很理解的话,可以看看这篇文章:
http://www.cnblogs.com/skyblue-li/p/5900216.html
一个记录用户信息的JavaBean,我想了以下这些属性:
private String id; //主键,采取UUID
private String username; //用户名
private String password; //密码
private String headerPic; //头像
private String email; //电子邮箱
private Integer male; //性别 0男 1女 3保密
private String createTime;//创建韶光
private String updateTime;//末了更新韶光
private Integer isDelete; // 删除状态0未删除1删除
private String address; //地址
private String telephone; //电话
当你的JavaBean设计好了,差不多对应的数据库表也就出来了。
之前写过一篇关于表明的文章:
http://www.cnblogs.com/skyblue-li/p/5900228.html
现在可以用这个知识点做点有趣的事情了,比如将一个JavaBean转换成建表语句。
新建一个表明包,里面添加两个表明
package annotation;import java.lang.annotation.ElementType;import java.lang.annotation.Retention;import java.lang.annotation.RetentionPolicy;import java.lang.annotation.Target;@Target(ElementType.FIELD) //表明的目标@Retention(RetentionPolicy.RUNTIME)public @interface Column { public String field() ; //字段名称 public boolean primaryKey() default false;//是否为主键 public String type() default \"大众VARCHAR(80)\"大众;//字段类型 public boolean defaultNull() default true; //是否许可为空 }
Table.java
package annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target(ElementType.TYPE) //表明的目标是类
@Retention(RetentionPolicy.RUNTIME)
public @interface Table {
public String tableName();
}
我们创建了两个表明。
接下来,在util包(也便是工具包)中新建两个工具类
StringUtils 字符串工具类
package util;public class StringUtils { public static boolean isEmpty(String str) { return null == str || str.equals(\"大众\"大众) || str.matches(\"大众\\s\"大众); } public static String defaultValue(String content,String defaultValue){ if(isEmpty(content)){ return defaultValue; } return content; }}
isEmpty的浸染是判断字符串是否为空。
defaultValue表示给字符串设置默认值,有点类似于oracle数据库中的nvl语法。
TableUtils 数据表工具类
package util;import java.lang.reflect.Field;import annotation.Column;import annotation.Table;public class TableUtils { public static String getCreateTableSQl(Class<?> clazz){ StringBuilder sb = new StringBuilder(); sb.append(\"大众create table \"大众); //获取表名 Table table = (Table) clazz.getAnnotation(Table.class); String tableName = table.tableName(); sb.append(tableName).append(\"大众(\n\公众); Field[] fields = clazz.getDeclaredFields(); String primaryKey = \公众\"大众; //遍历所有字段 for (int i = 0; i < fields.length; i++) { Column column = (Column) fields[i].getAnnotations()[0]; String field = column.field(); String type = column.type(); boolean defaultNull = column.defaultNull(); sb.append(\公众\t\"大众 + field).append(\公众 \"大众).append(type); if(defaultNull){ if(type.toUpperCase().equals(\"大众TIMESTAMP\公众)){ sb.append(\"大众,\n\"大众); }else{ sb.append(\公众 DEFAULT NULL,\n\公众); } }else{ sb.append(\"大众 NOT NULL,\n\"大众); if(column.primaryKey()){ primaryKey = \"大众PRIMARY KEY (\"大众+field+\"大众)\"大众; } } } if(!StringUtils.isEmpty(primaryKey)){ sb.append(\公众\t\公众).append(primaryKey); } sb.append(\"大众\n) DEFAULT CHARSET=utf8\"大众); return sb.toString(); } }
getCreateTableSQl方法是利用反射和表明有关的知识,给一个JavaBean自动天生建表语句,目前只支持MySQL,由于这方面的知识我也是刚开始学,写得不好的地方还请各位多多包涵。
接下来,给JavaBean添加表明。
@Table(tableName = \"大众t_user\"大众)public class User{ //属性}
属性如下:
@Column(type = \公众varchar(30)\公众 ,field = \公众id\"大众 ,primaryKey = true ,defaultNull = false)private String id; //主键,采取UUID@Column(type = \公众VARCHAR(20)\公众, field = \"大众username\"大众)private String username; //用户名@Column(type = \"大众VARCHAR(20)\公众, field = \公众password\公众)private String password; //密码@Column(type = \"大众VARCHAR(60)\"大众, field = \"大众headerPic\"大众)private String headerPic; //头像@Column(type = \"大众VARCHAR(60)\"大众, field = \"大众email\"大众)private String email; //电子邮箱@Column(type = \"大众VARCHAR(2)\公众, field = \公众sex\"大众)private Integer sex; //性别 0男 1女 3保密@Column(type = \公众datetime\"大众, field = \"大众create_time\"大众)private String createTime;//创建韶光@Column(type = \公众timestamp\"大众, field = \"大众update_time\"大众)private String updateTime;//末了更新韶光@Column(type = \公众int(1)\"大众, field = \"大众is_delete\公众)private Integer isDelete; // 删除状态 0未删除 1删除@Column(type = \"大众VARCHAR(200)\"大众, field = \"大众address\"大众)private String address; //地址@Column(type = \"大众VARCHAR(15)\"大众, field = \"大众telephone\"大众)private String telephone; //电话
创建一个测试包和测试类:
package test;import bean.User;import util.TableUtils;public class TestMain { public static void main(String[] args) { String sql = TableUtils.getCreateTableSQl(User.class); System.out.println(sql); }}
运行
OK,拿到sql语句了。
我已经安装了mysql,用root用户上岸后,新建一个database
利用这个database
将刚才得到的sql语句复制进去,加分号,回车。
这就表明数据库表已经建好了,默认编码是UTF-8。