前言

大约一年前用了vue1.0写了知乎日报,当时没有用vuex，而且url和view也没有一一对应，并且开源出来别人下载不一定跑的起来（后台代理问题），这次重构用了大约一天时间，使用vue2.0和vuex,基本没有使用vue-cli,自己配的webpack（中间有很多坑，还是vue-cli好用)。使用async/await并且把请求都分离出来方便开发。

需求

前段时间发现了 superagent 这个库，发现比我之前使用的 request 这个库方便多了，准备把我的毕设的爬虫端用这个重写来着，
但是看完文档一直没动手，直到同学让我帮他爬个数据，然后我就写了个爬虫。

效果

新窗口打开

node-CMS

由node.js书写企业内容管理系统

来源

由我和 JxJayden 共同开发的企业内容管理系统。此版本移除了七牛云密钥及加密密钥，并以 .demo.js做结尾。

源码

node-CMS

前言

本项目全部采用果儿岛提供的api，其中省略了支付宝付款这个功能，即不能替代原本官方商城进行商品支付。
使用了angular1.5.8 使用bower管理依赖。采用 rem 实现自适应。以及css media query控制实现响应式布局。部分页面使用flex布局。

源码

github

Demo

http://fruit.garychang.cn

新窗口打开

使用

1
2
3
4
5
6

git clone

bower install

npm install

目的

如果使用原生alert、confirm 等，若用户设置禁止弹窗会影响网页功能，所以使用模拟alert等更为合适。

思路

新建个构造函数，在其上加上属性方法来实现 alert、confirm、prompt功能。

部分代码

css部分

css 部分不多陈述，主要就是把这几个弹出框设置成 position:fixed 就行了，其余样式自己解决。

html部分

这里我对三个弹出框用了三个容器包裹，大部分样式相同。页面基础样式为了方便使用了 flex 布局，详细flex布局可以参照我之前的文章。 flex布局语法简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="alert layout">
        <div class="title">提示</div>
        <div class="close">+</div>
        <div class="content"></div>
        <div class="control">
            <a href="#" class="enter" id="alertEnter">确定</a>
        </div>
    </div>
    <div class="confirm layout">
        <div class="title">提示</div>
        <div class="close">+</div>
        <div class="content"></div>
        <div class="control">
            <a href="#" class="enter" id="confirmEnter">确定</a>
            <a href="#" class="cancel" id="confirmCancel">取消</a>
        </div>
    </div>
    <div class="prompt layout">
        <div class="title">输入内容</div>
        <div class="close">+</div>
        <input type="text" id="userInput">
        <div class="control">
            <a href="#" class="enter" id="promptEnter">确定</a>
        </div>
    </div>
    <div class="container">
        <div>alert</div>
        <button id="oAlert">原生alert</button>
        <button id="iAlert">模拟alert</button>
        <div>confirm</div>
        <button id="oConfirm">原生confirm</button>
        <button id="iConfirm">模拟confirm</button>
        <div>prompt</div>
        <button id="oPrompt">原生prompt</button>
        <button id="iPrompt">模拟prompt</button>
    </div>

javascript部分

前言

使用版本vue1.x。
想用vue构建知乎日报原因很简单，作为一个vue小白很需要亲手做个项目来提升提及以及更加深入了解vue，也希望这个小项目能给刚学习vue的同学一点启发。

准备工作

首先要找到知乎日报的api，这里感谢 @izzyleung 总结的知乎日报api以及说明 因为原来的api不支持跨域嘛，需要自己代理这些api并允许跨域，这里我只代理了8个接口，接口以及参见本项目github的readme。之后再用nginx来反向代理接口。

开发过程

项目参考了vue官方提供的参考项目，使用了 vue-router 和 vue-resource 这两个插件，并且使用了vue-cli 这个脚手架工具来搭建webpack项目。之后就可以正式开发了，UI我大致模仿了知乎日报安卓客户端的UI但是没有实现其全部功能，以后会慢慢完善。对于vue的核心，组件部分，我这里写了6个组件，分别是导航栏组件、侧边栏组件、主页组件、轮播组件、主题列表组件、文章组件，考虑到要模仿客户端UI，这里组件样式全是用sass/css写的。我这里偷懒，响应式布局只写了最外面的container在屏幕宽度大于640px时候宽度调整为640px并且水平居中，所以建议在手机或F12手机模式下浏览demo，另外由于采用了flex布局，请使用现代浏览器。之后就是规划路由啦，然后做做简单的CSS3动画效果，demo就完工了，之后把demo上传到我1M带宽的小水管服务器上，静态文件挂在七牛云上，解决。

（Tips：使用sublime的同学可以下载vue syntax highlight 这个插件来语法高亮.vue文件，但是，当你把 <style>加上lang="sass "时，emmet语法会失效，我的解决方式是sublime右下角暂时更改语法模式为html，另外格式化.vue代码用HTML-CSS-JS Prettify插件并在其配置文件中加上vue即可）。

图片防盗链

当我遇到知乎日报图片防盗链时候我是拒绝的，因为一直提示403，我不能确定是webpack-dev-server出问题还是nginx出问题或者是知乎封了我等等，后来发现如果我挂上ss，或者直接本地打开项目文件，图片是能正常打开的，然后我就意识到是防盗链问题，我的解决方式是用node来转发这些图片并更改请求referer头为www.zhihu.com然后问题就解决了，这里有个**花絮**：开始我把node http.Request 里面url对象的pathname写成了pathnnme然而我还没有发现导致返回的图片一直是本图片仅限在知乎内使用balabala的，我以为是服务器ip被封都放弃了，在上次检查时发现了这个bug然后图片就能正常显示了。