Git Product home page Git Product logo

douban's Introduction

模仿豆瓣前端

Build Status

vue.js 2.0, vuex, vue-router, vue-server-renderer, express, cheerio, superagent, redis

live demo (部署在搬瓦工主机上,海外节点,应该需要1s)

http://jk77.me

Build

#redis-server

redis-server &

# install dependencies
npm install

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

# build for production with minification
npm run build && npm start

注意

  1. 请确认 redisstart 状态

  2. 在浏览器中访问 http://127.0.0.1:8080/api/spider 启动爬虫

  3. 目前完成的界面: 首页, 读书首页, 标签页, 列表页, 详情页

    http://127.0.0.1:8080/

    http://127.0.0.1:8080/book

    http://127.0.0.1:8080/tags

    http://127.0.0.1:8080/tag/javascript

    http://127.0.0.1:8080/subject/3332698

  4. 增加了搜索功能,优化了排版, 但是豆瓣没有评论接口,所以只能等日后写爬虫解决

更新到 vue.js2.0 记录

  1. 在2.0中 Vue.set(store.item, item) 不会触发更新dom, store.item = item 才可以
  2. 由于 server side render 的原因, 不能使用 vue-resource 了, 改用 superagent 发请求了
  3. store.item 为{}时, 在页面中引用 会直接error, mock数据, 请求成功再更新
  4. webpack出现了 mdzz 的错误 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 解决办法为:
npm uninstall webpack --save-dev

followed by

npm install [email protected] --save-dev

Then you should be able to gulp again. Fixed the issue for me.

然后 npm run dev 即可, 蜜汁玄学 参考: angular/angular-cli#2234

<div>
  <span v-for="n in 10">{{ n }}</span> // 需要指定n
</div>
<div>
  <span v-for="(item, $index) in items">{{ $index }}</span> // 需要显示声明$index
</div>
  1. 上面的 bug 已经被 尤大 fixed
  2. v-html 替换了 {{{}}}

目录结构

.
├── README.md 
├── build
├── index.html
├── server.js
├── fe
│   ├── App.vue
│   ├── app.js
│   ├── assets
│   ├── client-entry.js
│   ├── components
│   ├── router
│   ├── server-entry.js
│   ├── store
│   └── views
├── be
│   ├── spiders
│   └── routers
├── node_modules
├── package.json
├── public
└── test



douban's People

Contributors

playmyswift avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.