学习目标

（1）数据是最重要的
（2）开发一层测试一层
（3）基础：登录

导航开发

导航后台代码开发

（1）CateogryServiceTest
（2）CateogryService
（3）CateogryDao
（4）CateogryDaoTest
（5）CateogryServlet

1 CategoryServiceTest

public class TestCategoryService {@Testpublic void test01(){//创建业务对象CategoryService categoryService = new CategoryService();//所有的分类List<Category> categoryList=categoryService.findAll();//显示System.out.println(categoryList);}
}

2 CategoryService

public class CategoryService {public List<Category> findAll() {//调用daoCategoryDao dao = MySessionUtils2.getMapper(CategoryDao.class);//查询所有的分类数据List<Category> list =  dao.findAll();return list;}
}

3 CategoryDao

public interface CategoryDao {//select * from tab_category order by cid asc;List<Category> findAll();
}

com\wzx\dao\CategoryDao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzx.dao.CategoryDao"><select id="findAll" resultType="category">select * from tab_category order by cid asc;</select></mapper>

SqlMapConfig.xml

<!--   一个mapper标签可以指定一个映射文件--><mappers><mapper resource="com/wzx/dao/UserDao.xml"/><mapper resource="com/wzx/dao/CategoryDao.xml"/></mappers>

3 CategoryServlet

@WebServlet("/categoryServlet")
public class CategoryServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建业务对象CategoryService categoryService = new CategoryService();//所有的分类List<Category> categoryList=categoryService.findAll();//显示ResponseInfo info = new ResponseInfo();info.setCode(200);info.setData(categoryList);String json = new ObjectMapper().writeValueAsString(info);response.getWriter().println(json);}
}

导航前台代码开发

（1）header.jsp
（2）ajax发送get请求
（3）jquery的for循环
（4）html()函数修改界面

header.jsp

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function () {//页面加载成功之后执行$.get("categoryServlet",function (data) { //这个data就是服务器返回的字符串if (data.code == 200) {var list = data.data;//定义一个变量，拼接导航的显示内容  livar lis = "";//拼接第一项lis += '<li class="nav-active"><a href="index.jsp">首页</a></li>'//循环所有的分类for (var i = 0; i < list.length; i++) {//在js中，使用引号号表示字符串，避免生成转译的\var li = '<li><a href="route_list.html">' + list[i].cname + '</a></li>'lis += li}//拼接最后一项lis += ' <li><a href="favoriterank.html">收藏排行榜</a></li>'//显示在ul标签里面$("#nav").html(lis)}},"json");})
</script>

在js中，使用引号号表示字符串，避免生成转译的\
在js中的字符串拼接变量 ' + 变量名 + '

导航优化

redis缓存json

（1）哪个地方要优化？为什么？
分类的数据在每一次页面加载后都会重新请求数据库来加载，对数据库的压力比较大，而且分类的数据不会经常产生变化，所有可以使用redis来缓存这个数据。
（2）redis缓存的流程
》先访问redis获取数据
》对数据进行判断
如果不为null，则直接返回
否则调用service查数据库

redis使用

redis服务器
redis图形化工具
JedisUtil工具读写数据
直接复到项目中
jedis.properties

host=192.168.21.101
port=6379
maxTotal=100
maxIdle=10

CategoryServlet使用redis

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//访问redis 较快,但是第一次是没有数据的//访问service，获取json，将json保存到redisJedis jedis = JedisUtil.getJedis();String json = jedis.get("category_list");if (json != null) {System.out.println("redis cache");response.getWriter().println(json);} else {System.out.println("mysql data");//创建业务对象CategoryService categoryService = new CategoryService();//所有的分类List<Category> categoryList=categoryService.findAll();//显示ResponseInfo info = new ResponseInfo();info.setCode(200);info.setData(categoryList);json = new ObjectMapper().writeValueAsString(info);//将数据保存到redisjedis.set("category_list",json);response.getWriter().println(json);}//关闭连接JedisUtil.close(jedis);}

途牛旅游项目——动态导航栏相关推荐

A.3 实验3：动态导航栏
A.3 实验3:动态导航栏 A.3.1 目的与要求 A.3.2 实验内容本实验创建学生-教师子系统的3个动态导航栏模块文件: (1) navigation.php:主导航栏模块文件,用于学生一教师子 ...
【途牛旅游项目】项目环境搭建，实现登陆功能
项目准备熟悉静态页面查看真实在线的途牛旅游项目其实也是一个商城而已,重点项目搭建,核心模块:登录前言 (1)前言为了巩固web基础知识,提升综合运用能力,故而讲解此案例. 要求,每位同学能够 ...
途牛旅游项目环境搭建
途牛旅游项目环境搭建准备工作项目演示熟悉静态页面查看真实在线的途牛旅游项目其实也是一个商城而已重点项目搭建,核心模块:登录准备工作三层架构 (1)三层架构 (2)目录结构: 准备工作 ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
Vue项目设置导航栏高亮
Vue实现点击切换导航栏效果编译环境 Vue2.x 版本期待实现的效果图解决思路通过设置动态class的方式,通过点击传递此时所点击item的索引值,当索引值和所设置的初始值相等时,动态cla ...
Axure 9实现左侧动态导航栏
目前很多B端产品都是基于左侧的导航栏,有研究表明导航栏放在左侧效率更高.那基于Axure怎么能够实现呢,其实只需要动态面板组件就可以搞定. 1.首先,拖入四个矩形组件,如下图所示,第一个矩形取名为一级 ...
【途牛旅游项目】01 - 项目环境准备，实现登录功能
文章目录模仿途牛旅游网站的一个项目项目初始化,目录结构导入pom.xml依赖创建数据库模仿途牛旅游网站的一个项目途牛地址:https://www.tuniu.com 项目初始化,目录结构 ...
途牛旅游项目——注册邮箱激活
UUID介绍 (1)什么是uuid 全球唯一的,不会重复的固定长度的随机字符串 25fd9bcf50ad4dc39aa38f084d1801c8 (2)复制UUI工具类 com\wzx\util\U ...
【途牛旅游项目】02 - 登录功能实现 - 验证码功能 - ajax实现登录
文章目录登录功能分析图解最终实现截图实现登录功能 1. 创建测试类 2. 创建业务层UserService 3. 创建实体类 - User用户类和Msg错误提示类 4. 创建dao层 5. 创建 ...

途牛旅游项目——动态导航栏

学习目标

导航开发

导航后台代码开发

1 CategoryServiceTest

2 CategoryService

3 CategoryDao

3 CategoryServlet

导航前台代码开发

导航优化

redis缓存json

redis使用

CategoryServlet使用redis

途牛旅游项目——动态导航栏相关推荐

最新文章

热门文章