index.jsp item-add.jsp

最新推荐文章于 2022-04-06 22:51:21 发布
最新推荐文章于 2022-04-06 22:51:21 发布
阅读量501 收藏
点赞数
分类专栏： java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/live801/article/details/103849488
版权

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>淘淘商城后台管理系统</title>
<link rel="stylesheet" type="text/css"
    href="js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
    href="js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="css/taotao.css" />
<script type="text/javascript"
    src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
    src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style type="text/css">
.content {
    padding: 10px 10px 10px 10px;
}
</style>
</head>
<body class="easyui-layout">
    <div data-options="region:'west',title:'菜单',split:true"
        style="width:180px;">
        <ul id="menu" class="easyui-tree"
            style="margin-top: 10px;margin-left: 5px;">
            <li><span>商品管理</span>
                <ul>
                    <li data-options="attributes:{'url':'item-add'}">新增商品</li>
                    <li data-options="attributes:{'url':'item-list'}">查询商品</li>
                    <li data-options="attributes:{'url':'item-param-list'}">规格参数</li>
                </ul></li>
            <li><span>网站内容管理</span>
                <ul>
                    <li data-options="attributes:{'url':'content-category'}">内容分类管理</li>
                    <li data-options="attributes:{'url':'content'}">内容管理</li>
                </ul></li>
        </ul>
    </div>
    <div data-options="region:'center',title:''">
        <div id="tabs" class="easyui-tabs">
            <div title="首页" style="padding:20px;"></div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            $('#menu').tree({
                onClick : function(node) {
                    if ($('#menu').tree("isLeaf", node.target)) {
                        var tabs = $("#tabs");
                        var tab = tabs.tabs("getTab", node.text);
                        if (tab) {
                            tabs.tabs("select", node.text);
                        } else {
                            tabs.tabs('add', {
                                title : node.text,
                                href : node.attributes.url,
                                closable : true,
                                bodyCls : "content"
                            });
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

item-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
    <form id="itemAddForm" class="itemForm" method="post">
        <table cellpadding="5">
            <tr>
                <td>商品类目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>
                </td>
            </tr> 
            <tr>
                <td>商品标题:</td>
                <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品卖点:</td>
                <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品价格:</td>
                <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
                    <input type="hidden" name="price"/>
                </td>
            </tr>
            <tr>
                <td>库存数量:</td>
                <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
            </tr>
            <tr>
                <td>条形码:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
                </td>
            </tr>
            <tr>
                <td>商品图片:</td>
                <td>
                     <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
                     <input type="hidden" name="image"/>
                </td>
            </tr>
            <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
            <tr class="params hide">
                <td>商品规格:</td>
                <td>
                    
                </td>
            </tr>
        </table>
        <input type="hidden" name="itemParams"/>
    </form>
    <div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
    </div>
</div>
<script type="text/javascript">
    var itemAddEditor ;
    //页面初始化完毕后执行此方法
    $(function(){
        //创建富文本编辑器
        itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        //初始化类目选择和图片上传器
        TAOTAO.init({fun:function(node){
            //根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。
            TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });
    //提交表单
    function submitForm(){
        //有效性验证
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        //取商品价格，单位为“分”
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        //同步文本框中的商品描述
        itemAddEditor.sync();
        
        //取商品的规格
        var paramJson = [];
        $("#itemAddForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        //把json对象转换成字符串
        paramJson = JSON.stringify(paramJson);
        $("#itemAddForm [name=itemParams]").val(paramJson);

        //ajax的post方式提交表单
        //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }
        });
    }
    
    function clearForm(){
        $('#itemAddForm').form('reset');
        itemAddEditor.html('');
    }
</script>

 

item-edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
    <form id="itemeEditForm" class="itemForm" method="post">
        <input type="hidden" name="id"/>
        <table cellpadding="5">
            <tr>
                <td>商品类目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>    
                </td>
            </tr>
            <tr>
                <td>商品标题:</td>
                <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品卖点:</td>
                <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品价格:</td>
                <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
                    <input type="hidden" name="price"/>
                </td>
            </tr>
            <tr>
                <td>库存数量:</td>
                <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
            </tr>
            <tr>
                <td>条形码:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
                </td>
            </tr>
            <tr>
                <td>商品图片:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
                    <input type="hidden" name="image"/>
                </td>
            </tr>
            <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
            <tr class="params hide">
                <td>商品规格:</td>
                <td>
                    
                </td>
            </tr>
        </table>
        <input type="hidden" name="itemParams"/>
        <input type="hidden" name="itemParamId"/>
    </form>
    <div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
    </div>
</div>
<script type="text/javascript">
    var itemEditEditor ;
    $(function(){
        //实例化编辑器
        itemEditEditor = TAOTAO.createEditor("#itemeEditForm [name=desc]");
    });
    
    function submitForm(){
        if(!$('#itemeEditForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        $("#itemeEditForm [name=price]").val(eval($("#itemeEditForm [name=priceView]").val()) * 1000);
        itemEditEditor.sync();
        
        var paramJson = [];
        $("#itemeEditForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        paramJson = JSON.stringify(paramJson);
        
        $("#itemeEditForm [name=itemParams]").val(paramJson);
        
        $.post("/rest/item/update",$("#itemeEditForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','修改商品成功!','info',function(){
                    $("#itemEditWindow").window('close');
                    $("#itemList").datagrid("reload");
                });
            }
        });
    }
</script>
 

live801
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP-JavaBean 简单实现初学购物车功能
11-28
3. **创建JSP页面**：使用JSP创建用户界面，如`index.jsp`，展示商品列表并提供添加到购物车的按钮。按钮的点击事件会调用一个Servlet或者Action，该Servlet/Action负责处理添加到购物车的请求。 ```jsp ; charset=...
字典添加数据_Excel VBA解读（159）： 数据结构—字典对象的基本操作
weixin_30954879的博客
01-11 2138
学习Excel技术，关注微信公众号：excelperfect本文详细讲解Dictionary对象的一些基本操作。添加字典元素使用Add方法，添加字典元素项。其语法为：字典对象.Add Key, ItemAdd方法有两个参数。参数Key指定字典元素项的键值，参数Item指定字典元素项的值。如下面的代码：Sub testAddItem() Dim dict As Object S...
学习淘淘商城第二十三课（添加商品的实现）
u012453843的专栏
04-15 4976
上节课我们一起学习了富文本编辑器的使用，这节课我们一起学习下商品添加的实现。       在item-add.jsp当中，当点击提交按钮后，会触发submitForm方法，如下图所示。        在提交表单前需要校验输入的内容是否合法，如下图所示。        下面我们看下数据库中商品表的建表信息，可以看到价格定义的字段类型是long型，单位为分，之所以这样做是为了避免
jsp标签02
hjzhzhshhs的博客
04-06 532
foreach标签的流程： ①、编写助手类 public class ForeachTag extends BodyTagSupport { //存放数据源 private List<?> items; //每次循环获取的对象放入pageContext中，并以var属性的值为key进行保存 //示例： 页面上标签var属性指定为item，则每次循环取出的对象（obj）将执行如下： //pageContext.setAttribute...
jsp页经典面试题java程序员面试经常考到的面试题总结.pdf
07-14
jsp可以使用内置的request对象来处理html表单中的数据，例如：<% String item = request.getParameter("item"); int howMany = new Integer(request.getParameter("units")).intValue(); %>。request对象提供了多种...
各种 jsp J2EE 面试题目
01-05
- JSP通过内置的`request`对象获取表单数据，例如`request.getParameter("item")`获取名为"item"的参数值。 4. **静态与动态包含**： - 静态包含使用`<%@ include file="copyright.html" %>`，而动态包含使用`...
JSP常见问题
10-08
通过内置的request对象即可，如下：<% String item = request.getParameter("item");int howMany = new Integer(request.getParameter("units")).intValue();%> 4. 在JSP如何包含一个静态文件？ 静态包含如下：...
jsp经典面试题！！！
02-26
JSP可以通过内置的request对象来处理HTML FORM中的数据，例如：<% String item = request.getParameter("item"); int howMany = new Integer(request.getParameter("units")).intValue(); %>。这将获取FORM中的参数...
商品展示系统JSP项目
02-07
这个是我写的一个小项目，适合学习中的朋友们看，通俗易懂，希望能给大家带来帮助！为了学习交流，我的邮箱：2008diyiming@sina.com有什么建议邮件联系
Jsp动态网站初步项目 --简单的商品浏览页面 （Item商品类）
11-09 1249
package com.bean; public class Item { private int id;//商品编号 private String name;//商品名称 private String city;//商品归属地 private int price;//商品价格 private String image;//商品图片 public Item() { // TODO
深入分析JavaWeb Item15 -- jsp标签
小平果的欢乐谷
12-10 1629
一、JSP标签介绍　　JSP标签也称之为Jsp Action(JSP动作)元素，它用于在Jsp页面中提供业务逻辑功能，避免在JSP页面中直接编写java代码，造成jsp页面难以维护。二、JSP常用标签　　jsp的常用标签有以下三个 <jsp:include>标签 <jsp:forward>标签 <jsp:param>标签 2.1、<jsp:include>标签　　<jsp:include>标
标签的使用
江湖小居
06-26 1846
开始学习Java，要努力了，看到一篇讲解JSP标签的文章，先转过来看看。在JSP的开发中，迭代是经常要使用到的操作。例如，逐行的显示查询的结果等。在早期的JSP中，通常使用Scriptlets来实现Iterator或者Enumeration对象的迭代输出。现在，通过JSTL的迭代标签可以在很大的程度上简化迭代操作。           JSTL所支持的迭代标签有两个，分别是和。在这里介绍的是标
CGB2005-京淘4
qq_16804847的博客
08-29 6638
1. 构建京淘项目 1.1 构建项目说明 1.什么是聚合工程 一个大型项目中包含了多个小型项目. 通过打包方式进行定义!! 2.常见打包方式: 1.jar包 2.war包 3.pom包 3.京淘项目创建说明 父级项目jt 打包类型:pom 工具API项目 jt-common 打包类型:jar包 业务项目 jt-manage 打包类型:jar/war包. 1.2 创建父级工程JT 1.2.1创建项目 1.2.2 编辑POM.xml文件 <?xml v
springmvc和easyUI下的页面跳转
hasagei_ly的博客
10-13 2807
springmvc和easyUI下的页面跳转
###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致
全力以赴烂口发_青春饭耗不起
12-11 9484
###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致。 =====================【很简单，实例加深印象】 ===实例： ===页面： 只看标签。===js是提交时 封装参数用的。===额外学习。 <!-- --> tr{ font-size: 12px; }
学习淘淘商城第十八课（商品分类选择的实现）
u012453843的专栏
03-30 7949
上节课我们一起学习了怎样实现展示商品列表的功能，这节课我们一起学习下怎样实现商品分类的选择。        首先，当然还是启动我们的zookeeper注册中心，然后启动taotao-manager工程和taotao-manager-web工程，启动后我们点击"新增商品"，然后点击"选择类目"，打开的对话框是空白的，没有任何信息。这是因为我们还没有实现该界面的展示。         我们
jsp 左右箭头实现图片切换
最新发布
05-30
JSP 是一个用于开发动态Web应用程序的服务器端技术，它本身不直接提供实现图片切换的功能，但可以借助前端技术来实现。 以下是一个基础的 JSP 页面代码示例，实现了左右箭头控制图片切换的功能： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; } .slider-item { width: 33.33%; height: 100%; display: flex; justify-content: center; align-items: center; } .slider-item img { max-width: 100%; max-height: 100%; } .slider-item.active { transform: translateX(0%); } .slider-item.prev { transform: translateX(-33.33%); } .slider-item.next { transform: translateX(33.33%); } .slider-controls { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; z-index: 1; } .slider-control { background: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .slider-control span { font-size: 24px; color: #333; } </style> </head> <body> <div id="slider"> <div class="slider-wrapper"> <div class="slider-item active"> <img src="image1.jpg"> </div> <div class="slider-item"> <img src="image2.jpg"> </div> <div class="slider-item"> <img src="image3.jpg"> </div> </div> <div class="slider-controls"> <div class="slider-control prev"> <span><</span> </div> <div class="slider-control next"> <span>></span> </div> </div> </div> <script> const slider = document.querySelector('#slider'); const sliderWrapper = slider.querySelector('.slider-wrapper'); const sliderItems = slider.querySelectorAll('.slider-item'); const prevControl = slider.querySelector('.slider-control.prev'); const nextControl = slider.querySelector('.slider-control.next'); let currentIndex = 0; // 初始化 sliderItems[currentIndex].classList.add('active'); // 左箭头点击事件 prevControl.addEventListener('click', () => { const prevIndex = currentIndex === 0 ? sliderItems.length - 1 : currentIndex - 1; sliderItems[prevIndex].classList.add('prev'); sliderWrapper.classList.add('prev'); setTimeout(() => { sliderItems[prevIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('next'); sliderItems[prevIndex].classList.remove('prev'); sliderItems[currentIndex].classList.remove('next'); sliderWrapper.classList.remove('prev'); currentIndex = prevIndex; }, 500); }); // 右箭头点击事件 nextControl.addEventListener('click', () => { const nextIndex = currentIndex === sliderItems.length - 1 ? 0 : currentIndex + 1; sliderItems[nextIndex].classList.add('next'); sliderWrapper.classList.add('next'); setTimeout(() => { sliderItems[nextIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('prev'); sliderItems[nextIndex].classList.remove('next'); sliderItems[currentIndex].classList.remove('prev'); sliderWrapper.classList.remove('next'); currentIndex = nextIndex; }, 500); }); </script> </body> </html> ``` 这个 JSP 页面代码中嵌入了 HTML、CSS、JavaScript 代码，实现了基础的图片切换效果。你可以根据自己的需求来修改样式和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值