预览效果无效

预览效果无效

http://img1.sycdn.imooc.com//climg/60baf2a509c3378909250633.jpg

http://img1.sycdn.imooc.com//climg/60baf2d10950b17f06970237.jpg

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门户数据管理平台</title>
    <style>
        body{
            margin: 0 auto;
        }
        a{
           text-decoration: none;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
 
        .pg_header{
            position: fixed;
            top: 0;
            width: 100%;
            height: 48px;
            background-color: lightseagreen;
            color: white;
            z-index: 10;
        }
        .pg_header .logo{
            height: 48px;
            width: 200px;
            text-align: center;
            color: white;
        }
        .pg_header .logo a img{
            height: 48px;
            width: 200px;
            cursor: pointer;
        }
        .pg_header .person_info{
            position: relative;
            height: 48px;
            width: 160px;
            /*text-align: center;*/
        }
        .pg_header .person_info img{
            border: 0;
            height: 48px;
            width: 50px;
            /*使用border-radius可以定义边框的圆角程度*/
            border-radius: 50%;
        }
        .pg_header .person_info .info{
            position: absolute;
            width: 150px;
            background-color: lightseagreen;
            top: 50px;
            z-index: 20;
            display: none;
        }
        .pg_header .person_info .info a{
            display: block;
            color: white;
            padding: 5px;
        }
        .pg_header .person_info:hover .info{
            display: block;
        }
        .pg_header .icons{
            line-height: 48px;
            padding: 0 20px 0 5px;
        }
        .pg_header .icons:hover{
            background-color: lightseagreen;
        }
        .pg_header .icons span{
            padding: 1px 5px;
            line-height: 1px;
            border-radius: 50%;
            background-color: red;
            font-size: 12px;
        }
        .pg_content .menu{
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 300px;
            border:0px;
            border-right: 1px solid #ccc;
        }
        .pg_content .content{
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 302px;
            overflow: auto;
            min-width: 980px;
            z-index: 8;
            border:0px;
            overflow: hidden;
        }
        .menu_item{
           display: block;
           padding: 10px 20px;
           border-bottom: 1px solid #ccc;
           font-size: 20px; 
           color: #666666;
        }
        
        .menu_item:hover{
           color: white;
           background: lightseagreen;
        }
    </style>
</head>
<body>
   <!-- 顶端导航栏 -->
    <div class="pg_header">
      <!-- Logo与名称 -->
        <div class="logo left">
            <a href="javascript:void(0)" target="_blank">
                <img src="image/logo_1.png">    
            </a>
            
        </div>
      
      <!-- 用户头像与菜单 -->
        <div class="person_info right" style="vertical-align: top;" >
            <img src="image/head.png">
            <span style="line-height: 50px;vertical-align: top;">小企鹅</span>
            <div class="info">
                <a href="javascript:void(0)">我的信息</a>
                <a href="javascript:void(0)">修改密码</a>
                <a href="javascript:void(0)">注销</a>
            </div>
        </div>
        <div class="icons right">
            <i class="far fa-bell"></i>
        </div>
    </div>
    <div class="pg_content">
      <!-- 左侧功能区菜单 -->
        <div class="menu">
           <a href = "/management?method=list" class="menu_item" target="ifcontent">油画列表</a>
           <a href = "#" class="menu_item" target="ifcontent">新增作品</a>
        </div>
      <!-- 主体框架 -->
        <div class="content">
         <iframe name="ifcontent" style="width:100%;height:100%;overflow-y: hidden;border:0px;min-width: 800px;" src="/management?method=list"></iframe>
        </div>
    </div>
</body>
</html>

相关代码：

<%@page contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>油画列表</title>
   <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
   <script src="js/sweetalert2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\list.css">
   <script type="text/javascript">
      function showPreview(){
         Swal.fire({
            title:"测试油画",
            html:"<img src='upload/1.jpg' style='width: 361px;height: 240px'>",
            showCloseButton: true,
            showConfirmButton: false
         })
      }

   </script>
</head>
<body>
   <div class="container">
      <fieldset>
         <legend>油画列表</legend>
         <div style="height: 40px">
            <a href="#" class="btn-button">新增</a>
         </div>
         <!-- 油画列表 -->
         <table cellspacing="0px">
            <thead>
               <tr style="width: 150px;">
                  <th style="width: 100px">分类</th>
                  <th style="width: 150px;">名称</th>
                  <th style="width: 100px;">价格</th>
                  <th style="width: 400px">描述</th>
                  <th style="width: 100px">操作</th>
               </tr>
            </thead>
               <c:forEach items="${pageModel.pageData}" var="painting">
                  <tr>
                     <td>
                        <c:choose>
                           <c:when test="${painting.category==1}">现实主义</c:when>
                           <c:when test="${painting.category==2}">抽象主义</c:when>
                           <c:otherwise>未知类型</c:otherwise>
                        </c:choose>
                     </td>
                     <td>${painting.pname}</td>
                     <td><fmt:formatNumber pattern="￥0.00" value="${painting.price}"></fmt:formatNumber></td>
                     <td>${painting.description}</td>
                     <td>
                        <a class="oplink" href="javascript:void(0)" onclick="showPreview()">预览</a>
                        <a class="oplink" href="#">修改</a>
                        <a class="oplink" href="#">删除</a>
                     </td>
                  </tr>
               </c:forEach>
         </table>
         <!-- 分页组件 -->
         <ul class="page">
            <li><a href="/management?method=list&p=1">首页</a></li>
            <li><a href="/management?method=list&p=${pageModel.hasPreviousPage?pageModel.page-1:1}">上页</a></li>
            <c:forEach begin="1" end="${pageModel.totalPages}" step="1" var="pno">
               <li${pno==pageModel.page?"class='active'":""}>
                     <a href="/management?method=list&p=${pno}">
                           ${pno}
                     </a>
               </li>
            </c:forEach>
            <li><a href="/management?method=list&p=${pageModel.hasNextPage?pageModel.page+1:pageModel.totalPages}">下页</a></li>
            <li><a href="/management?method=list&p=${pageModel.totalPages}">尾页</a></li>
         </ul>
      </fieldset>
   </div>

</body>
</html>

相关代码：

package com.example.mgallery1.controller;

import com.example.mgallery1.service.PaintingService;
import com.example.mgallery1.utils.PageModel;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;

import java.io.IOException;

/**
 * 后台管理功能
 */

@WebServlet(name = "management", value = "/management")
public class ManagementController extends HttpServlet {
    private PaintingService paintingService=new PaintingService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8" );
        String method=request.getParameter("method");
        if(method.equals("list")){
            this.list(request,response);
        }else if (method.equals("delete")){
            //this.delete(request,response);
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
    private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String p=request.getParameter("p");
        String r=request.getParameter("r");
        if (p==null){
            p="1";
        }
        if (r==null){
            r="6";
        }
       PageModel pageModel= paintingService.pagination(Integer.parseInt(p),Integer.parseInt(r));
        request.setAttribute("pageModel",pageModel);
        request.getRequestDispatcher("/list.jsp").forward(request,response);
    }
}

相关代码：

package com.example.mgallery1.controller;

import com.example.mgallery1.service.PaintingService;
import com.example.mgallery1.utils.PageModel;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet(name = "page", value = "/page")
public class PaintingController extends HttpServlet {
    private PaintingService paintingService=new PaintingService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String page=request.getParameter("p");
        String rows=request.getParameter("r");
        String category=request.getParameter("c");
        if (page==null){
            page="1";
        }
        if (rows==null){
            rows="6";
        }
        PageModel pageModel=paintingService.pagination(Integer.parseInt(page),Integer.parseInt(rows),category);
        request.setAttribute("pageModel",pageModel);
        request.getRequestDispatcher("/index.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

相关代码：

package com.example.mgallery1.service;

import com.example.mgallery1.dao.PaintingDao;
import com.example.mgallery1.entity.Painting;
import com.example.mgallery1.utils.PageModel;

import java.util.List;

public class PaintingService {
    private PaintingDao paintingDao=new PaintingDao();
    public PageModel pagination(int page,int rows,String...category){
        if (rows==0){
            throw new RuntimeException("无效的rows参数");
        }
        if (category.length==0||category[0]==null) {
            return paintingDao.pagination(page, rows);
        }else{
            return paintingDao.pagination(Integer.parseInt(category[0]),page,rows);
        }
    }

    public static void main(String[] args) {
        PaintingService paintingService=new PaintingService();
        PageModel pageModel=paintingService.pagination(2,6);
        List<Painting> paintingList= pageModel.getPageData();
        for (Painting painting:paintingList){
            System.out.println(painting.getPname());
        }
        System.out.println(pageModel.getPageStartRow()+":"+pageModel.getPageEndRow());
    }
}


相关代码：

package com.example.mgallery1.dao;

import com.example.mgallery1.entity.Painting;
import com.example.mgallery1.utils.PageModel;
import com.example.mgallery1.utils.XmlDataSource;

import java.util.ArrayList;
import java.util.List;

public class PaintingDao {
    /**
     * 分页油画查询数据
     * @param page页号
     * @param rows每页记录数
     * @return 分页对象
     */
    public PageModel pagination(int page,int rows){
        List<Painting> list= XmlDataSource.getRawData();
        PageModel pageModel=new PageModel(list,page,rows);
        return pageModel;
    }

    /**
     * 按类别分页查询
     * @param category分类编号
     * @param page页号
     * @param rows每页记录数
     * @return
     */
    public PageModel pagination(int category,int page,int rows){
        List<Painting> list=XmlDataSource.getRawData();
        List<Painting> categoryList=new ArrayList<>();
        for(Painting p:list){
            if(p.getCategory()==category){
                categoryList.add(p);
            }
        }
        PageModel pageModel=new PageModel(categoryList,page,rows);
        return pageModel;
    }
}

相关代码：

package com.example.mgallery1.entity;

public class Painting {
    private Integer id;//油画编号
    private String pname;//名称
    private Integer category;//分类 现实主义 抽象主义
    private Integer price;//价格
    private String preview;//油画图片地址
    private String description;//描述


    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public Integer getCategory() {
        return category;
    }

    public void setCategory(Integer category) {
        this.category = category;
    }

    public Integer getPrice() {
        return price;
    }

    public void setPrice(Integer price) {
        this.price = price;
    }

    public String getPreview() {
        return preview;
    }

    public void setPreview(String preview) {
        this.preview = preview;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

相关代码：

package com.example.mgallery1.utils;


import java.util.ArrayList;
import java.util.List;

public class PageModel {
    private int page;//读取第几页
    private int totalPages;//总共多少页
    private int rows;//每页有几条数据
    private int totalRows;//原始数据总共有几条
    private int pageStartRow;//表示当前页从原始数据的第几条开始的
    private int pageEndRow;//表示当前页从原始数据的第几条结束
    private boolean hasNextPage;//是否存在下一页
    private boolean hasPreviousPage;//是否存在上一页
    private List pageData;//当前页面的数据

    public PageModel(){

    }
    public PageModel(List data,int page,int rows){
    this.page=page;
    this.rows=rows;
    totalRows=data.size();
    //java中两个整数相除只会得到整数部分，需要转为浮点数运算
    totalPages=new Double(Math.ceil(totalRows/(rows*1f))).intValue();
    pageStartRow=(page-1)*rows;
    pageEndRow=page*rows;
    if(pageEndRow>totalRows){
        pageEndRow=totalRows;
    }
    pageData=data.subList(pageStartRow,pageEndRow);
    if (page>1){
        hasPreviousPage=true;
    }else{
        hasPreviousPage=false;
    }
    if(page<totalPages){
        hasNextPage=true;
    }else {
        hasNextPage=false;
    }
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getTotalPages() {
        return totalPages;
    }

    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public int getTotalRows() {
        return totalRows;
    }

    public void setTotalRows(int totalRows) {
        this.totalRows = totalRows;
    }

    public int getPageStartRow() {
        return pageStartRow;
    }

    public void setPageStartRow(int pageStartRow) {
        this.pageStartRow = pageStartRow;
    }

    public int getPageEndRow() {
        return pageEndRow;
    }

    public void setPageEndRow(int pageEndRow) {
        this.pageEndRow = pageEndRow;
    }

    public boolean isHasNextPage() {
        return hasNextPage;
    }

    public void setHasNextPage(boolean hasNextPage) {
        this.hasNextPage = hasNextPage;
    }

    public boolean isHasPreviousPage() {
        return hasPreviousPage;
    }

    public void setHasPreviousPage(boolean hasPreviousPage) {
        this.hasPreviousPage = hasPreviousPage;
    }

    public List getPageData() {
        return pageData;
    }

    public void setPageData(List pageData) {
        this.pageData = pageData;
    }

    public static void main(String[] args) {
        List sample=new ArrayList();
        for (int i = 1; i <= 100; i++) {
            sample.add(i);
        }
        PageModel pageModel=new PageModel(sample,6,8);
        System.out.println(pageModel.getPageData());
        System.out.println(pageModel.getTotalPages());
        System.out.println(pageModel.getPageStartRow()+":"+pageModel.getPageEndRow());

    }
}

相关代码：

package com.example.mgallery1.utils;

import com.example.mgallery1.entity.Painting;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;

import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.List;

/**
 * 数据源类，用于将xml文件接续为java对象
 */
public class XmlDataSource {
    //通过static静态关键字保证数据全局唯一
    private static List<Painting> data = new ArrayList();
    private static String dataFile;
    static {
        dataFile = XmlDataSource.class.getResource("/painting.xml").getPath();
        URLDecoder decoder=new URLDecoder();
        try {
            dataFile= decoder.decode(dataFile,"utf-8");
            System.out.println(dataFile);
            //利用dom4j对XML进行解析，创建XML解析对象SAXReader
            SAXReader reader=new SAXReader();
            //获取document文档对象
            Document document=reader.read(dataFile);
            //Xpath获取XML节点集合
            List<Node> nodes=document.selectNodes("/root/painting");
            for (Node node:nodes){
                Element element=(Element)node;
                String id=element.attributeValue("id");
                String pname= element.elementText("pname");
                Painting painting=new Painting();
                painting.setId(Integer.parseInt(id));
                painting.setPname(pname);
                painting.setCategory(Integer.parseInt(element.elementText("category")));
                painting.setPrice(Integer.parseInt(element.elementText("price")));
                painting.setPreview(element.elementText("preview"));
                painting.setDescription(element.elementText("description"));
                data.add(painting);
              //  System.out.println(id+":"+pname);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
    public static List<Painting> getRawData(){
        return data;
    }

    public static void main(String[] args) {

        //new XmlDataSource();
        List<Painting> ps=XmlDataSource.getRawData();
        System.out.println(ps);
    }
}

问题描述：

老师好，有三个问题需要帮忙解决，找了一上午没有找出哪里出了问题，一是左上角门户管理平台为什么没有显示出来啊，二是分页的那个123有一个跑出外面去了，三是预览效果无效，该怎么解决啊
____xyz 2021-06-05
源自：企业门户网站前后台开发   4-4 利用SweetAlert实现预览功能
16
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕阿园 回答被采纳获得+3积分 2021-06-05 19:05:19

同学你好

1、看到同学的另一个问答中的显示问题已经解决

2、1跑外面是由于同学li标签跟$中间少个空格，同学添加试试

http://img1.sycdn.imooc.com//climg/60bb5479096907c901590055.jpg

3、预览无效是因为同学预览的代码书写有误，同学可试试如下代码

<a class="oplink" data-preview="${painting.preview}" data-pname="${painting.pname }" href="javascript:void(0)" onclick="showPreview(this)">预览</a>

​祝学习愉快~

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

此处的主题AS 中是否提供预览效果?
16 0 6
tranlate3d的效果显示不出来
13 0 5
pc网站开发时，一边敲代码，同时直接看到效果的操作
30 0 3
为什么在chrome页面上无法看到atom上的效果呢？
10 0 3
浏览器看不到3D效果
17 0 5

登录后可查看更多问答，登录/注册

java工程师2020版
  • 参与学习           人
  • 提交作业       9410    份
  • 解答问题       16556    个

综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪

了解课程

本课精华内容

问答 作业

安装了MySQL 之后有时候自己会跳出来个黑窗口是为什么呢？

80 1

什么时候用List中的ArrayList呢，什么时候用HashSet，什么时候应该用HashMap

81 1

创建字符串的过程理解

62 1

如何干净的卸载数据库

135 1

请教一下没太懂

48 3

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师