老师我页面分类和所属区域 并没显示出来

老师我页面分类和所属区域 并没显示出来

我刷新这个页面显示这样的 但没有显示出来  分类和区域

http://img1.sycdn.imooc.com//climg/5da70fad09750a0f05810202.jpg

http://img1.sycdn.imooc.com//climg/5da70fc20935b81713210829.jpg

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description"
          content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
 
    <!-- Google Web Fonts -->
 
    <link rel="stylesheet"
          href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet"
          href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
 
    <link rel="apple-touch-icon-precomposed"
          href="/assets/img/apple-touch-icon-114x114.png">
 
</head>
<body>
<div class="page-group">
    <div id="page-label-input" class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back"
               href="/demos/form"> <span class="icon icon-left"></span> 返回
            </a>
            <h1 class="title">商店信息</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">商铺名称</div>
                                <div class="item-input">
                                    <input type="text" id="shop-name" placeholder="商铺名称">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 商铺分类 下拉列表 -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">商铺分类</div>
                                <div class="item-input">
                                    <select id="shop-category">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 区域分类 下拉列表 -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">所属区域</div>
                                <div class="item-input">
                                    <select id="area">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 详细地址 text -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">详细地址</div>
                                <div class="item-input">
                                    <input type="text" id="shop-addr" placeholder="详细地址">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 联系电话 text -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">联系电话</div>
                                <div class="item-input">
                                    <input type="text" id="shop-phone" placeholder="联系电话">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 缩略图 上传控件 -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">缩略图</div>
                                <div class="item-input">
                                    <input type="file" id="shop-img">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 店铺简介 textarea -->
                    <li class="align-top">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">店铺简介</div>
                                <div class="item-input">
                                    <textarea id="shop-desc" placeholder="店铺简介"></textarea>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 验证码 kaptcha -->
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50">
                        <a href="/o2o/shopadmin/shopmanagement" class="button button-big button-fill button-danger">返回</a>
                    </div>
                    <div class="col-50">
                        <a href="#" class="button button-big button-fill button-success"
                           id="submit">提交</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
</div>
<script type='text/javascript'
        src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript'
        src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
</body>
</html>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//当加载这个js文件的时候就跑里面的内容
$(function() {
    // 用于店铺注册时候的店铺类别以及区域列表的初始化的URL
    var initUrl = '/o2o/shopadmin/getshopinitinfo';
    // 注册店铺的URL
    var registerShopUrl = '/o2o/shopadmin/registershop';
    //这个js文件就调用这个方法
    getShopInitInfo();
    alert(initUrl);
    //获取店铺信息
    function getShopInitInfo() {
        //data 回调的方法
        $.getJSON(initUrl,function (data) {
            if (data.success()){
                //初始化变量
                var tempHtml='';
                var tempAreaHtml = '';
               
                data.shopCategoryList.map(function (item, index) {
                    tempHtml+='<option data-id="'+item.shopCategoryId+'">'
                    +item.shopCategoryName+'</option>';
                });
                data.areaList.map(function(item, index) {
                    tempAreaHtml += '<option data-id="' + item.areaId + '">'
                        + item.areaName + '</option>';
                });
                $('#shop-category').html(tempHtml);
                $('#area').html(tempAreaHtml);
            }
        });
    }
 
    //点击按钮提交的操作
    $('#submit').click(function () {
        // 创建shop对象
        var shop={};
        // 获取表单里的数据并填充进对应的店铺属性中
        shop.shopName=$('#shop-name').val();
        shop.shopAddr=$('#shop-addr').val();
        shop.phone=$('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();
 
        // 选择选定好的店铺类别
        shop.shopCategory = {
            shopCategoryId : $('#shop-category').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };
 
        // 选择选定好的区域信息
        shop.area = {
            areaId : $('#area').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };
 
        // 获取上传的图片文件流
        var shopImg=$('#shop-img')[0].files[0];
        // 生成表单对象，用于接收参数并传递给后台
        var formData=new FormData();
        // 添加图片流进表单对象里
        formData.append('shopImg', shopImg);
        // 将shop json对象转成字符流保存至表单对象key为shopStr的的键值对里
        formData.append('shopStr', JSON.stringify(shop));
 
        // 将数据提交至后台处理相关操作
        $.ajax({
            url:registerShopUrl,
            type:'Post',
            data:formData,
            contentType:false,
            processData : false,
            cache : false,
            success:function (data) {
                if (data.success){
                    $.toast('提交成功!')
                }else {
                    $.toast('提交失败！' + data.errMsg);
                }
            }
        })
    });
 
 
})

程序运行后的代码

1
2
3
4
5
6
7
2019-10-16 20:39:45.975 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - ==>  Preparing: select shop_category_id, shop_category_name, shop_category_desc, shop_category_img, priority, create_time, last_edit_time, parent_id from tb_shop_category WHERE parent_id is not null order by priority desc 
2019-10-16 20:39:45.976 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - ==> Parameters: 
2019-10-16 20:39:45.977 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - <==      Total: 1
2019-10-16 20:39:45.978 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - ==>  Preparing: select area_id,area_name,priority,create_time,last_edit_time from tb_area order by priority desc 
2019-10-16 20:39:45.978 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - ==> Parameters: 
2019-10-16 20:39:45.979 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - <==      Total: 2
11

controller 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
package com.imooc.o2o.web.shopadmin;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.imooc.o2o.dto.ShopExecution;
import com.imooc.o2o.entity.Area;
import com.imooc.o2o.entity.PersonInfo;
import com.imooc.o2o.entity.Shop;
import com.imooc.o2o.entity.ShopCategory;
import com.imooc.o2o.enums.ShopStateEnum;
import com.imooc.o2o.exceptions.ShopOperationException;
import com.imooc.o2o.service.AreaService;
import com.imooc.o2o.service.ShopCategoryService;
import com.imooc.o2o.service.ShopService;
import com.imooc.o2o.util.HttpServletRequestUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
 
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
@Controller
@RequestMapping(value = "/shopadmin")
public class ShopManagementContorller {
 
    @Autowired
    private ShopService shopService;
    @Autowired
    private ShopCategoryService shopCategoryService;
    @Autowired
    private AreaService areaService;
    /**
     *获取店铺分类
     */
    @RequestMapping(value = "/getshopinitinfo",method = RequestMethod.GET)
    @ResponseBody
    private Map<String,Object> getShopInitInfo(){
        Map<String,Object> modelMap=new HashMap<String, Object>();
        List<ShopCategory> shopCategoryList = new ArrayList<ShopCategory>();
        List<Area> areaList = new ArrayList<Area>();
        try {
            shopCategoryList = shopCategoryService.getShopCategoryList(new ShopCategory());
            areaList = areaService.getAreaList();
            modelMap.put("shopCategoryList", shopCategoryList);
            modelMap.put("areaList", areaList);
            modelMap.put("success", true);
        } catch (Exception e){
            modelMap.put("success", false);
            modelMap.put("errMsg", e.getMessage());
        }
        System.out.println(11);
        return modelMap;
    }
 
 
    /**
     *店铺注册
     */
    @RequestMapping(value = "/registershop",method = RequestMethod.POST)
    @ResponseBody
    private Map<String, Object> registerShop(HttpServletRequest request){
        Map<String,Object> modelMap=new HashMap<String, Object>();
        // 1.接收并转化相应的参数，包括店铺信息以及图片信息
 
        System.out.println(11);
        //非文件类型参数
        //将json转换成对象
        String shopStr=HttpServletRequestUtil.getString(request,"shopStr");
        ObjectMapper mapper = new ObjectMapper();
        Shop shop=null;
        try {
            shop=mapper.readValue(shopStr,Shop.class);
        } catch (Exception e){
            modelMap.put("success", false);
            modelMap.put("errMsg", e.getMessage());
            return modelMap;
        }
 
        //接收上传的文件流
        CommonsMultipartFile shopImg=null;
        CommonsMultipartResolver commonsMultipartResolver=new CommonsMultipartResolver(
                request.getSession().getServletContext());
        if (commonsMultipartResolver.isMultipart(request)){
            //有上传的文件流
            MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest)request;
            shopImg=(CommonsMultipartFile) multipartHttpServletRequest.getFile("shopImg");
        }else {
            //没有文件上传
            modelMap.put("success", false);
            modelMap.put("errMsg", "上传图片不能为空");
            return modelMap;
        }
 
        // 2.注册店铺
        if (shop!=null&&shopImg!=null){
            PersonInfo owner=new PersonInfo();
            //Session ToDo
            owner.setUserId(1l);
            shop.setOwner(owner);
 
            ShopExecution se= null;
 
            try {
                se = shopService.addShop(shop,shopImg.getInputStream(),shopImg.getOriginalFilename());
 
                if (se.getState()== ShopStateEnum.CHECK.getState()){
                    modelMap.put("success", true);
                } else {
                    modelMap.put("success", false);
                    modelMap.put("errMsg",se.getStateInfo());
                }
 
            } catch (ShopOperationException e){
                modelMap.put("success", false);
                modelMap.put("errMsg", e.getMessage());
            } catch (IOException e) {
                modelMap.put("success", false);
                modelMap.put("errMsg", e.getMessage());
            }
            return modelMap;
        }else {
            modelMap.put("success", false);
            modelMap.put("errMsg", "请输入店铺信息");
            return modelMap;
        }
 
    }
 
}
hejunmiao 2019-10-16
源自：项目：校园商铺—店铺管理   3-3 店铺类别区域信息的获取
26
收起

正在回答

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

2回答
好帮手慕柯南 回答被采纳获得+3积分 2019-10-17 11:28:21

同学你好！

1. 经过老师测试，老师发现同学在js以下位置多写了一个（）号，在js中获取指是不需要加括号，建议同学去掉测试一下。

http://img1.sycdn.imooc.com//climg/5da7dfd3097e833303680100.jpg

2.建议同学今后在调试时，如果后台的控制台没有报错，可以查看一下浏览器的控制台是否报错了，这样更有利于排查错误。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0
收起回答
  • hejunmiao 提问者 #1
    谢谢 老师成功了
    2019-10-17 11:42:32
提问者 hejunmiao 2019-10-16 21:06:00

我测试了一下  刷新 这个页面 http://localhost:8080/o2o/shopadmin/shopoperation

代码能运行到这里 都是好的 也能显示界面 

http://img1.sycdn.imooc.com//climg/5da7152109bcd3d807040647.jpgjs 这里也是成功的 

http://img1.sycdn.imooc.com//climg/5da71564090433d307190622.jpg

0
收起回答
  • 提问者 hejunmiao #1
    就是页面和区域 块并没有显示下拉列表
    2019-10-16 21:06:58
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

添加分类如何在分类页面显示
24 0 3
文本域是文字域和密码域的类型统称吗
0 1 6
老师，为什么我点击了新建，也获取到了数据，就是不显示呢，而且怎么分类没有获取到信息呢
25 0 5
gallery区怎么设置了没用
0 0 3
商品分类，所属区域下拉框没值？
36 0 18

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

4. SSM到Spring Boot入门与综合实战
  • 参与学习           人
  • 提交作业       323    份
  • 解答问题       8263    个

本阶段将带你学习主流框架SSM，以及SpringBoot ，打通成为Java工程师的最后一公里！

了解课程

本课精华内容

问答 作业

CommonsMultipartResolver ？

39 1

按着官方回答的过程，下载Javadoc结尾的jar包，解压后，没有相应的内容

45 4

分享自己解决字体图标乱码的方法

108 1

老师这个suimoblie我上不去

112 2

autowired报错

50 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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