书店

最新推荐文章于 2021-11-12 16:42:10 发布
最新推荐文章于 2021-11-12 16:42:10 发布
阅读量346 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W1256754982/article/details/78298765
版权 
<!DOCTYPE html>
<html ng-app="BookShop">
<head lang="en">
    <meta charset="UTF-8">
    <!--必写的一句话-->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>书店</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
    <!--引用css文件-->
    <link href="css/main.css" rel="stylesheet">
    <script type="text/javascript">
        var BookShop=angular.module("BookShop",["ionic"]);
        //路由
        BookShop.config(function($stateProvider,$urlRouterProvider){
            //
            $stateProvider.state("home",{
                //路径
                url:"/home",
                views:{
                    "view-home":{
                        templateUrl:"views/home/home.html",
                        controller:"HomeCtrl"
                    }
                }
            }).state("cart",{
                url:"/cart",
                views:{
                    "view-cart":{
                        templateUrl:"views/cart/cart.html"
                    }
                }
            }).state("mine",{
                url:"/mine",
                views:{
                    "view-mine":{
                        templateUrl:"views/mine/mine.html"
                    }
                }
            });
            $urlRouterProvider.otherwise("home");
        });
        BookShop.controller("HomeCtrl",function($scope, $ionicSideMenuDelegate,$http){
            $scope.toggleLeft=function(){
                //侧滑
                $ionicSideMenuDelegate.toggleLeft();
            }
           
           $scope.book_list=[];
            //为路径定义一个数组
            var urls=[
                "",
                "book_list_1.json",
                "book_list_2.json",
                "book_list_3.json"
            ];

            //定义页数默认为第一页
            var pageNo=1;
            //刷新方法
            var loadData=function(){
                //获取路径(第一页)
                var httpReq=$http.get(urls[pageNo]);
                //成功执行的
                httpReq.success(function(data){
                    $scope.book_list=$scope.book_list.concat(data);
                //失败执行的
               }).error(function(data,status){
                    console.log(status);

               }).finally(function(){
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };
                //执行方法
               loadData();
                //上拉刷新
                $scope.doRefresh=function(){
                    $scope.book_list=[];
                    pageNo=1;
                    loadData();
                };
                //下拉加载
                $scope.loadMore=function(){
                  if(pageNo++>3){
                      pageNo=3;
                  }
                    loadData();
                };
        });
    </script>
</head>
<body>
<!--最上面的title-->
<ion-nav-bar></ion-nav-bar>
<!--侧拉-->
<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <!--首页内容-->
        <ion-nav-view animation="slide-left-right">

            <ion-nav-view name="view-home"></ion-nav-view>
        </ion-nav-view>
    </ion-pane>
<!--左侧菜单-->
    <ion-side-menu side="left" class="mine">

        <header class="bar bar-header bar-stable">
            <h1 class="title">个人中心</h1>
        </header>

        <ion-content class="has-header">
            <div class="avatar">
                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

                <p>姓名</p>
            </div>

            <div class="list">
                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-clipboard"></i>
                    我的订单
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-star"></i>
                    我的收藏
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-gear-a"></i>
                    设置
                    <i class="icon ion-ios-arrow-right"></i>
                </a>
            </div>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

<!--底部视图-->
<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
        <!--<ion-nav-view name="view-home"></ion-nav-view>-->
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</body>
</html>


home主页
<ion-view title="首页" class="home" ng-controller="HomeCtrl">
    <!--最左侧的侧拉按钮-->
    <ion-nav-buttons>
        <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>
    <!--内容列表-->
    <ion-content>
        <!--下拉刷新-->
        <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
        <ion-list>
            <ion-item ng-repeat="book in book_list">
                <div class="picture">
                    <img src="{{book.picture}}" width="140px" height="140px">
                </div>
                <div class="details">
                    <h2>{{book.title}}</h2>
                    <h3>{{book.description}}</h3>
                    <div>
                        <span>{{ book.price | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

        </ion-list>
        <!--加载更多-->
        <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false"></ion-infinite-scroll>
    </ion-content>
</ion-view>


cart(购物车页面)
<ion-view title="购物车" class="cart">
<ion-content>
    <ion-list>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="140px" height="140px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>

                <h3>{{ 86.40 | currency: "￥" }}</h3>

                <div>
                    <i class="icon ion-minus-circled"></i>
                    <span> 1 </span>
                    <i class="icon ion-plus-circled"></i>
                    <i class="icon ion-android-delete"></i>
                </div>
            </div>
        </ion-item>
        <hr>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="140px" height="140px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>

                <h3>{{ 86.40 | currency: "￥" }}</h3>

                <div>
                    <i class="icon ion-minus-circled"></i>
                    <span> 1 </span>
                    <i class="icon ion-plus-circled"></i>
                    <i class="icon ion-android-delete"></i>
                </div>
            </div>
        </ion-item>
        <hr>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="140px" height="140px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>

                <h3>{{ 86.40 | currency: "￥" }}</h3>

                <div>
                    <i class="icon ion-minus-circled"></i>
                    <span> 1 </span>
                    <i class="icon ion-plus-circled"></i>
                    <i class="icon ion-android-delete"></i>
                </div>
            </div>
        </ion-item>
        <hr>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg"width="140px" height="140px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>

                <h3>{{ 86.40 | currency: "￥" }}</h3>

                <div>
                    <i class="icon ion-minus-circled"></i>
                    <span> 1 </span>
                    <i class="icon ion-plus-circled"></i>
                    <i class="icon ion-android-delete"></i>
                </div>
            </div>
        </ion-item>
        <hr>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="140px" height="140px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>

                <h3>{{ 86.40 | currency: "￥" }}</h3>

                <div>
                    <i class="icon ion-minus-circled"></i>
                    <span> 1 </span>
                    <i class="icon ion-plus-circled"></i>
                    <i class="icon ion-android-delete"></i>
                </div>
            </div>
        </ion-item>
    </ion-list>
</ion-content>
</ion-view>


mine(我的页面)
<ion-view title="我的" class="mine">
    <ion-nav-buttons side="right">
        <button class="button button-icon ion-ios-compose-outline" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>
    <ion-content>
        <div class="acatar">
            <img src="img/mine_avatar.jpg" width="80px" height="80px">
            <p>姓名</p>
        </div>
        <div class="list">
            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-clipboard"></i>
                我的订单
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-star"></i>
                我的收藏
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-gear-a"></i>
                设置
                <i class="icon ion-ios-arrow-right"></i>
            </a>
        </div>
    </ion-content>
</ion-view>


css样式
.home .picture{
    float: left;
}
.home .details{
    float: left;
}
.home h3{
    margin-top: 20px;
}
.home .details div{
    margin-top: 50px;
}
.home .details .ion-ios-cart{
    position: absolute;
    right: 20px;
}
.home .details span {
    color: red;
    font-size: large;
}
.mine .acatar {
    width: 100%;
    height: 200px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}
.mine .acatar img {
    border-radius: 50%;
    margin-top: 30px;
}
.cart .picture{
    float: left;
}
.cart .details h3{
    margin-top: 20px;
}
.cart .details div{
    margin-top: 50px;
}
.cart .details div .ion-android-delete {
    position: absolute;
    right: 16px;
}
.cart .item {
    border-width: 0;
}
.mine .avatar{
    width: 100%;
    height: 160px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}
.mine .avatar img{
    border-radius: 50%;
    margin-top: 30px;
}

W1256754982
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
叮叮书店cart（源代码）
d1435528859的博客
09-15 1567
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物.
叮叮书店首页最新版（源代码）
d1435528859的博客
09-15 5643
<!DOCTYPE html> <html lang="ch-CN"> <head> <meta charest="utf-8"> <title>叮叮书店</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <mata name ="viewport" content="width=devic...
岛上书店
程序人生
10-11 849
一直都想读《岛上书店》这本书，借了三次终于借出来了，花了三天时间读完了。这部小说被冠上全球顶端畅销小说的榜单第一名，当时听说这本书也是通过网络宣传知道的，可读完之后，没有带来想象中的那种震撼感，抛开内容来说，本书的构思设计的很巧妙。通过一个书店将人物的生活、命运紧紧联系到一起。A.J这个命运多舛的男主角，爱妻去世、宝贝遭窃，将他的人生坠入低谷，内心早已沦为荒岛。就在此时，玛雅的出现，给不幸的生活带
《岛上书店》
weixin_30882895的博客
07-16 162
今天闲来无事，又不想复习高数，看到之前买的一堆书里还有基本还没看，于是拆开了一本《岛上书店》的包装纸，270+页，原本还以为今天可能看不完，没想到一口气看完了，主要讲述的是一个丧妻的鳏夫本想以酒鬼形象结束自己下半生的人生的，因为主人公开着一家书店，这个书店是岛上的唯一书店(估计现在互联网那么发达,其它人都觉得开书店根本赚不到钱所以只有一家吧)。主线剧情：主人公A.J遗失价格50+美金的...
没有谁是一座孤岛——《岛上书店》
E.C.的博客
05-28 1379
我也想有一个那样的建在一座安静、漂亮的小岛上的书店。        这本书语言幽默、温柔、浪漫、略带悬疑，是让人拿在手里就想一气读完的一本小说。想象在那个与世隔绝的爱丽丝小岛上有个安静的，惨淡经营的书店。老板是一个孤僻的男人，他的名字叫A.J.。这个男人生活毫无乐趣，每天靠吃各种速冻食品、读书度日，完全活在由书构建的世界里。看到他一次次故意醉酒，我甚至都想不出他的一辈子该怎样过下去了，感觉生活似
叮叮书店案列源码
06-21
叮叮书店项目的源码是根据清华大学出版社张树明教授所编写的web前端设计基础所进行编写。
读书笔记——《岛上书店》
11-13 2947
读书笔记——《岛上书店》“无人为孤岛，一书一世界”。是《岛上书店》封面上这句话，让决定读这本书。 故事讲述的是A.J.费克里，人近中年，在一座与世隔绝的小岛上，经营了一家书店。命运像似给他开了个大玩笑，妻子妮可在一场车祸中离开了。之后的很长时间里，他只能靠酒精的麻醉带走黑夜。书店的生意每况日下，他本想靠一本价值不菲的《木钻儿》度过余生，不料这个小小的希望也被小偷夺走了。 就在此时，一个神秘的包袱
HTML+CSS3+JavaScript叮叮书店相关代码
12-23
学生
网站书店源代码
11-23
用JAVA技术写的网站书店 代码完全 直接部署就能使用
web前端实验项目叮叮书店.zip
12-20
web前端实验项目叮叮书店
书店电子商务网站源代码
10-05
关于书店电子商务网站的源码，用的工具是 : vc2005+SQL SERVER 2000
网上书店系统
06-03
程序描述：本章实现了一个网上书店系统，采用面向对象的思想，系统的业务逻辑层包括图书类Book、购物车类Cart、会员类User、订单类Order以及订单详细信息类OrderDetail。
网上书店javaweb代码
12-28
只有一个角色客户，客户可以 　　--查看图书信息（包括查看图书详细信息，使用条件（例价格区间）查看图书信息，对图书进行翻页） 　　--把图书加入购物车 　　--查看购物车 　　--修改购物车（包括清空购物车，修改购物车单本图书数量，删除单本图书） 　　--结账（填写用户名和账号信息） 　　--查看交易记录
软件工程js书店需求分析各种文档
11-01
软件工程第二版第五章习题js书店的各种文档，E-R图，结构图，数据流图
叮叮书店(源代码）
北极星的博客
10-15 7039
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <header class="container"> <div id="logo"> <a href="index.html"><h1&
1.6 书店程序
GeoQi_csdn的博客
11-12 275
1.6 书店程序 现在我们已经准备好完成书店程序了。我们需要从一个文件中读取销售记录，生成每本书的销售报告，显示售出册数、总销售额和平均售价。我们假定每个ISBN书号的所有记录在文件中是聚在一起保存的。 我们的程序会将每个ISBN的所有数据合并起来，存入名为total的变量。我们使用另一个名为trans的变量保存读取的每条销售记录。如果trans和total指向相同的ISBN，我们会更新total的值。否则，我们会打印total的值，并将其重置为刚刚读取的数据（trans)： #include <io
叮叮书店 about.html,网页编程HTML+CSS网站设计
weixin_35699301的博客
06-24 2731
压缩包 : 叮叮书店实例.zip 列表叮叮书店实例/叮叮书店实例/about.html叮叮书店实例/accordion.html叮叮书店实例/cart.html叮叮书店实例/category.html叮叮书店实例/contact.html叮叮书店实例/details.html叮叮书店实例/images/叮叮书店实例/images/1-1.png叮叮书店实例/images/1.wma叮叮书店实例/i...
Springboot书店
最新发布
08-28
Springboot书店是一个使用Springboot框架搭建的网络书店销售管理系统。该系统基于Springboot技术，使用MySQL数据库来运行整体程序。 Springboot是一种Java开发框架，它提供了一种快速、简单和便捷的方式来构建Java...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值