系列链接:
✨JavaWeb项目实战亲自动手手敲上线小项目的第一天✨
✨JavaWeb项目实战亲自动手手敲上线小项目的第二天✨
✨JavaWeb项目实战亲自动手手敲上线小项目的第三天✨
✨JavaWeb项目:实战亲自动手手敲上线小项目部分功能的第四天优化✨
那这次通过一个上线项目中提取出的一个模块,让我们熟悉项目开发过程中的开发流
程以及代码结构,希望大家以此为基石,将代码写的越来越完美。
项目实现步骤
目的是通过这次项目的实现,贯穿前面所学的知识点,让大家能够灵活应用所学知识,解决实际问题。知识点是固定的,但是实现思路是各有千秋的。。所以大家在学习时,不要一味地复制代码或者照抄代码,理解里面的实现过程才是核心。学习实现功能的思路。
学习重点:
- 知识点在项目中的应用
- 功能实现的逻辑思路
知识点复习
- 数据库
- JDBC
- html
- servlet
- JSP+EL+JSTL
- AJAX
- 多表操作
那这个知识点相关的JavaWeb项目其实是包含两天的量的,我第一天没敲完,所以先把知识点给大家摆出来。
项目实现过程
资源包如下:不想手敲的可以直接导入,里面都有,为了大家能够学习,只要2积分:手敲第一天第二天的JavaWeb项目实战对应资源包.zip
再次提醒学习此项目是需要该资源包的,要不然你看到的只是思路与我的实现过程,你们是没办法实现的,因为我不可能将一个项目的所有代码都展示出来,那太多了,光js都要上千行的,还有许多图片要插入的,所以如果想要跟进本项目的可以下载资源包,那不想下载的,只想白嫖的,或者就是学习一下思路的,我也十分欢迎,谢谢大家的浏览,也希望你本次的浏览能有所收获。
那我在多说一句就是如果大家真的有心想要跟进这个小项目的话,我建议大家把src目录下的所有代码全都删除,然后一步步的重新自己去实现,也许要花费你一个星期甚至更长的时间,但是这是值得的,再怎么说这也是个小项目,再不济都是可以写到简历项目经理的,虽然他很简单,但是你如果一步一步都会了理解了,那你的水平也是能让人信服的。
当然白嫖是不可能让你们白嫖的,真想白嫖的,留言的评论让我觉得好的,我点赞的,私信你加好友,给你发。我就是这样实在,我可真不错。
- 分析静态页面,根据html或需求创建数据库
- 填写测试数据(sql语句添加)
- 创建项目,包结构(bean,dao.impl,servlet,service.impl,util),修改html页面为jsp(html->jsp)
(1)在HTML中添加page指令
(2) 将html的后缀改成jsp - 填写内容(注意填写顺序)
4.1 bean:属性,封装方法,无参构造,全参构造
表名=类名 ,列名=属性名
4.2 dao包:操作方法的接口,命名:实体类名+Dao,
Dbutils(属性文件,*.properties)
4.3 impl包:命名: 接口名+Impl
实现接口,继承Dbutils
4.4 service.impl
service定义的是接口,接口中的方法和dao层接口中的方法一致
impl : 这层的实现类主要负责调取dao层方法
4.5 servlet:
4.5.1. 接受参数
4.5.2. 调取service层的方法,service又在调取dao层的方法
4.5.3. 根据结果跳转页面
核心:jsp页面负责发送请求和展示数据
实现流程思想与过程
那基本的想法实现过程已经分析过了,那就开始实现吧!
那我先把包结构给大家展示出来,包结构是提前建好了,之后两天往里填充内容。
那实现的方式就是采用了MVC框架。
1. 登录功能实现
- 我们首先去访问
login.jsp
页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<link href="css/login.css" type="text/css" rel="stylesheet" />
</head>
<body id="userlogin_body">
<form action="login" method="post">
<div id="user_login">
<dl>
<dd id="user_top">
<ul>
<li class="user_top_l"></li>
<li class="user_top_c"></li>
<li class="user_top_r"></li>
</ul>
</dd>
<dd id="user_main">
<ul>
<li class="user_main_l"></li>
<li class="user_main_c">
<div class="user_main_box">
<ul>
<li class="user_main_text">用户名: </li>
<li class="user_main_input">
<input name="username" maxlength="20" id="TxtUserName" class="txtusernamecssclass"> </li>
</ul>
<ul>
<li class="user_main_text">密 码: </li>
<li class="user_main_input">
<input type="password" name="password" id="TxtPassword" class="txtpasswordcssclass"> </li>
</ul>
</div>
</li>
<li class="user_main_r">
<a href="index.jsp">
<input type="image" name="IbtnEnter" src="img/user_botton.gif" class="ibtnentercssclass">
</a>
</li>
</ul>
</dd>
<dd id="user_bottom">
<ul>
<li class="user_bottom_l"></li>
<li class="user_bottom_c"></li>
<li class="user_bottom_r"></li>
</ul>
</dd>
</dl>
</div>
</form>
</body>
</html>
当然了,光有login.jsp,不发里面的css样式就很狗,所以login.css
样式如下:
@charset "utf-8";
*{
margin:0;padding:0;list-style-type:none;}
a,img{
border:0;}
body{
font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#userlogin_body{
background:url(../img/user_all_bg.gif) #226cc5 repeat-x 50% top;margin:110px 0px 0px;font:12px/150% arial, "宋体" ,helvetica,sans-serif;text-decoration:none}
#user_login{
margin:0px auto;width:590px}
#user_top,#user_main,#user_bottom{
clear:both}
#user_top li,#user_main li,#user_bottom li{
float:left;}
.user_top_r{
background:url(../img/user_top_r.gif) no-repeat 50% top}
.user_top_c{
background:url(../img/user_top_c.gif) no-repeat 50% top}
.user_top_l{
background:url(../img/user_top_l.gif) no-repeat 50% top}
.user_main_r{
background:url(../img/user_main_r.gif) #bec5cc no-repeat 50% top}
.user_main_c{
background:url(../img/user_main_c.gif) #bec5cc no-repeat 50% top;width:280px}
.user_main_l{
background:url(../img/user_main_l.gif) #bec5cc no-repeat 50% top}
.user_bottom_r{
background:url(../img/user_bottom_r.gif) no-repeat 50% top}
.user_bottom_c{
background:url(../img/user_bottom_c.gif) no-repeat 50% top;color:#fff;line-height:117px;padding-top:20px;text-align:right}
.user_bottom_c a{
color:yellow;text-decoration:underline}
.user_bottom_c a:hover{
color:#c00}
.user_bottom_l{
background:url(../img/user_bottom_l.gif) no-repeat 50% top}
.user_top_r,.user_main_r,.user_bottom_r{
float:left;width:180px}
.user_main_c,.user_top_c,.user_bottom_c{
float:left;width:280px}
.user_top_l,.user_main_l,.user_bottom_l{
float:left;width:129px}
.user_top_r,.user_top_c,.user_top_l{
height:116px}
.user_main_r,.user_main_c,.user_main_l{
height:139px}
.user_bottom_r,.user_bottom_c,.user_bottom_l{
height:117px}
.user_main_r{
line-height:139px}
.user_main_box ul{
clear:both}
.user_main_box li{
float:left;}
.user_main_box .user_main_text{
line-height:34px;height:34px}
.user_main_box .user_main_input{
line-height:34px;height:34px}
.user_main_box .user_main_text{
width:60px;color:#000}
.user_main_box .user_main_input img{
margin-bottom:-2px;margin-left:-25px}
.txtusernamecssclass{
border-top-width:0px;padding-left:25px;border-left-width:0px;background:url(../img/user_login_name.gif) no-repeat;border-bottom-width:0px;width:165px;line-height:20px;height:21px;border-right-width:0px}
.txtpasswordcssclass{
border-top-width:0px;padding-left:25px;border-left-width:0px;background:url(../img/user_login_password.gif) no-repeat;border-bottom-width:0px;width:165px;line-height:20px;height:21px;border-right-width:0px}
.ibtnentercssclass{
width:111px;height:122px;border:0;}
那里面的图片没有也很丑,所以img
下的图片,这个我还真发不了啊,总不能一张一张截吧,所以还是建议大家下载上面的资源包,只有2积分,不是没觉得0积分更好,就是觉得那样感觉大家会觉得得到的东西太容易,你们反而不学了,那其实有没有样式都不重要,最重要的是实现功能,所以没有也行,当然这个项目我还会更新的。
好,言归正传,我们看这段代码
<input type="image" name="IbtnEnter" src="img/user_botton.gif" class="ibtnentercssclass">
当用户点击<input type="image">
(图片提交)提交按钮的时候,我们会传入一个username
与password
,
之后发送一个请求给action(form表单),
<form action="login" method="post">
那action的请求地址是login,会找到login的处理类:LoginServlet
。
-
那我们的
LoginServlet
会干什么事呢?2.1. 接收参数(username,password). 2.2. 调取service的login方法,
package com.lby.web;
import com.lby.bean.Users;
import com.lby.service.impl.UsersServiceImpl;
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 java.io.IOException;
import java.io.PrintWriter;
/**
* @Author: King-lby
* @Date Created in 2021-08-24 9:56
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 接收参数
String username = req.getParameter("username");
String password = req.getParameter("password");
//2. 调取service
UsersServiceImpl usersService = new UsersServiceImpl();
Users users = usersService.login(username, password);
//3. 跳转页面
}
}
}
所以我们的UsersService
接口:
package com.lby.service;
import com.lby.bean.Users;
/**
* @Author: King-lby
* @Date Created in 2021-08-24 9:46
*/
public interface UsersService {
/**
* 登录方法
*/
public Users login(String username,String password);
}
还有我们的UsersServiceImpl
实现类:
package com.lby.service.impl;
import com.lby.bean.Users;
import com.lby.dao.UsersDao;
import com.lby.dao.impl.UsersDaoImpl;
import com.lby.service.UsersService;
/**
* @Author: King-lby
* @Date Created in 2021-08-24 9:47
*/
public class UsersServiceImpl implements UsersService {
private UsersDao usersDao = new UsersDaoImpl();
@Override
public Users login(String username, String password) {
return usersDao.login(username, password);
}
}
那我们调用service的login之后,我们的service还要去调用dao层:所以我们的UsersDao
接口是:
package com.lby.dao;
import com.lby.bean.Users;
/**
* @Author: King-lby
* @Date Created in 2021-08-24 9:46
*/
public interface UsersDao {
/**
* 登录方法
*/