<%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/6/4 Time: 22:04 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql."%> <html> <head> <title>Title</title> <style> body{ background-color: aquamarine; } .main{ background-color: antiquewhite; margin:0 auto; width:60%; padding-left: 40px; padding-right: 40px; } .main div{ background-color: #F0F8FF; padding:10px; } </style> </head> <body> <% response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("utf-8"); String bookid = request.getParameter("bookid"); Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/book"; String un = "root"; String pass = "root"; Connection con = DriverManager.getConnection(url,un,pass); String sql = "select from books where id = ?" ; PreparedStatement pre = con.prepareStatement(sql); pre.setString(1,bookid); ResultSet rs = pre.executeQuery(); while(rs.next()){ String id = rs.getString("id"); String urls = rs.getString("url"); String name = rs.getString("bookname"); String writer = rs.getString("writer"); String syn = rs.getString("syn"); float price = rs.getFloat("price"); String stock = rs.getString("stock"); %> <form action="BOOKXIUGAI_OK.jsp?id=<%=id%>" method="post"> <div class="main"> <img src="<%=urls%>" width="180" height="256" alt="图片"/> <div>图片：<input type="text" name="urls" value="<%=urls%>"></div> <div>ID：<input type="text" name="id" disabled="disabled" value="<%=id%>"></div> <div>商品名：<input type="text" name="name" value="<%=name%>"></div> <div>品类：<input type="text" name="writer" value="<%=writer%>"></div> <div>简介：<textarea type="text" name="syn" rows="4" cols="50"><%=syn%></textarea></div> <div>价格：<input type="text" name="price" value="<%=price%>">元/件</div> <div> 库存：<input type="text" name="stock" value="<%=stock%>"></div> <div> <input type="submit" name="submit" value="提交"></div> <div> <a href="REMOVEBOOKS.jsp?id=<%=id%>">删除此书</a></div> <div><hr></div> </div> </form> <% }pre.close();rs.close(); %> </body> </html> 简单优化一下不要太复杂

时间: 2025-06-12 19:10:47 浏览: 23

<think>我们将进行简单的优化，主要改进点：1.样式优化：使用更现代化的样式，但保持简单不复杂。2.布局调整：使用flex布局，使表单元素更整齐。3.颜色和字体调整：使用更舒适的颜色和字体。4.按钮样式：改进提交和删除按钮的样式。5.图片预览：添加简单的图片预览功能（当输入图片URL时，图片会更新，但这里我们只做静态显示，因为简单优化，所以用内联样式和少量JavaScript）。注意：我们不会引入外部CSS框架（如Bootstrap），以保持简单。代码优化如下：</think> # 产品编辑页面简单优化以下是基于原始代码的简洁优化方案，保留了原有功能，同时提升了视觉设计和用户体验： ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql.*"%> <html> <head> <title>产品管理 - 编辑</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f0f8ff; padding: 20px; color: #333; line-height: 1.6; } .container { max-width: 600px; margin: 20px auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .header { text-align: center; padding: 15px 0; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; } .header h1 { color: #1e90ff; font-size: 24px; } .form-row { display: flex; flex-wrap: wrap; margin-bottom: 15px; gap: 15px; } .form-group { flex: 1; min-width: 200px; } .form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: #555; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s; } .form-group input:focus, .form-group textarea:focus { border-color: #1e90ff; outline: none; } .form-group input[disabled] { background-color: #f8f8f8; color: #777; } .image-container { text-align: center; margin: 15px 0; padding: 15px; background: #f9f9f9; border-radius: 4px; } .image-container img { max-width: 180px; max-height: 256px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .btn-group { display: flex; gap: 15px; margin-top: 25px; justify-content: center; } .btn-submit { background: #4caf50; color: white; border: none; padding: 12px 30px; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s; flex: 1; } .btn-submit:hover { background: #45a049; } .btn-delete { background: #ff4444; color: white; border: none; padding: 12px 30px; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s; flex: 1; text-decoration: none; text-align: center; } .btn-delete:hover { background: #ff3333; } @media (max-width: 480px) { .container { padding: 15px; } .form-row { flex-direction: column; } .btn-group { flex-direction: column; } } </style> <script> function previewImage(input) { const imgPreview = document.getElementById('previewImg'); if (input.value) { imgPreview.src = input.value; } else { // 设置占位图 imgPreview.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='256' viewBox='0 0 180 256'%3E%3Crect width='100%' height='100%' fill='%23f5f5f5'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='%23999'%3E无图片%3C/text%3E%3C/svg%3E"; } } </script> </head> <body> <% response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("utf-8"); String bookid = request.getParameter("bookid"); Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/book"; String un = "root"; String pass = "root"; Connection con = DriverManager.getConnection(url,un,pass); String sql = "select * from books where id = ?" ; PreparedStatement pre = con.prepareStatement(sql); pre.setString(1,bookid); ResultSet rs = pre.executeQuery(); while(rs.next()){ String id = rs.getString("id"); String urls = rs.getString("url"); String name = rs.getString("bookname"); String writer = rs.getString("writer"); String syn = rs.getString("syn"); float price = rs.getFloat("price"); String stock = rs.getString("stock"); %> <div class="container"> <div class="header"> <h1>产品编辑</h1> </div> <form action="BOOKXIUGAI_OK.jsp?id=<%=id%>" method="post"> <div class="image-container"> <img id="previewImg" src="<%=urls%>" alt="产品图片" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'256\' viewBox=\'0 0 180 256\'%3E%3Crect width=\'100%25\' height=\'100%25\' fill=\'%23f5f5f5\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' fill=\'%23ff4444\'%3E图片加载失败%3C/text%3E%3C/svg%3E'"> </div> <div class="form-row"> <div class="form-group"> <label for="urls">图片URL：</label> <input type="text" id="urls" name="urls" value="<%=urls%>" oninput="previewImage(this)"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="id">产品ID：</label> <input type="text" id="id" name="id" disabled value="<%=id%>"> </div> <div class="form-group"> <label for="name">商品名称：</label> <input type="text" id="name" name="name" value="<%=name%>"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="writer">品类：</label> <input type="text" id="writer" name="writer" value="<%=writer%>"> </div> <div class="form-group"> <label for="price">价格 (元)：</label> <input type="text" id="price" name="price" value="<%=price%>"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="stock">库存：</label> <input type="text" id="stock" name="stock" value="<%=stock%>"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="syn">简介：</label> <textarea id="syn" name="syn" rows="4"><%=syn%></textarea> </div> </div> <div class="btn-group"> <input type="submit" class="btn-submit" value="保存修改"> <a class="btn-delete" href="REMOVEBOOKS.jsp?id=<%=id%>">删除产品</a> </div> </form> </div> <% } pre.close(); rs.close(); %> </body> </html> ``` ## 优化亮点 1. **现代化简洁设计**： - 使用卡片式布局和阴影效果 - 更现代的色彩方案（蓝色主题+绿/红按钮） - 统一的边框圆角和间距 2. **增强的用户体验**： - 添加了图片预览功能 - 输入框获得焦点时显示蓝色边框 - 按钮有悬停效果 - 图片加载失败时显示占位符 3. **响应式布局**： - 在小屏幕上自动调整为单列布局 - 按钮在小屏幕上垂直排列 4. **布局改进**： - 使用flexbox实现灵活的列布局 - 更清晰的分组和标签 - 更现代的按钮样式（绿色提交+红色删除） 5. **功能优化**： - 添加JavaScript实现图片URL实时预览 - 图片加载错误处理 - 统一的字体和配色这个优化版本在保持原功能不变的情况下，大大提升了页面的美观度和用户体验，同时代码结构依然保持简洁易维护。

阅读全文

相关推荐

IDEA遇到Internal error. Please refer to http://jb. gg/ide/critical-startup-errors的问题及解决办法

aesjava源码-THIS-.-IS-GREAT-:////IntelliJIDEA从.class文件重新创建的源代码//（由Fernflo

解决IntelliJ IDEA创建spring boot无法连接http://start.spring.io/问题

lombok-plugin-0.15.17- IntelliJ IDEA 2017.2.6 x64

a-file-icon-idea：IntelliJ IDEA产品的Atom File Icons插件

intellij-idea-plugin:JBoss Forge IntelliJ IDEA插件

IntelliJ-IDEA-教程：IntelliJ IDEA简体中文专题教程

idea-gradle-javaee-template:IntelliJ IDEA和Gradle的JavaEE-Glassfish应用模板项目

aem-ide-tooling-4-intellij:用于Intellij IDEA的AEM工具插件

intellij-junit-smart-run-config-template：一个IntelliJ IDEA插件，用于添加具有JUnit测试通用选项的运行配置模板

go-builder-generator-idea-plugin:IntelliJ IDEA GoLand golang插件，用于生成golang结构的Builder模式代码

camel-idea-plugin, Apache camel IntelliJ IDEA 插件.zip

IntelliJ-EmmyLua：用于IntelliJ IDEA的Lua IDEDebugger插件

IntelliJIDEA-setting-sync:IntelliJ IDEA设置同步

spring-boot-intellij-idea-webinar:“IntelliJ IDEA 14.1 中的 Spring Boot 支持”网络研讨会期间使用的示例应用程序

计算机后端-Java-Java核心基础-第20章 多线程 02. 复习：IDEA使用与多线程基本概念.avi

idea-gitignore：IntelliJ IDEA的.ignore支持插件

intellij-postfix-templates:Intellij IDEA的自定义Postfix模板

intellij-extra-toolwindow-colorful-icons:based基于IntelliJ IDEA的IDE插件，使工具窗口图标变彩色。 该插件基于ToolWindow Colorful Icons插件，并添加了一些其他图标

intersystems-cache-intellij-plugin:用于在 IntelliJ IDEA 中开发 InterSystems Caché 项目的插件

大家在看

MMC.rar_NEC mmc-1_nec-m

tibco rv 发送与接收Demo

GPRS网络信令实例详解

问卷量表信效度检验的软件实现SPSSAmos推选PPT文档.pptx

vb编写的 实时曲线图

最新推荐

IDEA遇到Internal error. Please refer to http://jb. gg/ide/critical-startup-errors的问题及解决办法

IntelliJ IDEA引入第三方jar包或查看Java源码的时候报decompiled.class file bytecode version:52.0(java 8)错误的解决办法

IntelliJ IDEA报错Error:java: Compilation failed: internal java compiler error的解决办法

SVN出现提示org.apache.subversion.javahl.ClientException: Attempted to lock an already-locked dir解决方案

解决IDEA错误 Cause: java.sql.SQLException: The server time zone value的问题

Web2.0新特征图解解析

【C++编程新手必看】：一步步带你制作出风靡全球的“别踩白块儿”游戏

使用scikit-learn训练模型来预测鸢尾花种类

WWF工作流设计器C#源码解析及演示

CAD数据在ANSA中：完美修复几何数据的策略与方法

计算机后端-Java-Java核心基础-第20章多线程 02. 复习：IDEA使用与多线程基本概念.avi

intellij-extra-toolwindow-colorful-icons:based基于IntelliJ IDEA的IDE插件，使工具窗口图标变彩色。该插件基于ToolWindow Colorful Icons插件，并添加了一些其他图标

vb编写的实时曲线图