JavaWeb07(MVC应用01[家居商城]连接数据库)

news/2024/11/23 9:42:29/

目录

一.什么是MVC设计模式？

 1.2 MVC设计模式有什么优点？

二.MVC运用（家居商城）

2.1 实现登录

2.2 绑定轮播【随机三个商品】

2.2.1 效果预览

index.jsp

 2.3 绑定最新上架&热门家居

2.3.1 效果预览

 2.3.2 代码实现

数据库脚本

 2.4 页面包含

2.4.1 语法

           

2.4.2 处理

注意：${param.key} 相当于request.getParameter("key")用于jsp页面取值

 

  •                                        
  •                         首页(current)                   
  •                    
  •                         分类                   

//登录成功后  跳转到主界面的加载数据处 让首页默认选中

resp.sendRedirect("indedx.do?index=1")

2.5 登录与否判断

--登录了则导航条上出现登录名并不显示登录，而显示退出

            

  •                   退出             
  •    

    req.setCharacterEncoding("utf-8");

    HttpSession session = req.getSession(); session.setAttribute("user", null);

    resp.sendRedirect("login.jsp");

    --没有登录才显示登录，注册选项

                 

  •                             登录            
  •                 
  •                             注册             
  •             

一.什么是MVC设计模式？

 1.2 MVC设计模式有什么优点？

①降低代码耦合性：在MVC模式中，三个层各司其职，所有如果一旦哪一层的需求发生了变化，就只需要更改相应层的代码而不会影响到其他层的代码

②有利于分工合作：在MVC模式中，由于按层把系统分开，那么就能更好的实现开发中的分工，网页设计人员可进行开发视图层中的JSP，而对业务熟悉的人员可开发业务层，而其他开发人员可开发控制层

③有利于组件的重用：如控制层可独立成一个能用的组件，表示层也可做成通用的操作界面，可以为一个模式在运行时同时建立和使用多个视图

二.MVC运用（家居商城）

2.1 实现登录

 

package com.zking.servlet;import java.io.IOException;
import java.io.PrintWriter;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 com.zking.biz.IUserBiz;
import com.zking.biz.UserBiz;
import com.zking.entity.User;/*** 登录业务处理  控制器* @author PC**/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码req.setCharacterEncoding("utf-8");resp.setContentType("text/html; charset=UTF-8");//拿session和outHttpSession session = req.getSession();PrintWriter out = resp.getWriter();//接收表单提交过来的值  用户名  密码String uname=req.getParameter("uname");String upwd=req.getParameter("upwd");//servlet调用bizIUserBiz iub = new UserBiz();//调用登录方法User u = iub.login(uname, upwd);//判断if(u!=null) {//存起来sessionsession.setAttribute("user", u);//键  值//跳转到主界面 index.do加载数据resp.sendRedirect("index.do?index=1");//为了让首页选中}else {out.print("<scrpit>alert('用户名或者密码有误')；location.href='login.jsp';</scrpit>");}}
}

2.2 绑定轮播【随机三个商品】

2.2.1 效果预览

index.jsp


<!--轮播效果 --><div class="container"><div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li><li data-target="#carouselExampleCaptions" data-slide-to="1"></li><li data-target="#carouselExampleCaptions" data-slide-to="2"></li></ol><div class="carousel-inner"><c:forEach items="${lbls}" var="g" varStatus="vs"><div class="carousel-item ${vs.index==0?'active':''}"><img src="${g.gpath}" width="100%" height="500px" alt="..."><div class="carousel-caption d-none d-md-block"><h5>${g.gname}</h5><p>${g.ginfo}</p></div></div></c:forEach>​

 2.3 绑定最新上架&热门家居

2.3.1 效果预览

 2.3.2 代码实现

数据库脚本

--类别表
create table tb_type
(tid   NUMBER,--类别idtname VARCHAR2(20) --类别名称
)
--插入数据
insert into tb_type (tid, tname)
values (1, '布艺软饰');
insert into tb_type (tid, tname)
values (2, '装饰摆件');
insert into tb_type (tid, tname)
values (3, '蜡艺香薰');
insert into tb_type (tid, tname)
values (4, '墙饰壁挂');
insert into tb_type (tid, tname)
values (5, '创意家居');
commit;--商品表 tb_goods
--插入数据
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (1, '商品3', 3, 45.4, 38, '2023-01-01', 'img/bz02.jpg', '不畏将来，不念过往');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (2, '商品2', 4, 29.9, 8, '2022-10-23', 'img/bz04.jpg', '夏天有着迟暮的霞光,正如晚来的你,皆是笑意');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (3, '毛茸茸的小物件', 5, 12.9, 104, '2018-02-04', 'img/bz05.jpg', '世界的温柔，是晚来的善意和干净的你');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (4, '可爱舒适的抱枕', 2, 38.8, 91, '2023-13-09', 'img/bz03.jpg', '人间骄阳正好，风过林梢，彼时还正当年少');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (5, '商品12', 2, 18.8, 45, '2022-01-23', 'img/bz12.jpg', '踏月而来，这繁星便是赠礼');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (6, '商品1', 2, 23.9, 145, '2021-02-23', 'img/bz06.jpg', '你被黑暗敲打恰恰说明你是光明本身');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (7, '商品666', 1, 89.9, 888, '2020-11-22', 'img/bz11.jpg', '回首亘年漫月里所有怦然心动，你仍拨得头筹');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (8, '好看的花呀', 3, 9.9, 666, '2019-02-20', 'img/bz10.jpg', '最美是牵着你的手一路狂奔');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (9, '北欧家具', 1, 4.5, 10, '2022-12-24', 'img/bz08.jpg', '生活很暗，抱歉，我也没光');
insert into tb_goods (gid, gname, tid, gprice, gxl, gtime, gpath, ginfo)
values (10, '商品13', 4, 9.9, 100, '2020-12-20', 'img/bz09.jpg', '清水煮岁月，不悲不喜');
commit;

<!-- 最新上架①或②--><!-- 微章方式 ①--><!-- <div class="h2 " style="margin-top: 10px;"><span class="badge badge-danger ">最新上架</span></div> --><!-- 背景图片方式② --><div class="bq">最新上架</div><div class="row"><c:forEach items="${zxls}" var="g"><div class="col"><!-- 画像  text-center"居中--><figure class="figure  text-center"><!--<a href="xq.do?gid=${g.gid}"> 详情页面 自己写  --><a href="xq.do?gid=${g.gid}">  <img src="${g.gpath}" class="figure-img img-fluid rounded" alt="..."></a><figcaption class="figure-caption"><b>${g.gname}</b>&nbsp;<b>&yen;${g.gprice}</b></figcaption></figure></div></c:forEach></div><!-- 热门家居 --><div class="bq">热门家居</div><div class="row"><c:forEach items="${xlls}" var="g"><div class="col"><!-- 画像  text-center"居中--><figure class="figure  text-center"><!--<a href="xq.do?gid=${g.gid}"> 详情页面 自己写  --><a href="xq.do?gid=${g.gid}"> <img src="${g.gpath}" class="figure-img img-fluid rounded" alt="..."></a><figcaption class="figure-caption"><b>${g.gname}</b>&nbsp;<b>&yen;${g.gprice}</b></figcaption></figure></div></c:forEach></div>

 2.4 页面包含

2.4.1 语法

        <!--页面包含  -->
   <jsp:include page="header.jsp"></jsp:include>

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例1：首页最新上架&热门家居实现</title><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 引入CSS --><link rel="stylesheet" href="CSS/bootstrap.css" /><style>.navbar-collapse {/*1代表弹性扩大占用父容器剩余部分   0代表不占用*/flex-grow: 0;}.active {font-weight: bold;/*加粗*/}</style>
</head><body><!-- 导航条 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">你好<b>${user.uname}</b>,欢迎来到集美家居</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><!-- active激活的 --><li class="nav-item ${param.index==1?'active':''}"><a class="nav-link" href="index.do?index=1">首页<span class="sr-only">(current)</span></a></li><li class="nav-item ${param.index==2?'active':''}"><a class="nav-link" href="type.jsp?index=2">分类</a></li><c:if test="${empty user}"><!--没登录  --><li class="nav-item"><a class="nav-link" href="login.jsp">登录</a></li><li class="nav-item"><a class="nav-link ">注册</a></li></c:if><c:if test="${not empty user}"><!--登录  --><li class="nav-item"><a class="nav-link" href="exit.do">退出</a></li></c:if><li class="nav-item ${param.index==5?'active':''}"><a class="nav-link" href="cart.jsp?index=5">我的购物车</a></li></ul></div></div></nav><!-- 引入jQuery的类库 --><!-- 再引入Bootstrap的类库 --><script src="js/jquery-3.6.4.js"></script><script src="js/bootstrap.js"></script>
</body></html>

2.4.2 处理

注意：${param.key} 相当于request.getParameter("key")用于jsp页面取值

 <ul class="navbar-nav">
                    <!-- active激活的 -->
                    <li class="nav-item ${param.index==1?'active':''}">
                        <a class="nav-link" href="index.do?index=1">首页<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ${param.index==2?'active':''}">
                        <a class="nav-link" href="type.jsp?index=2">分类</a>
                    </li>

</ul>

//登录成功后  跳转到主界面的加载数据处 让首页默认选中

resp.sendRedirect("indedx.do?index=1")

2.5 登录与否判断

--登录了则导航条上出现登录名并不显示登录，而显示退出

  <c:if test="${not empty user}"><!--登录  -->
          <li class="nav-item">
                  <a class="nav-link" href="exit.do">退出</a>
             </li>
    </c:if>

req.setCharacterEncoding("utf-8");

HttpSession session = req.getSession();
 session.setAttribute("user", null);

resp.sendRedirect("login.jsp");

--没有登录才显示登录，注册选项

 <c:if test="${empty user}"><!--没登录  -->
            <li class="nav-item">
                            <a class="nav-link" href="login.jsp">登录</a>
             </li>
                 <li class="nav-item">
                            <a class="nav-link " href="register.jsp">注册</a>
              </li>
            </c:if>


http://www.ppmy.cn/news/63679.html

相关文章

在线UI设计工具都有哪些？如何选择？

在线UI设计工具都有哪些？如何选择？

做UI设计不仅要阅读UI设计技巧文章&#xff0c;还要掌握好用的UI设计工具&#xff0c;增加UI设计的实践经验&#xff0c;从而熟能生巧&#xff0c;提高UI设计效率。 找到一个好的在线UI设计工具&#xff0c;比如鱼遇到水&#xff0c;就会开启高效的UI设计。因此&#xff0c;掌…
阅读更多...
Java线程池详解

Java线程池详解

Java线程池详解 一、简介 Java线程池是Java并发学习中的一个重要知识点&#xff0c;线程池在实际开发过程中有着重要的作用&#xff0c;也是面试过程中重要的考题。 二、线程池运行机制 2.1 主要参数简介 核心线程数 线程池初始化时线程池中线程的数目最大线程数 当队列满…
阅读更多...
Java多线程入门到精通学习大全？了解线程同步和线程间通信的基本原理及代码示例！（第三篇：线程同步知识学习）

Java多线程入门到精通学习大全？了解线程同步和线程间通信的基本原理及代码示例！（第三篇：线程同步知识学习）

Java中的synchronized关键字、wait()、notify()和notifyAll()等方法&#xff0c;是线程同步和线程间通信的基本机制&#xff0c;本文将从原理、解析、代码示例、使用注意事项和总结几个方面进行讲解。 1 原理 Java中的synchronized关键字和wait()、notify()和notifyAll()等方…
阅读更多...
Mac电脑配置李沐深度学习环境[pytorch版本]使用vscode

Mac电脑配置李沐深度学习环境[pytorch版本]使用vscode

文章目录 第一步 M1芯片安装Pytorch环境安装Miniforge创建虚拟环境安装Pytorch 第二步 下载李沐Jupyter文件第三步 配置vscode参考 第一步 M1芯片安装Pytorch环境 安装Miniforge Mac打开终端&#xff08;Mac电脑如何启动终端&#xff1f;打开启动台&#xff0c;搜索终端即可&…
阅读更多...
c++STL之常用的算法

c++STL之常用的算法

目录 常用的遍历算法 for_each() transform() for_each()和transform&#xff08;&#xff09;算法比较 常用的查找算法 adjacent_find() binary_search count() count_if() find() 常用的排序算法 merge() sort() random_shuffle() reverse() 常用的拷…
阅读更多...
OpenCV4.x图像处理实例-搭建身份识别系统

OpenCV4.x图像处理实例-搭建身份识别系统

搭建身份识别系统 文章目录 搭建身份识别系统1、人脸识别系统介绍2、人脸特征数据提取3、人脸识别模型训练4、从静态图像进行身份识别5、从视频流识别身份在本文中，将介绍如何使用 OpenCV 搭建一个人脸检测与身份识别系统。 为了构建我们的人脸识别系统，我们将首先执行人脸检…
阅读更多...
Kotlin的出现无疑是为了超越Java而存在

Kotlin的出现无疑是为了超越Java而存在

Kotlin的出现无疑是为了超越Java而存在。在Google I/O 2017中&#xff0c;Google 宣布 Kotlin 成为 Android 官方开发语言&#xff0c;背景就是Oracle告Google侵权使用java。众所周知&#xff0c;Java的跨平台的开发语言&#xff0c;得益于虚拟机。我比较关注Kotlin用于Android…
阅读更多...
Windows Nvm+Node.js安装

Windows Nvm+Node.js安装

前言 在windows系统下安装的是nvm-windows&#xff0c;nvm只支持安装在在Linux和Mac系统下。之前在Linux上安装过&#xff0c;最近在Windows上安装&#xff0c;特记录一下。 下载 下载地址&#xff1a;传送门 安装Nvm 双击exe文件&#xff0c;选定安装路径&#xff0c;下…
阅读更多...
最新文章

Copyright @ 2022~2023