{"id":13536488,"url":"https://github.com/xrr2016/zhihu-daily","last_synced_at":"2025-06-11T21:37:48.465Z","repository":{"id":81684370,"uuid":"80924506","full_name":"xrr2016/zhihu-daily","owner":"xrr2016","description":"知乎日报(Vuejs)","archived":false,"fork":false,"pushed_at":"2017-03-19T10:21:27.000Z","size":25123,"stargazers_count":45,"open_issues_count":0,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T20:11:52.195Z","etag":null,"topics":["materialize","vuejs2"],"latest_commit_sha":null,"homepage":"https://github.com/xrr2016/zhihu-daily","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xrr2016.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-04T14:28:30.000Z","updated_at":"2023-02-28T12:17:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"938b797b-c6e7-4f11-a963-0cc87c311d19","html_url":"https://github.com/xrr2016/zhihu-daily","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xrr2016/zhihu-daily","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fzhihu-daily","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fzhihu-daily/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fzhihu-daily/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fzhihu-daily/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xrr2016","download_url":"https://codeload.github.com/xrr2016/zhihu-daily/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fzhihu-daily/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259346649,"owners_count":22843765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["materialize","vuejs2"],"created_at":"2024-08-01T09:00:40.414Z","updated_at":"2025-06-11T21:37:48.447Z","avatar_url":"https://github.com/xrr2016.png","language":"CSS","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"readme":"# 一款简洁美观的知乎日报\n\n轻松查看知乎日报内容, 收藏你喜欢的文章\n\n## 效果图\n首页\n![index](./demo/index.gif)\n查看文章\n![story](./demo/story.gif)\n主题日报\n![subject](./demo/subject.gif)\n收藏文章\n![favorite](./demo/favorite.gif)\n热门文章\n![hot](./demo/hot.gif)\n首页切换日期\n![switchDate](./demo/date.gif)   \n\n## 简介\n\n一个适合用来学习[Vuejs](https://cn.vuejs.org/)的纯前端项目, 使用[vue-router](https://router.vuejs.org/)做前端路由跳转, 结合[vuex](https://vuex.vuejs.org/)和localStroage开发了收藏功能, 使用[axios](https://github.com/mzabriskie/axios)进行资源请求.\n\n在页面里使用[watch](https://cn.vuejs.org/v2/api/#watch)来监听需要改变的值, [filter](https://cn.vuejs.org/v2/guide/syntax.html#Filters)将数据格式化.\n\n\n## 开发流程\n\n首先使用vue-cli按提示创建好项目, 然后依自己需要安装依赖, 我选择了我觉得挺好\n看的[Materialize](http://materializecss.com/)作为UI框架, 还有[toastr](https://github.com/CodeSeven/toastr),\n一个弹出toast的库, 然后参考了[Gallery](https://themes.materializecss.com/pages/demo)和\n[colorhurt](http://colorhunt.co/), 这两个网站的风格, 搭建页面.\n\n```bash\nnpm install materialize-css toastr --save\n```\n\n接着安装完全部需要的依赖, 删除不需要的文件.\n\n因为跨域的原因, 对config/index文件里面的proxyTable选项进行设置, 为了开发的时候方便获取数据, 详细内容参考[文档](https://vuejs-templates.github.io/webpack/proxy.html).\n\n```javascript\nproxyTable: {\n  '/api': {\n    target: 'http://news-at.zhihu.com',\n    changeOrigin: true\n  }\n},\n```\n\n然后在src/main导入需要的文件\n![import](./demo/import.png)\n\n添加几个需要的组件, 先预留, 之后在开发.\n\n顶部导航栏compoments/navbar, 主要功能是导航, 和显示路由的位置;\n\n页脚compoments/footer, 显示网站信息;\n\n首页compoments/latest, 显示知乎日报的最新消息;\n\n查看文章页面compoments/story, 查看选中的文章, 和文章评论;\n\n显示主题日报页面compoments/sunject, 查看不同的主题信息;\n\n显示已收藏文章的页面, 查看自己收藏的文章页面.\n\n再来就是配置前端路由, 将组件引入到router/index文件里, 为每个路由加上name字段, 方便在组件里调用.\n![router](./demo/router.png)\n这样做是因为不管是文章页还是主题页都有唯一的参数id, 使用这个参数方便跳转, 和跳转之后利用id进行资源请求.\n\n```javascript\n\u003crouter-link :to=\"{name: 'name', params: { id: 1234 }}\"\u003elink\u003c/router-link\u003e\n```\n\n然后将\u003crouter-view\u003e放到App.vue里面.\n\n```javascript\n\u003cdiv id=\"app\" class=\"row\"\u003e\n  \u003capp-navbar\u003e\u003c/app-navbar\u003e\n  \u003crouter-view\u003e\u003c/router-view\u003e\n  \u003capp-footer\u003e\u003c/app-footer\u003e\n\u003c/div\u003e\n```\n\n路由配置完后, 使用[localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage)来开发收藏文章的功能. 就是将文章的内容存储到本地, 这样就可以在没网络的时候看文章了. [localStore.js](./src/store/localStore.js)\n\n主要有\n\naddLocalStory, 添加一个文章;\n\nremoveLocalStory, 删除一个文章;\n\ntotalLocalStoryNum, 返回收藏的文章总数;\n\nclearLocalStories, 清除全部收藏文章;\n\n![localStore](./demo/localStore.png)\n\n有了这几个方法就可以对收藏的文章进行管理.\n\n接下来完成组件部分, 对照[materialize](http://materializecss.com/)的文档写好页面,\n这里是花时间最多的地方, 布一个好看的界面十分困难, 改来改去还是有不满意的地方, 使用[Grid](http://materializecss.com/grid.html)布局, 加上需要的元素, 其他几个组件同理, 不在赘述.\n\n需要注意的是, 知乎日报的API返回的文章页面是一个包含html的字符串, 使用v-html渲染到页面上, 但是没有css文件, 解决的方法是将知乎日报文章页面的css文件(请求单个文章时会获得文章页css文件的url)保存到src/assets目录里面, 然后在story.vue里面导入\n\n```\n@import \"../assets/zhihu.daily.css\";\n```\n\n另一个问题是文章内的图片打不开, 解决的方法是在每张图片的src前面加上[Images.weserv](https://images.weserv.nl)的前缀, 应用Vuejs的filter完成.\n![filter](./demo/filter.png)\n\n页面基本写好, 把请求到的数据放上去后, 就基本完成了. 但是发现在导航栏切换主题日报的时候, 虽然路由变了\n然而主题页页面不更新, ajax请求也没发送. 解决方法是使用\nVuejs的watch来监听路由的变化, 一旦路由的值变了, 就发送一个新的请求来获取数据, 同理还有首页里的日期值变化.\n\n![watch](./demo/watch.png)\n\n基本完成, 将组件内请求数据的url换成真实的地址.\n\n最后使用webpack打包成静态资源/dist, 这样就可以用后端服务器来运行项目了.\n\n## 结语\n\n使用Vuejs等框架几乎不再需要进行DOM操作, 而且开发的时候感觉更有条理, 出现问题容易知道问题出在哪里.\n同时约束性更高, 代码有一定的格式, 以前使用jQuery的话很容易写出一长条的代码, 出错了也不好修改.\n\nps: 找工作中, 求推荐一些比较新的前端开发面试题目, 谢谢.\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# webpack打包后使用http-server后端快速启动查看项目\nnpm run start\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\n## 知乎日报API\n\n感谢[知乎日报 API 分析](https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90)提供的接口\n\nwritten by [xrr2016](https://github.com/xrr2016),欢迎issue,fork,star.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrr2016%2Fzhihu-daily","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxrr2016%2Fzhihu-daily","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrr2016%2Fzhihu-daily/lists"}