{{ key }} ({{item.length}})
-
{{subItem.title}} {{ subItem.createdAt.split(' ')[0] }}
{{title}}
/ig, '')
return text
}
================================================
FILE: admin/src/components/views/CreateEditView.js
================================================
import Item from '../containers/Create.vue'
export default function(options) {
return {
name: `${options.name}-create-view`,
preFetch(store) {
return store.dispatch('FETCH_LIST', options)
},
render(h) {
return h(Item, { props: { options: options } })
}
}
}
================================================
FILE: admin/src/components/views/CreateListView.js
================================================
import Item from '../containers/List.vue'
export default function(options) {
return {
name: `${options.name}-list-view`,
preFetch(store) {
return store.dispatch('FETCH_LIST', options)
},
render(h) {
return h(Item, { props: { options: options } })
}
}
}
================================================
FILE: admin/src/components/views/CreateMarkdownView.js
================================================
import Item from '../containers/Post.vue'
export default function(options) {
return {
name: `${options.name}-markdown-view`,
preFetch(store) {
return store.dispatch('FETCH_LIST', options)
},
render(h) {
return h(Item, { props: { options: options } })
}
}
}
================================================
FILE: admin/src/main.js
================================================
/* eslint-disable */
import Vue from 'vue'
import router from './route/index'
import { sync } from 'vuex-router-sync'
import store from './store/index'
sync(store, router)
import 'element-ui/lib/theme-default/index.css'
import Element from 'element-ui'
Vue.use(Element)
import App from './App'
const app = new Vue({
router,
store,
...App
})
app.$mount('#app')
export { app, router, store }
================================================
FILE: admin/src/route/index.js
================================================
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import createListView from '../components/views/CreateListView'
import createEditView from '../components/views/CreateEditView'
import createMarkdownView from '../components/views/CreateMarkdownView'
import Main from '../components/Main'
import Dashboard from '../components/pages/Dashboard'
import Login from '../components/pages/Login'
import Logout from '../components/pages/Logout'
export default new VueRouter({
mode: 'history',
scrollBehavior: function(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
},
routes: [
{
path: '/admin/login',
name: 'login',
components: {
default: Login
}
},
{
path: '/admin/logout',
name: 'logout',
components: {
default: Logout
}
},
{
path: '/dashboard',
component: Main,
children: [
{
path: '/',
name: 'dashboard',
component: Dashboard
}
]
},
{
path: '/post',
name: 'post',
component: Main,
children: [
{
path: 'list',
name: 'postList',
component: createListView({
name: 'post',
model: 'post',
isButtonFixed: true,
items: [
{
prop: 'title',
label: '标题',
width: 300
},
{
prop: 'pathName',
label: '路径',
width: 300
}
],
query: {
conditions: {
type: 'post'
},
select: {
title: 1,
pathName: 1,
tags: 1,
category: 1
},
sort: {
createdAt: -1
}
}
})
},
{
path: 'create/:id?',
name: 'postCreate',
component: createMarkdownView({
name: 'post',
model: 'post',
items: [
{
prop: 'title',
label: '标题',
type: 'input',
default: '',
width: 250
},
{
prop: 'pathName',
label: '路径',
type: 'input',
default: '',
width: 250,
description: '作为文章的唯一标志在前端路径中显示，例如test-article'
},
{
prop: 'markdownContent',
label: '内容',
type: 'markdown',
default: '',
width: 170,
subProp: 'markdownToc'
},
{
type: 'split'
},
{
prop: 'createdAt',
label: '创建日期',
type: 'date-picker',
default: '',
width: 170
},
{
prop: 'updatedAt',
label: '修改日期',
type: 'date-picker',
default: '',
width: 170
},
{
prop: 'tags',
label: '标签',
type: 'select',
default: [],
width: 170
},
{
prop: 'category',
label: '分类',
type: 'radio',
default: '',
width: 170
},
{
prop: 'isPublic',
label: '是否公开',
type: 'switch',
default: true,
width: 170
},
{
prop: 'allowComment',
label: '允许评论',
type: 'switch',
default: true,
width: 170
}
],
query: {
conditions: {
type: 'post'
},
select: {
title: 1,
pathName: 1,
tags: 1,
category: 1,
isPublic: 1,
allowComment: 1,
updatedAt: 1,
createdAt: 1,
markdownContent: 1,
type: 1,
markdownToc: 1
}
}
})
}
]
},
{
path: '/page',
name: 'page',
component: Main,
children: [
{
path: 'list',
name: 'pageList',
component: createListView({
name: 'page',
model: 'post',
items: [
{
prop: 'title',
label: '标题',
width: 250
},
{
prop: 'pathName',
label: '路径',
width: 170
},
{
prop: 'createdAt',
label: '创建日期',
width: 170
},
{
prop: 'updatedAt',
label: '修改日期',
width: 170
}
],
query: {
conditions: {
type: 'page'
},
select: {
title: 1,
pathName: 1,
createdAt: 1,
updatedAt: 1
},
sort: {
createdAt: -1
}
}
})
},
{
path: 'create/:id?',
name: 'pageCreate',
component: createMarkdownView({
name: 'page',
model: 'post',
items: [
{
prop: 'title',
label: '标题',
type: 'input',
default: '',
width: 250
},
{
prop: 'pathName',
label: '路径',
type: 'input',
default: '',
width: 250,
description: '作为文章的唯一标志在前端路径中显示，例如test-article'
},
{
prop: 'markdownContent',
label: '内容',
type: 'markdown',
default: '',
width: 170,
subProp: 'markdownToc'
},
{
type: 'split'
},
{
prop: 'createdAt',
label: '创建日期',
type: 'date-picker',
default: '',
width: 170
},
{
prop: 'updatedAt',
label: '修改日期',
type: 'date-picker',
default: '',
width: 170
},
{
prop: 'isPublic',
label: '是否公开',
type: 'switch',
default: true,
width: 170
},
{
prop: 'allowComment',
label: '允许评论',
type: 'switch',
default: true,
width: 170
}
],
query: {
conditions: {
type: 'page'
},
select: {
title: 1,
pathName: 1,
isPublic: 1,
allowComment: 1,
updatedAt: 1,
createdAt: 1,
markdownContent: 1,
type: 1,
markdownToc: 1
}
}
})
}
]
},
{
path: '/theme',
name: 'theme',
component: Main,
children: [
{
path: 'list',
name: 'themeList',
component: createListView({
name: 'theme',
model: 'theme',
items: [
{
prop: 'name',
label: '主题',
width: 250
},
{
prop: 'author',
label: '作者',
width: 170
}
],
query: {}
})
},
{
path: 'create/:id?',
name: 'themeEdit',
component: createEditView({
name: 'theme',
model: 'theme',
items: [
{
prop: 'name',
label: '主题名称',
width: 250
},
{
prop: 'author',
label: '作者',
width: 170
},
{
prop: 'option',
label: '配置',
width: 170,
type: 'textarea',
sourceType: 'Object',
description: '配置内容应为一个JSON对象，不符合JSON格式时提交将被忽略'
}
],
query: {}
})
}
]
},
{
path: '/cate',
name: 'cate',
component: Main,
children: [
{
path: 'list',
name: 'cateList',
component: createListView({
name: 'cate',
model: 'category',
items: [
{
prop: 'name',
label: '分类',
width: 250
}
],
query: {}
})
},
{
path: 'create/:id?',
name: 'cateCreate',
component: createEditView({
name: 'cate',
model: 'category',
items: [
{
prop: 'name',
label: '分类名称',
width: 250
}
],
query: {}
})
}
]
},
{
path: '/tag',
name: 'tag',
component: Main,
children: [
{
path: 'list',
name: 'tagList',
component: createListView({
name: 'tag',
model: 'tag',
items: [
{
prop: 'name',
label: '标签',
width: 250
}
],
query: {}
})
},
{
path: 'create/:id?',
name: 'tagCreate',
component: createEditView({
name: 'tag',
model: 'tag',
items: [
{
prop: 'name',
label: '标签名称',
width: 250
}
],
query: {}
})
}
]
},
{
path: '/user',
name: 'user',
component: Main,
children: [
{
path: 'edit',
name: 'userEdit',
component: createEditView({
name: 'user',
model: 'user',
isPlain: true,
items: [
{
prop: 'name',
label: '账号',
default: '',
width: 250
},
{
prop: 'password',
label: '密码',
default: '',
width: 170
},
{
prop: 'displayName',
label: '昵称',
default: '',
width: 170,
description: '在后台管理的顶部导航栏中显示'
},
{
prop: 'email',
label: '邮箱',
default: '',
width: 170,
description: '在文章被回复时博客需要通知的目标邮箱，空则不通知'
}
],
query: {}
})
}
]
},
{
path: '/option',
name: 'option',
component: Main,
children: [
{
path: 'general',
name: 'optionGeneral',
component: createEditView({
name: 'general',
model: 'option',
isPlain: true,
items: [
{
prop: 'title',
label: '网站名称',
default: '',
width: 250,
description: '网站的名称，作为前后台的标题'
},
{
prop: 'logoUrl',
label: 'logo地址',
default: '',
width: 170,
description: '前台单页的正方形图标，80x80'
},
{
prop: 'description',
label: '站点描述',
default: '',
width: 170,
description: '作为前台的侧边栏描述'
},
{
prop: 'siteUrl',
label: '网站地址',
default: '',
width: 170,
description: '博客前台的域名,建议加上http/https前缀'
},
{
prop: 'faviconUrl',
label: 'favicon地址',
default: '',
width: 170,
description: '博客前台的favicon地址，请填写相对前台域名的根路径'
},
{
prop: 'keywords',
label: '关键词',
default: '',
width: 170,
description: '作为前台单页的meta中的keywords，以供搜索引擎收录'
},
{
prop: 'githubUrl',
label: 'github地址',
default: '',
width: 170,
description: 'github地址，填写用户昵称即可'
},
{
prop: 'weiboUrl',
label: '微博地址',
default: '',
width: 170,
description: '微博地址，请填写全部链接,包括http/https前缀'
},
{
prop: 'miitbeian',
label: '网站备案号',
default: '',
width: 170,
description: '网站的备案号，在前台单页的底部显示'
}
],
query: {}
})
},
{
path: 'comment',
name: 'optionComment',
component: createEditView({
name: 'comment',
model: 'option',
isPlain: true,
items: [
{
prop: 'commentType',
label: '评论类型',
default: '',
width: 250,
description: '目前仅支持disqus，计划支持duoshuo'
},
{
prop: 'commentName',
label: '评论名称',
default: '',
width: 250,
description: 'disqus或duoshuo中分配给博客的id'
}
],
query: {}
})
},
{
path: 'analytic',
name: 'optionAnalytic',
component: createEditView({
name: 'analytic',
model: 'option',
isPlain: true,
items: [
{
prop: 'analyzeCode',
label: '统计代码',
default: '',
width: 250,
description: '目前仅支持谷歌统计，填入谷歌统计分配给博客的ID即可'
}
],
query: {}
})
}
]
},
{
path: '/',
redirect: '/admin/login'
}
]
})
================================================
FILE: admin/src/store/api.js
================================================
import request from 'axios'
const root = `/proxyPrefix/api`
const store = {}
export default store
store.request = request
store.login = (conditions) => {
return request.post(`/proxyPrefix/admin/login`, conditions)
}
store.logout = (conditions) => {
return request.post(`/proxyPrefix/admin/logout`, conditions)
}
store.getImageHeight = url => {
return request.get(`${url}?imageInfo`).then(response => response.data)
}
store.getImageToken = (body) => {
return request.post(`/proxyPrefix/admin/qiniu`, body).then(response => response.data)
}
store.fetchList = (model, query) => {
let target = `${root}/${model}`
return request.get(target, { params: query }).then((response) => {
return response.data
})
}
store.fetchByID = (model, id, query) => {
let target = `${root}/${model}/${id}`
return request.get(target, { params: query }).then((response) => {
return response.data
})
}
store.post = (model, form) => {
let target = `${root}/${model}`
return request.post(target, form).then((response) => {
return response.data
})
}
store.patchByID = (model, id, form) => {
let target = `${root}/${model}/${id}`
return request.patch(target, form).then((response) => {
return response.data
})
}
store.deleteByID = (model, id) => {
let target = `${root}/${model}/${id}`
return request.delete(target).then((response) => {
return response.data
})
}
================================================
FILE: admin/src/store/index.js
================================================
import Vue from 'vue'
import Vuex from 'vuex'
import api from './api'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
siteInfo: {},
list: [],
curr: {},
user: {}
},
actions: {
GET_IMAGE_HEIGHT: ({ commit, state }, { url }) => {
return api.getImageHeight(url).then(data => data.height || 100)
},
FETCH: ({ commit, state }, { model, query }) => {
return api.fetchList(model, query)
},
FETCH_BY_ID: ({ commit, state }, { model, id, query }) => {
return api.fetchByID(model, id, query)
},
FETCH_LIST: ({ commit, state }, { model, query }) => {
return api.fetchList(model, query).then(obj => {
commit('SET_LIST', { obj })
})
},
FETCH_CREATE: ({ commit, state }, { model, id, query }) => {
if (id === -1) {
return api.fetchList(model, query).then(curr => {
let obj = curr.reduce((prev, value) => {
if (model === 'option') {
prev[value.key] = value.value
} else if (model === 'user') {
Object.keys(value).forEach(item => {
prev[item] = value[item]
})
}
return prev
}, {})
commit('SET_CURR', { obj })
})
} else {
return api.fetchByID(model, id, query).then(obj => {
commit('SET_CURR', { obj })
})
}
},
POST: ({ commit, state }, { model, form }) => {
if (model !== 'post' && model !== 'option' && model !== 'user') {
return api.post(model, form)
} else if (model === 'user' || model === 'post') {
let { _id: id } = form
if (typeof id !== 'undefined') {
return api.patchByID(model, id, form).then((result) => {
if (model === 'user') {
commit('SET_USER', { user: result })
}
return result
})
} else {
return api.post(model, form)
}
} else if (model === 'option') {
let promiseArr = Object.keys(form).reduce((prev, curr) => {
if (form[curr] !== state.curr[curr]) {
const { _id: id } = state.siteInfo[curr]
let promise = api.patchByID(model, id, {
value: form[curr]
})
prev.push(promise)
}
return prev
}, [])
return Promise.all(promiseArr)
}
},
GET_IMAGE_TOKEN: ({ commit, state }, body) => {
return api.getImageToken(body)
},
PATCH: ({ commit, state }, { model, id, form }) => {
return api.patchByID(model, id, form)
},
DELETE: ({ commit, state }, { model, id }) => {
return api.deleteByID(model, id)
},
FETCH_USER: ({ commit, state }, { model, query, username }) => {
return api.fetchList(model, query).then(result => {
for (let i = 0, len = result.length; i < len; i++) {
let user = result[i]
if (user.name === username) {
commit('SET_USER', { user })
break
}
}
})
},
FETCH_OPTIONS: ({ commit, state }) => {
return api.fetchList('option', {}).then(optionArr => {
let obj = optionArr.reduce((prev, curr) => {
prev[curr.key] = curr
return prev
}, {})
commit('SET_OPTIONS', { obj })
})
}
},
mutations: {
SET_LIST: (state, { obj }) => {
Vue.set(state, 'list', obj)
},
SET_OPTIONS: (state, { obj }) => {
Vue.set(state, 'siteInfo', obj)
},
SET_CURR: (state, { obj }) => {
Vue.set(state, 'curr', obj)
},
SET_USER: (state, { user }) => {
Vue.set(state, 'user', user)
}
},
getters: {
}
})
export default store
================================================
FILE: admin/src/utils/error.js
================================================
export const getChineseDesc = (desc) => {
switch (desc) {
case 'Token not found':
return '请求失败，请确认您已登陆'
case 'Get token failed. Check the password':
return '登陆失败，请检查您的密码'
case 'Get token failed. Check the name':
return '登陆失败，请检查您的账号'
case 'Token verify failed':
case 'Token invalid':
return 'Token验证失败，请重新登录'
default:
return desc
}
}
================================================
FILE: admin/static/.gitkeep
================================================
================================================
FILE: admin/test/e2e/custom-assertions/elementCount.js
================================================
// A custom Nightwatch assertion.
// the name of the method is the filename.
// can be used in tests like this:
//
// browser.assert.elementCount(selector, count)
//
// for how to write custom assertions see
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
this.message = 'Testing if element <' + selector + '> has count: ' + count;
this.expected = count;
this.pass = function (val) {
return val === this.expected;
}
this.value = function (res) {
return res.value;
}
this.command = function (cb) {
var self = this;
return this.api.execute(function (selector) {
return document.querySelectorAll(selector).length;
}, [selector], function (res) {
cb.call(self, res);
});
}
}
================================================
FILE: admin/test/e2e/nightwatch.conf.js
================================================
require('babel-register')
var config = require('../../config')
// http://nightwatchjs.org/guide#settings-file
module.exports = {
"src_folders": ["test/e2e/specs"],
"output_folder": "test/e2e/reports",
"custom_assertions_path": ["test/e2e/custom-assertions"],
"selenium": {
"start_process": true,
"server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar",
"host": "127.0.0.1",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": require('chromedriver').path
}
},
"test_settings": {
"default": {
"selenium_port": 4444,
"selenium_host": "localhost",
"silent": true,
"globals": {
"devServerURL": "http://localhost:" + (process.env.PORT || config.dev.port)
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"firefox": {
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
================================================
FILE: admin/test/e2e/runner.js
================================================
// 1. start the dev server using production config
process.env.NODE_ENV = 'testing';
var server = require('../../build/dev-server.js');
// 2. run the nightwatch test suite against it
// to run in additional browsers:
// 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
// 2. add it to the --env flag below
// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
// For more information on Nightwatch's config file, see
// http://nightwatchjs.org/guide#settings-file
var opts = process.argv.slice(2);
if (opts.indexOf('--config') === -1) {
opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']);
}
if (opts.indexOf('--env') === -1) {
opts = opts.concat(['--env', 'chrome']);
}
var spawn = require('cross-spawn');
var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' });
runner.on('exit', function (code) {
server.close();
process.exit(code);
});
runner.on('error', function (err) {
server.close();
throw err;
});
================================================
FILE: admin/test/e2e/specs/test.js
================================================
// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage
module.exports = {
'default e2e tests': function test(browser) {
// automatically uses dev Server port from /config.index.js
// default: http://localhost:8080
// see nightwatch.conf.js
const devServer = browser.globals.devServerURL
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.hello')
.assert.containsText('h1', 'Welcome to Your Vue.js App')
.assert.elementCount('img', 1)
.end()
}
}
================================================
FILE: admin/test/unit/.eslintrc
================================================
{
"env": {
"mocha": true
},
"globals": {
"expect": true,
"sinon": true
}
}
================================================
FILE: admin/test/unit/index.js
================================================
// Polyfill fn.bind() for PhantomJS
/* eslint-disable no-extend-native */
Function.prototype.bind = require('function-bind');
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/);
testsContext.keys().forEach(testsContext);
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
srcContext.keys().forEach(srcContext);
================================================
FILE: admin/test/unit/karma.conf.js
================================================
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var path = require('path');
var merge = require('webpack-merge');
var baseConfig = require('../../build/webpack.base.conf');
var utils = require('../../build/utils');
var webpack = require('webpack');
var projectRoot = path.resolve(__dirname, '../../');
var webpackConfig = merge(baseConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
loaders: utils.styleLoaders()
},
devtool: '#inline-source-map',
vue: {
loaders: {
js: 'isparta'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../../config/test.env')
})
]
});
// no need for app entry during tests
delete webpackConfig.entry;
// make sure isparta loader is applied before eslint
webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [];
webpackConfig.module.preLoaders.unshift({
test: /\.js$/,
loader: 'isparta',
include: path.resolve(projectRoot, 'src'),
});
// only apply babel for test files when using isparta
webpackConfig.module.loaders.some(function (loader, i) {
if (loader.loader === 'babel') {
loader.include = path.resolve(projectRoot, 'test/unit');
return true;
}
});
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
================================================
FILE: admin/test/unit/specs/Hello.spec.js
================================================
import Vue from 'vue'
import Hello from 'src/components/Hello'
describe('Hello.vue', () => {
it('should render correct contents', () => {
const vm = new Vue({
el: document.createElement('div'),
render: (h) => h(Hello)
})
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App')
})
})
================================================
FILE: docs/.nojekyll
================================================
================================================
FILE: docs/README.md
================================================
# Blog
A blog system. Based on Vue2, Koa2, MongoDB and Redis
前后端分离 + 服务端渲染的博客系统, 前端 SPA + 后端 RESTful 服务器
# Demo
前端：[https://smallpath.me](https://smallpath.me)
后台管理截图：[https://smallpath.me/post/blog-back-v2](https://smallpath.me/post/blog-back-v2)
Table of Contents
=================
* [TODO](#todo)
* [构建与部署](#构建与部署)
* [前置](#前置)
* [server](#server)
* [front](#front)
* [admin](#admin)
* [后端RESTful API](#后端restful-api)
* [说明](#说明)
* [HTTP动词](#http动词)
* [权限验证](#权限验证)
* [获得Token](#获得token)
* [撤销Token](#撤销token)
* [Token说明](#token说明)
* [查询](#查询)
* [新建](#新建)
* [替换](#替换)
* [更新](#更新)
* [删除](#删除)
# TODO
> [TODO](https://github.com/smallpath/blog/issues/14)
# 构建与部署
## 前置
- Node v6
- pm2
- MongoDB
- Redis
## server
博客的提供RESTful API的后端
复制conf文件夹中的默认配置`config.tpl`, 并命名为`config.js`
有如下属性可以自行配置:
- `tokenSecret`
- 改为任意字符串
- `defaultAdminPassword`
- 默认密码, 必须修改, 否则服务器将拒绝启动
如果mongoDB或redis不在本机对应端口，可以修改对应的属性
- `mongoHost`
- `mongoDatabase`
- `mongoPort`
- `redisHost`
- `redisPort`
如果需要启用后台管理单页的七牛图片上传功能，请再修改如下属性:
- `qiniuAccessKey`
- 七牛账号的公钥
- `qiniuSecretKey`
- 七牛账号的私钥
- `qiniuBucketHost`
- 七牛Bucket对应的外链域名
- `qiniuBucketName`
- 七牛Bucket的名称
- `qiniuPipeline`
- 七牛多媒体处理队列的名称
```
npm install
pm2 start entry.js
```
RESTful服务器在本机3000端口开启
## front
博客的前台单页, 支持服务端渲染
复制server文件夹中的默认配置`mongo.tpl`, 并命名为`mongo.js`
如果mongoDB不在本机对应端口，请自行配置`mongo.js`中的属性:
- `mongoHost`
- `mongoDatabase`
- `mongoPort`
```
npm install
npm run build
pm2 start production.js
```
请将`logo.png`与`favicon.ico`放至`static`目录中
再用nginx代理本机8080端口即可, 可以使用如下的模板
```
server{
listen 80; #如果是https, 则替换80为443
server_name *.smallpath.me smallpath.me; #替换域名
root /alidata/www/Blog/front/dist; #替换路径为构建出来的dist路径
set $node_port 3000;
set $ssr_port 8080;
location ^~ / {
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$ssr_port;
proxy_redirect off;
}
location ^~ /proxyPrefix/ {
rewrite ^/proxyPrefix/(.*) /$1 break;
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$node_port;
proxy_redirect off;
}
location ^~ /dist/ {
rewrite ^/dist/(.*) /$1 break;
etag on;
expires max;
}
location ^~ /static/ {
etag on;
expires max;
}
}
```
开发端口为本机8080
## admin
博客的后台管理单页
```
npm install
npm run build
```
用nginx代理构建出来的`dist`文件夹即可, 可以使用如下的模板
```
server{
listen 80; #如果是https, 则替换80为443
server_name admin.smallpath.me; #替换域名
root /alidata/www/Blog/admin/dist; #替换路径为构建出来的dist路径
set $node_port 3000;
index index.js index.html index.htm;
location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.*)$ / last;
}
location ^~ /proxyPrefix/ {
rewrite ^/proxyPrefix/(.*) /$1 break;
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$node_port;
proxy_redirect off;
}
location ^~ /static/ {
etag on;
expires max;
}
}
```
开发端口为本机8082
# 后端 RESTful API
## 说明
后端服务器默认开启在 3000 端口, 如不愿意暴露 IP, 可以自行设置 nginx 代理, 或者直接使用前端两个单页的代理前缀`/proxyPrefix`
例如, demo的API根目录如下:
> https://smallpath.me/proxyPrefix/api/:modelName/:id
其中, `:modelName`为模型名, 总计如下6个模型
```
post
theme
tag
category
option
user
```
`:id`为指定的文档ID, 用以对指定文档进行 CRUD
## HTTP 动词
支持如下五种:
``` bash
GET //查询
POST //新建
PUT //替换
PATCH //更新部分属性
DELETE //删除指定ID的文档
```
有如下两个规定:
- 对所有请求
- header中必须将 `Content-Type` 设置为 `application/json` , 需要 `body` 的则 `body` 必须是合法 JSON格式
- 对所有回应
- header中的`Content-Type`均为`application/json`, 且返回的数据也是 JSON格式
## 权限验证
服务器直接允许对`user`模型外的所有模型的GET请求
`user`表的所有请求, 以及其他表的非 GET 请求, 都必须将 header 中的`authorization`设置为服务器下发的 Token, 服务器验证通过后才会继续执行 CRUD 操作
### 获得 Token
> POST https://smallpath.me/proxyPrefix/admin/login
`body`格式如下:
```
{
"name": "admin",
"password": "testpassword"
}
```
成功, 则返回带有`token`字段的 JSON 数据
```
{
"status": "success",
"token": "tokenExample"
}
```
失败, 则返回如下格式的 JSON 数据:
```
{
"status": "fail",
"description": "Get token failed. Check name and password"
}
```
获取到`token`后, 在上述需要 token 验证的请求中, 请将 header 中的`authorization`设置为服务器下发的 Token, 否则请求将被服务器拒绝
### 撤销 Token
> POST https://smallpath.me/proxyPrefix/admin/logout
将`header`中的`authorization`设置为服务器下发的 token, 即可撤销此 token
### Token说明
Token 默认有效期为获得后的一小时, 超出时间后请重新请求 Token
如需自定义有效期, 请修改服务端配置文件中的`tokenExpiresIn`字段, 其单位为秒
## 查询
服务器直接允许对`user`模型外的所有模型的 GET 请求, 不需要验证 Token
为了直接通过 URI 来进行 mongoDB 查询, 后台提供六种关键字的查询:
```
conditions,
select,
count,
sort,
skip,
limit
```
### 条件(conditions)查询
类型为JSON, 被解析为对象后, 直接将其作为`mongoose.find`的查询条件
#### 查询所有文档
> GET https://smallpath.me/proxyPrefix/api/post
#### 查询title字段为'关于'的文档
> GET https://smallpath.me/proxyPrefix/api/post?conditions={"title":"关于"}
#### 查询指定id的文档的上一篇文档
> GET https://smallpath.me/proxyPrefix/api/post/?conditions={"_id":{"$lt":"580b3ff504f59b4cc27845f0"}}&sort=1&limit=1
#### select查询
类型为JSON, 用以拾取每条数据所需要的属性名, 以过滤输出来加快响应速度
#### 查询title字段为'关于'的文档的建立时间和更新时间
> GET https://smallpath.me/proxyPrefix/api/post?conditions={"title":"关于"}&select={"createdAt":1,"updatedAt":1}
### count查询
获得查询结果的数量
#### 查询文档的数量
> GET https://smallpath.me/proxyPrefix/api/post?conditions={"type":0}&count=1
### sort查询
#### 查询所有文档并按id倒序
> GET https://smallpath.me/proxyPrefix/api/post?sort={"_id":-1}
#### 查询所有文档并按更新时间倒序
> GET https://smallpath.me/proxyPrefix/api/post?sort={"updatedAt":-1}
### skip 查询和 limit 查询
#### 查询第2页的文档(每页10条)并按时间倒叙
> GET https://smallpath.me/proxyPrefix/api/post?limit=10&skip=10&sort=1
## 新建
需要验证Token
> POST https://smallpath.me/proxyPrefix/api/:modelName
Body中为用来新建文档的JSON数据
每个模型的具体字段, 可以查看该模型的[Schema定义](https://github.com/smallpath/blog/blob/master/server/model/mongo.js#L24)来获得
## 替换
需要验证Token
> PUT https://smallpath.me/proxyPrefix/api/:modelName/:id
`:id`为查询到的文档的`_id`属性, Body中为用来替换该文档的JSON数据
## 更新
需要验证Token
> PATCH https://smallpath.me/proxyPrefix/api/:modelName/:id
`:id`为查询到的文档的`_id`属性, Body中为用来更新该文档的JSON数据
更新操作请使用`PATCH`而不是`PUT`
## 删除
需要验证 Token
> DELETE https://smallpath.me/proxyPrefix/api/:modelName/:id
删除指定 ID 的文档
================================================
FILE: docs/index.html
================================================
Document
================================================
FILE: front/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": {
"loose": true,
"modules": false
}
}]
],
"plugins": [
"transform-object-rest-spread",
"syntax-dynamic-import"
],
"comments": true
}
================================================
FILE: front/.eslintignore
================================================
build/*.js
config/*.js
================================================
FILE: front/.eslintrc.js
================================================
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
'space-before-function-paren': ['error', 'never'],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
================================================
FILE: front/.gitignore
================================================
.DS_Store
node_modules/
dist/
npm-debug.log
selenium-debug.log
test/unit/coverage
test/e2e/reports
static/
server/mongo.js
.editorconfig
================================================
FILE: front/README.md
================================================
## front
> 博客的前台单页, 支持服务端渲染
复制server文件夹中的默认配置`mongo.tpl`, 并命名为`mongo.js`
``` bash
npm install
# 测试环境
npm run dev
# 默认打包文件在 dist 文件夹内
npm run build
```
命令顺利执行会得到类似以下回显:
```
[2017-04-07 22:09:55.971] [DEBUG] ssr axios - MongoDB is ready
[HPM] Proxy created: /proxyPrefix -> http://localhost:3000/
[HPM] Proxy rewrite rule created: "^/proxyPrefix" ~> ""
[2017-04-07 22:09:56.640] [DEBUG] ssr server - server started at localhost:8080
```
不出意外的话访问 http://localhost:8080/ 就可以访问博客页面了
## TIPS
- 如果mongoDB不在本机对应端口，请自行配置`mongo.js`中的属性:
- 请将`logo.png`与`favicon.ico`放至`static`目录中
- 生产环境 nginx 代理本机8080端口模板
```
server{
listen 80; #如果是https, 则替换80为443
server_name *.smallpath.me smallpath.me; #替换域名
root /alidata/www/Blog/front/dist; #替换路径为构建出来的dist路径
set $node_port 3000;
set $ssr_port 8080;
location ^~ / {
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$ssr_port;
proxy_redirect off;
}
location ^~ /proxyPrefix/ {
rewrite ^/proxyPrefix/(.*) /$1 break;
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$node_port;
proxy_redirect off;
}
location ^~ /dist/ {
rewrite ^/dist/(.*) /$1 break;
etag on;
expires max;
}
location ^~ /static/ {
etag on;
expires max;
}
}
```
================================================
FILE: front/build/build-client.js
================================================
// https://github.com/shelljs/shelljs
require('shelljs/global')
env.NODE_ENV = 'production'
var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.client.config')
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
var dist = path.join(__dirname, '../dist')
rm('-rf', dist)
mkdir('-p', dist)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})
================================================
FILE: front/build/setup-dev-server.js
================================================
const path = require('path')
const webpack = require('webpack')
const MFS = require('memory-fs')
const proxyTable = require('../config/index').dev.proxyTable;
const clientConfig = require('./webpack.client.config')
const serverConfig = require('./webpack.server.config')
const proxyMiddleware = require('http-proxy-middleware')
module.exports = function setupDevServer (app, opts) {
// modify client config to work with hot middleware
clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
clientConfig.output.filename = '[name].js'
clientConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
// dev middleware
const clientCompiler = webpack(clientConfig)
const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
publicPath: clientConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
app.use(devMiddleware)
clientCompiler.plugin('done', () => {
const fs = devMiddleware.fileSystem
const filePath = path.join(clientConfig.output.path, 'index.html')
if (fs.existsSync(filePath)) {
const index = fs.readFileSync(filePath, 'utf-8')
opts.indexUpdated(index)
}
})
// hot middleware
app.use(require('webpack-hot-middleware')(clientCompiler))
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
})
// watch and update server renderer
const serverCompiler = webpack(serverConfig)
const mfs = new MFS()
const outputPath = path.join(serverConfig.output.path, serverConfig.output.filename)
serverCompiler.outputFileSystem = mfs
serverCompiler.watch({}, (err, stats) => {
if (err) throw err
stats = stats.toJson()
stats.errors.forEach(err => console.error(err))
stats.warnings.forEach(err => console.warn(err))
opts.bundleUpdated(mfs.readFileSync(outputPath, 'utf-8'))
})
}
================================================
FILE: front/build/utils.js
================================================
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
return path.posix.join(config.build.assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders (loaders) {
var sourceLoader = loaders.map(function (loader) {
var extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/, '-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
if (options.extract) {
return ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: sourceLoader
});
} else {
return ['vue-style-loader', sourceLoader].join('!')
}
}
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
return {
css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
loader: loader
})
}
return output
}
================================================
FILE: front/build/vue-loader.config.js
================================================
module.exports = {
preserveWhitespace: false,
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
}
================================================
FILE: front/build/webpack.base.config.js
================================================
var config = require('../config')
var vueConfig = require('./vue-loader.config')
module.exports = {
entry: {
app: './src/client-entry.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js'
},
resolve: {
extensions: ['.js', '.vue']
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash].[ext]'
}
}
]
},
performance: {
hints: process.env.NODE_ENV === 'production' ? 'warning' : false
}
}
================================================
FILE: front/build/webpack.client.config.js
================================================
const webpack = require('webpack')
const base = require('./webpack.base.config')
const vueConfig = require('./vue-loader.config')
const utils = require('./utils')
const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
const config = Object.assign({}, base, {
resolve: {
alias: Object.assign({}, base.resolve.alias, {
'create-api': './create-api-client.js',
'create-route': './create-route-client.js'
}),
extensions: base.resolve.extensions
},
plugins: (base.plugins || []).concat([
// strip comments in Vue code
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"client"',
'process.BROWSER': true
}),
// generate output HTML
new HTMLPlugin({
template: 'src/index.template.html'
})
])
})
if (process.env.NODE_ENV === 'production') {
// Use ExtractTextPlugin to extract CSS into a single file
// so it's applied on initial render.
vueConfig.loaders = utils.cssLoaders({
extract: true
})
config.plugins.push(
new ExtractTextPlugin('styles.css'),
// this is needed in webpack 2 for minifying CSS
new webpack.LoaderOptionsPlugin({
minimize: true
}),
// minify JS
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
}),
new SWPrecachePlugin({
cacheId: 'blog',
filename: 'service-worker.js',
minify: true,
mergeStaticsConfig: true,
staticFileGlobs: [
path.join(__dirname, '../dist/static/*.*')
],
stripPrefixMulti: {
[path.join(__dirname, '../dist/static')]: '/static'
},
// add hash to path to force updated
dontCacheBustUrlsMatching: false,
staticFileGlobsIgnorePatterns: [
/index\.html$/,
/\.map$/,
/\.css$/,
/\.svg$/,
/\.eot$/
],
// runtime caching for offline pwa
runtimeCaching: [
{
// never cache service worker
urlPattern: /service-worker.js/,
handler: 'networkOnly'
},
{
// note that this pattern will cache ajax request
urlPattern: /(.+\/[^\.]*$)/,
handler: 'networkFirst',
options: {
cache: {
maxEntries: 30,
name: 'blog-runtime-cache'
}
}
},
{
urlPattern: /\.(png|jpg|webp|gif)/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 20,
name: 'blog-picture-cache'
}
}
}
]
})
)
}
module.exports = config
================================================
FILE: front/build/webpack.server.config.js
================================================
const webpack = require('webpack')
const base = require('./webpack.base.config')
const VueSSRPlugin = require('vue-ssr-webpack-plugin')
const plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"',
'process.BROWSER': false
})
]
if (process.env.NODE_ENV === 'production') {
plugins.push(new VueSSRPlugin())
}
module.exports = Object.assign({}, base, {
target: 'node',
devtool: '#source-map',
entry: './src/server-entry.js',
output: Object.assign({}, base.output, {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
}),
resolve: {
alias: Object.assign({}, base.resolve.alias, {
'create-api': './create-api-server.js',
'create-route': './create-route-server.js'
}),
extensions: base.resolve.extensions
},
externals: Object.keys(require('../package.json').dependencies),
plugins: plugins
})
================================================
FILE: front/config/dev.env.js
================================================
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
================================================
FILE: front/config/index.js
================================================
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/dist/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css']
},
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/dist/',
proxyTable: {
'/proxyPrefix':{
target:'http://localhost:3000/',
changeOrigin: true,
pathRewrite:{
'^/proxyPrefix':'',
}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
}
}
================================================
FILE: front/config/prod.env.js
================================================
module.exports = {
NODE_ENV: '"production"'
}
================================================
FILE: front/config/test.env.js
================================================
var merge = require('webpack-merge')
var devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
================================================
FILE: front/middleware/favicon.js
================================================
const fs = require('fs')
const serveFavicon = require('serve-favicon')
const log = require('log4js').getLogger('favicon')
const path = require('path')
module.exports = function(faviconPath, options) {
let _middleware
return function(req, res, next) {
if (_middleware) return _middleware(req, res, next)
const target = path.join(__dirname, `../${faviconPath}`)
fs.readFile(target, function(err, buf) {
if (err) {
log.error(err)
return res.status(404).end()
}
_middleware = serveFavicon(buf, options)
return _middleware(req, res, next)
})
}
}
================================================
FILE: front/middleware/serverGoogleAnalytic.js
================================================
const log = require('log4js').getLogger('google analytic')
const config = require('../server/config')
const request = require('axios')
const EMPTY_GIF = new Buffer('R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==', 'base64')
const uuid = require('uuid')
const expires = 3600 * 1000 * 24 * 365 * 2
const ipReg = /\d+\.\d+\.\d+\.\d+/
const lowerReg = /\s+/g
const shouldBanSpider = ua => {
if (!ua) {
return true
}
ua = ua.toLowerCase().replace(lowerReg, '')
return config.ga.spider.some(item => ua.indexOf(item) > -1)
}
const getClientIp = (req) => {
let matched = req.ip.match(ipReg)
return matched ? matched[0] : req.ip
}
module.exports = (req, res, next, query) => {
let realQuery
let clientId
if (!query) {
clientId = req.cookies.id
if (!clientId) {
clientId = uuid.v4()
res.cookie('id', clientId, {
expires: new Date(Date.now() + expires)
})
}
res.setHeader('Content-Type', 'image/gif')
res.setHeader('Content-Length', 43)
res.end(EMPTY_GIF)
realQuery = req.query
} else {
realQuery = query
clientId = realQuery.cid
}
let passParams = config.ga.required.reduce((prev, curr) => {
if (!realQuery[curr]) {
prev = false
}
return prev
}, true)
if (passParams === false) return
if (config.googleTrackID === '') return
let userAgent = req.header('user-agent')
if (shouldBanSpider(userAgent) === true) return
let { z: timeStamp = Date.now() } = realQuery
let form = Object.assign({}, realQuery, {
v: config.ga.version,
tid: config.googleTrackID,
ds: 'web',
z: timeStamp + clientId,
cid: clientId,
uip: getClientIp(req),
ua: userAgent,
t: 'pageview',
an: config.title,
dh: config.siteUrl
})
request.get(config.ga.api, {
params: form
}).then(response => {
if (response.status !== 200) {
log.error(response, form)
return
}
log.info('Google Analytic sended', form.cid, form.ua)
}).catch(err => log.error(err, form))
}
================================================
FILE: front/package.json
================================================
{
"name": "vue_client_side",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Smallpath ",
"private": true,
"scripts": {
"dev": "node server",
"lint": "eslint --ext .js,.vue middleware server server.js src test/unit/specs test/e2e/specs",
"start": "cross-env NODE_ENV=production node server",
"build": "npm run build:client && npm run build:server",
"build:client": "node build/build-client.js",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
},
"dependencies": {
"axios": "^0.15.3",
"es6-promise": "^4.0.5",
"express": "^4.14.0",
"lru-cache": "^4.0.1",
"node-schedule": "^1.2.0",
"vue": "2.3.0",
"vue-meta": "0.5.3",
"vue-router": "^2.0.3",
"vue-server-renderer": "2.3.0",
"vuex": "^2.0.0",
"vuex-router-sync": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.2.2",
"babel-loader": "^6.0.0",
"babel-plugin-dynamic-import-node": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-latest": "^6.22.0",
"babel-preset-stage-2": "^6.0.0",
"bluebird": "^3.4.7",
"chai": "^3.5.0",
"connect-history-api-fallback": "^1.1.0",
"cookie-parser": "^1.4.3",
"cross-env": "^3.1.3",
"cross-spawn": "^2.1.5",
"css-loader": "^0.25.0",
"eslint": "^2.10.2",
"eslint-config-standard": "^5.1.0",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.3.0",
"eslint-plugin-promise": "^1.0.8",
"eslint-plugin-standard": "^1.3.2",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.10.0",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.12.0",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"json-loader": "^0.5.4",
"log4js": "^1.1.0",
"lolex": "^1.4.0",
"mongoose": "^4.8.5",
"ora": "^0.3.0",
"request": "^2.81.0",
"rimraf": "^2.5.4",
"serve-favicon": "^2.3.2",
"shelljs": "^0.7.5",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"sw-precache-webpack-plugin": "^0.9.0",
"url-loader": "^0.5.7",
"uuid": "^3.0.1",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^12.0.0",
"vue-ssr-webpack-plugin": "^1.0.2",
"vue-style-loader": "^3.0.0",
"vue-template-compiler": "2.3.0",
"webpack": "^2.4.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.8.3"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
================================================
FILE: front/production.js
================================================
process.env.NODE_ENV = 'production'
require('./server.js')
================================================
FILE: front/server/config.js
================================================
const isProd = process.env.NODE_ENV === 'production'
const request = require('./server-axios')
const { ssrPort, serverPort, enableServerSideGA } = require('./mongo')
let siteUrl = 'http://localhost:8080'
let title = 'Blog'
let description = ''
let googleTrackID = ''
let favicon = isProd ? './dist' : '.'
let ga = {
version: 1,
api: 'https://www.google-analytics.com/collect',
required: ['dt', 'dr', 'dp', 'z'],
spider: [
'spider',
'bot',
'appid', // for google appengine
'go-http-client',
'loadtest', // for load test
'feed'
].map(item => item.toLowerCase().replace(/\s+/g, ''))
}
function flushOption() {
return request.get('http://localhost:3000/api/option').then(res => {
let options = res.data.reduce((prev, curr) => {
prev[curr.key] = curr.value
return prev
}, {})
siteUrl = options['siteUrl']
title = options['title']
description = options['description']
googleTrackID = options['analyzeCode']
favicon += options['faviconUrl']
})
}
exports.ssrPort = ssrPort
exports.serverPort = serverPort
exports.enableServerSideGA = enableServerSideGA
Object.defineProperty(exports, 'title', {
enumerable: true,
get: function() {
return title
},
set: function(value) {
title = value
}
})
Object.defineProperty(exports, 'siteUrl', {
enumerable: true,
get: function() {
return siteUrl
},
set: function(value) {
siteUrl = value
}
})
Object.defineProperty(exports, 'description', {
enumerable: true,
get: function() {
return description
},
set: function(value) {
description = value
}
})
Object.defineProperty(exports, 'googleTrackID', {
enumerable: true,
get: function() {
return googleTrackID
},
set: function(value) {
googleTrackID = value
}
})
Object.defineProperty(exports, 'favicon', {
enumerable: true,
get: function() {
return favicon
},
set: function(value) {
favicon = value
}
})
Object.defineProperty(exports, 'flushOption', {
enumerable: true,
get: function() {
return flushOption
}
})
Object.defineProperty(exports, 'ga', {
enumerable: true,
get: function() {
return ga
}
})
================================================
FILE: front/server/model.js
================================================
const config = require('./mongo.js')
const mongoose = require('mongoose')
const log = require('log4js').getLogger('ssr axios')
mongoose.Promise = global.Promise = require('bluebird')
const mongoUrl = `${config.mongoHost}:${config.mongoPort}/${config.mongoDatabase}`
mongoose.connect(mongoUrl)
const db = mongoose.connection
db.on('error', (err) => {
log.error('connect error:', err)
})
db.once('open', () => {
log.debug('MongoDB is ready')
})
const Schema = mongoose.Schema
let post = new Schema({
type: { type: String, default: '' },
status: { type: Number, default: 0 },
title: String,
pathName: { type: String, default: '' },
summary: { type: String },
markdownContent: { type: String },
content: { type: String },
markdownToc: { type: String, default: '' },
toc: { type: String, default: '' },
allowComment: { type: Boolean, default: true },
createdAt: { type: String, default: '' },
updatedAt: { type: String, default: '' },
isPublic: { type: Boolean, default: true },
commentNum: Number,
options: Object,
category: String,
tags: Array
})
let category = new Schema({
name: String,
pathName: String
})
let tag = new Schema({
name: String,
pathName: String
})
let option = new Schema({
key: String,
value: Schema.Types.Mixed,
desc: String
})
let theme = new Schema({
name: String,
author: String,
option: Schema.Types.Mixed
})
post = mongoose.model('post', post)
category = mongoose.model('category', category)
option = mongoose.model('option', option)
theme = mongoose.model('theme', theme)
tag = mongoose.model('tag', tag)
module.exports = {
post,
category,
option,
tag,
theme
}
================================================
FILE: front/server/mongo.tpl
================================================
const env = process.env
module.exports = {
ssrPort: env.ssrPort || 8080,
mongoHost: env.mongoHost || '127.0.0.1',
mongoDatabase: env.mongoDatabase || 'blog',
mongoPort: env.mongoPort || 27017,
serverPort: env.serverPort || 3000,
enableServerSideGA: env.enableServerSideGA || false,
redisHost: env.redisHost || '127.0.0.1',
redisPort: env.redisPort || 6379,
redisPassword: env.redisPassword || ''
}
================================================
FILE: front/server/robots.js
================================================
module.exports = (config) =>
`User-agent: *
Allow: /
Sitemap: ${config.siteUrl}/sitemap.xml
User-agent: YisouSpider
Disallow: /
User-agent: EasouSpider
Disallow: /
User-agent: EtaoSpider
Disallow: /
User-agent: MJ12bot
Disallow: /`
================================================
FILE: front/server/rss.js
================================================
let getUpdatedDate = date => ` ${date} \r\n`
let tail = `
`
let api = 'http://localhost:3000/api/post'
let params = {
conditions: {
type: 'post',
isPublic: true
},
select: {
pathName: 1,
updatedAt: 1,
content: 1,
title: 1
},
sort: {
updatedAt: -1
},
limit: 10
}
let getRssBodyFromBody = (result, config) => {
let head = `
${config.title}
${config.siteUrl}
${config.description}
zh-cn \r\n`
let body = result.data.reduce((prev, curr) => {
let date = new Date(curr.updatedAt).toUTCString()
let content = curr.content.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
prev += ` - \r\n`
prev += `
${curr.title} \r\n`
prev += ` ${config.siteUrl}/post/${curr.pathName}\r\n`
prev += ` ${content} \r\n`
prev += ` ${date} \r\n`
prev += ` ${config.siteUrl}/post/${curr.pathName} \r\n`
prev += ` \r\n`
return prev
}, '')
return head + getUpdatedDate(new Date().toUTCString()) + body + tail
}
module.exports = {
api,
params,
getRssBodyFromBody
}
================================================
FILE: front/server/server-axios.js
================================================
const models = require('./model')
module.exports = process.__API__ = {
get: function(target, options = {}) {
const modelName = target.split('/').slice(-1)
const query = options.params || {}
const model = models[modelName]
return new Promise((resolve, reject) => {
queryModel(model, query).then(data => {
resolve({ data })
}) // mongoose uses mpromise who doesn't have a reject method here
})
}
}
function queryModel(model, query) {
let conditions = {}
let select = {}
if (query.conditions) {
conditions = query.conditions
}
let builder = model.find(conditions)
if (query.select) {
select = query.select
builder = builder.select(select)
}
['limit', 'skip', 'sort', 'count'].forEach(key => {
if (query[key]) {
let arg = query[key]
if (key === 'limit' || key === 'skip') {
arg = parseInt(arg)
}
if (key === 'sort' && typeof arg === 'string') {
arg = JSON.parse(arg)
}
if (key !== 'count') builder[key](arg)
else builder[key]()
}
})
return builder.exec()
}
================================================
FILE: front/server/sitemap.js
================================================
let head = `
\r\n`
let tail = ' '
let api = 'http://localhost:3000/api/post'
let params = {
conditions: {
type: 'post',
isPublic: true
},
select: {
pathName: 1,
updatedAt: 1
},
sort: {
updatedAt: -1
}
}
let getSitemapFromBody = (result, config) => {
let res = result.data
let body = res.reduce((prev, curr) => {
prev += ` \r\n`
prev += ` ${config.siteUrl}/post/${curr.pathName} \r\n`
prev += ` ${curr.updatedAt.slice(0, 10)} \r\n`
prev += ` 0.6 \r\n`
prev += ` \r\n`
return prev
}, '')
return head + body + tail
}
module.exports = {
api,
params,
getSitemapFromBody
}
================================================
FILE: front/server.js
================================================
const isProd = process.env.NODE_ENV === 'production'
const log = require('log4js').getLogger('ssr server')
const fs = require('fs')
const path = require('path')
const resolve = file => path.resolve(__dirname, file)
const express = require('express')
const schedule = require('node-schedule')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
const sendGoogleAnalytic = require('./middleware/serverGoogleAnalytic')
const favicon = require('./middleware/favicon')
const getRobotsFromConfig = require('./server/robots.js')
const { api: sitemapApi, params: sitemapParams, getSitemapFromBody } = require('./server/sitemap.js')
const { api: rssApi, params: rssParams, getRssBodyFromBody } = require('./server/rss.js')
const inline = isProd ? fs.readFileSync(resolve('./dist/styles.css'), 'utf-8') : ''
const config = require('./server/config')
const request = require('./server/server-axios')
const proxyRequest = require('request')
const uuid = require('uuid')
const titleReg = /<.*?>(.+?)<.*?>/
const expires = 3600 * 1000 * 24 * 365 * 2
const chunkObj = {}
if (isProd) {
const fileArr = fs.readdirSync(resolve('./dist'))
for (let i = 0, len = fileArr.length; i < len; i++) {
const fileName = fileArr[i]
const arr = fileName.split('.')
if (arr.length === 3 && arr[0] !== 'app') {
const input = fs.readFileSync(resolve(`./dist/${fileName}`), 'utf-8')
chunkObj[fileName] = input
}
}
}
let sitemap = ''
let rss = ''
let robots = ''
config.flushOption().then(() => {
robots = getRobotsFromConfig(config)
const flushSitemap = () => request.get(sitemapApi, sitemapParams).then(result => {
sitemap = getSitemapFromBody(result, config)
})
const flushRss = () => request.get(rssApi, rssParams).then(result => {
rss = getRssBodyFromBody(result, config)
})
flushSitemap()
flushRss()
schedule.scheduleJob('30 3 * * * ', function() {
flushRss()
flushSitemap()
})
let app = express()
app.enable('trust proxy')
let renderer
let html // generated by html-webpack-plugin
if (isProd) {
renderer = createRenderer(require('./dist/vue-ssr-bundle.json'))
html = flushHtml(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
} else {
// in development: setup the dev server with watch and hot-reload,
// and update renderer / index HTML on file change.
require('./build/setup-dev-server')(app, {
bundleUpdated: bundle => {
renderer = createRenderer(bundle)
},
indexUpdated: index => {
html = flushHtml(index)
}
})
}
function flushHtml(template) {
const style = isProd ? `` : ''
const i = template.indexOf('')
return {
head: template.slice(0, i).replace('', style),
tail: template.slice(i + ''.length),
origin: template
}
}
function createRenderer(bundle) {
return createBundleRenderer(bundle, {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
}),
runInNewContext: false
})
}
app.use(require('cookie-parser')())
app.get('/favicon.ico', favicon(config.favicon))
const prefix = '/proxyPrefix/'
app.use((req, res, next) => {
const url = decodeURIComponent(req.url)
log.debug(`${req.method} ${url}`)
if (!isProd) return next()
// proxy with node in production
if (url.startsWith(prefix)) {
const rewriteUrl = `http://localhost:${config.serverPort}/${url.replace(prefix, '')}`
proxyRequest.get(rewriteUrl).on('error', (err) => {
res.end(err)
log.error(err)
}).pipe(res)
} else {
return next()
}
})
const serve = (path, cache) => express.static(resolve(path), {
maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0,
fallthrough: false
})
app.use('/service-worker.js', serve('./dist/service-worker.js'))
app.use('/dist', serve('./dist'))
app.use('/static', serve('./static'))
app.get('/_.gif', (req, res, next) => sendGoogleAnalytic(req, res, next))
app.get('/robots.txt', (req, res, next) => res.end(robots))
app.get('/rss.xml', (req, res, next) => {
res.header('Content-Type', 'application/xml')
return res.end(rss)
})
app.get('/sitemap.xml', (req, res, next) => {
res.header('Content-Type', 'application/xml')
return res.end(sitemap)
})
app.get('*', (req, res, next) => {
if (!renderer) {
return res.end('waiting for compilation... refresh in a moment.')
}
const supportWebp = req.header('accept').includes('image/webp')
let s = Date.now()
const context = {
url: req.url,
supportWebp
}
const renderStream = renderer.renderToStream(context)
res.header('Content-Type', 'text/html; charset=utf-8')
renderStream.once('data', () => {
const { title, link, meta } = context.meta.inject()
const titleText = title.text()
const metaData = `${titleText}${meta.text()}${link.text()}`
const matched = titleText.match(titleReg)
let clientId = req.cookies.id
if (!clientId) {
clientId = uuid.v4()
res.cookie('id', clientId, {
expires: new Date(Date.now() + expires)
})
}
const chunk = html.head.replace(' 本文链接：{{siteURL}}/post/{{post.pathName}}
-- EOF --
发表于 {{post.createdAt}} ，
添加在分类「
{{post.category}}
」下 ，并被添加「
{{tag}}