SSM项目之商铺系统-店铺注册之前端开发(十)

2024-02-18 02:32

本文主要是介绍SSM项目之商铺系统-店铺注册之前端开发(十),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

由于我是后台开发人员,所以我们直接去阿里公司的Suimobile里下载相应的模板使用

直接看写好的前端页面

 

我们建立这样一个文件,是我们增加文件的页面


<!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"><script>//ga</script><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></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="shop-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><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"></textarea></div></div></div></li><!--验证码--></ul></div><div class="content-block"><div class="row"><div class="col-50"><a href="#" 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>

注意:每个框体里都要有一个id,供我们js操作,js就是通过这个id将后台传入的数据存入id相同的html文本框中

接下来我们建立controller来访问到这个页面

我们通过这样一个controller

package storepro.web.shopadmin;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;@Controller
@RequestMapping("/shopadmin")
public class ShopAdminController {@RequestMapping(value = "/shopoperation", method = RequestMethod.GET)public String shopOperation() {return "shop/shopoperation";}
}

我们通过@Controller注解这是一个控制器,通过@RequestMapping注解访问他的url地址和访问方法,通过return返回这个controller返回的html,这里注意,我们本应该这么写return "/WEB-INF/html/shop/shopoperation.html";但是我们在springmvc中配置了访问url的方法

自动添加了前后缀,所以只需要一部分就够了。 

之后输入url打开页面即可。

这里有一个问题整整让我解决了半天

https://blog.csdn.net/Sunmeok/article/details/81330981

这篇关于SSM项目之商铺系统-店铺注册之前端开发(十)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/719773

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听