imitate-One

用vue+webpack + node仿制的One[一个 ]app
授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 宁弘亮
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

imitate ONE

简介:这是一个使用vue仿的[ONE.一个]app,纯粹学习而已。

声明 更新于2018-10-14。

这基本是一个过期的demo了,因为原本所用到的技术都更新了,所以请参考我隔壁的最新demo.

用到的技术

vue2 + vue-router + vue-resource + webpack + express + Node爬虫

后台接口数据

​用express 搭建的后台,除了图文、阅读、音乐页面的列表是读取的本地json文件外,首页以及其他详情数据都是用爬虫爬取得[ONE.一个]网站的数据[注:这里爬取数据只是一个练习,练习而已,并没有非法使用爬来的数据呀 :scared: ]。

关于爬虫

这里只是一个非常简单的爬虫,用的是Node HTTP API的get方法,获取到要爬取的页面,然后使用cheerio 进行解析处理获得想要的数据。

运行项目

#先克隆项目
git clone https://github.com/eidonlon/imitate-One.git

#进入文件夹
cd imitate-One

#安装依赖
npm install

#运行
npm run dev

#然后浏览器会自动打开页面,请在chrome下调成手机模式预览
#另,项目打包[此处只打包了前端的代码,后台并没有一起被打包]
npm run build

效果演示

线上效果请戳这里;(请在chrome下调成手机模式预览)

移动端扫描下方二维码

二维码

部分截图

首页

home

菜单

menu

音乐

music

阅读

read

都看到这里,给个star 吧。

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

  • 从聊天界面入手,而聊天界面先从键盘的实现上入手,键盘的实现分为界面UI的实现和在视图控制器上如何调用 必须掌握的知识点有:委托协议delegate 首先定义协议,这个协议代表着在聊天界面视图控制器点击输入框触发的事件的页面传值: #import <UIKit/UIKit.h> @class KeyBordView; @protocol KeyBordVIewDelegate <NSObject

  • 计划书和宣誓! 在“仿微信练习工程”系列文章中从0开始建造仿微信的即使通讯联系APP的过程中遇到的学习问题,实现优化,成长经历等 实现的大致过程和布局: 先从客户端开始,总结之前学习到的知识,大致可以从下面几个步骤和方向实现: 1.列表框架:用一UITableView来实现的通讯好友列表,这个时候列表要有多选、点击展开折叠功能。 2.列表进入的聊天界面:这个也是最重要,最重点的,这里我会尝试用Ma

  • 分析  imitate wechat - 1  中遇到的学习点: 一. 委托,传参 1. 委托,关于委托的知识点在我博客的文章也说了很多就不再阐述了,主讲一套“规范”: 委托者对象中定义  delegate 委托指针 : @interface KeyBordView : UIView @property (nonatomic, assign) id <KeyBordVIewDelegate> d

  •  function initMouseEventDM() {   var eo=document.getElementById("objid");   if( window.outerWidth == undefined )   {     eo.fireEvent("onclick");   }   else   {     var vo = document.createEvent("Mous

  • As usual, I talked with my boss face to face.  Although, it is not the first time we talked to him, but I am still a little nervous.  We talked a lot today, about the software process, about the lates

  • nhibernate one to one,one to many?? 一对多,和多对一的关系。连带查询 太神奇了。 步骤如下: one to  one 的关键: 一对一的关系,两个表都是主键。  增加一个model的属性 : 如果是一个 就是model对象 如果是多个就是list<model> 并且在hbm.xml中配置一对多 or 一对一的关系 配置如下: 《一》  <bag name="ls

  • 1、刷屏关kernel 屏蔽内核的打印信息 echo "0 0 0 0" > /proc/sys/kernel/printk 2、关闭双屏(muji) mount -o remount,rw /tvconfig  busybox vi /config/panel/UD_VB1_8LANE.ini  m_bPanelDualPort        =   1;  muji重启动进入下面设置 << M

  • one to one  "persistent class not known"     个人认为是配置的问题,one-to-one标签的两种用法: 1.一端使用:        <one-to-one name=.. class=.. constrained="true">   另一端可以是:        <one-to-one name=..> 2.在<many-to-one>配置中uniq

 相关资料
  • One 一个旗鱼版 One for SailfishOs

  • one-to-one关联类似于many-to-one关联,不同之处在于该列将被设置为唯一。 例如,地址对象可以与单个员工对象相关联。 定义RDBMS表 (Define RDBMS Tables) 考虑一种情况,我们需要将员工记录存储在EMPLOYEE表中,该表具有以下结构 - create table EMPLOYEE ( id INT NOT NULL auto_increment,

  • One

    One-Hot 编码,又称一位有效编码,其方法是使用N位状态寄存器来对N个状态进行编码,每个状态都由他独立的寄存器位,并且在任意时候,其中只有一位有效。 例如: 自然状态码为:000,001,010,011,100,101 独热编码为:000001,000010,000100,001000,010000,100000 可以这样理解,对于每一个特征,如果它有m个可能值,那么经过独热编码后,就变成了m

  • One OS 简介 One OS是一个专注于可靠性和简易可用的小型实时系统。它通过采取形式化方法来确保系统的可靠性。所有的实时操作系统必备的功能它都具备,但是并不在此基础上提供更多可选组件以确保内核的精炼性。这样,得到的内核就是一个最小化的内核,可以很方便地对它进行形式化验证。同时,它还可以作为客户操作系统运行在虚拟机监视器上。 本系统比一个全功能系统的相比要小得多,而且理解起来应该也相对容易得多

  • One - 一个极简的基于swoole常驻内存框架。 hello world 安装 composer create-project lizhichao/one-app appcd appphp App/swoole.php 测试 curl http://127.0.0.1:8081/ 主要功能 RESTful路由 中间件 websocket/tcp/http……任意协议路由 ORM模型 统一的se

  • One-JAR 可以解决如何把一个依赖于多个其它 jar 文件的应用程序发布成一个单一的可执行 Jar 文件。它使用一个可定制的类装载器 (classloader) 来打开在主 Jar 中的 Jar 文件包。