当前位置:网站首页 > 小编推荐 > 正文

【手把手】JavaWeb 入门级项目实战 -- 文章发布体系 (第四节)

admin 0

首要,更正一下上一章中的一个小错误,便是在index【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节).jsp中,banner部分没有增加完毕的标签,加上去就OK了,我也是完善页面的时分发现的。

别的,index.jsp中引进的jQuery也需求换成本地的。


今日我把页面重构了一下,增加了内容区和底栏(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"%>

  • 主页
  • 原创故事
  • 抢手专题
  • 赏识美文
  • 资助

这便是标题栏,今后新增的jsp页面,只需求把这个header.jsp引进就能够了。留意,这种引进就相当于把里边的代码原封不动地仿制进去,所以假如用相对途径引证资源文件,就还是以本来的页面为【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)准。

引进办法:


<%@include file="common/header.jsp" %>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

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句子然后操作数据库。

就比方说用户登录这个功用,我需求判别的便是

  1. 你这个用户是否存在?
  2. 用户名和暗码是否正确?

终究,还需求将登录的标志回来给前台。

dao -> servide -> controller -> JSP

这样便是一个完好的流程。

4. 从JSP到controller层

让咱们翻开login.jsp页面,引进jQuery


登录框的HTML代码:

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)

三国小镇灵兽怎样得

咱们在下面写一个script块,js代码就悉数写在这儿。

给登陆按钮绑定一个点击工作:




登陆办法

function login(){
var username = $('#username').val();
var password = $('#password').val();
alert(us浴照ername + "," + 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天性2},//传递给co【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)ntroller的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页面到control【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)ler,用户名和暗码是被装在一个叫做request的变量中,它其实也就相当于一个json,一个map,都是差不多的东西,这儿就不具体阐明晰。当然了,他也是JSP九大隐式方针中的一员。

咱们来测验一下,点击登陆按钮。

成功了!能够看到数据现已成功传递到controller层了。董晴多大了

由于咱们还没有数据表和JavaBean,所以咱们先不急着写service层,先开端编写JavaBean吧。

5. 从JavaBean到数据库表。

咱们在src目录下新建一个寄存JavaBean的包

关于JavaBean,假如不是很了解的话,能够看看这篇文章:

http://www.cnblogs.c跨过我国制作om/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
StringBuilder sb = new StringBuilder();
sb.append("create table ");
//获取表名
Ta【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)ble 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();
boolea五谷磨房与燕之坊比较n defaultNull = column.defaultNull();

sb.append("\t" + field).append(六合彩开奖" ").append(type);
if(defaultNull){
if(type.toUpperCase().equals("TIMESTAMP")){
sb.append(",\n");
}e女子毒死同居男友lse{
sb.append(" DEFAULTtekscan 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 ,d【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)efaultNull = 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_tim张林谈家电e")
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。