毕业实习项目-4

数据库内容
- 表
- 表的关系
首页模块-导航栏
- 思路
- 实操
首页模块-标签栏
- 思路
- 实操

数据库内容

表

项目使用了下面的十张表

表	作用
t_bigtype	存放导航栏标签
t_comment	存放留言板内容
t_news	存放新闻内容
t_notice	存放公告内容
t_order	存放订单的各种信息
t_order_product	用来连接 t_order表和t_product表，解释两表间的关系
t_product	存放商品的各种信息
t_smalltype	存放商品分类栏里标签的各种信息
t_tag	存放标签栏标签以及标签对应的URL
t_user	存放用户各种信息

表的关系

表的关系
t_order_product表将 t_order 表与t_product 表间的多对多关系转为一对多关系。

首页模块-导航栏

思路

当用户在浏览器输入index路径时，后台调用indexServlet；indexServlet实现业务逻辑，从数据库的表中拿取导航栏信息，然后把数据传给index.jsp中；服务器将index.jsp翻译为Servlet，将Request和Response输出给页面让用户能够看到信息。此处暂时将index.jsp看作前台。indexServlet看作后台：
前台：

在WebContent文件夹的子文件夹common下找到top.jsp文件
index.jsp中包含top.jsp，在top.jsp里实现上方信息显示
循环遍历存放导航栏信息的<li>标签，过程中动态获取导航名（使用jstl、el表达式技术实现）

后台：

建一个indexServlet，调用service在数据库中查询大类别集合
使用session域对象储存数据
请求转发跳转到index.jsp

实操

Servlet包下新建一个名为IndexServlet的Servlet文件

右击com.xxx.Servlet包 → New → Servlet→ Class name标签后填上"IndexServlet" → next → URL mappings栏下编辑访问路径，点击edit → 编辑Patter内容为/index→next →取消勾选Constructors from superclass、doPost和doGet，勾选上service →Finish即可。

IndexServlet.java文件代码：

package com.xxx.servlet;

import java.io.IOException;

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 javax.servlet.http.HttpSession;

import org.apache.catalina.filters.RequestDumperFilter;

import com.oracle.jrockit.jfr.RequestableEvent;

import jdk.nashorn.internal.ir.RuntimeNode.Request;

/**
 * 首页模块
 * 	1.导航栏
 */
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
    
    
	private static final long serialVersionUID = 1L;
	
	private BigTypeService bigTypeService = new bigTypeServiceImpl();
	
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		
		//调用service在数据库中查询大类别集合
		List<BigType> bigTypeList = bigTypeService.findAll();
		
		//使用session域对象储存数据
		HttpSession session = request.getSession();
		session.setAttribute("bigTypeList", bigTypeList);
		
		//请求转发 跳转index.jsp
		request.getRequestDispatcher("/index.jsp").forward(request, response);
}
}

代码中BigTypeService、bigTypeServiceImpl、List<BigType>会报红是因为我们还没有建立相对应的类和接口。

Ctrl+1，选择第三个，导入一下包；
Ctrl+1，选择第一个创建类，弹出的窗口里将生成的类改到po包下，产生的BigType.java文件里输入代码。

BigType.java文件代码：

package com.xxx.po;

/**
 * 大类别 Bean
 * @author yu
 *
 */
public class BigType {
    
    

	private Integer id;     //主键id
	private String  name;   //名称
	private String remakes; //备注
	
	//敲完以上三行代码可以使用ALT+SHIFT+S组合键；
	//选择Generate Getters and Setters...
	//选择Select all；ok后即可自动生成下面的Get、Set方法代码
	
	public Integer getId() {
    
    
		return id;
	}
	public void setId(Integer id) {
    
    
		this.id = id;
	}
	public String getName() {
    
    
		return name;
	}
	public void setName(String name) {
    
    
		this.name = name;
	}
	public String getRemakes() {
    
    
		return remakes;
	}
	public void setRemakes(String remakes) {
    
    
		this.remakes = remakes;
	}
	
	
}

Ctrl+1，选择第二个创建接口，弹出的窗口里将生成的接口改到service包下；
Ctrl+1，选择第一个创建一个方法；
Ctrl+1，选择第一个创建类，弹出的窗口里将生成的类改到impl包下，产生的bigTypeServiceImpl.java文件里输入代码。

bigTypeServiceImpl.java文件代码：

package com.xxx.service.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.xxx.po.BigType;
import com.xxx.service.BigTypeService;
import com.xxx.util.DBUtil;

public class bigTypeServiceImpl implements BigTypeService {
    
    

	//查询大类别
	@Override
	public List<BigType> findAll() {
    
    
		// TODO Auto-generated method stub
		
		//new一个list
		List<BigType> list = new ArrayList<>();
		
		Connection conn = null;
		PreparedStatement sta = null;
		ResultSet res = null;
		
		//异常
		try{
    
    
		//数据库操作
		//建立连接
		conn = DBUtil.getConnection();
		
		//编写sql语句
		String sql = "select * from t_bigtype";
		
		//预编译，防止Sql注入
		sta = conn.prepareStatement(sql);
		
		//执行查询，返回结果集；
		res = sta.executeQuery();
		
		//分析结果集
		while(res.next()){
    
    
			BigType bigType = new BigType();
			
			//从数据库表里获得数据
			bigType.setId(res.getInt(1));
			bigType.setName(res.getString("name"));
			bigType.setRemakes(res.getString(3));
			
			//获得的数据放在list里
			list.add(bigType);
		}
		
		} catch (Exception e){
    
    
			e.printStackTrace();
		}finally{
    
    
			
			//关闭连接
			DBUtil.close(res, sta, conn);
		}
		return list;
	}

}

采用jstl、el表达式实现循环遍历top.jsp里存放导航栏信息的<li>标签

top.jsp文件部分代码：

...
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="index">首页</a></li>
				
			<!--采用jstl、el表达式实现循环遍历<li>标签-->
			<!--下面的items、var标签使用 ALT+/ 快捷键可以调出-->
			
			<c:forEach items="${bigTypeList}" var="bigType">
			
				<li>
					<a href="">${
    
    bigType.name}</a>
				</li>
				
			</c:forEach>
...

经过上面的过程，保存一下文件，再启动服务器，数据库，访问一下地址，首页模块的导航栏就完成了
导航完成样式

首页模块-标签栏

思路

标签栏和导航栏的思路基本上没有什么区别，只是需要加一个判断时第几个标签就好了。

前台：

依旧是找到top.js文件
循环遍历存放标签栏信息的<li>标签，过程中动态获取标签名，注意判断时第几个标签，根据判断显示不一样的样式。

后台：

indexServlet
调用service在数据库中查询标签集合
使用session域对象储存数据
请求转发跳转到index.jsp

实操

写tio.jsp的代码，保存即可

top.jsp文件相关代码：

...
		<div id="childNav">
			<div class="wrap">
				<ul class="clearfix">
				
			<!--循环遍历<li>标签-->
			<!--添加varStatus标签和choose标签来判断-->
			<c:forEach items="${tagList}" var="tag" varStatus="status" >
			
	        <!-- 判断 -->
				<c:choose>
					<c:when test="${status.first }">
						<li class="first">
							<a href="${tag.url }" target="_blank">${
    
    tag.name}</a>
						</li>
					</c:when>
				
					<c:when test="${status.last }">
						<li class="last">
							<a href="${tag.url }" target="_blank">${
    
    tag.name}</a>
						</li>
					</c:when>
					
					<c:otherwise>
						<li>
							<a href="${tag.url }" target="_blank">${
    
    tag.name}</a>
						</li>
					</c:otherwise>			
				</c:choose>
			
			</c:forEach>
...

po包下新建一个类Tag.java文件，写功能代码，保存即可；
Tag.java文件代码：

package com.xxx.po;

/**
 * 标签 Bean
 * @author yu
 *
 */

public class Tag {
    
    

	private Integer id;     //主键id
	private String  name;   //名称
	private String url;     //地址
	
	//敲完以上三行代码可以使用ALT+SHIFT+S组合键；
	//选择Generate Getters and Setters...
	//选择Select all；ok后即可自动生成下面的Get、Set方法代码
	
	public Integer getId() {
    
    
		return id;
	}
	public void setId(Integer id) {
    
    
		this.id = id;
	}
	public String getName() {
    
    
		return name;
	}
	public void setName(String name) {
    
    
		this.name = name;
	}
	public String getUrl() {
    
    
		return url;
	}
	public void setUrl(String url) {
    
    
		this.url = url;
	}
	
}

在IndexServlet.java文件中添加代码，和导航栏模块类似分别 Ctrl+1 导包、添加接口，添加方法直到不报错，保存即可。

IndexServlet.java文件更新后的代码：

package com.xxx.servlet;

import java.io.IOException;
import java.util.List;

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 javax.servlet.http.HttpSession;

import org.apache.catalina.filters.RequestDumperFilter;

import com.oracle.jrockit.jfr.RequestableEvent;
import com.xxx.po.BigType;
import com.xxx.po.Tag;
import com.xxx.service.BigTypeService;
import com.xxx.service.TagService;
import com.xxx.service.impl.TagServiceImpl;
import com.xxx.service.impl.bigTypeServiceImpl;

import jdk.nashorn.internal.ir.RuntimeNode.Request;

/**
 * 首页模块
 * 
 */
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
    
    
	private static final long serialVersionUID = 1L;
	
	
	private BigTypeService bigTypeService = new bigTypeServiceImpl();
	
	private TagService  tagService = new TagServiceImpl();
	
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		
		//调用service在数据库中查询大类别集合
		List<BigType> bigTypeList = bigTypeService.findAll();
		
		//调用service在数据库中查询标签集合
		List<Tag> tagList = tagService.findAll();
		
		//使用session域对象储存数据
		HttpSession session = request.getSession();
		
		session.setAttribute("bigTypeList", bigTypeList);
		
		session.setAttribute("tagList",tagList);
		
		//请求转发 跳转index.jsp
		request.getRequestDispatcher("/index.jsp").forward(request, response);
}
}

在TagServiceImpl.java中写功能代码，保存即可；

TagServiceImpl.java文件代码：

package com.xxx.service.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.xxx.po.Tag;
import com.xxx.service.TagService;
import com.xxx.util.DBUtil;

public class TagServiceImpl implements TagService {
    
    

	//查询所有标签集合
	@Override
	public List<Tag> findAll() {
    
    
		// TODO Auto-generated method stub
		
		//new一个list
		List<Tag> list = new ArrayList<>();
		
		Connection conn = null;
		PreparedStatement sta = null;
		ResultSet res = null;
		
		//异常
		try{
    
    
		//数据库操作
		//建立连接
		conn = DBUtil.getConnection();
		
		//编写sql语句
		String sql = "select * from t_tag";
		
		//预编译，防止Sql注入
		sta = conn.prepareStatement(sql);
		
		//执行查询，返回结果集；
		res = sta.executeQuery();
		
		//分析结果集
		while(res.next()){
    
    
			//此处可以简化格式而不像bigTypeServiceImpl.java文件那么繁琐
			//在Tag.java文件里使用Alt+shift+s，选择Generate Constructor using Fields...
			//再次使用Alt+shift+s，选择Generate Constructor from superclass...
			//两者都Select all，OK即可使用下面的格式
			
			//从数据库表里获得数据
			Tag tag = new Tag(res.getInt(1),res.getString(2),res.getString(3));
						
			//获得的数据放在list里
			list.add(tag);
		}
		
		} catch (Exception e){
    
    
			e.printStackTrace();
		}finally{
    
    
			
			//关闭连接
			DBUtil.close(res, sta, conn);
		}
		return list;
	}
}

经过上面的过程，保存一下文件，再重新启动一下服务器，刷新一下地址，首页模块的标签栏也就完成啦
标签栏完成

毕业实习项目-4

毕业实习项目-4

数据库内容

表

表的关系

首页模块-导航栏

思路

实操

首页模块-标签栏

思路

实操

猜你喜欢