Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build 🎉 init Feb 4, 2017
config 👌 change filter to computed Feb 21, 2017
demo 👌 📝 edit README.md Feb 24, 2017
src Update Navbar.vue Feb 26, 2017
static 🎉 init Feb 4, 2017
.babelrc 🎉 init Feb 4, 2017
.editorconfig 🎉 init Feb 4, 2017
.gitignore 🎉 init Feb 4, 2017
README.md 👌 📝 edit README.md Feb 24, 2017
index.html 🚚 edit navbar.vue Feb 20, 2017
package.json Update package.json Mar 19, 2017

README.md

一款简洁美观的知乎日报

轻松查看知乎日报内容, 收藏你喜欢的文章

效果图

首页 index 查看文章 story 主题日报 subject 收藏文章 favorite 热门文章 hot 首页切换日期 switchDate

简介

一个适合用来学习Vuejs的纯前端项目, 使用vue-router做前端路由跳转, 结合vuex和localStroage开发了收藏功能, 使用axios进行资源请求.

在页面里使用watch来监听需要改变的值, filter将数据格式化.

开发流程

首先使用vue-cli按提示创建好项目, 然后依自己需要安装依赖, 我选择了我觉得挺好 看的Materialize作为UI框架, 还有toastr, 一个弹出toast的库, 然后参考了Gallerycolorhurt, 这两个网站的风格, 搭建页面.

npm install materialize-css toastr --save

接着安装完全部需要的依赖, 删除不需要的文件.

因为跨域的原因, 对config/index文件里面的proxyTable选项进行设置, 为了开发的时候方便获取数据, 详细内容参考文档.

proxyTable: {
  '/api': {
    target: 'http://news-at.zhihu.com',
    changeOrigin: true
  }
},

然后在src/main导入需要的文件 import

添加几个需要的组件, 先预留, 之后在开发.

顶部导航栏compoments/navbar, 主要功能是导航, 和显示路由的位置;

页脚compoments/footer, 显示网站信息;

首页compoments/latest, 显示知乎日报的最新消息;

查看文章页面compoments/story, 查看选中的文章, 和文章评论;

显示主题日报页面compoments/sunject, 查看不同的主题信息;

显示已收藏文章的页面, 查看自己收藏的文章页面.

再来就是配置前端路由, 将组件引入到router/index文件里, 为每个路由加上name字段, 方便在组件里调用. router 这样做是因为不管是文章页还是主题页都有唯一的参数id, 使用这个参数方便跳转, 和跳转之后利用id进行资源请求.

<router-link :to="{name: 'name', params: { id: 1234 }}">link</router-link>

然后将放到App.vue里面.

<div id="app" class="row">
  <app-navbar></app-navbar>
  <router-view></router-view>
  <app-footer></app-footer>
</div>

路由配置完后, 使用localStorage来开发收藏文章的功能. 就是将文章的内容存储到本地, 这样就可以在没网络的时候看文章了. localStore.js

主要有

addLocalStory, 添加一个文章;

removeLocalStory, 删除一个文章;

totalLocalStoryNum, 返回收藏的文章总数;

clearLocalStories, 清除全部收藏文章;

localStore

有了这几个方法就可以对收藏的文章进行管理.

接下来完成组件部分, 对照materialize的文档写好页面, 这里是花时间最多的地方, 布一个好看的界面十分困难, 改来改去还是有不满意的地方, 使用Grid布局, 加上需要的元素, 其他几个组件同理, 不在赘述.

需要注意的是, 知乎日报的API返回的文章页面是一个包含html的字符串, 使用v-html渲染到页面上, 但是没有css文件, 解决的方法是将知乎日报文章页面的css文件(请求单个文章时会获得文章页css文件的url)保存到src/assets目录里面, 然后在story.vue里面导入

@import "../assets/zhihu.daily.css";

另一个问题是文章内的图片打不开, 解决的方法是在每张图片的src前面加上Images.weserv的前缀, 应用Vuejs的filter完成. filter

页面基本写好, 把请求到的数据放上去后, 就基本完成了. 但是发现在导航栏切换主题日报的时候, 虽然路由变了 然而主题页页面不更新, ajax请求也没发送. 解决方法是使用 Vuejs的watch来监听路由的变化, 一旦路由的值变了, 就发送一个新的请求来获取数据, 同理还有首页里的日期值变化.

watch

基本完成, 将组件内请求数据的url换成真实的地址.

最后使用webpack打包成静态资源/dist, 这样就可以用后端服务器来运行项目了.

结语

使用Vuejs等框架几乎不再需要进行DOM操作, 而且开发的时候感觉更有条理, 出现问题容易知道问题出在哪里. 同时约束性更高, 代码有一定的格式, 以前使用jQuery的话很容易写出一长条的代码, 出错了也不好修改.

ps: 找工作中, 求推荐一些比较新的前端开发面试题目, 谢谢.

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

# webpack打包后使用http-server后端快速启动查看项目
npm run start

License

MIT

知乎日报API

感谢知乎日报 API 分析提供的接口

written by xrr2016,欢迎issue,fork,star.