web联网请求, 展示商品货物之综合练习

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


包:

jQuery Js的类库   <script src=" http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
angula Js的类库    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
angula-route Js的类库  <script src=" http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
ionic Js的类库
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

联网请求  (两种方式)

1.

$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
				.success(function(a){
					$scope.persons=a;//接口地址 返回的数据自动参数a
				})
2. 

//$http请求网络上的数据 get():请求指定路径的数据
					$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
						.then(function(d) { //d---->网址返回数据
							// $scope.persons ==>视图中遍历的对象
							$scope.persons = d.data; //json串  根据键获取值   对象.键名
						});
出生日期获得 

{{getAge(d.birthday)}}
//每行遍历都会调用getAge  传进来出生日期, 在函数
					$scope.getAge = function(bir) {
						var b = new Date(bir).getYear(); //出生的年份
						var nowb = new Date().getYear();
						return nowb - b;
					}

商品货物练习

头部   样式  包

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>孙晶综合练习</title>
		<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
         <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
	     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    	 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    	 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
		
		<style>
			table{
				width: 500px;
				text-align: center;
			}
			tr:nth-of-type(odd){
				background-color: rosybrown;
			}
			tr:nth-of-type(even){
				background-color: cornflowerblue;
			}
		</style>
	</head>

内容 

<body ng-controller="myCtrl">
		<center>
			<h2>商品库管理系统</h2>
			<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
			<button ng-click="fx()">反选</button>
			<select ng-model="order">
				<option value="">--排序--</option>
				<option value="snum">数量排序</option>
				<option value="sprice">价格排序</option>
			</select>
			<button ng-click="add()">添加</button>
			<button ng-click="seldel()">批量删除</button>
			<button ng-click="clear()">清空购物车</button>
			
			<table>
				<tr style="background-color: grey;">
					<th>
						<input type="checkbox" ng-model="allcb" ng-click="qx()" />
					</th>
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物单价</th>
					<th>货物总价</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
					<td>
						<input type="checkbox" ng-model="s.cb" />
					</td>
					<td>{{s.sname}}</td>
					<td>
						<button ng-click="jian($index)">-</button>
						{{s.snum}}
						<button ng-click="jia($index)">+</button>
					</td>
					<td>{{s.sprice | currency}}</td>
					<td>{{s.snum*s.sprice | currency}}</td>
					<td>
						<button ng-click="del($index)">删除</button>
						<button ng-click="update($index)">修改</button>
					</td>
				</tr>
			</table>
			<font>总数:{{allsnum()}}   总价:{{allsprice()}}</font>
			<div ng-show="addshow">
				货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
				货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
				货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
				<button ng-click="addsub()">提交</button>
			</div>
			<div ng-show="upshow">
				货物名称<input type="text" ng-model="upname"/>
				货物数量<input type="number" ng-model="upnum"/>
				货物单价<input type="number" ng-model="upprice"/>
				<button ng-click="upsub()">提交</button>
			</div>
		</center>
	</body>

功能   逻辑

---------------------------------------------------------批量删除------------------------------------------------------------------------------------

<script>
		var myApp = angular.module("myApp",[]);
		myApp.controller("myCtrl",function($scope){
			$scope.allsnum=0;
			$scope.addshow=false;
			//批量删除
			$scope.seldel = function(){
				var arr=[];
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						arr.push($scope.ss[x].sname);
					}
				}
				//判断是否有选中的cb
				if (arr.length<=0) {
					alert("至少选中一条");
				}else{
					for (var q =0;q<arr.length;q++) {
						for (var e =0;e<$scope.ss.length;e++) {
							if (arr[q]==$scope.ss[e].sname) {
								$scope.ss.splice(e,1);
							}
						}
					}
				}
			}
----------------------------------------------------------------添加-------------------------------------------------------- 

//添加显示
			$scope.add = function(i){
				$scope.addshow=true;
			}
			//添加提交
			$scope.addsub = function(){
				if(confirm("确认添加吗")){
					$scope.ss.push(
						{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
					);
					$scope.addshow=false;
				}
			}
-----------------------------------------------------修改----------------------------------------------------------------------------- 

//修改显示
			var xg;
			$scope.update = function(i){
				xg=i;
				$scope.upshow=true;
				$scope.upname=$scope.ss[xg].sname;
				$scope.upnum = $scope.ss[xg].snum;
				$scope.upprice = $scope.ss[xg].sprice;
			}
			//修改提交
			$scope.upsub = function(){
				if(confirm("确认修改了吗")){
					$scope.ss[xg].sname=$scope.upname;
					$scope.ss[xg].snum=$scope.upnum;
					$scope.ss[xg].sprice=$scope.upprice;
					$scope.upshow=false;
				}
			}
------------------------------------------------全选   反选--------------------------------------------------------------------- 

//反选
			$scope.fx = function(){
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						$scope.ss[x].cb=false;
					}else{
						$scope.ss[x].cb=true;
					}
				}
			}
			//  全选
			$scope.qx = function(){
				if ($scope.allcb) {
					//选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=true;
					}
				} else{
					//未选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=false;
					}
				}
			}
--------------------------------------------------        一些   小功能  -------------------------------------------------------------- 

//删除单个商品
			$scope.del = function(i){
				$scope.ss.splice(i,1);
			}
			//数量--
			$scope.jian = function(i){
				$scope.ss[i].snum--;
			}
			//数量++
			$scope.jia = function(i){
				$scope.ss[i].snum++;
			}
			//  总数 
			$scope.allsnum = function(){
				var all=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all+=$scope.ss[x].snum;
				}
				return all;
			}
			//   总价
			$scope.allsprice = function(){
				var all2=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
				}
				return all2;
			}
			//清空购物车
			$scope.clear = function(){
				$scope.ss=[];
			}
---------------------------------------------------------基础 遍历--------------------------------------------------------------------------------- 

//  遍历
			$scope.ss=[
				{sname:"谷粒多红豆奶",snum:25,sprice:4},
				{sname:"葡萄果冻",snum:2,sprice:5},
				{sname:"红枣酸奶",snum:6,sprice:18},
				{sname:"馍干",snum:3,sprice:1}
			];

#################################################  完整的一遍############################################ 

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>孙晶综合练习</title>
		<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
         <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
	     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    	 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    	 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
		
		<style>
			table{
				width: 500px;
				text-align: center;
			}
			tr:nth-of-type(odd){
				background-color: rosybrown;
			}
			tr:nth-of-type(even){
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body ng-controller="myCtrl">
		<center>
			<h2>商品库管理系统</h2>
			<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
			<button ng-click="fx()">反选</button>
			<select ng-model="order">
				<option value="">--排序--</option>
				<option value="snum">数量排序</option>
				<option value="sprice">价格排序</option>
			</select>
			<button ng-click="add()">添加</button>
			<button ng-click="seldel()">批量删除</button>
			<button ng-click="clear()">清空购物车</button>
			
			<table>
				<tr style="background-color: grey;">
					<th>
						<input type="checkbox" ng-model="allcb" ng-click="qx()" />
					</th>
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物单价</th>
					<th>货物总价</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
					<td>
						<input type="checkbox" ng-model="s.cb" />
					</td>
					<td>{{s.sname}}</td>
					<td>
						<button ng-click="jian($index)">-</button>
						{{s.snum}}
						<button ng-click="jia($index)">+</button>
					</td>
					<td>{{s.sprice | currency}}</td>
					<td>{{s.snum*s.sprice | currency}}</td>
					<td>
						<button ng-click="del($index)">删除</button>
						<button ng-click="update($index)">修改</button>
					</td>
				</tr>
			</table>
			<font>总数:{{allsnum()}}   总价:{{allsprice()}}</font>
			<div ng-show="addshow">
				货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
				货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
				货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
				<button ng-click="addsub()">提交</button>
			</div>
			<div ng-show="upshow">
				货物名称<input type="text" ng-model="upname"/>
				货物数量<input type="number" ng-model="upnum"/>
				货物单价<input type="number" ng-model="upprice"/>
				<button ng-click="upsub()">提交</button>
			</div>
		</center>
	</body>
	<script>
		var myApp = angular.module("myApp",[]);
		myApp.controller("myCtrl",function($scope){
			$scope.allsnum=0;
			$scope.addshow=false;
			//批量删除
			$scope.seldel = function(){
				var arr=[];
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						arr.push($scope.ss[x].sname);
					}
				}
				//判断是否有选中的cb
				if (arr.length<=0) {
					alert("至少选中一条");
				}else{
					for (var q =0;q<arr.length;q++) {
						for (var e =0;e<$scope.ss.length;e++) {
							if (arr[q]==$scope.ss[e].sname) {
								$scope.ss.splice(e,1);
							}
						}
					}
				}
			}
			//添加显示
			$scope.add = function(i){
				$scope.addshow=true;
			}
			//添加提交
			$scope.addsub = function(){
				if(confirm("确认添加吗")){
					$scope.ss.push(
						{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
					);
					$scope.addshow=false;
				}
			}
			//修改显示
			var xg;
			$scope.update = function(i){
				xg=i;
				$scope.upshow=true;
				$scope.upname=$scope.ss[xg].sname;
				$scope.upnum = $scope.ss[xg].snum;
				$scope.upprice = $scope.ss[xg].sprice;
			}
			//修改提交
			$scope.upsub = function(){
				if(confirm("确认修改了吗")){
					$scope.ss[xg].sname=$scope.upname;
					$scope.ss[xg].snum=$scope.upnum;
					$scope.ss[xg].sprice=$scope.upprice;
					$scope.upshow=false;
				}
			}
			//反选
			$scope.fx = function(){
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						$scope.ss[x].cb=false;
					}else{
						$scope.ss[x].cb=true;
					}
				}
			}
			//  全选
			$scope.qx = function(){
				if ($scope.allcb) {
					//选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=true;
					}
				} else{
					//未选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=false;
					}
				}
			}
			//删除单个商品
			$scope.del = function(i){
				$scope.ss.splice(i,1);
			}
			//数量--
			$scope.jian = function(i){
				$scope.ss[i].snum--;
			}
			//数量++
			$scope.jia = function(i){
				$scope.ss[i].snum++;
			}
			//  总数 
			$scope.allsnum = function(){
				var all=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all+=$scope.ss[x].snum;
				}
				return all;
			}
			//   总价
			$scope.allsprice = function(){
				var all2=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
				}
				return all2;
			}
			//清空购物车
			$scope.clear = function(){
				$scope.ss=[];
			}
			//  遍历
			$scope.ss=[
				{sname:"谷粒多红豆奶",snum:25,sprice:4},
				{sname:"葡萄果冻",snum:2,sprice:5},
				{sname:"红枣酸奶",snum:6,sprice:18},
				{sname:"馍干",snum:3,sprice:1}
			];
		});
	</script>
</html>





柠檬j
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
产品展示 网页模板html
05-16
关于产品展示的商业模板淡蓝色主题的商业模板 html
淘宝API开发系列：item_search-按关键字搜索淘宝商品 API 返回值说明
Andyfu2019的博客
12-12 1489
为了进行淘宝的API开发，首先我们需要做下面几件事情。 1）开发者注册一个账号 2）然后为每个淘宝应用注册一个应用程序键（App Key) 。 3）下载淘宝API的SDK并掌握基本的API基础知识和调用 4）利用SDK接口和对象，传入AppKey或者必要的时候获取并传入SessionKey来进行程序开发。 5）利用淘宝平台的文档中心和API测试工具，对接口进行测试。从而了解返回信息，方便程序获取。...
JavaWEB综合实战
11-08
JavaWEB综合训练、主要使用Servlet、JSP、request、response、cookie、session、filter、listener、定时器等完成原生态的购物网站
JavaWeb之实现商品列表展示
张睿的博客
08-29 1万+
商城网页上的商品数据基本都放在数据库，都是在servlet中对数据库信息进行操作的。我还没有学到对数据库的操作，就暂时在servlet中模拟几条数据，继而显示在jsp页面中。 1、创建一个Phone的对象 public class Phone { //id,名称,图片,价格 private int id; private String name; priva...
JavaWeb之动态页面技术jsp显示商品列表
麦客子
09-15 2万+
一、新建商品数据库 CREATE TABLE `product` ( `pid` varchar(50) NOT NULL, `pname` varchar(50) DEFAULT NULL, `market_price` double DEFAULT NULL, `shop_price` double DEFAULT NULL, `pimage` varchar(200)
微信小程序联网请求的轮播图
08-30
在微信小程序中实现联网请求的轮播图是常见的需求，通常用于展示广告、产品推荐或其他动态内容。本文将详细讲解如何在微信小程序中创建联网请求的轮播图。 首先，轮播图在微信小程序中通过`swiper`组件实现。`...
综合管理平台联网监控解决策划方案品牌
06-27
【综合管理平台联网监控解决策划方案】 综合管理平台联网监控是一种高效、全面的安防系统解决方案，旨在通过网络连接各个监控点，实现远程监控、集中管理，以提高安全防范能力和应急响应速度。本方案由杭州海康威视...
金融系统综合联网安防系统设计策划方案探析
06-14
金融系统综合联网安防系统设计策划方案是金融行业内保障安全、防范风险的重要手段。该方案旨在通过对现有安防系统的分析，结合新形式下的需求，提出一套高效、智能、集成化的解决方案。 在第一章前言中，通常会阐述...
Asynctask联网请求
04-11
本篇文章将深入探讨`AsyncTask`以及如何利用它来实现联网请求。 `AsyncTask`类包含三个泛型参数，分别代表后台任务的输入类型（Params）、进度类型（Progress）和输出类型（Result）。对于联网请求，我们通常不关心...
基于Web服务的煤矿安全监控联网设计
05-31
【基于Web服务的煤矿安全监控联网设计】 在煤矿安全生产领域，实时有效的监控系统至关重要，而煤矿安全监控联网系统则是确保安全的重要工具。然而，现有的许多联网系统存在诸多不足，如集成性差、信息共享不畅等...
JavaWeb - 小米商城：商品详情展示
qq_52029763的博客
05-16 4456
JavaWeb - 小米商城 ：商品详情展示 1. 功能描述 接上篇 JavaWeb - 小米商城 ：首页商品分类展示本篇博客将分析和实现小米商城商品详情内容的查 询和展示。如以下H5页面所示： 2.功能分析 2.1 功能逻辑抽象 详情展示功能在逻辑上并不复杂：在商品列表界面每当点击商品 <img> 标签或商品名称时，都会向后端 提交一个 GET 请求来获取本商品数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内 容。 查询商品详情内的功能需要面向数据库中的另一张表 tb_go
企业WEB项目实现商品详情页面展示功能
JYplute的博客
05-31 3619
概述 在开发电商项目时，我们需要实现一个最基本的功能：点击商品的图片，打开商品详情页面。其中，商品页面分为三大部分： a) 商品基本信息 b) 延迟加载商品详情。延迟一秒加载使用ajax c) 商品的规格参数。按需加载，当用户点击商品规格参数tab页，加载ajax。 1.功能分析 1、Taotao-portal接收页面请求，接收到商品id。 2、调用taotao-rest提供的商品详情的服务，把商品id作为参数传递给服务。接收到商品详细详细。 3、渲染结果，展示商品详细页面 4、为了提高
简单的商品列表展示
weixin_41185356的博客
12-18 5123
一个简单的java-web项目，初学java-web开发。 用Jsp和数据库写的一个简单的商品列表展示，展示了商品详情和浏览记录。
CSS3实现网站商品展示效果图
kiku
01-17 3158
html代码 <div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images/pms_1524883847.49276938!220x220.jpg" alt=""> &lt...
web商城项目笔记-2.商品分类信息和商品信息展示
weixin_43611842的博客
01-04 4063
商品分类信息和商品信息展示相关 1.商品分类信息展示 2.首页商品展示 3.单个商品展示 4.某个分类下 商品展示 1.商品分类信息展示: 1.前端: 1.使用封装ajax发送请求,无需参数 2.返回数据vo的.data属性获取分类对象 3.遍历对象 4.他本身中的cname属性为分类名字 5.拼接字符串,把拼接好的标签追加到div后 2.后端: 1.浏览器没有参数获取,直接调用se...
第七章 Web开发实战2——商品详情页
jinnianshilongnian的专栏
03-03 1270
本章以京东商品详情页为例，京东商品详情页虽然仅是单个页面，但是其数据聚合源是非常多的，除了一些实时性要求比较高的如价格、库存、服务支持等通过AJAX异步加载加载之外，其他的数据都是在后端做数据聚合然后拼装网页模板的。 http://item.jd.com/1217499.html  如图所示，商品页主要包括商品基本信息（基本信息、图片列表、颜色/尺码关系、扩展属性、规格参数、包装清单、售后...
python--web商品前端展示（pycharm可视化工具）
weixin_43669384的博客
03-20 2923
我们做好后端的操作（用户的管理，商品的添加删除，都是后端我们要进行操作的，后端在我的博客也有，希望对你有帮助）之后就需要做前端将商品展示给顾客。 我们将在views文件中定义我们视图函数，当浏览器 向服务器发送一个http请求时，这些函数将被调用。 在views里先导入我们的数据库 .models使我们当前文件夹的models文件，该文件里定义了我们的商品类Product from .mode...
javaWeb购物商城设计---商品详情显示
热门推荐
imcy的博客
12-02 3万+
商品列表显示见：http://blog.csdn.net/u013948010/article/details/78675164 主页面显示商品列表，单击图片进入商品详情:<a href="goodsDetail.jsp?ID=<%=hot_ID%>">商品详情数据库表tb_goods： 建立goodsDetail.jsp页面访问数据库获取商品根据页面跳转传递的商品ID访问数据库获得商品详情。<
"电力远程综合视频数据监控联网系统设计方案样本详解V1.0
电力远程综合视频数据监控联网系统设计方案样本.doc文件是一份普通等级的文档，其中包含了关于电力远程综合视频数据监控联网系统的设计方案样本。该方案样本涵盖了系统的设计理念、技术架构、功能模块、数据处理流程...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值