在jsp页面引入jquery手把手JavaWeb 入门级项目实战文章宣布体系第四节

其余，index.jsp中引入的jQuery也须要换成本地的。

本日我把页面重构了一下，添加了内容区和底栏（footer），我会把目前的代码上传的，有须要的自己去看就行了，我们就不在前台页面花费太多的韶光了。
div + css，布局等等，这些东西往后有韶光的话，我单独开贴分享吧。

都已经写了三篇文章了，还没有写Java代码，实在有些说不过去。

在jsp页面引入jquery手把手JavaWeb 入门级项目实战文章宣布体系第四节 Docker

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\"大众%>

<ul>

</ul>

</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='c7a906efa5d8f4f4 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

登录框的HTML代码：

</div>

</div>

</div>

我们不才面写一个script块，js代码就全部写在这里。

给上岸按钮绑定一个点击事宜：

上岸方法

function login(){ var username = $('#username').val(); var password = $('#password').val(); alert(username + \公众,\公众 + password);}

当成功alert出来数据后，解释到此为止的代码是精确的。

接下来，利用jQuery的ajax方法，将数据提交到controller层。

我已经都写好注释了，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。