我用ionic框架写了个豆瓣图书馆

eechen 发布于2019-08-20 14:33 / 517人阅读

摘要：集移动应用与框架与一身的框架利用我们可以轻易制造出一款带有原生应用与体验的移动这次我们就搭建一个图书还能听歌看电影实现了一些基本的功能，搜索图书类型，查看图书详情，搜索图书标签，查看图书笔记等。前端交互采用了与绑定的。

ionic : 集移动应用UI与 angularjs 框架与一身的 Hybrid App 框架

利用 ionic 我们可以轻易制造出一款带有原生应用UI与体验的移动App

这次我们就搭建一个图书 App (还能听歌看电影....), 实现了一些基本的功能，搜索图书类型，查看图书详情，搜索图书标签，查看图书笔记等。当然还能听歌搜个电影之类的。。。。。

先上几张截图

总览

前端： ionic 框架 => angularjs, ui-router, ngResource

后端： nodejs => express, request

功能实现：主题搜索，标签搜索，视图内跳转，下拉刷新，上划加载，图书评论

前端UI：主要采用 ionic 中原生 UI 组件

数据来源：我们没有布置数据库，所有数据都来自豆瓣 API。在前端 Ajax 中会有 CORS 跨域问题，所以我们依靠 nodejs 布置路由进行数据请求，然后转接给前端。

前端交互：采用了与 ionic 绑定的 angularjs。而且 ionic 已经帮我们优化了部分组件，使 ui 交互更符合移动应用的感觉，我们只需要利用好 ionic 封装好的组件就能达到类似于一个移动应用的体验。

结构

路由： www/js/app.js。在 angularjs 主文件 app.js 里布置 url 与 html 模板的映射。就像这个样子~~ 其中包括一些视图内嵌套视图的，会有特殊的写法。具体参见 ui-router

  //app.js
.state("tab", {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

Api： www/js/api.js 。与后端预定好数据接口之后我们就可以请求数据啦，当然你也可以用原生 Ajax 请求，但毕竟 ionic 是构建在 angularjs 基础之上的，我们使用 angularjs 的 ngResource 服务配置 api 。具体是这个样子地~~

//BooksResource.js

Books.$inject = ["$resource"];
function Books($resource) {
  return $resource("/api/books/", {},
  {"query": {method: "GET"}})
}

模板：模板放在 templates 文件夹中，对应四个主视图及一个详情视图。每个视图文件中包含一个 html 模板和一个 js 文件(控制器)。啥是控制器呢？简单来说就像你平时写的 js 文件一样，对对应的 html 进行“控制” 。

定义好 Api，模板，路由后，就可以写页面了。我们所有请求的数据都在控制器文件中定义，然后在 html 文件中引用就可以了。

基本结构就是这样，有兴趣的同学可以git。? 功能完善中，欢迎pr
https://github.com/ManInBoat/...

云服务器 GPU云服务器豆瓣图书我用过我用我用python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81734.html

爬虫学习之基于 Scrapy 的爬虫自动登录

摘要：概述在前面两篇爬虫学习之基于的网络爬虫和爬虫学习之简单的网络爬虫文章中我们通过两个实际的案例，采用不同的方式进行了内容提取。概述在前面两篇（爬虫学习之基于Scrapy的网络爬虫和爬虫学习之简单的网络爬虫）文章中我们通过两个实际的案例，采用不同的方式进行了内容提取。我们对网络爬虫有了一个比较初级的认识，只要发起请求获取响应的网页内容，然后对内容进行格式化存储。很多时候我们抓取到的内容...

Panda 2019-07-25 10:37 评论0 收藏0
我家猫老喜欢和我躲猫猫，我用Python赶忙写了个猫脸检测器。在哪里都逃不出我的手心。

摘要：前言喵星人真的是要统治世界了。完整的代码如下所示效果如下我们选择这位颜值高的喵星人代码测试效果要测试代码，只需使用您选择的工具运行它。前言喵星人真的是要统治世界了。?不然为什么OpenCV自带的检测器中除了人脸检测、行人检测这些意料之中就应该存在的检测器之外，还悄悄多出了猫...

crossoverJie 2021-11-25 09:43 评论0 收藏0
假装Python高手，把类这样改，真刺激！

摘要：今天我们来说一个非常实用的例子，小菜接到组长老王的一个任务，安排一个新的活，这个活是这样的老王小菜啊，你帮我写一个登入脚本，跑十几条命令到服务器上，然后存一下日志。这个时候，小菜偷偷的瞄了一眼组长老王，常舒一口气，总于写完了。 Python学了好几年，发现功力还是那样，很多同学经常这样抱...

dance 2021-09-29 09:35 评论0 收藏0
程序员口述：我是如何工作三年后跳槽到美团的？

摘要：终于，我在看到美团的社招信息后，勇敢地迈出了第一步。当时参加的是美团点评部门的面试，部门前端技术栈是，后端用的。后来才知道美团是一次性全部面完的。所以以后有去参加美团面试的童鞋，最好做好面试四个小时的打算。 showImg(https://segmentfault.com/img/bV0c3T?w=672&h=361); 前言我叫王小闰（花名），非科班出身，野生前端从业者，在小公司打...

nevermind 2019-08-22 11:16 评论0 收藏0