zoukankan      html  css  js  c++  java
  • 校园商铺-6店铺编辑列表和列表功能-9店铺管理页面的前端开发

    预期页面:

    1.编写html

    WEB-INF/html/shop/shopmanagement.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商店管理</title>
    <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">
    <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="stylesheet" href="../resources/css/shop/shopmanagement.css">
    </head>
    <body>
      <header class="bar bar-nav">
        <h1 class="title">商店管理</h1>
      </header>
      <div class="content">
        <div class="content-block">
          <div class="row">
            <div class="col-50 mb">
              <a id="shopInfo" href="/o2o/shopadmin/shopoperation" class="button button-big button-fill">商铺信息</a>
            </div>
            <div class="col-50 mb">
              <a href="/o2o/shopadmin/productmanagement" class="button button-big button-fill">商品管理</a>
            </div>
            <div class="col-50 mb">
              <a href="/o2o/shopadmin/productcategorymanagement" class="button button-big button-fill">类别管理</a>
            </div>
            <div class="col-100 mb">
              <a href="/o2o/shopadmin/shoplist" class="button button-big button-fill button-danger">返回</a>
            </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/common/common.js' charset='utf-8'></script>
      <script type='text/javascript'
        src='../resources/js/shop/shopmanagement.js' charset="utf-8"></script>
    </body>
    </html>
    

    2.建立需要的css和js文件

    webapp/resources/css/shop/shopmanagement.css

    @charset "UTF-8";
    .mb{
    	margin-bottom: .5rem;
    }
    

    webapp/resources/js/shop/shopmanagement.js

    /**
     * 
     */
    $(function(){
    	var shopId = getQueryString('shopId');
    	var shopInfoUrl = '/o2o/shopadmin/getshopmanagementinfo?shopId='+shopId;
    	$.getJSON(shopInfoUrl, function(data){
    		if(data.redirect){
    			window.location.href = data.url;
    		}else{
    			if(data.shopId != undefined && data.shopId != null){
    				shopId = data.shopId;
    			}
    			$('#shopInfo').attr('href','/o2o/shopadmin/shopoperation?shopId='+shopId);
    		}
    	});
    });
    

    3.建立路由shopManagement

    package com.csj2018.o2o.web.shopadmin;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    @Controller
    @RequestMapping(value="shopadmin",method=RequestMethod.GET)
    public class ShopAdminCtroller {
    	@RequestMapping(value="/shopoperation")
    	public String shopOperation() {
    		return "shop/shopoperation";
    	}
    	@RequestMapping(value="/shoplist")
    	public String shopList() {
    		return "shop/shoplist";
    	}
        //新增
    	@RequestMapping(value="/shopmanagement")
    	public String shopManagement() {
    		return "shop/shopmanagement";
    	}
    }
    

    按照路由地址访问网页,网页执行js文件。先从common/common.js调用getQueryString获取shopId。
    然后调用/getshopmanagementinfo:

    • 如果shopId没有传进来,就从session里取出currentShop(目前要操作的是哪一个店铺)
      * 如果session里没有店铺信息,就重定向返回到店铺列表页面。用户重新选择一个店铺去做管理
      * 如果session里有店铺信息,就给它的店铺id赋值给shopId返回。不用重定向了,留在这个页面管理
    • 一旦传入shopId,就直接可以留在这个页面去做管理了。并将Shop对象(店铺id为shopId)保存到session中。
  • 相关阅读:
    十 mybatis逆向工程
    九 spring和mybatis整合
    八 mybatis查询缓存(一级缓存,二级缓存)和ehcache整合
    七 mybatis的延迟加载
    利用游标循环删除数据
    oracle11g空表导不出来的解决办法
    关闭启动数据库AWR功能
    数据库维护操作
    开启和关闭oracle数据库中的审计功能
    Oracle序列
  • 原文地址:https://www.cnblogs.com/csj2018/p/12430397.html
Copyright © 2011-2022 走看看