├── src
    ├── store
    │   ├── getter.js
    │   ├── modules
    │   │   ├── user.js
    │   │   └── app.js
    │   └── index.js
    ├── pages
    │   ├── books
    │   │   └── index.vue
    │   ├── index
    │   │   ├── CreateListView.js
    │   │   ├── top.vue
    │   │   ├── index.vue
    │   │   └── special_column.vue
    │   └── login
    │   │   └── index.vue
    ├── components
    │   ├── test.vue
    │   ├── about.vue
    │   └── index.vue
    ├── util
    │   ├── title-mixin.js
    │   ├── filters.js
    │   ├── request.js
    │   └── util.js
    ├── index.template.html
    ├── app.js
    ├── styles
    │   └── style.stylus
    ├── entry-server.js
    ├── entry-client.js
    ├── router
    │   └── index.js
    ├── api
    │   └── index.js
    └── App.vue
├── public
    ├── normal.png
    ├── logo-48.png
    ├── logo-98.png
    ├── apijson.json
    ├── collect.svg
    ├── share.svg
    ├── comment.svg
    └── like.svg
├── .babelrc
├── manifest.json
├── LICENSE
├── package.json
├── README.md
└── server.js


/src/store/getter.js:
--------------------------------------------------------------------------------
1 | export default {
2 | }


--------------------------------------------------------------------------------
/public/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wodb/Vue-SSR-Demo/HEAD/public/normal.png


--------------------------------------------------------------------------------
/public/logo-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wodb/Vue-SSR-Demo/HEAD/public/logo-48.png


--------------------------------------------------------------------------------
/public/logo-98.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wodb/Vue-SSR-Demo/HEAD/public/logo-98.png


--------------------------------------------------------------------------------
/src/pages/books/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="books container">
3 | 		小书
4 | 	</div>
5 | </template>


--------------------------------------------------------------------------------
/src/components/test.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <div class="test">
3 |         1111111111
4 |     </div>
5 | </template>
6 | <script>
7 | 
8 | </script>


--------------------------------------------------------------------------------
/public/apijson.json:
--------------------------------------------------------------------------------
1 | [
2 |   {"name":"a","id":1},
3 |   {"name":"b","id":2},
4 |   {"name":"c","id":3},
5 |   {"name":"d","id":4},
6 |   {"name":"e","id":5},
7 |   {"name":"f","id":6}
8 | ]


--------------------------------------------------------------------------------
/public/collect.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M15 13h-2v1h2v2h1v-2h2v-1h-2v-2h-1v2zM4 5h12v1H4V5zm0 4h12v1H4V9zm0 4h8v1H4v-1z" fill="#B2BAC2" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }]
 4 |   ],
 5 |   "plugins": [
 6 |     "syntax-dynamic-import",
 7 |     "transform-object-rest-spread",
 8 |     [
 9 |       "component",
10 |       {
11 |         "libraryName": "element-ui",
12 |         "styleLibraryName": "theme-chalk"
13 |       }
14 |     ]
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/src/store/modules/user.js:
--------------------------------------------------------------------------------
 1 | const user = {
 2 |     state:{
 3 |         userInfo:null
 4 |     },
 5 |     mutations:{
 6 |         setUser:(state,userInfo) => {
 7 |             state.userInfo = userInfo
 8 |         },
 9 |     },
10 |     actions:{
11 |         getUser({commit,state}) {
12 | 
13 |         },
14 |     }
15 | }
16 | 
17 | export default user


--------------------------------------------------------------------------------
/public/share.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g stroke="#AAB0BA" fill="none" fill-rule="evenodd"><path d="M10.524 3.413v8.235" stroke-linejoin="round"/><path d="M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07"/></g></svg>


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | import user from './modules/user'
 5 | import app from './modules/app'
 6 | import getters from './getter'
 7 | 
 8 | Vue.use(Vuex)
 9 | 
10 | export default () => {
11 |     return new Vuex.Store({
12 |         modules:{
13 |             user,
14 |             app
15 |         },
16 |         getters,
17 |         strict: process.env.NODE_ENV !== 'production'
18 |     })
19 | }


--------------------------------------------------------------------------------
/public/comment.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><rect id="a" x="59" y="54" width="54" height="25" rx="1"/><mask id="b" x="0" y="0" width="54" height="25" fill="#fff"><use xlink:href="#a"/></mask></defs><g transform="translate(-68 -56)" fill="none" fill-rule="evenodd"><path fill="#B2BAC2" d="M72 61v8.038h4.444L81.111 72v-2.962H84V61z"/><use stroke="#EDEEEF" mask="url(#b)" stroke-width="2" xlink:href="#a"/></g></svg>


--------------------------------------------------------------------------------
/src/pages/index/CreateListView.js:
--------------------------------------------------------------------------------
 1 | import Top from './top.vue'
 2 | import Special_column from "./special_column.vue";
 3 | 
 4 | export default (type) => {
 5 |     return {
 6 |         asyncData({ store, router }) {
 7 |             return store.dispatch('FETCH_INDEX_LIST_BY_TYPE', { type })
 8 |         },
 9 |         render(h) {
10 |             if (type == 'top') {
11 |                 return h(Top, { props: { type } })
12 |             }
13 |             return h(Special_column, { props: { type } })
14 |         }
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/components/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="about">
 3 |         <ul>
 4 |             <li v-for="item in aboutList" :key="item.id">{{item.name}}</li>
 5 |         </ul>
 6 |     </div>
 7 | </template>
 8 | <script>
 9 |     export default {
10 |         data() {
11 |             return {}
12 |         },
13 |         asyncData({store,router}) {
14 |             return store.dispatch('getAbout')
15 |         },
16 |         computed:{
17 |             aboutList() {
18 |                 return this.$store.state.aboutList
19 |             }
20 |         }
21 |     }
22 | </script>


--------------------------------------------------------------------------------
/src/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="index">
 3 |         <!--这是index-->
 4 |         <ul>
 5 |             <li v-for="item in fooCount" :key="item.id">{{item.name}}</li>
 6 |         </ul>
 7 |     </div>
 8 | </template>
 9 | <script>
10 |     export default {
11 |         data() {
12 |             return {}
13 |         },
14 |         asyncData({store,router}) {
15 |             return store.dispatch('getList')
16 |         },
17 |         computed:{
18 |             fooCount() {
19 |                 return this.$store.state.indexList
20 |             }
21 |         }
22 |     }
23 | </script>


--------------------------------------------------------------------------------
/src/util/title-mixin.js:
--------------------------------------------------------------------------------
 1 | const getTitle = (vm) => {
 2 | 	const { title } = vm.$options
 3 | 	if (title) {
 4 | 		return typeof title == 'function' ? title.call(vm) : title
 5 | 	}
 6 | }
 7 | 
 8 | const serverTitleMixin = {
 9 | 	created() {
10 | 		const title = getTitle(this)
11 | 		if (title) {
12 | 			this.$ssrContext.title = title
13 | 		}	
14 | 	}
15 | }
16 | 
17 | const clientTitleMixin = {
18 | 	mounted() {
19 | 		const title = getTitle(this)
20 | 		if (title) {
21 | 			document.title = title
22 | 		}
23 | 	}
24 | }
25 | 
26 | export default process.env.VUE_ENV == 'server' ? serverTitleMixin : clientTitleMixin


--------------------------------------------------------------------------------
/public/like.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><rect id="a" y="54" width="60" height="25" rx="1"/><mask id="b" x="0" y="0" width="60" height="25" fill="#fff"><use xlink:href="#a"/></mask></defs><g transform="translate(-9 -56)" fill="none" fill-rule="evenodd"><use stroke="#EDEEEF" mask="url(#b)" stroke-width="2" xlink:href="#a"/><path d="M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z" fill="#B2BAC2"/></g></svg>


--------------------------------------------------------------------------------
/src/util/filters.js:
--------------------------------------------------------------------------------
 1 | export const formatter = (v) => {
 2 |     let timeDistance = (new Date().getTime() - new Date(v).getTime()) / 1000
 3 |     if ((timeDistance / 60) < 1) {
 4 |         return `1分钟前`
 5 |     } else if ((timeDistance / 60) < 60) {
 6 |         return `${Math.floor((timeDistance / 60))}分钟前`
 7 |     } else if ((timeDistance / 60 / 60) < 24) {
 8 |         return `${Math.floor((timeDistance / 60 / 60))}小时前`
 9 |     } else if ((timeDistance / 60 / 60 / 24) < 30) {
10 |         return `${Math.floor((timeDistance / 60 / 60 / 24))}天前`
11 |     } else if ((timeDistance / 60 / 60 / 24 / 30) < 12) {
12 |         return `${Math.floor((timeDistance / 60 / 60 / 24 / 30))}月前`
13 |     } else {
14 |         return `${Math.floor((timeDistance / 60 / 60 / 24 / 30 / 12))}年前`
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/index.template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>{{ title }}</title>
 5 |     <meta charset="utf-8">
 6 |     <meta name="mobile-web-app-capable" content="yes">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
10 |     <meta name="theme-color" content="#f60">
11 |     <!-- apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件，用来在iphone和ipod上创建快捷键时使用。 -->
12 |     <link rel="apple-touch-icon" sizes="98x38" href="/public/logo-98.png">
13 |     <link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
14 |     <link rel="manifest" href="/manifest.json">
15 |   </head>
16 |   <body>
17 |   <!--vue-ssr-outlet-->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | /*这是一个工厂函数导出app的实例*/
 2 | import Vue from 'vue'
 3 | import ElementUI from 'element-ui'
 4 | import createRouter from './router/index'
 5 | import App from './App.vue'
 6 | import createStore from './store/index'
 7 | import { sync } from 'vuex-router-sync'
 8 | import * as filters from '@/util/filters'
 9 | import titleMixin from './util/title-mixin'
10 | import 'element-ui/lib/theme-chalk/index.css'
11 | import './styles/style.stylus'
12 | 
13 | Object.keys(filters).forEach((key) => {
14 |     Vue.filter(key,filters[key])
15 | })
16 | 
17 | Vue.mixin(titleMixin)
18 | 
19 | Vue.use(ElementUI, { size: 'small' })
20 | 
21 | 
22 | export function createApp() {
23 | 
24 |     const router = createRouter()
25 |     const store = createStore()
26 |     
27 |     sync(store,router)
28 |     const app = new Vue({
29 |         router,
30 |         store,
31 |         render: (h) => h(App)
32 |     })
33 |     return {app, router, store}
34 | }


--------------------------------------------------------------------------------
/src/util/request.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 | 	api:null, // 当做API方法
 5 | 	config:{
 6 | 		cookie:''
 7 | 	}, // 这里存放cookie和一些配置
 8 | 	setCookie(cookie) {
 9 | 		this.config.cookie = cookie
10 | 	},
11 | 	createApi(config) {
12 | 		this.config = config
13 | 
14 | 		const service = axios.create({
15 | 			baseURL:'http://test.mac.com',
16 | 			timeout:10000,
17 | 			headers:{
18 | 				// token:this.config.cookie
19 | 			}
20 | 		})
21 | 
22 | 		service.interceptors.request.use(config => {
23 | 
24 | 			console.log(`request.js config`,this.config)
25 | 		    return config
26 | 		}, error => {
27 | 		    console.log(`for debug request`,error)
28 | 		    return Promise.reject(error)
29 | 		})
30 | 
31 | 		service.interceptors.response.use(response => {
32 | 			if (response.data.s != 1) {
33 | 				return Promise.reject(response.data.m)
34 | 			}
35 | 		    return response.data
36 | 		}, error => {
37 | 		    return Promise.reject(error)
38 | 		})
39 | 		
40 | 		this.api = service
41 | 	}
42 | }


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Vue Hackernews 2.0",
 3 |   "short_name": "Vue HN",
 4 |   "icons": [{
 5 |       "src": "/public/logo-120.png",
 6 |       "sizes": "120x120",
 7 |       "type": "image/png"
 8 |     }, {
 9 |       "src": "/public/logo-144.png",
10 |       "sizes": "144x144",
11 |       "type": "image/png"
12 |     }, {
13 |       "src": "/public/logo-152.png",
14 |       "sizes": "152x152",
15 |       "type": "image/png"
16 |     }, {
17 |       "src": "/public/logo-192.png",
18 |       "sizes": "192x192",
19 |       "type": "image/png"
20 |     }, {
21 |       "src": "/public/logo-256.png",
22 |       "sizes": "256x256",
23 |       "type": "image/png"
24 |     }, {
25 |       "src": "/public/logo-384.png",
26 |       "sizes": "384x384",
27 |       "type": "image/png"
28 |     }, {
29 |     "src": "/public/logo-512.png",
30 |     "sizes": "512x512",
31 |     "type": "image/png"
32 |     }],
33 |   "start_url": "/",
34 |   "background_color": "#f2f3f5",
35 |   "display": "standalone",
36 |   "theme_color": "#f60"
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/src/styles/style.stylus:
--------------------------------------------------------------------------------
 1 | html, body, div, span, applet, object, iframe,
 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 | a, abbr, acronym, address, big, cite, code,
 4 | del, dfn, em, img, ins, kbd, q, s, samp,
 5 | small, strike, strong, sub, sup, tt, var,
 6 | b, u, i, center,
 7 | dl, dt, dd, ol, ul, li,
 8 | fieldset, form, label, legend,
 9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, embed,
11 | figure, figcaption, footer, header, hgroup,
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video
14 |     margin: 0;
15 |     padding: 0;
16 |     border: 0;
17 |     font-size: 100%;
18 |     font: inherit;
19 |     vertical-align: baseline;
20 |     color #333;
21 | 
22 | /* HTML5 display-role reset for older browsers */
23 | article, aside, details, figcaption, figure,
24 | footer, header, hgroup, menu, nav, section
25 |     display: block;
26 | 
27 | body
28 |     line-height: 1;
29 |     background-color #f4f5f5;
30 | 
31 | img
32 |     width 100%
33 |     height 100%
34 | 
35 | ol, ul
36 |     list-style: none;
37 | 
38 | blockquote, q
39 |     quotes: none;
40 | 
41 | blockquote:before, blockquote:after,
42 | q:before, q:after
43 |     content: '';
44 |     content: none;
45 | 
46 | table
47 |     border-collapse: collapse;
48 |     border-spacing: 0;
49 | a
50 |     text-decoration: none;
51 |     cursor: pointer;
52 |     color: #909090;
53 | 
54 | .bg-white
55 |     background-color:#fff;


--------------------------------------------------------------------------------
/src/entry-server.js:
--------------------------------------------------------------------------------
 1 | import {createApp} from './app'
 2 | import requrest from '@/util/request'
 3 | 
 4 | export default (context) => {
 5 | 
 6 |     return new Promise((resolve,reject) => {
 7 |         const {app,router,store} = createApp()
 8 | 
 9 |         router.push(context.url)
10 | 
11 |         router.onReady(() => {
12 |             const matcheds = router.getMatchedComponents()
13 | 
14 |             if (!matcheds.length) return reject({s:404})
15 | 
16 |             console.log(`entry-server len`,matcheds.length)
17 | 
18 |             // set cookie
19 |             requrest.createApi({cookie:context.cookie})
20 | 
21 |             Promise.all(matcheds.map(Component => {
22 |                 if (Component.asyncData) {
23 |                     return Component.asyncData({
24 |                         store,
25 |                         route: router.currentRoute
26 |                     })
27 |                 }
28 |             }))
29 |                 .then(() =>{
30 |                     // 在所有预取钩子(preFetch hook) resolve 后，
31 |                     // 我们的 store 现在已经填充入渲染应用程序所需的状态。
32 |                     // 当我们将状态附加到上下文，
33 |                     // 并且 `template` 选项用于 renderer 时，
34 |                     // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
35 |                     context.state = store.state
36 | 
37 |                     resolve(app)
38 |                 })
39 |                 .catch(err => {
40 |                     return reject({s:500,m:err.message})
41 |                 })
42 |         },reject)
43 |     })
44 | }


--------------------------------------------------------------------------------
/src/entry-client.js:
--------------------------------------------------------------------------------
 1 | import {createApp} from './app'
 2 | import NProgress from 'nprogress'
 3 | import requrest from '@/util/request'
 4 | import { getCookie } from '@/util/util'
 5 | 
 6 | import 'nprogress/nprogress.css' // progress bar style
 7 | 
 8 | const {app, router, store} = createApp()
 9 | 
10 | NProgress.configure({ easing: 'ease', speed: 500 })
11 | 
12 | if (window.__INITIAL_STATE__) {
13 |     store.replaceState(window.__INITIAL_STATE__)
14 | }
15 | 
16 | // set cookie
17 | requrest.createApi({cookie: getCookie('token')})
18 | 
19 | 
20 | router.onReady(() => {
21 |     router.beforeResolve((to, from, next) => {
22 |         // start progress
23 |         NProgress.inc()
24 | 
25 |         const matched = router.getMatchedComponents(to)
26 |         const prevMatched = router.getMatchedComponents(from)
27 | 
28 |         // 我们只关心非预渲染的组件
29 |         // 所以我们对比它们，找出两个匹配列表的差异组件
30 |         // ????????????????? 同父不同子
31 |         let diffed = false
32 |         const activated = matched.filter((c, i) => {
33 |             return diffed || (diffed = (prevMatched[i] !== c))
34 |         })
35 | 
36 |         if (!activated.length) {
37 |             return next()
38 |         }
39 |         // 这里如果有加载指示器(loading indicator)，就触发
40 | 
41 |         Promise.all(activated.map(c => {
42 |             if (c.asyncData) {
43 |                 return c.asyncData({store, route: to})
44 |             }
45 |         })).then(() => {
46 |             // 停止加载指示器(loading indicator)
47 |             NProgress.done()
48 |             next()
49 |         }).catch(next)
50 |     })
51 |     // 挂载vue实例
52 |     app.$mount('#app')
53 | })
54 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | const CreateListView = (id) => () => import('@/pages/index/CreateListView').then(m => m.default(id))
 7 | 
 8 | export default () => {
 9 |     const router = new VueRouter({
10 |         mode: 'history',
11 |         scrollBehavior(to, from, savedPosition) {
12 |             return { x: 0, y: 0 }
13 |         },
14 |         routes: [
15 |             {
16 |                 path: '/index',
17 |                 component: () => import('@/pages/index/index.vue'),
18 |                 children: [
19 |                     { path: '', component: CreateListView('top') },
20 |                     { path: 'frontend', component: CreateListView('frontend') },
21 |                     { path: 'Andriod', component: CreateListView('Andriod') },
22 |                     { path: 'backend', component: CreateListView('backend') },
23 |                     { path: 'ai', component: CreateListView('ai') },
24 |                     { path: 'IOS', component: CreateListView('IOS') },
25 |                     { path: 'freebie', component: CreateListView('freebie') },
26 |                     { path: 'article', component: CreateListView('article') },
27 |                     { path: 'devops', component: CreateListView('devops') },
28 |                     { path: '*', redirect: '/index' }
29 |                 ]
30 |             },
31 |             { path: '/books', component: () => import('@/pages/books/index.vue') },
32 |             { path: '/about', component: () => import('@/components/about.vue') },
33 |             { path: '*', redirect: '/index' }
34 |         ]
35 |     })
36 |     return router
37 | }


--------------------------------------------------------------------------------
/src/store/modules/app.js:
--------------------------------------------------------------------------------
 1 | import { fetchIndexTags, fetchEntriesByType, fetchRecommendByType } from '@/api/index'
 2 | 
 3 | const app = {
 4 |     state: {
 5 |         activeType: null,   // 当前类型
 6 |         indexTags: [],      // 当前页面的属性
 7 |         indexList: {        // 当前页面的列表
 8 |             top: [],        // 推荐
 9 |             frontend: [],   // 前端
10 |             Andriod: [],    // 安卓
11 |             backend: [],    // 后端
12 |             ai: [],         // 人工智能
13 |             IOS: [],        // IOS
14 |             freebie: [],    // 工具资源
15 |             article: [],    // 阅读
16 |             devops: [],     // 运维
17 |         },
18 |     },
19 |     mutations: {
20 |         SET_ACTIVE_TYPE(state, { type }) {
21 |             state.activeType = type
22 |         },
23 |         SET_INDEX_TAGS(state, payload) {
24 |             state.indexTags = payload
25 |         },
26 |         SET_INDEX_LIST(state, { type, data }) {
27 |             state.indexList[type] = state.indexList[type].concat(data)
28 |         }
29 |     },
30 |     actions: {
31 |         FETCH_ACTIVE_TYPE(context, { type }) {
32 |             context.commit('SET_ACTIVE_TYPE', {
33 |                 type
34 |             })
35 |         },
36 |         ENSURE_ACTIVE_ITEMS({ commit, dispatch, getters }) {
37 |             return dispatch('FETCH_INDEX_TAGS')
38 |                 .then(res => {
39 |                     dispatch('FETCH_ACTIVE_TYPE', { type: res[0].attr })
40 |                 })
41 |         },
42 |         FETCH_INDEX_TAGS(context) {
43 |             return fetchIndexTags()
44 |                 .then(res => {
45 |                     context.commit('SET_INDEX_TAGS', res)
46 |                     return res
47 |                 })
48 |         },
49 |         FETCH_INDEX_LIST_BY_TYPE({ commit }, { type, token }) {
50 |             let p = type == 'top' ? fetchRecommendByType(type) : fetchEntriesByType(type)
51 |             
52 |             return p
53 |                 .then(res => {
54 |                     commit('SET_INDEX_LIST', { type, data: res })
55 |                 })
56 |         }
57 |     }
58 | }
59 | 
60 | export default app


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ssr",
 3 |   "description": "vue-ssr project",
 4 |   "author": "",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "node server",
 8 |     "start": "cross-env NODE_ENV=production node server",
 9 |     "build": "rimraf dist && npm run build:client && npm run build:server",
10 |     "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
11 |     "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
12 |   },
13 |   "engines": {
14 |     "node": ">=7.0",
15 |     "npm": ">=4.0"
16 |   },
17 |   "dependencies": {
18 |     "axios": "^0.18.0",
19 |     "compression": "^1.7.1",
20 |     "cross-env": "^5.1.1",
21 |     "element-ui": "^2.4.5",
22 |     "es6-promise": "^4.1.1",
23 |     "express": "^4.16.2",
24 |     "extract-text-webpack-plugin": "^3.0.2",
25 |     "firebase": "4.6.2",
26 |     "lru-cache": "^4.1.1",
27 |     "nprogress": "^0.2.0",
28 |     "route-cache": "0.4.3",
29 |     "serve-favicon": "^2.4.5",
30 |     "vue": "^2.5.16",
31 |     "vue-router": "^3.0.1",
32 |     "vue-server-renderer": "^2.5.16",
33 |     "vuex": "^3.0.1",
34 |     "vuex-router-sync": "^5.0.0"
35 |   },
36 |   "devDependencies": {
37 |     "autoprefixer": "^7.1.6",
38 |     "babel-core": "^6.26.0",
39 |     "babel-loader": "^7.1.2",
40 |     "babel-plugin-component": "^1.1.1",
41 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
42 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
43 |     "babel-preset-env": "^1.6.1",
44 |     "chokidar": "^1.7.0",
45 |     "css-loader": "^0.28.7",
46 |     "file-loader": "^1.1.5",
47 |     "friendly-errors-webpack-plugin": "^1.6.1",
48 |     "mockjs": "^1.0.1-beta3",
49 |     "rimraf": "^2.6.2",
50 |     "stylus": "^0.54.5",
51 |     "stylus-loader": "^3.0.1",
52 |     "sw-precache-webpack-plugin": "^0.11.4",
53 |     "url-loader": "^0.6.2",
54 |     "vue-loader": "^15.0.0-beta.1",
55 |     "vue-template-compiler": "^2.5.16",
56 |     "webpack": "^3.8.1",
57 |     "webpack-dev-middleware": "^1.12.0",
58 |     "webpack-hot-middleware": "^2.20.0",
59 |     "webpack-merge": "^4.1.1",
60 |     "webpack-node-externals": "^1.6.0"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | import request from '@/util/request'
 2 | 
 3 | const data = [
 4 |     { id: 0, text: '推荐', attr: '' },
 5 |     { id: 1, text: '前端', attr: '/frontend' },
 6 |     { id: 2, text: 'Andriod', attr: '/Andriod' },
 7 |     { id: 3, text: '后端', attr: '/backend' },
 8 |     { id: 4, text: '人工智能', attr: '/ai' },
 9 |     { id: 5, text: 'IOS', attr: '/IOS' },
10 |     { id: 6, text: '工具资源', attr: '/freebie' },
11 |     { id: 7, text: '阅读', attr: '/article' },
12 |     { id: 8, text: '运维', attr: '/devops' }]
13 | 
14 | const delay = (resfun, timer) => setTimeout(() => resfun(), timer)
15 | 
16 | // 首页tag
17 | export const fetchIndexTags = () => new Promise((resolve, reject) => delay(() => resolve(data), 200))
18 | 
19 | // 首页list
20 | export const fetchEntriesByType = (type) => {
21 |     let category = ''
22 |     switch (type) {
23 |         case 'frontend':
24 |             category = '5562b415e4b00c57d9b94ac8'
25 |             break
26 |         case 'Andriod':
27 |             category = '5562b410e4b00c57d9b94a92'
28 |             break
29 |         case 'backend':
30 |             category = '5562b419e4b00c57d9b94ae2'
31 |             break
32 |         case 'ai':
33 |             category = '57be7c18128fe1005fa902de'
34 |             break
35 |         case 'IOS':
36 |             category = '5562b405e4b00c57d9b94a41'
37 |             break
38 |         case 'freebie':
39 |             category = '5562b422e4b00c57d9b94b53'
40 |             break
41 |         case 'article':
42 |             category = '5562b428e4b00c57d9b94b9d'
43 |             break
44 |         case 'devops':
45 |             category = '5b34a478e1382338991dd3c1'
46 |     }
47 |     let params = {
48 |         category: category,
49 |         ab: 'welcome_3',
50 |         before: Math.random(),
51 |         src: 'web'
52 |     }
53 |     
54 |     return request.api.get('/timeline/get_entry_by_rank', {
55 |         params
56 |     }).then(res => res.d.entrylist)
57 | }
58 | 
59 | export const fetchRecommendByType = (type) => {
60 |     let params = {
61 |         suid: 'nvfBZaZ2jjZyffaZqJAN',
62 |         ab: 'welcome_3',
63 |         src: 'web'
64 |     }
65 |     return request.api.get('/recommender/get_recommended_entry', {
66 |         params
67 |     }).then(res => res.d)
68 | }


--------------------------------------------------------------------------------
/src/pages/index/top.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ul class="entry-list">
 3 |         <li class="list-item" v-for="(recommend, index) in recommends" :key="index">
 4 |             <div class="content-box">
 5 |                 <div class="info-box">
 6 |                     <div class="info-row title-row">
 7 |                         <a :href="recommend.originalUrl" target="_blank" class="title">{{recommend.title}}</a>
 8 |                     </div>
 9 |                     <div class="info-row meta-row">
10 |                         <ul class="meta-list">
11 |                             <li class="item category">
12 |                                 <span class="category-title" :class="recommend.category.title">{{recommend.category.name}}</span>
13 |                             </li>
14 |                             <li class="item username clickable">
15 |                                 <div class="user-popover-box">
16 |                                     <a href="javascript:void(0)" target="_blank">
17 |                                         {{recommend.user.username}}
18 |                                     </a>
19 |                                 </div>
20 |                             </li>
21 |                             <li class="item">
22 |                                 {{ recommend.createdAt | formatter }}
23 |                             </li>
24 |                             <li class="item">
25 |                                 {{recommend.viewsCount}} 次阅读
26 |                             </li>
27 |                         </ul>
28 |                     </div>
29 |                 </div>
30 |                 <div class="thumb" v-if="recommend.screenshot">
31 |                     <img :src="recommend.screenshot" :alt="recommend.title">
32 |                 </div>
33 |             </div>
34 |         </li>
35 |     </ul>
36 | </template>
37 | <script>
38 | export default {
39 |     props: {
40 |         type: String
41 |     },
42 |     computed: {
43 |         recommends() {
44 |             return this.$store.state.app.indexList[this.type]
45 |         }
46 |     }
47 | }
48 | </script>
49 | <style lang="stylus" scoped>
50 | .meta-list {
51 |     display: flex;
52 |     align-items: baseline;
53 |     white-space: nowrap;
54 | 
55 |     .item:not(:last-child):not(.category)::after {
56 |         content: '·';
57 |         margin: 4.8px;
58 |         color: #8f969c;
59 |     }
60 | 
61 |     .user-popover-box {
62 |         display: inline;
63 |     }
64 | }
65 | 
66 | .category-title {
67 |     display: inline-block;
68 |     margin-right: 14px;
69 |     padding: 4.5px 0;
70 |     min-width: 60px;
71 |     text-align: center;
72 |     line-height: 1;
73 |     color: #fff;
74 |     background-color: #c69f42;
75 |     border-radius: 2px;
76 |     font-size: 12px;
77 | 
78 |     &.frontend {
79 |         background-color: #56c4e1;
80 |     }
81 | 
82 |     &.android {
83 |         background-color: #42c67d;
84 |     }
85 | 
86 |     &.ai {
87 |         background-color: #e8596b;
88 |     }
89 | 
90 |     &.backend {
91 |         background-color: #857dea;
92 |     }
93 | 
94 |     &.ios {
95 |         background-color: #ff955b;
96 |     }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/pages/login/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="auth-login">
  3 | 		<div class="login-container">
  4 | 			<div class="login-img">
  5 | 				<img src="/public/normal.png" alt="">
  6 | 			</div>
  7 | 			<div class="login-head">
  8 | 				<h1 class="title">登陆</h1>
  9 | 				<i class="el-icon-close" @click="handleLogin"></i>
 10 | 			</div>
 11 | 			<div class="login-content">
 12 | 				<el-form :rules="rules2" status-icon ref="ruleForm2" :model="ruleForm2">
 13 | 				  	<el-form-item prop="username">
 14 | 				  	  	<el-input v-model="ruleForm2.username" placeholder="请输入手机号或邮箱" />
 15 | 				  	</el-form-item>
 16 | 				  	<el-form-item prop="password">
 17 | 				  	  	<el-input type="password" v-model="ruleForm2.password" placeholder="请输入密码" />
 18 | 				  	</el-form-item>
 19 | 				  	<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
 20 | 				</el-form>
 21 | 			</div>
 22 | 		</div>
 23 | 	</div>
 24 | </template>
 25 | <script>
 26 | 	import { setCookie } from '@/util/util'
 27 | 	export default {
 28 | 		props:{
 29 | 			handleLogin:{
 30 | 				type:Function,
 31 | 				require:true
 32 | 			}
 33 | 		},
 34 | 		data() {
 35 | 	      	return {
 36 | 		        ruleForm2: {
 37 | 		          	username: '',
 38 | 		          	password: '',
 39 | 		        },
 40 | 		        rules2: {
 41 | 		          	username: [
 42 | 		          	  	{ validator: (rule, value, callback) => {
 43 | 					        if (value === '') {
 44 | 					          	callback(new Error('请输入用户名'))
 45 | 					        } else {
 46 | 					          	callback()
 47 | 					        }
 48 | 					    }, trigger: 'blur' }
 49 | 		          	],
 50 | 		          	password: [
 51 | 		          	  	{ validator: (rule, value, callback) => {
 52 | 					        if (value === '') {
 53 | 					          	callback(new Error('请输入密码'));
 54 | 					        } else {
 55 | 					          	callback();
 56 | 					        }
 57 | 					    }, trigger: 'blur' }
 58 | 		          	]
 59 | 		        }
 60 | 		    }
 61 | 		},
 62 | 		methods:{
 63 | 			submitForm(formName) {
 64 | 		        this.$refs[formName].validate((valid) => {
 65 | 		          	if (valid) {
 66 | 		            	this.$message.success('登陆成功')
 67 | 		            	this.handleLogin()
 68 | 		            	setCookie('token',this.ruleForm2.username)
 69 | 		            	// 刷新
 70 | 		            	location.reload()
 71 | 		          	} else {
 72 | 		            	console.log('error submit!!')
 73 | 		            	return false
 74 | 		          	}
 75 | 		        })
 76 | 		    }
 77 | 		}
 78 | 	}
 79 | </script>
 80 | <style lang="stylus">
 81 | .auth-login
 82 | 	position fixed
 83 | 	top 0
 84 | 	left 0
 85 | 	right 0
 86 | 	bottom 0
 87 | 	z-index 20
 88 | 	display flex
 89 | 	justify-content center
 90 | 	align-items center
 91 | 	background-color rgba(0,0,0,.3)
 92 | .login-container
 93 | 	position relative
 94 | 	padding 24px
 95 | 	width 320px
 96 | 	max-width 100%
 97 | 	font-size 14px
 98 | 	background-color #fff
 99 | 	border-radius 2px
100 | 	box-sizing border-box
101 | 	.login-img
102 | 		position absolute
103 | 		top 0
104 | 		left 50%
105 | 		width 120px
106 | 		transform translate(-50%,-83%)
107 | 		z-index 1
108 | 	.login-head
109 | 		display flex
110 | 		justify-content space-between
111 | 		align-items center
112 | 		margin-bottom 15px
113 | 		h1
114 | 			font-size 18px
115 | 			font-weight 700
116 | 		i
117 | 			cursor pointer
118 | 	
119 | .el-button 
120 | 	width 100%
121 | 	span
122 | 		color #fff
123 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Features
  2 | 
  3 | > Note: in practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes), nor is it optimal to extract an extra CSS file (which is only 1kb) -- they are used simply because this is a demo app showcasing all the supported features. In real apps, you should always measure and optimize based on your actual app constraints.
  4 | 
  5 | - Server Side Rendering
  6 |   - Vue + vue-router + vuex working together
  7 |   - Server-side data pre-fetching
  8 |   - Client-side state & DOM hydration
  9 |   - Automatically inlines CSS used by rendered components only
 10 |   - Preload / prefetch resource hints
 11 |   - Route-level code splitting
 12 | - Progressive Web App
 13 |   - App manifest
 14 |   - Service worker
 15 |   - 100/100 Lighthouse score
 16 | - Single-file Vue Components
 17 |   - Hot-reload in development
 18 |   - CSS extraction for production
 19 | - Animation
 20 |   - Effects when switching route views
 21 |   - Real-time list updates with FLIP Animation
 22 | 
 23 | ## Architecture Overview
 24 | 
 25 | <img width="973" alt="screen shot 2016-08-11 at 6 06 57 pm" src="https://cloud.githubusercontent.com/assets/499550/17607895/786a415a-5fee-11e6-9c11-45a2cfdf085c.png">
 26 | 
 27 | **A detailed Vue SSR guide can be found [here](https://ssr.vuejs.org).**
 28 | 
 29 | ## Build Setup
 30 | 
 31 | **Requires Node.js 7+**
 32 | 
 33 | ``` bash
 34 | # install dependencies
 35 | npm install # or yarn
 36 | 
 37 | # serve in dev mode, with hot reload at localhost:8080
 38 | npm run dev
 39 | 
 40 | # build for production
 41 | npm run build
 42 | 
 43 | # serve in production mode
 44 | npm start
 45 | ```
 46 | 
 47 | ## nginx-proxy
 48 | **本地host 指向自己的ip地址 test.mac.com**
 49 | 
 50 | ```
 51 |   worker_processes  1;
 52 |   events {
 53 |       worker_connections  1024;
 54 |   }
 55 | 
 56 |   http {
 57 |       include       mime.types;
 58 |       default_type  application/octet-stream;
 59 |       log_format main '$request_time $remote_addr - $remote_user [$time_local] '
 60 |                       'fwf[$http_x_forwarded_for] tip[$http_true_client_ip] '
 61 |                       '$upstream_addr $upstream_response_time $request_time '
 62 |                       '$http_host $request '
 63 |                       '"$status" $body_bytes_sent "$http_referer" '
 64 |                       '"$http_accept_language" "$http_user_agent" ';
 65 |       access_log  logs/access.log  main;
 66 |       sendfile        on;
 67 |       keepalive_timeout  65;
 68 |       add_header Access-Control-Allow-Origin *;
 69 |       add_header Access-Control-Allow-Headers X-Requested-With;
 70 |       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
 71 |       server {
 72 |         listen       80;
 73 |         server_name  test.mac.com;
 74 |         location / {
 75 |             proxy_pass  https://recommender-api-ms.juejin.im;
 76 |             proxy_redirect off;
 77 |             client_max_body_size   10m;
 78 |             client_body_buffer_size  128k;
 79 |             proxy_connect_timeout  10;
 80 |             proxy_send_timeout   10;
 81 |             proxy_read_timeout 10;
 82 |             proxy_buffer_size 4k;
 83 |             proxy_buffers  32 1024k;
 84 |             proxy_busy_buffers_size 2048k;
 85 |             proxy_temp_file_write_size  1024k;
 86 |         }
 87 |           
 88 |         error_page   500 502 503 504  /50x.html;
 89 |         location = /50x.html {
 90 |             root   html;
 91 |         }
 92 |       }
 93 |   }
 94 | 
 95 | ```
 96 | 
 97 | ## License
 98 | 
 99 | MIT
100 | 


--------------------------------------------------------------------------------
/src/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |     	<div class="feed welcome__feed bg-white">
  4 |     		<!-- 文章标题 -->
  5 |     		<nav class="category-nav">
  6 |     			<h5>热门文章</h5>
  7 |     			<ul class="nav-list">
  8 |     				<li class="nav-item" v-for="tag in tags" :key="tag.id">
  9 |     					<span class="title">
 10 | 							<router-link exact :to="'/index' + (tag.attr)">{{tag.text}}</router-link>
 11 | 						</span>
 12 |     				</li>
 13 |     			</ul>
 14 |     		</nav>
 15 |     		<!-- 内容 -->
 16 |             <transition name="el-fade-in-linear">
 17 |     		    <router-view></router-view>
 18 |             </transition>
 19 |     	</div>
 20 |     </div>
 21 | </template>
 22 | <script>
 23 | import { throttle } from '@/util/util'
 24 | import { mapActions } from 'vuex'
 25 | export default {
 26 |     data() {
 27 |         return {}
 28 |     },
 29 |     asyncData({store,router}) {
 30 |         return store.dispatch('FETCH_INDEX_TAGS')
 31 | 	},
 32 | 	computed: {
 33 |         tags() {
 34 |             return this.$store.state.app.indexTags
 35 | 		},
 36 | 		currentTag() {
 37 |             return this.$store.state.app.activeType
 38 | 		}
 39 | 	},
 40 |     mounted() {
 41 |         this.throttleLoad = throttle(this.onscroll,1500,{
 42 |             leading:false
 43 |         })
 44 |         window.addEventListener('scroll',this.throttleLoad)
 45 |     },
 46 |     beforeDestroy() {
 47 |         window.removeEventListener('scroll',this.throttleLoad)
 48 |     },
 49 |     methods:{
 50 |         ...mapActions({
 51 |             fetchList:'FETCH_INDEX_LIST_BY_TYPE'
 52 |         }),
 53 |         onscroll() {
 54 |             
 55 |             const doc = document.documentElement
 56 | 
 57 |             if (doc.offsetHeight <= (doc.scrollTop + doc.clientHeight + 200)) {
 58 | 
 59 |                 this.fetchList({type:this.type})
 60 |                     .then(res => {
 61 |                         this.$message({
 62 |                             message:'加载完成',
 63 |                             type:'success'
 64 |                         })
 65 |                     })
 66 |                     .catch(err => {
 67 |                         this.$message({
 68 |                             message:err,
 69 |                             type:'error'
 70 |                         })
 71 |                     })
 72 |             }
 73 |         }
 74 |     }
 75 | }
 76 | </script>
 77 | <style lang="stylus">
 78 | 
 79 | .container 
 80 |     margin 0 auto;
 81 |     width 100%;
 82 |     max-width 1200px;
 83 |     display flex;
 84 | 
 85 | .welcome__feed 
 86 |     flex 1
 87 |     
 88 | .category-nav 
 89 |     display flex;
 90 |     justify-content space-between;
 91 |     border-bottom 1px solid #f6f6f6;
 92 |     padding 18px 24px;
 93 |     ul 
 94 |         display flex;
 95 |     .nav-item 
 96 |         margin-right 20px;
 97 |         font-size 14px;
 98 |         cursor pointer;
 99 |     .title
100 |         color #90979c;
101 | 	&.hover,&.router-link-active
102 | 		color #007fff;
103 | 
104 | .entry-list
105 |     .list-item 
106 |         border-bottom 1px solid rgba(178,186,194,.15);
107 |         color #90979c;
108 |         cursor pointer
109 |         &:hover
110 |             background-color rgba(0,0,0,.01)
111 |     .content-box
112 |         padding 18px 24px;
113 |         display flex
114 |     .info-box
115 |         flex 1
116 |     .thumb
117 |         width 106px;
118 |         height 62px
119 |     .title-row
120 |         margin 6px 0 10px;
121 |         white-space nowrap;
122 |         overflow hidden;
123 |         text-overflow ellipsis;
124 |         .title
125 |             color #333;
126 |     .info-row
127 |         color #8f969c;
128 | </style>


--------------------------------------------------------------------------------
/src/util/util.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 防抖动
  3 |  * @param  {Function} fn    [description]
  4 |  * @param  {[type]}   delay [description]
  5 |  * @return {[type]}         [description]
  6 |  */
  7 | export function debounce(fn, delay) {
  8 |     let timer = null
  9 |     return function() {
 10 |         let context = this
 11 |         let args = arguments
 12 | 
 13 |         clearTimeout(timer)
 14 |         timer = setTimeout(function() {
 15 |             fn.apply(context, args)
 16 |         }, delay)
 17 |     }
 18 | }
 19 | /**
 20 |  * 节流阀
 21 |  * @param  {[type]} func    [description]
 22 |  * @param  {[type]} wait    [description]
 23 |  * @param  {[type]} options [description]
 24 |  * @return {[type]}         [description]
 25 |  */
 26 | export function throttle(func, wait, options) {
 27 |     let context, args, result
 28 |     let timeout = null
 29 |     let previous = 0
 30 |     if (!options) options = {}
 31 |     let later = function() {
 32 |         previous = options.leading === false ? 0 : new Date().getTime()
 33 |         timeout = null
 34 |         result = func.apply(context, args)
 35 |         if (!timeout) context = args = null
 36 |     }
 37 |     return function() {
 38 |         let now = new Date().getTime()
 39 |         if (!previous && options.leading === false) previous = now
 40 |         let remaining = wait - (now - previous)
 41 |         context = this
 42 |         args = arguments
 43 |         if (remaining <= 0 || remaining > wait) {
 44 |             if (timeout) {
 45 |                 clearTimeout(timeout)
 46 |                 timeout = null
 47 |             }
 48 |             previous = now
 49 |             result = func.apply(context, args)
 50 |             if (!timeout) context = args = null
 51 |         } else if (!timeout && options.trailing !== false) {
 52 |             timeout = setTimeout(later, remaining)
 53 |         }
 54 |         return result
 55 |     }
 56 | }
 57 | 
 58 | /**
 59 |  * 设置cookie
 60 |  * document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/mydir; domain=cnblogs.com; max-age=3600; secure=true";
 61 |  * cookieName=mader ：name=value，cookie的名称和值
 62 |  * expires=Fri, 31 Dec 2017 15:59:59 GMT： expires，cookie过期的日期，如果没有定义，cookie会在对话结束时过期。日期格式为 new Date().toUTCString()
 63 |  * path=/mydir: path=path (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
 64 |  * domain=cnblogs.com： 指定域(例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。
 65 |  * max-age=3600： 文档被查看后cookie过期时间，单位为秒
 66 |  * secure=true： cookie只会被https传输 ，即加密的https链接传输
 67 |  */
 68 | export function setCookie(name, value, day) {
 69 |     if (day !== 0) { //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
 70 |         let expires = day * 24 * 60 * 60 * 1000
 71 |         let date = new Date(+new Date() + expires)
 72 |         document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString() + ';path=/'
 73 |     } else {
 74 |         document.cookie = name + "=" + escape(value)
 75 |     }
 76 | }
 77 | /**
 78 |  * 获取cookie
 79 |  * @param  {[type]} name [description]
 80 |  * @return {[type]}      [description]
 81 |  */
 82 | export function getCookie(name) {
 83 |     let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
 84 |     if (arr = document.cookie.match(reg)) {
 85 |         return unescape(arr[2])
 86 |     } else {
 87 |         return ''
 88 |     }
 89 | }
 90 | /**
 91 |  * 删除cookie
 92 |  * @param  {[type]} name [description]
 93 |  * @return {[type]}      [description]
 94 |  */
 95 | export function removeCookie(name) {
 96 |     let exp = new Date()
 97 |     exp.setTime(exp.getTime() - 1)
 98 |     let cval = getCookie(name)
 99 |     if (cval != null)
100 |         document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()
101 | }
102 | 


--------------------------------------------------------------------------------
/src/pages/index/special_column.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <ul class="entry-list">
  3 |         <li class="list-item" v-for="(recommend, index) in recommends" :key="index">
  4 |             <div class="content-box">
  5 |                 <div class="info-box">
  6 |                     <div class="info-row title-row">
  7 |                         <a :href="recommend.originalUrl" target="_blank" class="title">{{recommend.title}}</a>
  8 |                     </div>
  9 |                     <div class="action-row">
 10 |                         <ul class="action-list">
 11 |                             <li class="item like clickable" @click="handleClick">
 12 |                                 <p class="title-box">
 13 |                                 <img src="/public/like.svg">
 14 |                                 <span class="count">{{ recommend.collectionCount }}</span>
 15 |                                 </p>
 16 |                             </li>
 17 |                             <li class="item comment clickable" @click="handleClick">
 18 |                                 <p class="title-box">
 19 |                                 <img src="/public/comment.svg">
 20 |                                 <span class="count">{{ recommend.commentsCount }}</span>
 21 |                                 </p>
 22 |                             </li>
 23 |                             <li class="item share clickable hover" title="分享" @click="handleClick">
 24 |                                 <p class="title-box">
 25 |                                 <img src="/public/share.svg">
 26 |                                 </p>
 27 |                             </li>
 28 |                             <li class="item collect clickable hover" title="收藏" @click="handleClick">
 29 |                                 <p class="title-box">
 30 |                                 <img src="/public/collect.svg">
 31 |                                 </p>
 32 |                             </li>
 33 |                         </ul>
 34 |                     </div>
 35 |                 </div>
 36 |                 <div class="thumb" v-if="recommend.screenshot">
 37 |                     <img :src="recommend.screenshot" :alt="recommend.title">
 38 |                 </div>
 39 |             </div>
 40 |         </li>
 41 |     </ul>
 42 | </template>
 43 | <script>
 44 | export default {
 45 |     props: {
 46 |         type: String
 47 |     },
 48 |     computed: {
 49 |         recommends() {
 50 |             return this.$store.state.app.indexList[this.type];
 51 |         }
 52 |     },
 53 |     methods: {
 54 |         handleClick(e) {
 55 |             this.$message({
 56 |                 message: '暂未实现此功能',
 57 |                 type: 'warning'
 58 |             })
 59 |         }
 60 |     }
 61 | }
 62 | </script>
 63 | <style lang="stylus" scoped>
 64 | .action-row {
 65 |     display: inline-flex;
 66 |     white-space: nowrap;
 67 | }
 68 | 
 69 | .list-item:hover {
 70 |     .action-list .item.share, .action-list .item.collect {
 71 |         visibility: visible;
 72 |     }
 73 | }
 74 | 
 75 | .action-list {
 76 |     display: inline-flex;
 77 |     white-space: nowrap;
 78 | 
 79 |     > .item {
 80 |         display: flex;
 81 |         align-items: center;
 82 |         justify-content: center;
 83 |         position: relative;
 84 |         padding: 0 10px;
 85 |         height: 22px;
 86 |         font-size: 12px;
 87 |         line-height: 1;
 88 |         white-space: nowrap;
 89 |         border-radius: 1px;
 90 |         border: 1px solid #edeeef;
 91 | 
 92 |         .title-box {
 93 |             display: flex;
 94 |             align-items: center;
 95 |             padding: 0 10px;
 96 |             height: 100%;
 97 |         }
 98 | 
 99 |         .count {
100 |             margin-left: 5px;
101 |             font-weight: 700;
102 |             color: #b2bac2;
103 |         }
104 |     }
105 | 
106 |     > .item.clickable:hover {
107 |         background: #f7f8fa;
108 |     }
109 | 
110 |     > .item.like {
111 |         padding: 0;
112 |     }
113 | 
114 |     > .item.comment {
115 |         margin-left: -1px;
116 |         padding: 0;
117 |     }
118 | 
119 |     > .item.share {
120 |         margin-left: 8px;
121 |         padding: 0;
122 |         visibility: hidden;
123 |     }
124 | 
125 |     > .item.collect {
126 |         margin-left: -1px;
127 |         padding: 0;
128 |         visibility: hidden;
129 |     }
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="app">
  3 |         <el-row class="app-head">
  4 |             <el-col :span="24" class="bg-white">
  5 |                 <div class="head-content">
  6 |                     <img src="/public/logo-98.png" alt="logo" class="head-log">
  7 |                     <nav class="main-nav">
  8 |                         <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
  9 |                             <el-menu-item index="/index">首页</el-menu-item>
 10 |                             <el-menu-item index="/books">小册</el-menu-item>
 11 |                         </el-menu>
 12 |                     </nav>
 13 |                     <div class="main-right">
 14 |                         <span class="login" @click.stop.prevent="handleLogin">登录</span>
 15 |                         <span>·</span>
 16 |                         <span class="register">注册</span>
 17 |                     </div>
 18 |                 </div>
 19 |             </el-col>
 20 |         </el-row>
 21 |         <login v-if="possibleLogin" :handleLogin="handleLogin"/>
 22 |         <router-view class="main-container"></router-view>
 23 |         <transition name="el-fade-in">
 24 |             <el-button icon="el-icon-d-caret" class="top" v-show="top" @click="handleGoTop" />
 25 |         </transition>
 26 |     </div>
 27 | </template>
 28 | <script>
 29 |     import { debounce } from '@/util/util'
 30 |     import login from '@/pages/login/index.vue'
 31 |     export default {
 32 |         data() {
 33 |             return {
 34 |                 top: false,
 35 |                 possibleLogin: false
 36 |             }
 37 |         },
 38 |         components:{
 39 |             login
 40 |         },
 41 |         mounted() {
 42 |             this.scrollTop = debounce(this.handleScroll,500)
 43 |             window.addEventListener('scroll',this.scrollTop)
 44 |         },
 45 |         destroyed() {
 46 |             window.removeEventListener('scroll',this.scrollTop)
 47 |         },
 48 |         methods: {
 49 |             handleSelect(key, keyPath) {
 50 |                 console.log(key, keyPath)
 51 |             },
 52 |             handleScroll(){
 53 |                 if (document.documentElement.scrollTop >= 200) {
 54 |                     this.top = true
 55 |                 }else {
 56 |                     this.top = false
 57 |                 }
 58 |             },
 59 |             handleGoTop() {
 60 |                 let timer = null
 61 |                 const doc = document.documentElement
 62 |                 const scrollTo = 0
 63 |                 clearInterval(timer)
 64 |                 timer = setInterval(() => {
 65 |                     // 当前的值
 66 |                     let currentVal = doc.scrollTop
 67 | 
 68 |                     let speed = (scrollTo - currentVal) / 10
 69 | 
 70 |                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
 71 | 
 72 |                     currentVal += speed
 73 | 
 74 |                     doc.scrollTop = currentVal
 75 | 
 76 |                     if (scrollTo == currentVal) {
 77 |                         clearInterval(timer)
 78 |                     }
 79 |                 },15)
 80 |             },
 81 |             handleLogin() {
 82 |                 this.possibleLogin = !this.possibleLogin
 83 |             }
 84 |         }
 85 |     }
 86 | </script>
 87 | <style lang="stylus">
 88 |     .app-head
 89 |         position fixed;
 90 |         top 0;
 91 |         left 0;
 92 |         width 100%;
 93 |         z-index 10
 94 |         border-bottom 1px solid #f1f1f1;
 95 |     .head-content
 96 |         width 1200px;
 97 |         margin 0 auto;
 98 |         height 60px;
 99 |         line-height 60px
100 |         background-color #fff;
101 |         display flex;
102 |         position relative
103 |         .head-log
104 |             width 98px;
105 |             height 38px;
106 |             margin-top 12px;
107 |             margin-right 12px;
108 |     .top
109 |         position fixed;
110 |         right 30px;
111 |         bottom 30px;
112 |         width 50px;
113 |     .main-container
114 |         margin-top 75px!important
115 |     .main-right
116 |         position absolute
117 |         right 10px
118 |         top 0
119 |         width 85px
120 |         display flex
121 |         justify-content space-between
122 |         .login,.register
123 |             cursor pointer
124 |             color #007fff
125 |             font-size 16px
126 |             font-weight 700
127 | </style>


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs')
  2 | const path = require('path')
  3 | const LRU = require('lru-cache')
  4 | const express = require('express')
  5 | const favicon = require('serve-favicon')
  6 | const compression = require('compression')
  7 | const microcache = require('route-cache')
  8 | const resolve = file => path.resolve(__dirname, file)
  9 | const { createBundleRenderer } = require('vue-server-renderer')
 10 | 
 11 | const isProd = process.env.NODE_ENV === 'production'
 12 | const useMicroCache = process.env.MICRO_CACHE !== 'false'
 13 | const serverInfo =
 14 |   `express/${require('express/package.json').version} ` +
 15 |   `vue-server-renderer/${require('vue-server-renderer/package.json').version}`
 16 | 
 17 | const app = express()
 18 | 
 19 | function createRenderer (bundle, options) {
 20 |   // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
 21 |   return createBundleRenderer(bundle, Object.assign(options, {
 22 |     // for component caching
 23 |     cache: LRU({
 24 |       max: 1000,
 25 |       maxAge: 1000 * 60 * 15
 26 |     }),
 27 |     // this is only needed when vue-server-renderer is npm-linked
 28 |     basedir: resolve('./dist'),
 29 |     // recommended for performance
 30 |     runInNewContext: false
 31 |   }))
 32 | }
 33 | 
 34 | let renderer
 35 | let readyPromise
 36 | const templatePath = resolve('./src/index.template.html')
 37 | if (isProd) {
 38 |   // In production: create server renderer using template and built server bundle.
 39 |   // The server bundle is generated by vue-ssr-webpack-plugin.
 40 |   const template = fs.readFileSync(templatePath, 'utf-8')
 41 |   const bundle = require('./dist/vue-ssr-server-bundle.json')
 42 |   // The client manifests are optional, but it allows the renderer
 43 |   // to automatically infer preload/prefetch links and directly add <script>
 44 |   // tags for any async chunks used during render, avoiding waterfall requests.
 45 |   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
 46 |   renderer = createRenderer(bundle, {
 47 |     template,
 48 |     clientManifest
 49 |   })
 50 | } else {
 51 |   // In development: setup the dev server with watch and hot-reload,
 52 |   // and create a new renderer on bundle / index template update.
 53 |   readyPromise = require('./build/setup-dev-server')(
 54 |     app,
 55 |     templatePath,
 56 |     (bundle, options) => {
 57 |       renderer = createRenderer(bundle, options)
 58 |     }
 59 |   )
 60 | }
 61 | 
 62 | const serve = (path, cache) => express.static(resolve(path), {
 63 |   maxAge: cache && isProd ? 1000 * 60 * 60 * 24 * 30 : 0
 64 | })
 65 | 
 66 | app.use(compression({ threshold: 0 }))
 67 | app.use(favicon('./public/logo-48.png'))
 68 | app.use('/dist', serve('./dist', true))
 69 | app.use('/public', serve('./public', true))
 70 | app.use('/manifest.json', serve('./manifest.json', true))
 71 | app.use('/service-worker.js', serve('./dist/service-worker.js'))
 72 | 
 73 | // since this app has no user-specific content, every page is micro-cacheable.
 74 | // if your app involves user-specific content, you need to implement custom
 75 | // logic to determine whether a request is cacheable based on its url and
 76 | // headers.
 77 | // 1-second microcache.
 78 | // https://www.nginx.com/blog/benefits-of-microcaching-nginx/
 79 | app.use(microcache.cacheSeconds(1, req => useMicroCache && req.originalUrl))
 80 | 
 81 | function getCookie(headers) {
 82 |   if (!headers || !headers.cookie) return ''
 83 | 
 84 |   let cookies = headers.cookie.split(';')
 85 | 
 86 |   for (let i = cookies.length - 1; i >= 0; i--) {
 87 |     let itemCookie = cookies[i].split('=')
 88 | 
 89 |     if (itemCookie[0].trim() == 'token') return itemCookie[1]
 90 |   }
 91 |   return ''
 92 | }
 93 | 
 94 | function render (req, res) {
 95 |   const s = Date.now()
 96 |   console.log(req.url)
 97 | 
 98 |   res.setHeader("Content-Type", "text/html")
 99 |   res.setHeader("Server", serverInfo)
100 | 
101 |   const handleError = err => {
102 |     if (err.url) {
103 |       res.redirect(err.url)
104 |     } else if(err.s === 404) {
105 |       res.status(404).send('404 | Page Not Found')
106 |     } else {
107 |       // Render Error Page or Redirect
108 |       res.status(500).send('500 | Internal Server Error')
109 |       console.error(`error during render : ${req.url}`)
110 |       console.error(err.stack)
111 |     }
112 |   }
113 |   
114 |   const context = {
115 |     title: '掘金 - juejin.im - 一个帮助开发者成长的社区', // default title
116 |     url: req.url,
117 |     cookie: getCookie(req.headers)
118 |   }
119 |   renderer.renderToString(context, (err, html) => {
120 |     if (err) {
121 |       return handleError(err)
122 |     }
123 |     res.send(html)
124 |     if (!isProd) {
125 |       console.log(`whole request: ${Date.now() - s}ms`)
126 |     }
127 |   })
128 | }
129 | 
130 | app.get('*', isProd ? render : (req, res) => {
131 |   readyPromise.then(() => render(req, res))
132 | })
133 | 
134 | const port = process.env.PORT || 8080
135 | app.listen(port, () => {
136 |   console.log(`server started at localhost:${port}`)
137 | })
138 | 


--------------------------------------------------------------------------------