├── src
    ├── store
    │   ├── actions.js
    │   ├── getters.js
    │   ├── mutation-types.js
    │   ├── state.js
    │   ├── mutations.js
    │   └── index.js
    ├── assets
    │   ├── bg.jpg
    │   ├── Wechat.jpg
    │   ├── avatar.jpg
    │   ├── cl_1.png
    │   ├── logo.png
    │   └── selfInfo.jpg
    ├── components
    │   ├── front
    │   │   ├── TagCloud.vue
    │   │   ├── MaskScreen.vue
    │   │   ├── BottomFooter.vue
    │   │   ├── RightContent.vue
    │   │   ├── RightSearch.vue
    │   │   ├── BreadCrumb.vue
    │   │   ├── ArticleList.vue
    │   │   ├── TopHeader.vue
    │   │   └── LeftEntry.vue
    │   ├── Iconfont.vue
    │   └── admin
    │   │   ├── Aside.vue
    │   │   └── TopHeader.vue
    ├── views
    │   ├── admin
    │   │   ├── SelfInfo.vue
    │   │   ├── User.vue
    │   │   ├── Admin.vue
    │   │   ├── ArticleList.vue
    │   │   └── Markdown.vue
    │   └── front
    │   │   ├── Catalog.vue
    │   │   ├── Article.vue
    │   │   ├── Container.vue
    │   │   ├── Home.vue
    │   │   ├── About.vue
    │   │   └── Login.vue
    ├── common
    │   ├── css
    │   │   ├── variable.scss
    │   │   └── reset.scss
    │   └── js
    │   │   ├── tool.js
    │   │   └── mixin.js
    ├── App.vue
    ├── serviceAPI.config.js
    ├── main.js
    └── router.js
├── articles
    ├── 5bf38b09d2fad55e96a30fbb_666.md
    ├── 5d2c24b96345ec09e0d99d34_66666.md
    ├── 5bf38b09d2fad55e96a30fbb_666.html
    ├── 5d2c24b96345ec09e0d99d34_66666.html
    ├── vue+node+mysql搭建个人博客（二）.md
    ├── vue+node+mysql搭建个人博客（一）.md
    ├── 5d2c3ebf6345ec09e0d99d35_555.md
    └── 5d3aa128f6d6eb0c9404ac1d_aaaaaa.md
├── babel.config.js
├── public
    ├── favicon.ico
    ├── favicon-1.ico
    └── index.html
├── version
    └── version-1.zip
├── server
    ├── jsonData
    │   ├── user.js
    │   └── article.js
    ├── api
    │   ├── root.js
    │   ├── tag.js
    │   ├── tencentCloud.js
    │   ├── tool.js
    │   ├── email.js
    │   ├── user.js
    │   └── article.js
    ├── router.js
    ├── database
    │   ├── schema
    │   │   ├── tag.js
    │   │   ├── user.js
    │   │   └── article.js
    │   └── init.js
    └── index.js
├── .babelrc
├── .gitignore
├── README.md
├── vue.config.js
└── package.json


/src/store/actions.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/articles/5bf38b09d2fad55e96a30fbb_666.md:
--------------------------------------------------------------------------------
1 | 666


--------------------------------------------------------------------------------
/articles/5d2c24b96345ec09e0d99d34_66666.md:
--------------------------------------------------------------------------------
1 | 666666


--------------------------------------------------------------------------------
/articles/5bf38b09d2fad55e96a30fbb_666.html:
--------------------------------------------------------------------------------
1 | <p>666</p>
2 | 


--------------------------------------------------------------------------------
/articles/5d2c24b96345ec09e0d99d34_66666.html:
--------------------------------------------------------------------------------
1 | <p>666666</p>
2 | 


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
1 | export const mobileFlag = state => state.mobileFlag


--------------------------------------------------------------------------------
/src/store/mutation-types.js:
--------------------------------------------------------------------------------
1 | export const SET_MOBILE_FLAG = 'SET_MOBILE_FLAG'


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/state.js:
--------------------------------------------------------------------------------
1 | const state = {
2 |   mobileFlag: false
3 | }
4 | 
5 | export default state


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/bg.jpg


--------------------------------------------------------------------------------
/public/favicon-1.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/public/favicon-1.ico


--------------------------------------------------------------------------------
/src/assets/Wechat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/Wechat.jpg


--------------------------------------------------------------------------------
/src/assets/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/avatar.jpg


--------------------------------------------------------------------------------
/src/assets/cl_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/cl_1.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/version/version-1.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/version/version-1.zip


--------------------------------------------------------------------------------
/src/assets/selfInfo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moon-Future/vue-node-blog/HEAD/src/assets/selfInfo.jpg


--------------------------------------------------------------------------------
/server/jsonData/user.js:
--------------------------------------------------------------------------------
1 | [
2 |   {
3 |     "name": "",
4 |     "email": "",
5 |     "password": "",
6 |     "avatar": "",
7 |     "website": ""
8 |   }
9 | ]


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     [
 4 |       "component",
 5 |       {
 6 |         "libraryName": "element-ui",
 7 |         "styleLibraryName": "theme-chalk"
 8 |       }
 9 |     ]
10 |   ]
11 | }


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
1 | import * as types from './mutation-types'
2 | 
3 | const mutations = {
4 |   [types.SET_MOBILE_FLAG](state, flag) {
5 |     state.mobileFlag = flag
6 |   }
7 | }
8 | 
9 | export default mutations


--------------------------------------------------------------------------------
/server/api/root.js:
--------------------------------------------------------------------------------
1 | const checkRoot = function(ctx) {
2 |   if (!ctx.session || !ctx.session.userInfo) {
3 |     return {code: 500, message: '请先登陆'}
4 |   } else {
5 |     return {code: 200}
6 |   }
7 | }
8 | 
9 | module.exports = checkRoot


--------------------------------------------------------------------------------
/server/jsonData/article.js:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     title: 'vue+node+mysql搭建个人博客（一）',
 4 |     summary: '',
 5 |     content: '',
 6 |     comment: [],
 7 |     user: 8023,
 8 |     tag: [1, 2, 3],
 9 |     createdTime: new Date().getTime(),
10 |   }
11 | ]


--------------------------------------------------------------------------------
/src/components/front/TagCloud.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tag-cloud">
 3 |     
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     
10 |   }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/views/admin/SelfInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p>Hello, Nice to meet you !!!</p>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'selfInfo'
10 | }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 |   
15 | </style>
16 | 
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 
23 | server/secret.js
24 | package-lock.json
25 | 


--------------------------------------------------------------------------------
/server/router.js:
--------------------------------------------------------------------------------
 1 | const Router = require('koa-router')
 2 | const article = require('./api/article')
 3 | const tag = require('./api/tag')
 4 | const user = require('./api/user')
 5 | const router = new Router({
 6 |   prefix: '/api'
 7 | })
 8 | 
 9 | router.use('/article', article.routes())
10 | router.use('/tag', tag.routes())
11 | router.use('/user', user.routes())
12 | 
13 | module.exports = router


--------------------------------------------------------------------------------
/src/common/css/variable.scss:
--------------------------------------------------------------------------------
 1 | // 颜色定义规范
 2 | $color-white: #fff;
 3 | $color-black: #000;
 4 | $color-shallowgray: #fafbfc;
 5 | $color-gray: #999;
 6 | $color-deepgray: #4d4545;
 7 | $color-green: #00CC33;
 8 | $color-blue: #409EFF;
 9 | $color-deepblue: #0066FF;
10 | $color-red: #FF0033;
11 | $color-active: #f298ae;
12 | $color-origin: #F7BA2A;
13 | $color-shallowgreend: #CCFFCC;
14 | $color-gray-1: #f5f5f5;


--------------------------------------------------------------------------------
/server/database/schema/tag.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const Schema = mongoose.Schema
 3 | 
 4 | const tagSchema = new Schema({
 5 |   name: { type: String, default: '', unique: true },
 6 |   createTime: { type: Number, default: null },
 7 |   updateTime: { type: Number, default: null },
 8 | }, {
 9 |   collections: 'tag'
10 | })
11 | 
12 | module.exports = mongoose.model('Tag', tagSchema, 'tag')


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-node-blog
 2 | 
 3 | 2018.10.22 ToDoList
 4 | 1. 重新设计页面布局
 5 | 2. vue-cli 2 升级为 @vue/cli 3
 6 | 3. express 改为 Koa2
 7 | 4. Mysql 改为 Mongodb
 8 | 5. 之前项目版本备份在 version 文件夹下
 9 | 
10 | 标签的 Props 应该有统一的顺序，依次为指令、属性和事件
11 | ```
12 | <my-component
13 |   v-if="if"
14 |   v-show="show"
15 |   v-model="value"
16 |   ref="ref"
17 |   :key="key"
18 |   :text="text"
19 |   @input="onInput"
20 |   @change="onChange"
21 | />
22 | ```
23 | 


--------------------------------------------------------------------------------
/server/api/tag.js:
--------------------------------------------------------------------------------
 1 | const Router = require('koa-router')
 2 | const router = new Router()
 3 | const Tag = require('../database/schema/tag')
 4 | 
 5 | router.post('/getTag', async (ctx) => {
 6 |   try {
 7 |     const result = await Tag.find({})
 8 |     ctx.body = {code: 200, message: result}
 9 |   } catch(err) {
10 |     throw new Error(err)
11 |   }
12 | })
13 | 
14 | router.post('/getTagInfo', async (ctx) => {
15 | 
16 | })
17 | 
18 | module.exports = router


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 |   @import '@/common/css/reset.scss';
 9 |   #app {
10 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
11 |     -webkit-font-smoothing: antialiased;
12 |     -moz-osx-font-smoothing: grayscale;
13 |     text-align: center;
14 |     color: #2c3e50;
15 |     height: 100%;
16 |     background: #f5f5f5;
17 |   }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/src/components/front/MaskScreen.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="mask-screen" ref="maskScreen">
 3 | 
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     
10 |   }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 |   @import '@/common/css/variable.scss';
15 |   .mask-screen {
16 |     position: fixed;
17 |     top: 0;
18 |     bottom: 0;
19 |     left: 0;
20 |     right: 0;
21 |     background: $color-deepgray;
22 |     opacity: 0.5;
23 |   }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue'
 2 | // import Vuex from 'vuex'
 3 | import * as actions from './actions'
 4 | import * as getters from './getters'
 5 | import state from './state'
 6 | import mutations from './mutations'
 7 | import createLogger from 'vuex/dist/logger'
 8 | 
 9 | Vue.use(Vuex)
10 | 
11 | const debug = process.env.NODE_ENV !== 'production'
12 | 
13 | export default new Vuex.Store({
14 |   actions,
15 |   getters,
16 |   state,
17 |   mutations,
18 |   strict: debug,
19 |   plugins: debug ? [createLogger()] : []
20 | })


--------------------------------------------------------------------------------
/src/serviceAPI.config.js:
--------------------------------------------------------------------------------
 1 | export const apiUrl = {
 2 |   register: '/api/user/register',
 3 |   login: '/api/user/login',
 4 |   logout: '/api/user/logout',
 5 |   getSession: '/api/user/getSession',
 6 |   upload: '/api/user/upload',
 7 | 
 8 |   insertArticle: '/api/article/insertArticle',
 9 |   deleteArticle: '/api/article/deleteArticle',
10 |   getArticle: '/api/article/getArticle',
11 |   getArticleInfo: '/api/article/getArticleInfo',
12 |   getCatalog: '/api/article/getCatalog',
13 |   getHotArticle: '/api/article/getArticle',
14 | 
15 |   getTag: '/api/tag/getTag'
16 | }


--------------------------------------------------------------------------------
/src/views/admin/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |         <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
 6 |         <el-breadcrumb-item>User</el-breadcrumb-item>
 7 |       </el-breadcrumb>
 8 |     </div>
 9 |     <el-upload
10 |       action="https://jsonplaceholder.typicode.com/posts/">
11 |       
12 |     </el-upload>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     name: 'user'
19 |   }
20 | </script>
21 | 
22 | <style>
23 | 
24 | </style>
25 | 


--------------------------------------------------------------------------------
/server/database/schema/user.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const Schema = mongoose.Schema
 3 | 
 4 | const userSchema = new Schema({
 5 |   name: { type: String, default: '' },
 6 |   email: { type: String, default: '' },
 7 |   password: { type: String, default: '' },
 8 |   avatar: { type: String, default: '' },
 9 |   website: { type: String, default: '' },
10 |   remind: { type: Number, default: 0 }, // 邮件提醒
11 |   root: { type: Number, default: 0 },
12 |   createTime: { type: Number, default: null },
13 |   updateTime: { type: Number, default: null }
14 | }, {
15 |   collections: 'user'
16 | })
17 | 
18 | module.exports = mongoose.model('User', userSchema, 'user')


--------------------------------------------------------------------------------
/server/api/tencentCloud.js:
--------------------------------------------------------------------------------
 1 | // 引入模块
 2 | const COS = require('cos-nodejs-sdk-v5')
 3 | const { tencentCloud } = require('../secret.js')
 4 | 
 5 | // 创建实例
 6 | const cos = new COS({
 7 |     SecretId: tencentCloud.SecretId,
 8 |     SecretKey: tencentCloud.SecretKey
 9 | });
10 | 
11 | 
12 | const cosUpload = function(fileName, filePath) {
13 |   // 分片上传
14 |   return new Promise((resolve, reject) => {
15 |     cos.sliceUploadFile({
16 |       Bucket: tencentCloud.Bucket,
17 |       Region: 'ap-guangzhou',
18 |       Key: fileName,
19 |       FilePath: filePath
20 |     }, function (err, data) {
21 |         resolve(data);
22 |     });
23 |   })
24 | }
25 | 
26 | module.exports = cosUpload
27 | 


--------------------------------------------------------------------------------
/src/common/js/tool.js:
--------------------------------------------------------------------------------
 1 | export function dateFormat(date, format) {
 2 |   date = typeof date === 'number' ? new Date(date) : date
 3 |   let o = {
 4 |     'M+': date.getMonth() + 1,
 5 |     'd+': date.getDate(),
 6 |     'h+': date.getHours(),
 7 |     'm+': date.getMinutes(),
 8 |     's+': date.getSeconds()
 9 |   }
10 |   if(/(y+)/i.test(format)){
11 |     format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
12 |   }
13 |   for(let k in o){
14 |     if(new RegExp('(' + k + ')').test(format)){
15 |       format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
16 |     }
17 |   }
18 |   return format
19 | }


--------------------------------------------------------------------------------
/src/common/js/mixin.js:
--------------------------------------------------------------------------------
 1 | export const computeStyleMixin = {
 2 |   mounted() {
 3 |     this.routeWacth()
 4 |   },
 5 |   methods: {
 6 |     routeWacth() {
 7 |       this.$nexttick(() => {
 8 |         if (this.$route.path === '/') {
 9 |           this.$refs.bgVideo.style.position = 'absolute'
10 |           this.$refs.bgVideo.style.top = this.height + 'px'
11 |           this.homeFlag = true
12 |         } else {
13 |           this.$refs.bgVideo.style.position = 'fixed'
14 |           this.$refs.bgVideo.style.top = '50px'
15 |           this.homeFlag = false
16 |         }
17 |       })
18 |     }
19 |   },
20 |   watch: {
21 |     $route() {
22 |       this.routeWacth()
23 |     }
24 |   },
25 | }


--------------------------------------------------------------------------------
/server/database/init.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const db = 'mongodb://localhost:27017/myBlog'
 3 | const maxConnetTimes = 3
 4 | 
 5 | const connect = () => {
 6 |   return new Promise((resolve, reject) => {
 7 |     //连接数据库
 8 |     mongoose.connect(db)
 9 | 
10 |     //增加数据库连接的事件监听
11 |     mongoose.connection.on('disconnected',()=>{
12 |         //进行重连
13 |         mongoose.connect(db)
14 |     })
15 | 
16 |     //数据库出现错误的时候
17 |     mongoose.connection.on('error',err=>{
18 |         console.log(err)
19 |         mongoose.connect(db)
20 |     })
21 | 
22 |     //链接打开的时候
23 |     mongoose.connection.once('open',()=>{
24 |         console.log('MongoDB Connected successfully!')
25 |         resolve()
26 |     })
27 |   })
28 | }
29 | 
30 | module.exports = connect


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CompressionPlugin = require('compression-webpack-plugin')
 2 | 
 3 | module.exports = {
 4 |   devServer: {
 5 |     proxy: {
 6 |       '/api': {
 7 |         target: 'http://localhost:3002/api',
 8 |         changeOrigin: true,
 9 |         pathRewrite: {
10 |           '^/api': ''
11 |         }
12 |       }
13 |     }
14 |   },
15 |   productionSourceMap: false,
16 |   configureWebpack: {
17 |     externals: {
18 |       'vue': 'Vue',
19 |       'vue-router': 'VueRouter',
20 |       'axios': 'axios',
21 |       'vuex': 'Vuex',
22 |       'element-ui': 'ELEMENT',
23 |      },
24 |   },
25 |   configureWebpack: config => {
26 |     if (process.env.NODE_ENV === 'production') {
27 |       return {
28 |         plugins: [new CompressionPlugin({
29 |           test: /\.js$|\.html&|\.css/,
30 |           threshold: 10204,
31 |           deleteOriginalAssets: false
32 |         })]
33 |       }
34 |     }
35 |   }
36 | }


--------------------------------------------------------------------------------
/src/components/front/BottomFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="footer-containe">
 3 |     <div class="rights">
 4 |       <p>Copyright © 2017 - {{ new Date().getFullYear() }} ChenLiang's Blog</p>
 5 |     </div>
 6 |     <!-- 2017-12-01 上线至今 -->
 7 |     <div class="to-admin">
 8 |       <router-link tag="a" to="/login">后台登陆</router-link>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <style lang="scss" scoped>
14 |   @import '@/common/css/variable.scss';
15 |   .footer-containe {
16 |     height: 32px;
17 |     line-height: 32px;
18 |     font-size: 12px;
19 |     color: $color-black;
20 |     display: flex;
21 |     justify-content: center;
22 |     background: #f5f5f5;
23 |     position: relative;
24 |     z-index: 99;
25 |     .rights {
26 |       margin-right: 10px;
27 |     }
28 |     a {
29 |       color: $color-black;
30 |       &:hover {
31 |         color: $color-blue;
32 |       }
33 |     }
34 |   }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/server/database/schema/article.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const Schema = mongoose.Schema
 3 | 
 4 | const articleSchema = new Schema({
 5 |   title: { type: String, default: '' },
 6 |   summary: { type: String, default: '' },
 7 |   content: { type: String, default: '' },
 8 |   html: { type: String, default: '' },
 9 |   comment: { type: Array, default: [] },
10 |   user: {type: Schema.Types.ObjectId, ref: 'User'},
11 |   tag: [{type: Schema.Types.ObjectId, ref: 'Tag'}],
12 |   createTime: { type: Number, default: null },
13 |   updateTime: { type: Number, default: null },
14 |   view: { type: Number, default: 0 },
15 |   like: { type: Number, default: 0 },
16 |   reprint: { type: String, default: '' }, // 类型 {'': 原创, 'url': 转载链接}
17 |   state: { type: Number, default: 1 }, // 状态 {0: 删除, 1: 显示-发布, 2: 不显示-存稿}
18 | }, {
19 |   collections: 'article'
20 | })
21 | 
22 | module.exports = mongoose.model('Article', articleSchema, 'article')


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const Koa = require('koa')
 2 | const app = new Koa()
 3 | const session = require('koa-session')
 4 | const connect = require('./database/init')
 5 | const bodyParser = require('koa-bodyparser')
 6 | const cors = require('koa2-cors')
 7 | const static = require('koa-static')
 8 | const path = require('path')
 9 | const router = require('./router')
10 | 
11 | ;(async () => {
12 |   await connect()
13 | })()
14 | 
15 | const CONFIG = {
16 |   key: 'koa:sess',
17 |   maxAge: 86400000,
18 |   autoCommit: true,
19 |   overwrite: true,
20 |   httpOnly: true,
21 |   signed: true,
22 |   rolling: false,
23 |   renew: false
24 | }
25 | app.keys = ['login secret']
26 | app.use(session(CONFIG, app));
27 | 
28 | app.use(static(path.join(__dirname, '../dist')));
29 | app.use(bodyParser())
30 | app.use(cors())
31 | app.use(router.routes()).use(router.allowedMethods())
32 | app.listen(3002, () => {
33 |   console.log('listen at port 3002...')
34 | })


--------------------------------------------------------------------------------
/src/components/Iconfont.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="icon-container" :class="flag ? has-margin : ''" :style="{fontSize: fontSize + 'px'}">
 3 |     <svg class="iconfont" aria-hidden="true">
 4 |       <use :xlink:href="`#${icon}`"></use>
 5 |     </svg>
 6 |     <div class="icon-content">
 7 |       <slot name="content"></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Iconfont',
15 |     props: {
16 |       icon: {
17 |         type: String,
18 |         default: 'icon-yonghu'
19 |       },
20 |       fontSize: {
21 |         type: String,
22 |         default: '16'
23 |       },
24 |       flag: {
25 |         type: Boolean,
26 |         default: false
27 |       }
28 |     }
29 |   }
30 | </script>
31 | 
32 | <style lang="scss" scoped>
33 |   .icon-container {
34 |     display: inline;
35 |     cursor: pointer;
36 |     .has-margin {
37 |       margin: 0 10px;
38 |     }
39 |     .icon-content {
40 |       display: inline;
41 |       margin-left: 3px;
42 |     }
43 |   }
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/server/api/tool.js:
--------------------------------------------------------------------------------
 1 | const request = require('request')
 2 | 
 3 | function getRandom(start, end, size) {
 4 |   let allRandms = []
 5 |   size = size ? (size > end - start ? end - start : size) : 1
 6 |   for (let i = start; i <= end; i++) {
 7 |     allRandms.push(i)
 8 |   }
 9 |   allRandms.sort(() => {
10 |     return 0.5 - Math.random()
11 |   })
12 |   return size == 1 ? allRandms[0] : allRandms.slice(0, size)
13 | }
14 | 
15 | function dateFormat(date, format) {
16 |   date = typeof date === 'number' ? new Date(date) : date
17 |   let o = {
18 |     'M+': date.getMonth() + 1,
19 |     'd+': date.getDate(),
20 |     'h+': date.getHours(),
21 |     'm+': date.getMinutes(),
22 |     's+': date.getSeconds()
23 |   }
24 |   if(/(y+)/i.test(format)){
25 |     format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
26 |   }
27 |   for(let k in o){
28 |     if(new RegExp('(' + k + ')').test(format)){
29 |       format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
30 |     }
31 |   }
32 |   return format
33 | }
34 | 
35 | module.exports = {
36 |   getRandom,
37 |   dateFormat
38 | }


--------------------------------------------------------------------------------
/server/api/email.js:
--------------------------------------------------------------------------------
 1 | const nodemailer = require('nodemailer');
 2 | const { emailInfo } = require('../secret.js')
 3 | /*
 4 |   emailInfo: {
 5 |     account = {
 6 |       user: 'xxxxxx@qq.com',
 7 |       // 这里密码不是qq密码，是你设置的smtp授权码
 8 |       pass: 'xxxxxx',
 9 |     }
10 |   }
11 | */
12 | const account = emailInfo.account
13 | 
14 | const transporter = nodemailer.createTransport({
15 |   // host: 'smtp.qq.email',
16 |   service: 'qq',
17 |   port: 465,
18 |   secure: true, // true for 465, false for other ports 587
19 |   auth: {
20 |       user: account.user, // generated ethereal user
21 |       pass: account.pass // generated ethereal password
22 |   }
23 | });
24 | 
25 | var mailOptions = {
26 |   from: 'LeoChan <236338364@qq.com>', // sender address
27 |   to: '236338364@qq.com', // list of receivers
28 |   subject: 'vue-myBlog', // Subject line
29 |   // text: '有新注册用户', // plain text body
30 |   // html: '<b>你好哟</b>' // html body
31 | };
32 | 
33 | const sendMsg = {
34 |   newUser: '有新的注册用户',
35 |   email: 'Email',
36 |   name: 'Name',
37 |   website: 'Website',
38 |   time: '时间',
39 |   newArticle: '有新的文章',
40 |   title: 'Title',
41 |   content: 'Content'
42 | }
43 | 
44 | module.exports = {transporter, mailOptions, sendMsg};


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-node-blog",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.18.0",
11 |     "cos-nodejs-sdk-v5": "^2.4.14",
12 |     "element-ui": "^2.10.1",
13 |     "formidable": "^1.2.1",
14 |     "github-markdown-css": "^2.10.0",
15 |     "highlight.js": "^9.13.1",
16 |     "jinrishici": "^1.0.6",
17 |     "koa": "^2.6.1",
18 |     "koa-bodyparser": "^4.2.1",
19 |     "koa-router": "^7.4.0",
20 |     "koa-session": "^5.10.0",
21 |     "koa-static": "^5.0.0",
22 |     "koa2-cors": "^2.0.6",
23 |     "marked": "^0.5.1",
24 |     "mongoose": "^5.3.5",
25 |     "nodemailer": "^4.7.0",
26 |     "vue": "^2.5.17",
27 |     "vue-image-crop-upload": "^2.5.0",
28 |     "vue-lazyload": "^1.2.6",
29 |     "vue-router": "^3.0.1",
30 |     "vue-simplemde": "^0.4.9",
31 |     "vuex": "^3.0.1"
32 |   },
33 |   "devDependencies": {
34 |     "@vue/cli-plugin-babel": "^3.0.5",
35 |     "@vue/cli-service": "^3.0.5",
36 |     "babel-plugin-component": "^1.1.1",
37 |     "compression-webpack-plugin": "^3.0.0",
38 |     "node-sass": "^4.9.4",
39 |     "sass-loader": "^7.1.0",
40 |     "vue-template-compiler": "^2.5.17"
41 |   },
42 |   "postcss": {
43 |     "plugins": {
44 |       "autoprefixer": {}
45 |     }
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not ie <= 8"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/src/common/css/reset.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3 |  * http://cssreset.com
 4 |  */
 5 |  html, body, div, span, applet, object, iframe,
 6 |  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 |  a, abbr, acronym, address, big, cite, code,
 8 |  del, dfn, em, img, ins, kbd, q, s, samp,
 9 |  small, strike, strong, sub, sup, tt, var,
10 |  b, u, i, center,
11 |  dl, dt, dd, ol, ul, li,
12 |  fieldset, form, label, legend,
13 |  table, caption, tbody, tfoot, thead, tr, th, td,
14 |  article, aside, canvas, details, embed,
15 |  figure, figcaption, footer, header,
16 |  menu, nav, output, ruby, section, summary,
17 |  time, mark, audio, video, input {
18 |   margin: 0;
19 |   padding: 0;
20 |   border: 0;
21 |   font-size: 100%;
22 |   font-weight: normal;
23 |   vertical-align: baseline;
24 |  }
25 |  
26 |  /* HTML5 display-role reset for older browsers */
27 |  article, aside, details, figcaption, figure,
28 |  footer, header, menu, nav, section {
29 |   display: block;
30 |  }
31 |  
32 |  body {
33 |   line-height: 1;
34 |  }
35 |  
36 |  blockquote, q {
37 |   quotes: none;
38 |  }
39 |  
40 |  blockquote:before, blockquote:after,
41 |  q:before, q:after {
42 |   content: none;
43 |  }
44 |  
45 |  table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 |  }
49 |  
50 |  /* custom */
51 |  
52 |  a {
53 |   //color: #7e8c8d;
54 |   -webkit-backface-visibility: hidden;
55 |   text-decoration: none;
56 |  }
57 |  
58 |  li {
59 |   list-style: none;
60 |  }
61 |  
62 |  html, body {
63 |   -webkit-text-size-adjust: none;
64 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
65 |   height: 100%;
66 |  }
67 | 
68 |  .markdown-body {
69 |    text-align: left;
70 |  }
71 | 
72 |  .iconfont {
73 |   width: 1em;
74 |   height: 1em;
75 |   vertical-align: -0.15em;
76 |   fill: currentColor;
77 |   overflow: hidden;
78 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="stylesheet" href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css">
 9 |     <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
10 |     <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css">
11 |     <link rel="stylesheet" href="https://cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.min.css">
12 |     <title>沉酿</title>
13 |     <script>
14 |       var _hmt = _hmt || [];
15 |       (function() {
16 |         var hm = document.createElement("script");
17 |         hm.src = "https://hm.baidu.com/hm.js?a225dab749964785fe3b41989a0c9239";
18 |         var s = document.getElementsByTagName("script")[0]; 
19 |         s.parentNode.insertBefore(hm, s);
20 |       })();
21 |     </script>
22 |   </head>
23 |   <body>
24 |     <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
25 |     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
26 |     <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
27 |     <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
28 |     <script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
29 |     <noscript>
30 |       <strong>We're sorry but myBlog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
31 |     </noscript>
32 |     <div id="app"></div>
33 |     <!-- built files will be auto injected -->
34 |     <script src="//at.alicdn.com/t/font_362043_jalab5ex44o.js"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/src/components/front/RightContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="right-content" v-if="!mobileFlag">
 3 |     <div class="right-item contact">
 4 |       <div class="contact-1">
 5 |         <h3>联系我啊  么么哒!</h3>
 6 |       </div>
 7 |       <div class="contact-2">
 8 |         <a href="https://github.com/Moon-Future/vue-node-blog" target="_blank">
 9 |           <icon-font class="social-icon" icon="icon-github" fontSize="42"></icon-font>
10 |         </a>
11 |         <el-popover
12 |           placement="bottom"
13 |           trigger="hover">
14 |           <img class="wechat" src="../../assets/Wechat.jpg" alt="">
15 |           <template slot="reference">
16 |             <icon-font class="social-icon" icon="icon-weixin-active" fontSize="42"></icon-font>
17 |           </template>
18 |         </el-popover>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   import IconFont from '@/components/Iconfont'
26 |   import { mapGetters } from 'vuex'
27 |   export default {
28 |     computed: {
29 |       ...mapGetters([
30 |         'mobileFlag'
31 |       ])
32 |     },
33 |     components: {
34 |       IconFont
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 |   @import '@/common/css/variable.scss';
41 |   .right-content {
42 |     width: 20%;
43 |   }
44 |   .right-item {
45 |     background: $color-white;
46 |     padding: 20px;
47 |   }
48 |   .contact-1 {
49 |     border-bottom: 1px solid #eaeaea;
50 |     position: relative;
51 |     text-align: center;
52 |     margin-top: 15px;
53 |     h3 {
54 |       background: #fff;
55 |       font-size: 15px;
56 |       position: absolute;
57 |       width: 136px;
58 |       margin-left: -68px;
59 |       left: 50%;
60 |       bottom: -8px;
61 |       color: #666;
62 |       letter-spacing: 1px;
63 |       padding: 0 10px;
64 |     }
65 |   }
66 |   .contact-2 {
67 |     margin-top: 20px;
68 |     display: flex;
69 |     justify-content: space-around;
70 |   }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store/index'
 5 | // import axios from 'axios'
 6 | // import 'element-ui/lib/theme-chalk/index.css'
 7 | // import 'github-markdown-css/github-markdown.css'
 8 | import 'highlight.js/styles/vs.css'
 9 | import VueLazyload from 'vue-lazyload'
10 | // import {
11 | //   Dropdown,
12 | //   DropdownMenu,
13 | //   DropdownItem,
14 | //   Menu,
15 | //   Submenu,
16 | //   MenuItem,
17 | //   MenuItemGroup,
18 | //   Input,
19 | //   Button,
20 | //   Table,
21 | //   TableColumn,
22 | //   Popover,
23 | //   Breadcrumb,
24 | //   BreadcrumbItem,
25 | //   Form,
26 | //   FormItem,
27 | //   Tabs,
28 | //   TabPane,
29 | //   Row,
30 | //   Col,
31 | //   Badge,
32 | //   Card,
33 | //   Timeline,
34 | //   TimelineItem,
35 | //   Loading,
36 | //   MessageBox,
37 | //   Message
38 | // } from 'element-ui';
39 | 
40 | Vue.config.productionTip = false
41 | Vue.prototype.$http = axios
42 | Vue.use(VueLazyload)
43 | // Vue.use(Dropdown);
44 | // Vue.use(DropdownMenu);
45 | // Vue.use(DropdownItem);
46 | // Vue.use(Menu);
47 | // Vue.use(Submenu);
48 | // Vue.use(MenuItem);
49 | // Vue.use(MenuItemGroup);
50 | // Vue.use(Input);
51 | // Vue.use(Button);
52 | // Vue.use(Table);
53 | // Vue.use(TableColumn);
54 | // Vue.use(Popover);
55 | // Vue.use(Breadcrumb);
56 | // Vue.use(BreadcrumbItem);
57 | // Vue.use(Form);
58 | // Vue.use(FormItem);
59 | // Vue.use(Tabs);
60 | // Vue.use(TabPane);
61 | // Vue.use(Row);
62 | // Vue.use(Col);
63 | // Vue.use(Badge);
64 | // Vue.use(Card);
65 | // Vue.use(Timeline);
66 | // Vue.use(TimelineItem);
67 | 
68 | // Vue.use(Loading.directive);
69 | 
70 | // Vue.prototype.$loading = Loading.service;
71 | // Vue.prototype.$msgbox = MessageBox;
72 | // // Vue.prototype.$alert = MessageBox.alert;
73 | // Vue.prototype.$confirm = MessageBox.confirm;
74 | // // Vue.prototype.$prompt = MessageBox.prompt;
75 | // // Vue.prototype.$notify = Notification;
76 | // Vue.prototype.$message = Message;
77 | 
78 | new Vue({
79 |   router,
80 |   store,
81 |   render: h => h(App)
82 | }).$mount('#app')
83 | 


--------------------------------------------------------------------------------
/src/views/admin/Admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <topHeader :userInfo="userInfo"></topHeader>
 4 |     <Aside></Aside>
 5 |     <div class="content">
 6 |       <transition name="move" mode="out-in"><router-view :userInfo="userInfo"></router-view></transition>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   import TopHeader from '@/components/admin/TopHeader.vue'
13 |   import Aside from '@/components/admin/Aside.vue'
14 |   import { apiUrl } from '@/serviceAPI.config.js'
15 |   export default {
16 |     name: 'Admin',
17 |     data() {
18 |       return {
19 |         userInfo: {}
20 |       }
21 |     },
22 |     created() {
23 |       this.$http.post(apiUrl.getSession).then(res => {
24 |         if (res.data.code === 200) {
25 |           this.userInfo = res.data.message
26 |         } else {
27 |           this.$message.error(res.data.message)
28 |           this.$router.push({path: '/login'})
29 |         }
30 |       })
31 |     },
32 |     components: {
33 |       Aside,
34 |       TopHeader
35 |     },
36 |   }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 |   .content {
41 |     background: none repeat scroll 0 0 #fff;
42 |     position: absolute;
43 |     left: 250px;
44 |     right: 0;
45 |     top: 70px;
46 |     bottom:0;
47 |     width: auto;
48 |     padding: 10px;
49 |     box-sizing: border-box;
50 |     overflow-y: scroll;
51 |   }
52 |   .crumbs{
53 |     margin-bottom: 20px;
54 |   }
55 |   @media only screen and (max-width: 768px) {
56 |     .content {
57 |       left: 0;
58 |       padding: 20px;
59 |     }
60 |   }
61 | 
62 |   /* 上传头像组件自适应 */
63 |   @media only screen and (max-width: 568px) {
64 |     #avatar-upload .vicp-wrap {
65 |       width: 300px;
66 |       height: 500px;
67 |     }
68 |     #avatar-upload .vicp-wrap .vicp-close {
69 |       background: #a9a7a7;
70 |       right: 0px;
71 |       top: 0px;
72 |     }
73 |   }
74 | 
75 |   @media only screen and (min-width: 568px) and (max-width: 667px){
76 |     #avatar-upload .vicp-wrap {
77 |       width: 550px;
78 |       height: 280px;
79 |     }
80 |     #avatar-upload .vicp-wrap .vicp-close {
81 |       background: #a9a7a7;
82 |       right: 0px;
83 |       top: 0px;
84 |     }
85 |   }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
  1 | // import Vue from 'vue'
  2 | // import Router from 'vue-router'
  3 | import Home from './views/front/Home.vue'
  4 | import Admin from './views/admin/Admin.vue'
  5 | import { apiUrl } from '@/serviceAPI.config.js'
  6 | 
  7 | Vue.use(VueRouter)
  8 | 
  9 | const router = new VueRouter({
 10 |   // mode: 'history',
 11 |   base: process.env.BASE_URL,
 12 |   routes: [
 13 |     {
 14 |       path: '/',
 15 |       name: 'Home',
 16 |       component: Home,
 17 |       meta: {
 18 |         keepAlive: false
 19 |       }
 20 |     },
 21 |     {
 22 |       path: '/article/:id',
 23 |       name: 'Article',
 24 |       component: () => import('@/views/front/Article.vue'),
 25 |       meta: {
 26 |         keepAlive: false
 27 |       }
 28 |     },
 29 |     {
 30 |       path: '/catalog',
 31 |       name: 'Catalog',
 32 |       component: () => import('@/views/front/Catalog.vue'),
 33 |       meta: {
 34 |         keepAlive: false
 35 |       }
 36 |     },
 37 |     {
 38 |       path: '/about',
 39 |       name: 'About',
 40 |       component: () => import(/* webpackChunkName: "about" */ './views/front/About.vue')
 41 |     },
 42 |     {
 43 |       path: '/login',
 44 |       name: 'Login',
 45 |       component: () => import('@/views/front/Login.vue')
 46 |     },
 47 |     {
 48 |       path: '/admin',
 49 |       name: 'Admin',
 50 |       component: Admin,
 51 |       meta: {
 52 |         requireAuth: true
 53 |       },
 54 |       children: [
 55 |         {
 56 |           path: 'selfinfo',
 57 |           name: 'SelfInfo',
 58 |           meta: {
 59 |             requireAuth: true
 60 |           },
 61 |           component: () => import('@/views/admin/SelfInfo.vue')
 62 |         },
 63 |         {
 64 |           path: 'articles',
 65 |           name: 'Articles',
 66 |           meta: {
 67 |             requireAuth: true
 68 |           },
 69 |           component: () => import('@/views/admin/ArticleList.vue')
 70 |         },
 71 |         {
 72 |           path: 'markdown',
 73 |           name: 'Markdown',
 74 |           meta: {
 75 |             requireAuth: true
 76 |           },
 77 |           component: () => import('@/views/admin/Markdown.vue')
 78 |         }
 79 |       ]
 80 |     },
 81 |   ]
 82 | })
 83 | 
 84 | router.beforeEach((to, from, next) => {
 85 |   if (to.meta.requireAuth) {
 86 |     axios.post(apiUrl.getSession).then(res => {
 87 |       if (res.data.code === 200) {
 88 |         next()
 89 |       } else {
 90 |         next({path: '/'})
 91 |       }
 92 |     })
 93 |   } else if (to.name === 'Login') {
 94 |     axios.post(apiUrl.getSession).then(res => {
 95 |       if (res.data.code === 200) {
 96 |         next({path: '/admin/selfinfo'})
 97 |       } else {
 98 |         next()
 99 |       }
100 |     })
101 |   } else {
102 |     next()
103 |   }
104 | })
105 | 
106 | export default router
107 | 


--------------------------------------------------------------------------------
/src/components/front/RightSearch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="right-search" v-if="!mobileFlag">
  3 |     <div class="self-info">
  4 |       <div class="avatar-wrapper">
  5 |         <img class="avatar" src="../../assets/selfInfo.jpg" alt="">
  6 |         <div class="message">
  7 |           <p>陈亮</p>
  8 |           <p>前段攻城狮</p>
  9 |         </div>
 10 |       </div>
 11 |       <div class="descr-wrapper">
 12 |         <p>码上有你，码上有我</p>
 13 |       </div>
 14 |       <div class="social-wrapper">
 15 |         <a href="https://github.com/Moon-Future/vue-node-blog" target="_blank">
 16 |           <icon-font class="social-icon" icon="icon-github" fontSize="42"></icon-font>
 17 |         </a>
 18 |         <el-popover
 19 |           placement="bottom"
 20 |           trigger="hover">
 21 |           <img class="wechat" src="../../assets/Wechat.jpg" alt="">
 22 |           <template slot="reference">
 23 |             <icon-font class="social-icon" icon="icon-weixin" fontSize="42"></icon-font>
 24 |           </template>
 25 |         </el-popover>
 26 |       </div>
 27 |     </div>
 28 |     <div class="search">
 29 |       <el-input placeholder="搜索文章"></el-input>
 30 |     </div>
 31 |     <div class="hot-warppre">
 32 |       
 33 |     </div>
 34 |     <div class="article-tags">
 35 | 
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 |   import IconFont from '@/components/Iconfont'
 42 |   import { apiUrl } from '@/serviceAPI.config.js'
 43 |   import { mapGetters } from 'vuex'
 44 |   export default {
 45 |     data() {
 46 |       return {
 47 |         hotArticle: []
 48 |       }
 49 |     },
 50 |     computed: {
 51 |       ...mapGetters([
 52 |         'mobileFlag'
 53 |       ])
 54 |     },
 55 |     methods: {
 56 |       getHotArticle() {
 57 |         this.$http.post(apiUrl.getHotArticle, {
 58 |           data: {hot: true}
 59 |         }).then(() => {
 60 | 
 61 |         })
 62 |       }
 63 |     },
 64 |     components: {
 65 |       IconFont
 66 |     }
 67 |   }
 68 | </script>
 69 | 
 70 | <style lang="scss" scoped>
 71 |   @import '@/common/css/variable.scss';
 72 |   .right-search {
 73 |     width: 30%;
 74 |     margin-left: 20px;
 75 |     opacity: 0.8;
 76 |   }
 77 |   .self-info {
 78 |     text-align: left;
 79 |     background: $color-white;
 80 |     margin-bottom: 10px;
 81 |     padding: 10px;
 82 |     border-radius: 3px;
 83 |     font-size: 14px;
 84 |     p {
 85 |       padding: 5px 0;
 86 |     }
 87 |     .avatar-wrapper {
 88 |       display: flex;
 89 |       .avatar {
 90 |         width: 100px;
 91 |         height: 100px;
 92 |         margin-right: 10px;
 93 |       }
 94 |     }
 95 |     .social-wrapper {
 96 |       margin-top: 10px;
 97 |       .social-icon {
 98 |         cursor: pointer;
 99 |         margin-right: 10px;
100 |         &:hover {
101 |           color: $color-blue;
102 |         }
103 |       }
104 |       .wechat {
105 |         width: 200px;
106 |         height: 200px;;
107 |       }
108 |     }
109 |   }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/views/front/Catalog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <top-header ref="topHeader"></top-header>
  4 |     <div class="catalog-wrapper" :class="{mobile: mobileFlag}">
  5 |       <el-timeline>
  6 |         <el-timeline-item v-for="(list, key) in catalog" :key="key" :timestamp="key" placement="top">
  7 |           <el-card class="catalog-card" v-for="(item, i) in list" :key="i" @click.native="goDetail(item)">
  8 |             <h4>{{ item.title }}</h4>
  9 |             <p>浏览量 {{ item.view }}，最后编辑于 {{ item.updateTime }}</p>
 10 |           </el-card>
 11 |         </el-timeline-item>
 12 |       </el-timeline>
 13 |     </div>
 14 |     <bottom-footer v-if="!mobileFlag"></bottom-footer>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 |   import TopHeader from '@/components/front/TopHeader'
 20 |   import BottomFooter from '@/components/front/BottomFooter'
 21 |   import { apiUrl } from '@/serviceAPI.config.js'
 22 |   import { dateFormat } from '@/common/js/tool.js'
 23 |   import { computeStyleMixin } from '@/common/js/mixin.js'
 24 |   import { mapGetters } from 'vuex'
 25 |   export default {
 26 |     name: 'catalog',
 27 |     data() {
 28 |       return {
 29 |         catalog: {}
 30 |       }
 31 |     },
 32 |     computed: {
 33 |       ...mapGetters([
 34 |         'mobileFlag'
 35 |       ])
 36 |     },
 37 |     created() {
 38 |       this.getCatalog()
 39 |     },
 40 |     methods: {
 41 |       getCatalog() {
 42 |         this.$http.post(apiUrl.getArticle, {
 43 |           data: {catalog: true}
 44 |         }).then((res) => {
 45 |           if (res.data.code === 200) {
 46 |             let data = res.data.message
 47 |             data.forEach(ele => {
 48 |               let time = dateFormat(ele.createTime, 'yyyy-MM-dd')
 49 |               ele.createTime = dateFormat(ele.createTime, 'yyyy-MM-dd hh:mm')
 50 |               ele.updateTime = ele.updateTime ? dateFormat(ele.updateTime, 'yyyy-MM-dd hh:mm') : ele.createTime
 51 |               if (!this.catalog[time]) {
 52 |                 this.$set(this.catalog, time, [])
 53 |               }
 54 |               this.catalog[time].push(ele)
 55 |             })
 56 |           } else {
 57 |             this.$message.error(res.data.message)
 58 |           }
 59 |         })
 60 |       },
 61 |       goDetail(article) {
 62 |         this.$router.push(`/article/${article._id}`)
 63 |       }
 64 |     },
 65 |     components: {
 66 |       TopHeader,
 67 |       BottomFooter
 68 |     }
 69 |   }
 70 | </script>
 71 | 
 72 | <style lang="scss" scoped>
 73 |   @import '@/common/css/variable.scss';
 74 |   .catalog-wrapper {
 75 |     text-align: left;
 76 |     width: 70%;
 77 |     padding-top: 100px;
 78 |     margin: auto;
 79 |     &.mobile {
 80 |       padding: 60px 10px 10px 10px;
 81 |       width: 95%;
 82 |     }
 83 |   }
 84 |   .catalog-card {
 85 |     margin-bottom: 10px;
 86 |     cursor: pointer;
 87 |     &:hover {
 88 |       border-color: $color-blue;
 89 |     }
 90 |     h4 {
 91 |       font-size: 16px;
 92 |       font-weight: bold;
 93 |       margin-bottom: 10px;
 94 |     }
 95 |     p {
 96 |       color: $color-gray;
 97 |     }
 98 |   }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/admin/Aside.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sidebar">
  3 |     <el-menu :default-active="onRoutes" background-color="#324157" text-color="#fff" class="el-menu-vertical-demo" unique-opened router>
  4 |       <template v-for="item in items">
  5 |         <template v-if="item.subs">
  6 |           <el-submenu :key="item.index" :index="item.index">
  7 |             <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
  8 |             <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
  9 |             </el-menu-item>
 10 |           </el-submenu>
 11 |         </template>
 12 |         <template v-else>
 13 |           <el-menu-item :key="item.index" :index="item.index">
 14 |             <i :class="item.icon"></i>{{ item.title }}
 15 |           </el-menu-item>
 16 |         </template>
 17 |       </template>
 18 |     </el-menu>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 |   export default {
 24 |     name: 'Aside',
 25 |     data() {
 26 |       return {
 27 |         items: [
 28 |           {
 29 |             icon: 'el-icon-setting',
 30 |             index: '/admin/selfinfo',
 31 |             title: '自述'
 32 |           },
 33 |           {
 34 |             icon: 'el-icon-menu',
 35 |             index: '2',
 36 |             title: '文章',
 37 |             subs: [
 38 |               {
 39 |                 index: '/admin/articles',
 40 |                 title: '列表'
 41 |               },
 42 |               {
 43 |                 index: '/admin/markdown',
 44 |                 title: 'markdown'
 45 |               }
 46 |             ]
 47 |           },
 48 |           // {
 49 |           //   icon: 'el-icon-date',
 50 |           //   index: '3',
 51 |           //   title: '表单',
 52 |           //   subs: [
 53 |           //     {
 54 |           //       index: 'baseform',
 55 |           //       title: '基本表单'
 56 |           //     },
 57 |           //     {
 58 |           //       index: 'vueeditor',
 59 |           //       title: '编辑器'
 60 |           //     },
 61 |           //     {
 62 |           //       index: 'upload',
 63 |           //       title: '文件上传'
 64 |           //     }
 65 |           //   ]
 66 |           // },
 67 |           // {
 68 |           //   icon: 'el-icon-star-on',
 69 |           //   index: 'basecharts',
 70 |           //   title: '图表'
 71 |           // },
 72 |           // {
 73 |           //   icon: 'el-icon-upload2',
 74 |           //   index: 'drag',
 75 |           //   title: '拖拽'
 76 |           // },
 77 |           // {
 78 |           //   icon: 'el-icon-setting',
 79 |           //   index: 'user',
 80 |           //   title: '用户'
 81 |           // },
 82 |           // {
 83 |           //   icon: 'el-icon-delete',
 84 |           //   index: 'recycleBin',
 85 |           //   title: '回收站'
 86 |           // }
 87 |         ]
 88 |       }
 89 |     },
 90 |     computed: {
 91 |       onRoutes() {
 92 |         return this.$route.path;
 93 |       }
 94 |     }
 95 |   }
 96 | </script>
 97 | 
 98 | <style scoped>
 99 |   .sidebar {
100 |     display: block;
101 |     position: fixed;
102 |     width: 250px;
103 |     overflow: auto;
104 |     left: 0;
105 |     top: 70px;
106 |     bottom:0;
107 |     background: #2E363F;
108 |     text-align: left;
109 |     /* z-index: 10; */
110 |   }
111 |   .sidebar > ul {
112 |     height:100%;
113 |   }
114 |   @media only screen and (max-width: 768px) {
115 |     .box-card-image {
116 |       height: 250px;
117 |     }
118 |     .sidebar {
119 |       display: none;
120 |     }
121 |   }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/components/front/BreadCrumb.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition
  3 |     name="custom-classes-transition"
  4 |     enter-active-class="animated slideInDown"
  5 |     leave-active-class="animated slideOutUp"
  6 |   >
  7 |     <div class="bread-crumb" v-show="crumbsShow" ref="breadCrumb">
  8 |       <ul class="item-wrapper">
  9 |         <router-link
 10 |           v-for="(crumb, i) in crumbs"
 11 |           tag="li"
 12 |           :to="crumb.router" 
 13 |           class="item"
 14 |           :class="[i != crumbs.length -1 ? 'active' : '']"
 15 |           :key="i">
 16 |           <span class="name">{{ crumb.name }}</span>
 17 |           <icon-font v-if="i !== crumbs.length - 1" icon="icon-arrow_right" fontSize="14" class="icon-arrow"></icon-font>
 18 |         </router-link>
 19 |       </ul>
 20 |       <div class="go-back" @click="goBack">返回</div>
 21 |     </div>
 22 |   </transition>
 23 | </template>
 24 | 
 25 | <script>
 26 |   import IconFont from '@/components/Iconfont'
 27 |   export default {
 28 |     name: 'BreadCrumb',
 29 |     data() {
 30 |       return {
 31 |         crumbs: [
 32 |           {name: '首页', router: ''}
 33 |         ],
 34 |         currentTop: 0,
 35 |         crumbsShow: false
 36 |       }
 37 |     },
 38 |     mounted() {
 39 |       this.currentTop = 0
 40 |       window.addEventListener('scroll', this.bodyScroll)
 41 |       if (this.$route.path === '/') {
 42 |         this.crumbsShow = false
 43 |       } else {
 44 |         this.crumbsShow = true
 45 |       }
 46 |     },
 47 |     methods: {
 48 |       bodyScroll() {
 49 |         if (this.$route.path === '/') {
 50 |           return
 51 |         }
 52 |         const scrollTop = document.documentElement.scrollTop
 53 |         if (scrollTop > this.currentTop) {
 54 |           this.crumbsShow = false
 55 |         } else {
 56 |           this.crumbsShow = true
 57 |         }
 58 |         this.currentTop = scrollTop
 59 |       },
 60 |       goBack() {
 61 |         this.$router.go(-1)
 62 |       },
 63 |       setWidth({width, left}) {
 64 |         this.$refs.breadCrumb.style.width = width.indexOf('px') === -1 ? '80%' : width.replace('px', '') * 0.8 + 'px'
 65 |         this.$refs.breadCrumb.style.left = left
 66 |       }
 67 |     },
 68 |     watch: {
 69 |       $route() {
 70 |         const name = this.$route.name
 71 |         if (this.$route.path === '/') {
 72 |           this.crumbsShow = false
 73 |         } else {
 74 |           this.crumbsShow = true
 75 |         }
 76 |         switch(name) {
 77 |           case 'Article':
 78 |             this.crumbs = [{name: '首页', router: '/'}, {name: '文章', router: ''}]
 79 |             break;
 80 |           case 'Catalog':
 81 |             this.crumbs = [{name: '首页', router: '/'}, {name: '目录', router: ''}]
 82 |             break;
 83 |           default:
 84 |             this.crumbs = [{name: '首页', router: '/'}]
 85 |             break;
 86 |         }
 87 |       }
 88 |     },
 89 |     components: {
 90 |       IconFont
 91 |     }
 92 |   }
 93 | </script>
 94 | 
 95 | <style lang="scss" scoped>
 96 |   @import '@/common/css/variable.scss';
 97 |   .bread-crumb {
 98 |     position: fixed;
 99 |     top: 50px;
100 |     left: 0;
101 |     right: 0;
102 |     width: 80%;
103 |     margin: auto;
104 |     padding: 10px 20px;
105 |     box-sizing: border-box;
106 |     color: $color-black;
107 |     background: $color-white;
108 |     display: flex;
109 |     justify-content: space-between;
110 |     z-index: 10;
111 |     opacity: 0.8;
112 |   }
113 |   .go-back {
114 |     cursor: pointer;
115 |     color: $color-blue;
116 |     &:hover {
117 |       color: $color-red;
118 |       text-decoration: underline;
119 |     }
120 |   }
121 |   .item-wrapper {
122 |     display: flex;
123 |   }
124 |   .item {
125 |     color: $color-gray;
126 |     .icon-arrow {
127 |       margin: 0 5px;
128 |       color: $color-deepgray;
129 |     }
130 |     &.active {
131 |       color: $color-black;
132 |       .name {
133 |         font-weight: bold;
134 |         cursor: pointer;
135 |         &:hover {
136 |           color: $color-blue;
137 |         }
138 |       }
139 |     }
140 |   }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/server/api/user.js:
--------------------------------------------------------------------------------
  1 | const Router = require('koa-router')
  2 | const fs = require('fs')
  3 | const path = require('path')
  4 | const formidable = require('formidable');
  5 | const router = new Router()
  6 | const User = require('../database/schema/user')
  7 | const cosUpload = require('./tencentCloud.js')
  8 | const avatarDafault = 'cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/avatar/default.jpg'
  9 | const {transporter, mailOptions, sendMsg} = require('./email')
 10 | const {dateFormat} = require('./tool')
 11 | 
 12 | router.post('/register', async (ctx) => {
 13 |   try {
 14 |     const data = ctx.request.body.data
 15 |     const user = new User({
 16 |       name: data.name,
 17 |       email: data.email,
 18 |       password: data.password,
 19 |       avatar: avatarDafault,
 20 |       website: data.website,
 21 |       createTime: new Date().getTime()
 22 |     })
 23 |     user.save()
 24 |     ctx.body = {code: 200, message: '注册成功'}
 25 |     mailOptions.html = '<h1>' + sendMsg.newUser + '<h1>'
 26 |       + '<p>' + sendMsg.email + ': ' + data.email + '</p>'
 27 |       + '<p>' + sendMsg.name + ': ' + data.name + '</p>'
 28 |       + '<p>' + sendMsg.website + ': ' + data.website + '</p>'
 29 |       + '<p>' + sendMsg.time + ': ' + dateFormat(new Date, 'yyyy-MM-dd hh:mm:ss') + '</p>';
 30 |     transporter.sendMail(mailOptions, (error, info) => {
 31 |       if (error) {
 32 |         return console.log(error);
 33 |       }
 34 |     });
 35 |   } catch(err) {
 36 |     throw new Error(err)
 37 |   }
 38 | })
 39 | 
 40 | router.get('/registerByJson', async (ctx) => {
 41 |   try {
 42 |     const fileContent = fs.readFileSync(__dirname, '../jsonData/user.js', 'utf-8')
 43 |     for (let i = 0, len = fileContent.length; i < len; i++) {
 44 |       const data = fileContent[i]
 45 |       const user = new User({
 46 |         name: data.name,
 47 |         email: data.email,
 48 |         password: data.password,
 49 |         avatar: avatarDafault,
 50 |         website: data.website,
 51 |         createTime: new Date().getTime()
 52 |       })
 53 |       user.save()
 54 |     }
 55 |     ctx.body = {code: 200, message: '注册成功'}
 56 |   } catch(err) {
 57 |     throw new Error(err)
 58 |   }
 59 | })
 60 | 
 61 | router.post('/login', async (ctx) => {
 62 |   try {
 63 |     const data = ctx.request.body.data
 64 |     const email = data.email
 65 |     const password = data.password
 66 |     const result = await User.find({email: email})
 67 |     if (result.length === 0) {
 68 |       ctx.body = {code: 500, message: '用户不存在'}
 69 |     } else if(result[0].password !== password) {
 70 |       ctx.body = {code: 500, message: '密码错误'}
 71 |     } else {
 72 |       ctx.session.userInfo = {id: result[0]._id, name: result[0].name, avatar: result[0].avatar, root: result[0].root}
 73 |       ctx.body = {code: 200, message: '登陆成功'}
 74 |     }
 75 |   } catch(err) {
 76 |     throw new Error(err)
 77 |   }
 78 | })
 79 | 
 80 | router.post('/logout', async (ctx) => {
 81 |   try {
 82 |     ctx.session = null
 83 |     ctx.body = {code: 200, message: '已退出'}
 84 |   } catch(err) {
 85 |     throw new Error(err)
 86 |   }
 87 | })
 88 | 
 89 | router.post('/getSession', async (ctx) => {
 90 |   try {
 91 |     const userInfo = ctx.session.userInfo
 92 |     if (userInfo) {
 93 |       ctx.body = {code: 200, message: userInfo}
 94 |     } else {
 95 |       ctx.body = {code: 500, message: '请先登陆'}
 96 |     }
 97 |   } catch(err) {
 98 |     throw new Error(err)
 99 |   }
100 | })
101 | 
102 | router.post('/upload', async (ctx) => {
103 |   try {
104 |     const userInfo = ctx.session.userInfo
105 |     const {fields, files} = await formParse(ctx.req)
106 |     const avatarData = files.avatar
107 |     const filePath = avatarData.path
108 |     const fileName = '/avatar/' + userInfo.id + '.jpg'
109 |     const result = await cosUpload(fileName, filePath)
110 |     ctx.session.userInfo.avatar = result.Location
111 |     await User.update({_id: userInfo.id}, {avatar: result.Location})
112 |     ctx.body = {code: 200, message: {avatar: result.Location}}
113 |   } catch(err) {
114 |     throw new Error(err)
115 |   }
116 | })
117 | 
118 | function formParse(req) {
119 |   let form = new formidable.IncomingForm()
120 |   return new Promise((resolve, reject) => {
121 |     form.parse(req, (error, fields, files) => {
122 |       if (error) {
123 |         reject(error)
124 |       } else {
125 |         resolve({fields, files})
126 |       }
127 |     })
128 |   })
129 | }
130 | 
131 | module.exports = router


--------------------------------------------------------------------------------
/src/components/front/ArticleList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="article-list" :class="{mobile: mobileFlag}">
  3 |     <div class="article-wrapper" v-for="(article, i) in articleList" :key="i" @click="goDetail(article, true)">
  4 |       <div class="text">
  5 |         <div class="title" @click="goDetail(article)">{{ article.title }}</div>
  6 |         <div class="message">
  7 |           <div class="msg time">{{ article.createTime }}</div>
  8 |           <div class="msg view">
  9 |             <icon-font icon="icon-view">
 10 |               <span slot="content">{{ article.view }}</span>
 11 |             </icon-font>
 12 |           </div>
 13 |         </div>
 14 |         <div class="markdown-body markdownSummary" v-html="article.summary"></div>
 15 |         <div class="readall" v-if="!mobileFlag" @click="goDetail(article)">阅读全文 »</div>
 16 |       </div>
 17 |       <div class="picture" v-if="!mobileFlag">
 18 |         <img v-lazy="`https://source.unsplash.com/200x200/weekly?water,${i}`" alt="pic">
 19 |       </div>
 20 |     </div>
 21 |     <el-pagination
 22 |       v-if="pageShow"
 23 |       background
 24 |       layout="prev, pager, next"
 25 |       :total="1000">
 26 |     </el-pagination>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import IconFont from '@/components/Iconfont'
 32 |   import { apiUrl } from '@/serviceAPI.config.js'
 33 |   import { dateFormat } from '@/common/js/tool.js'
 34 |   import { mapGetters } from 'vuex'
 35 |   export default {
 36 |     name: 'articleList',
 37 |     data() {
 38 |       return {
 39 |         articleList: [],
 40 |         pageShow: false
 41 |       }
 42 |     },
 43 |     created() {
 44 |       this.getArticle()
 45 |     },
 46 |     computed: {
 47 |       ...mapGetters([
 48 |         'mobileFlag'
 49 |       ])
 50 |     },
 51 |     methods: {
 52 |       getArticle() {
 53 |         this.$http.post(apiUrl.getArticle, {
 54 |           data: {summary: true}
 55 |         }).then(res => {
 56 |           if (res.data.code === 200) {
 57 |             this.articleList = res.data.message
 58 |             this.articleList.forEach(ele => {
 59 |               ele.createTime = dateFormat(ele.createTime, 'yyyy-MM-dd')
 60 |             })
 61 |           } else {
 62 |             this.$message.error(res.data.message)
 63 |           }
 64 |         })
 65 |       },
 66 |       goDetail(article, flag) {
 67 |         if (flag && !this.mobileFlag) {
 68 |           return
 69 |         }
 70 |         this.$router.push(`/article/${article._id}`)
 71 |       }
 72 |     },
 73 |     components: {
 74 |       IconFont
 75 |     }
 76 |   }
 77 | </script>
 78 | 
 79 | <style lang="scss" scoped>
 80 |   @import '@/common/css/variable.scss';
 81 |   .article-list {
 82 |     width: 70%;
 83 |     margin: 0 auto;
 84 |     .article-wrapper {
 85 |       display: flex;
 86 |       background: $color-white;
 87 |       box-shadow: 0 0 5px 5px rgba(0,0,0,.01);
 88 |       padding: 20px;
 89 |       margin-bottom: 20px;
 90 |       overflow: hidden;
 91 |       border-radius: 4px;
 92 |       .text {
 93 |         text-align: left;
 94 |         margin-right: 10px;
 95 |         width: 100%;
 96 |         position: relative;
 97 |         .title {
 98 |           font-weight: bold;
 99 |           font-size: 22px;
100 |           line-height: 30px;
101 |           color: $color-black;
102 |           margin-bottom: 5px;
103 |           &:hover {
104 |             cursor: pointer;
105 |             text-decoration: underline;
106 |           }
107 |         }
108 |         .message {
109 |           display: flex;
110 |           color: $color-gray;
111 |           font-size: 14px;
112 |           line-height: 16px;
113 |           .msg {
114 |             margin-right: 10px;
115 |           }
116 |         }
117 |         .readall {
118 |           position: absolute;
119 |           bottom: 0;
120 |           right: 0;
121 |           font-size: 14px;
122 |           background: none;
123 |           border: none;
124 |           border-bottom: 2px solid #666;
125 |           line-height: 2;
126 |           padding: 0 3px;
127 |           cursor: pointer;
128 |           color: #555;
129 |           &:hover {
130 |             color: $color-black;
131 |             border-bottom: 2px solid $color-black;
132 |           }
133 |         }
134 |       }
135 |       .picture {
136 |         position: relative;
137 |         width: 200px;
138 |         height: 200px;
139 |         flex: 0 0 auto;
140 |       }
141 |     }
142 |     &.mobile {
143 |       width: 100%;
144 |       padding-top: 50px;
145 |       .article-wrapper {
146 |         background: $color-white;
147 |         margin: 10px 0;
148 |       }
149 |       .markdownSummary {
150 |         p {
151 |           margin: 0 !important;
152 |           padding: 0 !important;
153 |         }
154 |       }
155 |     }
156 |   }
157 | </style>
158 | 


--------------------------------------------------------------------------------
/src/views/admin/ArticleList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="list">
  3 |     <div class="crumbs">
  4 |       <el-breadcrumb separator="/">
  5 |         <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
  6 |         <el-breadcrumb-item>Article</el-breadcrumb-item>
  7 |       </el-breadcrumb>
  8 |     </div>
  9 |     <el-tabs @tab-click="tabClick">
 10 |       <el-tab-pane><span slot="label"><i class="el-icon-document"></i> 文章列表</span></el-tab-pane>
 11 |       <!-- <el-tab-pane><span slot="label"><i class="el-icon-delete"></i> 回收站</span></el-tab-pane> -->
 12 |     </el-tabs>
 13 |     <el-table v-loading="loading" size="mini" border :data="articles" style="width:100%">
 14 |       <template v-for="(item, i) in field">
 15 |         <el-table-column
 16 |           v-if="item.prop !== 'tag'"
 17 |           align="center"
 18 |           :prop="item.prop"
 19 |           :label="item.label"
 20 |           :width="item.width ? item.width : ''"
 21 |           :key="i">
 22 |          </el-table-column>
 23 |          <el-table-column
 24 |           v-else
 25 |           align="center"
 26 |           :prop="item.prop"
 27 |           :label="item.label"
 28 |           :width="item.width ? item.width : ''"
 29 |           :key="i">
 30 |             <template slot-scope="scope">
 31 |               <el-tag v-for="(tag, i) in scope.row[item.prop]" size="mini" :key="i">{{ tag.name }}</el-tag>
 32 |             </template>
 33 |          </el-table-column>
 34 |       </template>
 35 |       <el-table-column label="操作" align="center" min-width="100">
 36 |         <template slot-scope="scope">
 37 |           <el-button size="mini" v-if="userInfo.root === 1 || scope.row.user === userInfo.id" @click="edit(scope.row._id)">编辑</el-button>
 38 |           <el-button size="mini" type="danger" v-if="userInfo.root === 1 || scope.row.user === userInfo.id" @click="del(scope.row._id, scope.row.title, scope.$index)">删除</el-button>
 39 |         </template>
 40 |       </el-table-column>
 41 |     </el-table>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 |   import { apiUrl } from '@/serviceAPI.config.js'
 47 |   import { dateFormat } from '@/common/js/tool.js'
 48 |   export default {
 49 |     name: 'ArticleList',
 50 |     props: {
 51 |       userInfo: {
 52 |         type: Object,
 53 |         default: {}
 54 |       }
 55 |     },
 56 |     data() {
 57 |       return {
 58 |         articles: [],
 59 |         articlesDel: [],
 60 |         tags: [],
 61 |         loading: false,
 62 |         field: [
 63 |           {prop: 'title', label: '标题'},
 64 |           {prop: 'tag', label: '标签'},
 65 |           {prop: 'createTime', label: '发表时间', width: '150'},
 66 |           {prop: 'updateTime', label: '更新时间'},
 67 |           {prop: 'view', label: '浏览数'},
 68 |           {prop: 'like', label: '点赞数'},
 69 |           {prop: 'state', label: '状态'}
 70 |         ]
 71 |       }
 72 |     },
 73 |     created() {
 74 |       this.loading = true
 75 |       this.$http.post(apiUrl.getArticle, {
 76 |         data: {admin: true}
 77 |       }).then((res) => {
 78 |         this.loading = false
 79 |         if (res.data.code === 200) {
 80 |           this.articles = res.data.message;
 81 |           this.articles.forEach(ele => {
 82 |             ele.createTime = dateFormat(ele.createTime, 'yyyy-MM-dd hh:mm')
 83 |             ele.updateTime = ele.updateTime === null ? '' : dateFormat(ele.updateTime, 'yyyy-MM-dd hh:mm')
 84 |             ele.state = ele.state === 1 ? '已发布' : ele.state === 2 ? '已存稿' : '已删除'
 85 |           })
 86 |         }
 87 |       })
 88 |     },
 89 |     methods: {
 90 |       filterTag(value, row) {
 91 |         let flag = false;
 92 |         for(let i = 0, len = row.tags.length; i < len; i++){
 93 |           if(row.tags[i].id == value){
 94 |             flag = true;
 95 |             return row.tags;
 96 |           }
 97 |         }
 98 |       },
 99 |       tabClick(tab) {
100 |         this.delFlag = tab.index === '1' ? true : false;
101 |       },
102 |       edit(id) {
103 |         this.$router.push({path: 'markdown', query: {id}})
104 |       },
105 |       del(id, title, index) {
106 |         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
107 |           confirmButtonText: '确定',
108 |           cancelButtonText: '取消',
109 |           type: 'warning'
110 |         }).then(() => {
111 |           this.$http.post(apiUrl.deleteArticle, {
112 |             data: {id, title}
113 |           }).then((res) => {
114 |             if (res.data.code === 200) {
115 |               this.$message.success(res.data.message);
116 |               this.articles.splice(index, 1)
117 |             } else {
118 |               this.$message.error(res.data.message);
119 |             }
120 |           });
121 |         }).catch(() => {
122 |           this.$message({
123 |             type: 'info',
124 |             message: '已取消删除'
125 |           });          
126 |         });
127 |       }
128 |     }
129 |   }
130 | </script>
131 | 
132 | <style lang="scss" scoped>
133 |   span.el-tag {
134 |     margin-right: 5px;
135 |   }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/components/front/TopHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="header-nav" ref="headerNav" :class="{mobile: mobileFlag, 'content-nav': contentNav}">
  3 |     <ul>
  4 |       <li v-for="(item, i) in navList" :key="i">
  5 |         <router-link tag="a" :to="item.to">
  6 |           {{ item.name }}
  7 |           <div class="nav-border" :class="i === activeIndex ? 'active' : ''" ></div>
  8 |         </router-link>
  9 |       </li>
 10 |     </ul>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 |   import { apiUrl } from '@/serviceAPI.config.js'
 16 |   import { mapGetters } from 'vuex'
 17 |   export default {
 18 |     name: 'topHeader',
 19 |     data() {
 20 |       return {
 21 |         playing: false,
 22 |         avatar: 'cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/avatar/default.jpg',
 23 |         navList: [
 24 |           {name: '主页', to: '/'},
 25 |           {name: '目录', to: '/catalog'},
 26 |           // {name: 'BLOG', to: '/'},
 27 |           // {name: '其他', to: '/'},
 28 |           {name: '关于', to: '/about'}
 29 |         ],
 30 |         activeIndex: -1,
 31 |         activeMap: {
 32 |           'Home': 0,
 33 |           'Catalog': 1,
 34 |           'Article': -1,
 35 |           'Other': 3,
 36 |           'About': 4
 37 |         },
 38 |         contentNav: false
 39 |       }
 40 |     },
 41 |     computed: {
 42 |       ...mapGetters([
 43 |         'mobileFlag'
 44 |       ])
 45 |     },
 46 |     created() {
 47 |       this.$http.post(apiUrl.getSession).then(res => {
 48 |         if (res.data.code === 200) {
 49 |           const userInfo = res.data.message
 50 |           this.avatar = userInfo.avatar
 51 |         }
 52 |       })
 53 |     },
 54 |     mounted() {
 55 |       window.addEventListener('scroll', this.bodyScroll)
 56 |       this.headerStyle()
 57 |     },
 58 |     methods: {
 59 |       palyVideo() {
 60 |         this.playing = !this.playing
 61 |         this.$emit('playVideo', this.playing)
 62 |       },
 63 |       setWidth(width) {
 64 |         this.$refs.headerNav.style.width = width
 65 |       },
 66 |       bodyScroll() {
 67 |         if (this.contentNav) {
 68 |           return
 69 |         }
 70 |         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
 71 |         const headerNav = this.$refs.headerNav
 72 |         if (headerNav) {
 73 |           if (scrollTop >= 150) {
 74 |             headerNav.style.top = '-55px'
 75 |           } else {
 76 |             headerNav.style.top = '0'
 77 |           }
 78 |         }
 79 |       },
 80 |       headerStyle() {
 81 |         const name = this.$route.name
 82 |         if (name === 'Home') {
 83 |           this.contentNav = false
 84 |         } else {
 85 |           this.contentNav = true
 86 |           this.$refs.headerNav.style.top = '0'
 87 |         }
 88 |         this.activeIndex = this.activeMap[name]
 89 |       }
 90 |     },
 91 |     watch: {
 92 |       $route() {
 93 |         this.headerStyle()
 94 |       }
 95 |     }
 96 |   }
 97 | </script>
 98 | 
 99 | <style lang="scss" scoped>
100 |   @import '@/common/css/variable.scss';
101 |   .header-nav {
102 |     position: fixed;
103 |     top: 0;
104 |     transition: top 0.6s ease;
105 |     width: 100%;
106 |     height: 50px;
107 |     background: transparent;
108 |     color: $color-white;
109 |     display: flex;
110 |     justify-content: center;
111 |     z-index: 100;
112 |     ul {
113 |       display: flex;
114 |       justify-content: space-around;
115 |       line-height: 50px;
116 |       li {
117 |         width: 125px;
118 |         cursor: pointer;
119 |         &.avatar img {
120 |           width: 70px;
121 |           height: 70px;
122 |           border-radius: 50%;
123 |           &.play {
124 |             animation: rotate 15s linear infinite;
125 |             animation-play-state: running;
126 |           }
127 |           &.pause {
128 |             animation-play-state: paused;
129 |           }
130 |         }
131 |         a {
132 |           color: $color-white;
133 |           width: 100%;
134 |           display: inline-block;
135 |           font-size: 14px;
136 |           &:hover {
137 |             .nav-border {
138 |               width: 100%;
139 |               transition: width 0.6s ease;
140 |             }
141 |           }
142 |         }
143 |         .nav-border {
144 |           height: 3px;
145 |           background-color: $color-white;
146 |           width: 0;
147 |           transition: width 0.6s ease;
148 |           &.active {
149 |             width: 100%;
150 |           }
151 |         }
152 |       }
153 |     }
154 |     &.content-nav {
155 |       background-color: #fff;
156 |       color: $color-black;
157 |       border-bottom: 1px solid #ddd;
158 |       a {
159 |         color: $color-black;
160 |       }
161 |       .nav-border {
162 |         background-color: $color-red;
163 |       }
164 |     }
165 |     // 适应移动端
166 |     &.mobile {
167 |       background: $color-white;
168 |       ul {
169 |         width: 100%;
170 |         justify-content: flex-end;
171 |         li {
172 |           margin: 0 10px;
173 |         }
174 |         a {
175 |           color: $color-black;
176 |         }
177 |       }
178 |       .nav-border {
179 |         &.active {
180 |           background-color: $color-red;
181 |         }
182 |       }
183 |     }
184 |   }
185 |   @keyframes rotate {
186 |     from {transform: rotate(0)}
187 |     to {transform: rotate(360deg)}
188 |   }
189 | </style>


--------------------------------------------------------------------------------
/src/components/admin/TopHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="header" :class="{upload: uploadShow}">
  3 |     <el-row>
  4 |       <el-col class="logo" :md="5" :sm="8" :xs="12">
  5 |         <router-link to="/">
  6 |           <icon-font icon="icon-admin" fontSize="62"></icon-font>
  7 |         </router-link>
  8 |         <p>后台管理</p>
  9 |       </el-col>
 10 | 
 11 |       <el-col class="hello" :md="5" :sm="8">
 12 |         <p class="time">{{ currentTime }}</p>
 13 |         <p class="inform">{{ timeMessage }}</p>
 14 |       </el-col>
 15 | 
 16 |       <el-col :md="4" :offset="2" class="search">
 17 |         <el-input suffix-icon="el-icon-search"></el-input>
 18 |       </el-col>
 19 | 
 20 |       <el-col :md="8" :sm="8" :xs="12" class="right">
 21 |         <el-dropdown trigger="click" class="notice">
 22 |           <el-badge is-dot>{{ userInfo.name }}</el-badge>
 23 |           <el-dropdown-menu slot="dropdown">
 24 |             <el-dropdown-item><el-badge :value="12">评论</el-badge></el-dropdown-item>
 25 |             <el-dropdown-item><el-badge :value="9">阅读</el-badge></el-dropdown-item>
 26 |           </el-dropdown-menu>
 27 |         </el-dropdown>
 28 |         <el-dropdown trigger="click" class="user-infor">
 29 |           <img :src="`//${avatar || userInfo.avatar}`" alt="">
 30 |           <el-dropdown-menu slot="dropdown">
 31 |             <el-dropdown-item @click.native="changeAvatar">更改头像</el-dropdown-item>
 32 |             <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
 33 |           </el-dropdown-menu>
 34 |         </el-dropdown>
 35 |       </el-col>
 36 |     </el-row>
 37 |     <my-upload field="avatar"
 38 |       :width="200"
 39 |       :height="200"
 40 |       v-model="uploadShow"
 41 |       :url="uploadUrl"
 42 |       @crop-upload-success="cropUploadSuccess"
 43 |       img-format="jpg"></my-upload>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 |   import IconFont from '@/components/Iconfont'
 49 |   import myUpload from 'vue-image-crop-upload'
 50 |   import { dateFormat } from '@/common/js/tool.js'
 51 |   import { apiUrl } from '@/serviceAPI.config.js'
 52 |   export default {
 53 |     name: 'Header',
 54 |     props: ['userInfo'],
 55 |     data() {
 56 |       return {
 57 |         avatar: 'cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/avatar/default.jpg',
 58 |         uploadUrl: apiUrl.upload,
 59 |         uploadShow: false,
 60 |         currentTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
 61 |         timeMessage: '欢迎光临'
 62 |       }
 63 |     },
 64 |     mounted() {
 65 |       clearInterval(this.timer)
 66 |       this.timer = setInterval(() => {
 67 |         this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
 68 |       }, 1000)
 69 |     },
 70 |     methods:{
 71 |       changeAvatar() {
 72 |         this.uploadShow = true
 73 |       },
 74 |       logout() {
 75 |         this.$http.post(apiUrl.logout).then((res) => {
 76 |           this.$router.push('/login');
 77 |         })
 78 |       },
 79 |       cropUploadSuccess(res) {
 80 |         this.avatar = res.message.avatar + '?r=' + Math.random()
 81 |       }
 82 |     },
 83 |     watch: {
 84 |       currentTime(newTime) {
 85 |         const time = new Date(newTime)
 86 |         const hour = time.getHours()
 87 |         if (hour >= 0 && hour < 5) {
 88 |           this.timeMessage = '夜深了，注意休息😪'
 89 |         } else if (hour >= 5 && hour < 9) {
 90 |           this.timeMessage = '今天又是充满活力的一天🤓️'
 91 |         } else if (hour >= 9 && hour < 12) {
 92 |           this.timeMessage = '快乐学习，想想中午吃啥🤔️'
 93 |         } else if (hour >= 12 && hour < 18) {
 94 |           this.timeMessage = '学习，学习，下班，下班😁'
 95 |         } else if (hour >= 18 && hour < 24) {
 96 |           this.timeMessage = '刷剧，刷剧，游戏，游戏🤗️'
 97 |         }
 98 |       }
 99 |     },
100 |     components: {
101 |       IconFont,
102 |       myUpload
103 |     }
104 |   }
105 | </script>
106 | <style lang="scss" scoped>
107 |   .header {
108 |     position: fixed;
109 |     box-sizing: border-box;
110 |     width: 100%;
111 |     font-size: 14px;
112 |     background-color:#00cccc;
113 |     box-shadow:2px 0 3px rgba(0,0,0,.5);
114 |     color: #fff;
115 |     padding: 0 40px;
116 |     line-height: 70px;
117 |     height: 70px;
118 |     &.upload {
119 |       position: relative;
120 |       line-height: initial;
121 |     }
122 |   }
123 |   .header p {
124 |     margin: 0;
125 |   }
126 |   .logo {
127 |     display: flex;
128 |   }
129 |   .hello {
130 |     line-height: 35px;
131 |     text-align: center;
132 |     display: none;
133 |   }
134 | 
135 |   .search {
136 |     display: none;
137 |   }
138 | 
139 |   .right {
140 |     text-align: right;
141 |   }
142 | 
143 |   .notice {
144 |     margin-right: 25px;
145 |     color: #fff;
146 |     font-size: 20px;
147 |     line-height: 30px;
148 |     cursor: pointer;
149 |   }
150 | 
151 |   .user-infor img {
152 |     height: 40px;
153 |     width: 40px;
154 |     position: relative;
155 |     top: 15px;
156 |     border-radius: 50%;
157 |     cursor: pointer;
158 |     background: #f9ff00;
159 |     display: block;
160 |   }
161 | 
162 |   @media only screen and (min-width: 992px) {
163 |     .search {
164 |       display: block
165 |     }
166 |   }
167 |   @media only screen and (min-width: 768px) {
168 |     .hello {
169 |       display: block
170 |     }
171 |   }
172 |   @media only screen and (max-width: 768px) {
173 |     .logo i {
174 |       font-size: 30px;
175 |       float: left
176 |     }
177 |     .notice {
178 |       /* font-size: 16px; */
179 |       margin-right: 10px;
180 |     }
181 |     .header {
182 |       padding: 0 20px;
183 |     }
184 |   }
185 | </style>
186 | 


--------------------------------------------------------------------------------
/src/views/front/Article.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="articel-page">
  3 |     <div class="scroll-progress" v-if="!mobileFlag"></div>
  4 |     <left-entry :chapterData="chapterData" @leftEntry="leftEntry"></left-entry>
  5 |     <div class="article-container" ref="articleContainer">
  6 |       <top-header ref="topHeader"></top-header>
  7 |       <div class="article-detail" :class="{mobile: mobileFlag}">
  8 |         <h1>{{ article.title }}</h1>
  9 |         <div class="markdown-body" v-html="article.html"></div>
 10 |       </div>
 11 |       <bottom-footer v-if="!mobileFlag"></bottom-footer>
 12 |     </div>
 13 |     <div class="back-to-top" v-show="topShow" @click="backToTop">
 14 |       <icon-font :icon="topIcon" fontSize="42"></icon-font>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 |   import IconFont from '@/components/Iconfont'
 21 |   import TopHeader from '@/components/front/TopHeader'
 22 |   import BottomFooter from '@/components/front/BottomFooter'
 23 |   import LeftEntry from '@/components/front/LeftEntry'
 24 |   import { apiUrl } from '@/serviceAPI.config.js'
 25 |   import { dateFormat } from '@/common/js/tool.js'
 26 |   import { mapGetters } from 'vuex'
 27 |   export default {
 28 |     name: 'ArticleDetail',
 29 |     data() {
 30 |       return {
 31 |         article: {},
 32 |         chapterData: [],
 33 |         topShow: false,
 34 |         topIcon: 'icon-top-static',
 35 |       }
 36 |     },
 37 |     computed: {
 38 |       ...mapGetters([
 39 |         'mobileFlag'
 40 |       ])
 41 |     },
 42 |     created() {
 43 |       this.getArticle()
 44 |     },
 45 |     mounted() {
 46 |       window.addEventListener('scroll', this.bodyScroll)
 47 |     },
 48 |     methods: {
 49 |       getArticle() {
 50 |         this.$http.post(apiUrl.getArticle, {
 51 |           data: {id: this.$route.params.id}
 52 |         }).then(res => {
 53 |           if (res.data.code === 200) {
 54 |             this.article = res.data.message[0]
 55 |             this.article.createTime = dateFormat(this.article.createTime, 'yyyy-MM-dd')
 56 |             this.chapterFormat()
 57 |             // this.$emit('chapterFormat', this.chapterData)
 58 |           } else {
 59 |             this.$message.error(res.data.message)
 60 |           }
 61 |         })
 62 |       },
 63 |       chapterFormat(content) {
 64 |         // 文章目录处理
 65 |         this.chapterData = [];
 66 |         let hs = this.article.html.match(/<h\d{1}.*<\/h\d{1}>*/g);
 67 |         if (!hs) {
 68 |           return;
 69 |         }
 70 |         for (let i = 0, len = hs.length; i < len; i++) {
 71 |           let h = hs[i]
 72 |           let text = h.match(/>(.*)</)[1]
 73 |           let num = h.match(/^<h(\d{1})/)[1]
 74 |           let id = "item" + i
 75 |           let obj = {label: text, num: num, id: id, children: []}
 76 |           let str = h.replace(/id=".*"/, 'id="' + id + '"')
 77 |           this.article.html = this.article.html.replace(h, str)
 78 |           this.chapterDataHandle(obj, this.chapterData)
 79 |         }
 80 |       },
 81 |       chapterDataHandle(obj, arr) {
 82 |         let len = arr.length, index = len - 1
 83 |         if (arr.length === 0) {
 84 |           arr.push(obj)
 85 |         } else {
 86 |           if (arr[index].num < obj.num) {
 87 |             this.chapterDataHandle(obj, arr[index].children)
 88 |           } else {
 89 |             arr.push(obj)
 90 |           }
 91 |         }
 92 |       },
 93 |       leftEntry({flag, width}) {
 94 |         if (!this.mobileFlag) {
 95 |           let options = {}
 96 |           if (flag) {
 97 |             options = {width: (document.documentElement.clientWidth - width) + 'px', left: width + 'px'}
 98 |           } else {
 99 |             options = {width: '100%', left: '0'}
100 |           }
101 |           this.$refs.articleContainer.style.width = options.width
102 |           this.$refs.articleContainer.style.left = options.left
103 |           this.$refs.topHeader.setWidth(options.width)
104 |           // this.$refs.breadCrumb.setWidth({width: options.width, left: options.left})
105 |         }
106 |       },
107 |       bodyScroll() {
108 |         const viewWrapper = this.$refs.viewWrapper
109 |         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
110 |         this.topShow = scrollTop > 500 ? true : false
111 |       },
112 |       backToTop() {
113 |         this.topIcon = 'icon-top-start'
114 |         this.animateToTop()
115 |       },
116 |       animateToTop() {
117 |         let timer = setInterval(() => {
118 |           const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
119 |           const ispeed = Math.floor(-scrollTop / 6)
120 |           if( scrollTop === 0 ){
121 |             this.topIcon = 'icon-top-static'
122 |             clearInterval(timer)
123 |           }
124 |           document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed
125 |         }, 30)
126 |       },
127 |     },
128 |     components: {
129 |       TopHeader,
130 |       BottomFooter,
131 |       LeftEntry,
132 |       IconFont
133 |     }
134 |   }
135 | </script>
136 | 
137 | <style lang="scss" scoped>
138 |   @import '@/common/css/variable.scss';
139 |   .articel-page {
140 |     position: relative;
141 |     background: $color-white;
142 |   }
143 |   .scroll-progress {
144 |     position: absolute;
145 |     top: 0; right: 0; left: 0; bottom: 0;
146 |     background: linear-gradient(to right top, #0A74DA 50%, transparent 50%) no-repeat;
147 |     background-size: 100% calc(100% - 100vh + 5px);
148 |     z-index: 999;
149 |     pointer-events: none;
150 |     mix-blend-mode: darken;
151 |     &::after {
152 |       content: '';
153 |       position: fixed;
154 |       top: 3px; bottom: 0; right: 0; left: 0;
155 |       background: #fff;
156 |       z-index: 1;
157 |     }
158 |   }
159 |   .article-container {
160 |     position: relative;
161 |   }
162 |   .article-detail {
163 |     // background: $color-white;
164 |     width: 80%;
165 |     margin: auto;
166 |     padding: 20px;
167 |     padding-top: 100px;
168 |     padding-bottom: 32px;
169 |     h1 {
170 |       font-size: 2em;
171 |       font-weight: bold;
172 |       margin-bottom: 20px;
173 |       color: $color-black;
174 |     }
175 |     &.mobile {
176 |       padding: 60px 10px 10px 10px;
177 |       width: 95%;
178 |     }
179 |   }
180 |   .back-to-top {
181 |     position: fixed;
182 |     bottom: 32px;
183 |     right: 20px;
184 |     cursor: pointer;
185 |   }
186 | </style>
187 | 


--------------------------------------------------------------------------------
/src/views/front/Container.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <left-entry :chapterData="chapterData" @leftEntry="leftEntry"></left-entry>
  4 |     <div class="container" ref="container" :class="{mobile: mobileFlag}">
  5 |       <top-header @playVideo="playVideo" ref="topHeader"></top-header>
  6 |       <div class="view-wrapper" :class="{childPage: !homeFlag}" ref="viewWrapper">
  7 |         <router-view v-if="!$route.meta.keepAlive" :resize="resize" @chapterFormat="chapterFormat"/>
  8 |         <keep-alive>
  9 |           <router-view v-if="$route.meta.keepAlive" :resize="resize" @chapterFormat="chapterFormat"/>
 10 |         </keep-alive>
 11 |       </div>
 12 |       <bottom-footer v-if="!mobileFlag"></bottom-footer>
 13 |       <div class="back-to-top" v-show="topShow" @click="backToTop">
 14 |         <icon-font :icon="topIcon" fontSize="42"></icon-font>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 |   import IconFont from '@/components/Iconfont'
 22 |   import LeftEntry from '@/components/front/LeftEntry'
 23 |   import TopHeader from '@/components/front/TopHeader'
 24 |   import BottomFooter from '@/components/front/BottomFooter'
 25 |   import { mapGetters, mapMutations } from 'vuex'
 26 |   export default {
 27 |     name: 'container',
 28 |     data() {
 29 |       return {
 30 |         topShow: false,
 31 |         topIcon: 'icon-top-static',
 32 |         // video: require('@/assets/bg-video.mp4'),
 33 |         videoFlag: false,
 34 |         // bgPicture: require('@/assets/bg.jpg'),
 35 |         homeFlag: true,
 36 |         resize: false,
 37 |         chapterData: [],
 38 |         mobileFlag: false
 39 |       }
 40 |     },
 41 |     created() {
 42 |       this.setMobile()
 43 |     },
 44 |     mounted() {
 45 |       this.setHeight()
 46 |       window.addEventListener('scroll', this.bodyScroll)
 47 |       window.onresize = () => {
 48 |         clearTimeout(this.onresizeTime)
 49 |         this.onresizeTime = setTimeout(() => {
 50 |           this.setHeight()
 51 |           this.resize = true
 52 |           this.setMobile()
 53 |           clearTimeout(this.resizeTimer)
 54 |           this.resizeTimer = setTimeout(() => {
 55 |             this.resize = false
 56 |           }, 100)
 57 |         }, 500)
 58 |       }
 59 |     },
 60 |     methods: {
 61 |       setMobile() {
 62 |         const width = document.documentElement.clientWidth
 63 |         if (width <= 736) {
 64 |           this.mobileFlag = true
 65 |         } else {
 66 |           this.mobileFlag = false
 67 |         }
 68 |         this.setMobileFlag(this.mobileFlag)
 69 |       },
 70 |       setHeight() {
 71 |         if (!this.mobileFlag) {
 72 |           this.height = document.documentElement.clientHeight
 73 |           this.$refs.container.style.minHeight = this.height + 'px'
 74 |           this.$refs.viewWrapper.style.minHeight = (this.height - 32) + 'px'
 75 |           this.routeWatch()
 76 |           this.bodyScroll()
 77 |         }
 78 |       },
 79 |       routeWatch() {
 80 |         if (!this.mobileFlag) {
 81 |           if (this.$route.path === '/') {
 82 |             this.homeFlag = true
 83 |           } else {
 84 |             this.homeFlag = false
 85 |           }
 86 |         }
 87 |         if (this.$route.name !== 'Article') {
 88 |           this.leftEntry({flag: false})
 89 |         }
 90 |       },
 91 |       bodyScroll() {
 92 |         const viewWrapper = this.$refs.viewWrapper
 93 |         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
 94 |         this.topShow = scrollTop > 500 ? true : false
 95 |       },
 96 |       backToTop() {
 97 |         this.topIcon = 'icon-top-start'
 98 |         this.animateToTop()
 99 |       },
100 |       animateToTop() {
101 |         let timer = setInterval(() => {
102 |           const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
103 |           const ispeed = Math.floor(-scrollTop / 6);
104 |           if( scrollTop === 0 ){
105 |             this.topIcon = 'icon-top-static'
106 |             clearInterval(timer);
107 |           }
108 |           document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
109 |         }, 30)
110 |       },
111 |       playVideo(flag) {
112 |         if (flag) {
113 |           this.$refs.video.play()
114 |         } else {
115 |           this.$refs.video.pause()
116 |         }
117 |       },
118 |       chapterFormat(data) {
119 |         this.chapterData = data
120 |       },
121 |       leftEntry({flag, width}) {
122 |         if (!this.mobileFlag) {
123 |           let options = {}
124 |           if (flag) {
125 |             options = {width: (document.documentElement.clientWidth - width) + 'px', left: width + 'px'}
126 |           } else {
127 |             options = {width: '100%', left: '0'}
128 |           }
129 |           this.$refs.container.style.width = options.width
130 |           this.$refs.topHeader.setWidth(options.width)
131 |           // this.$refs.breadCrumb.setWidth({width: options.width, left: options.left})
132 |         }
133 |       },
134 |       ...mapMutations({
135 |         setMobileFlag: 'SET_MOBILE_FLAG'
136 |       }),
137 |     },
138 |     watch: {
139 |       $route() {
140 |         this.routeWatch()
141 |       }
142 |     },
143 |     components: {
144 |       TopHeader,
145 |       BottomFooter,
146 |       IconFont,
147 |       LeftEntry
148 |     }
149 |   }
150 | </script>
151 | 
152 | <style lang="scss" scoped>
153 |   @import '@/common/css/variable.scss';
154 |   .container {
155 |     color: $color-black;
156 |     min-height: 100%;
157 |     width: 100%;
158 |     position: absolute;
159 |     right: 0;
160 |     .view-wrapper {
161 |       opacity: 0.8;
162 |       margin: auto;
163 |       min-height: 100%;
164 |       box-sizing: border-box;
165 |       &.childPage {
166 |         background: $color-white;
167 |         width: 80%;
168 |         padding: 20px;
169 |         padding-top: 100px;
170 |         padding-bottom: 32px;
171 |       }
172 |     }
173 |     .back-to-top {
174 |       position: fixed;
175 |       bottom: 32px;
176 |       right: 20px;
177 |       cursor: pointer;
178 |     }
179 |     .bg-video {
180 |       position: absolute;
181 |       // top: 520px;
182 |       height: 100%;
183 |       width: 100%;
184 |       z-index: -1;
185 |       video {
186 |         object-fit: fill;
187 |         height: 100%;
188 |         width: 100%;
189 |       }
190 |     }
191 |     .bg-picture {
192 |       width: 100%;
193 |     }
194 |     &.mobile {
195 |       background: url('../../assets/bg.jpg');
196 |       .view-wrapper {
197 |         opacity: 1;
198 |       }
199 |     }
200 |   }
201 | </style>
202 | 
203 | 


--------------------------------------------------------------------------------
/server/api/article.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs')
  2 | const path = require('path')
  3 | const Router = require('koa-router')
  4 | const marked = require('marked')
  5 | const router = new Router()
  6 | const Article = require('../database/schema/article')
  7 | const Tag = require('../database/schema/tag')
  8 | const ObjectId = require('mongoose').Types.ObjectId
  9 | const checkRoot = require('./root')
 10 | const filePath = path.join(__dirname, '../../articles')
 11 | 
 12 | marked.setOptions({
 13 |   highlight: function (code) {
 14 |     return require('highlight.js').highlightAuto(code).value;
 15 |   }
 16 | })
 17 | 
 18 | router.post('/insertArticle', async (ctx) => {
 19 |   try {
 20 |     const checkResult = checkRoot(ctx)
 21 |     if (checkResult.code === 500) {
 22 |       ctx.body = checkResult
 23 |       return
 24 |     }
 25 |     const root = ctx.session.userInfo.root
 26 |     const data = ctx.request.body.data
 27 |     const currentTime = new Date().getTime()
 28 |     const tags = data.tags || []
 29 |     const html = marked(data.content)
 30 |     let tagsId = [], result = [], fileName = '', message = ''
 31 |     if (tags.length !== 0) {
 32 |       let insertTags = [], tagResult = []
 33 |       tags.forEach(ele => {
 34 |         if (ele.id.indexOf('newTag') !== -1) {
 35 |           insertTags.push({name: ele.name, createTime: currentTime})
 36 |         } else {
 37 |           tagsId.push(ObjectId(ele.id))
 38 |         }
 39 |       })
 40 |       tagResult = await Tag.insertMany(insertTags)
 41 |       tagResult.forEach(ele => {
 42 |         tagsId.push(ObjectId(ele._id))
 43 |       })
 44 |     }
 45 |     let htmlTags = html.match(/.*|<(.|\n)*?<\/.*>.*/g)
 46 |     let summary = data.summary
 47 |     // let count = 0
 48 |     // let limit = 0
 49 |     // for(let i = 0, len = htmlTags.length; i < len; i++) {
 50 |     //   if (htmlTags[i] === '') {
 51 |     //     summary += '\n'
 52 |     //   }
 53 |     //   if (htmlTags[i].match(/^<(.)/)) {
 54 |     //     let tag = htmlTags[i].match(/^<(.)/)[1]
 55 |     //     if (tag === 'h') {
 56 |     //       count += 1
 57 |     //     }
 58 |     //     if (count > limit && tag === 'h') {
 59 |     //       break
 60 |     //     }
 61 |     //   }
 62 |     //   summary += htmlTags[i]
 63 |     // }
 64 |     // summary = summary.replace(/\'/g, '"')
 65 |     if (data.id === '-1') {
 66 |       // 新增
 67 |       const article = new Article({
 68 |         title: data.title,
 69 |         summary,
 70 |         content: '',
 71 |         html: '',
 72 |         user: ObjectId(data.user),
 73 |         tag: tagsId,
 74 |         createTime: currentTime,
 75 |         state: root === 0 ? 2 : data.state
 76 |       })
 77 |       result = await article.save()
 78 |       fileName = result._id + '_' + data.title
 79 |       message = '发布成功'
 80 |     } else {
 81 |       // 更新
 82 |       await Article.update({_id: data.id}, {
 83 |         title: data.title,
 84 |         summary,
 85 |         tag: tagsId,
 86 |         updateTime: currentTime,
 87 |         state: root === 0 ? 2 : data.state
 88 |       })
 89 |       fileName = data.id + '_' + data.title
 90 |       message = '更新成功'
 91 |       if (data.title !== data.originTitle) {
 92 |         fs.renameSync(path.join(filePath, data.id + '_' + data.originTitle + '.md'), path.join(filePath, fileName + '.md'));
 93 |         fs.renameSync(path.join(filePath, data.id + '_' + data.originTitle + '.html'), path.join(filePath, fileName + '.html'));
 94 |       }
 95 |     }
 96 |     fs.writeFileSync(path.join(filePath, fileName + '.md'), data.content, 'utf-8')
 97 |     fs.writeFileSync(path.join(filePath, fileName + '.html'), html, 'utf-8')
 98 |     ctx.body = {code: 200, message: message}
 99 |   } catch(err) {
100 |     throw new Error(err)
101 |   }
102 | })
103 | 
104 | router.post('/getArticle', async (ctx) => {
105 |   try {
106 |     const checkResult = checkRoot(ctx)
107 |     const data = ctx.request.body.data
108 |     let result
109 |     if (data.admin) {
110 |       // 后台管理列表
111 |       if (checkResult.code === 500) {
112 |         ctx.body = checkResult
113 |         return
114 |       }
115 |       result = await Article.find({}, {summary: 0, content: 0, html: 0, comment: 0}).populate('tag')
116 |     } else if (data.summary) {
117 |       // home首页列表
118 |       result = await Article.find({state: 1}, {content: 0, html: 0, comment: 0}).populate('tag')
119 |     } else if (data.hot) {
120 |       // 热门列表
121 |       result = await Article.find({state: 1}, {content: 0, html: 0, comment: 0}).populate('tag')
122 |     } else if (data.catalog) {
123 |       // 归档目录
124 |       result = await Article.find({state: 1}, {summary: 0, content: 0, html: 0, comment: 0}).sort({createTime:-1}).populate('tag')
125 |     } else if (data.markdown) {
126 |       // markdown 修改内容
127 |       if (checkResult.code === 500) {
128 |         ctx.body = checkResult
129 |         return
130 |       }
131 |       result = await Article.find({_id: data.id}, {comment: 0}).populate('tag')
132 |       if (result.length !== 0) {
133 |         const title = result[0].title
134 |         const content = fs.readFileSync(path.join(filePath, `${data.id}_${title}.md`), 'utf-8')
135 |         result[0].content = content
136 |       }
137 |     } else {
138 |       // 文章内容
139 |       result = await Article.find({_id: data.id}, {content: 0, summary: 0, comment: 0}).populate('tag')
140 |       if (result.length !== 0 && data.chapter === undefined) {
141 |         await Article.update({_id: data.id}, {view: result[0].view + 1})
142 |       }
143 |       if (result.length !== 0) {
144 |         const title = result[0].title
145 |         const html = fs.readFileSync(path.join(filePath, `${data.id}_${title}.html`), 'utf-8')
146 |         result[0].html = html
147 |       }
148 |     }
149 |     ctx.body = {code: 200, message: result}
150 |   } catch(err) {
151 |     throw new Error(err)
152 |   }
153 | })
154 | 
155 | router.post('/deleteArticle', async (ctx) => {
156 |   try {
157 |     const checkResult = checkRoot(ctx)
158 |     if (checkResult.code === 500) {
159 |       ctx.body = checkResult
160 |       return
161 |     }
162 |     const data = ctx.request.body.data
163 |     const userInfo = ctx.session.userInfo
164 |     const id = data.id, title = data.title
165 |     const article = await Article.find({_id: id}, {summary: 0, content: 0, html: 0, comment: 0})
166 |     if (article[0].user != userInfo.id && userInfo.root !== 1) {
167 |       ctx.body = {code: 200, message: '没有权限'}
168 |       return
169 |     }
170 |     await Article.remove({_id: data.id})
171 |     fs.unlinkSync(path.join(filePath, `${id}_${title}.md`))
172 |     fs.unlinkSync(path.join(filePath, `${id}_${title}.html`))
173 |     ctx.body = {code: 200, message: '删除成功'}
174 |   } catch(err) {
175 |     throw new Error(err)
176 |   }
177 | })
178 | 
179 | module.exports = router


--------------------------------------------------------------------------------
/src/components/front/LeftEntry.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="left-entry" v-show="showFlag">
  3 |     <div class="icon-btn" :class="[openFlag ? 'close' : 'open']" @click="toggleShow">
  4 |       <icon-font :icon="openFlag ? closeIcon : openIcon" :fontSize="fontSize"></icon-font>
  5 |     </div>
  6 |     <div class="content-wrapper" v-show="openFlag">
  7 |       <div class="header-wrapper">
  8 |         <h1>目录</h1>
  9 |       </div>
 10 |       <div class="catalog-wrapper">
 11 |         <ul class="catalog-item" v-for="data in chapterData" :key="data.id">
 12 |           <!-- <li><a :href="'#' + data.id" @click="goTitle" >{{ data.label }}</a></li>
 13 |           <ul v-for="child1 in data.children" :key="child1.id">
 14 |             <li><a :href="'#' + child1.id" @click="goTitle" >{{ child1.label }}</a></li>
 15 |             <ul v-for="child2 in child1.children" :key="child2.id">
 16 |               <li><a :href="'#' + child2.id" @click="goTitle" >{{ child2.label }}</a></li>
 17 |               <ul v-for="child3 in child2.children" :key="child3.id">
 18 |                 <li><a :href="'#' + child3.id" @click="goTitle" >{{ child3.label }}</a></li>
 19 |                 <ul v-for="child4 in child3.children" :key="child4.id">
 20 |                   <li><a :href="'#' + child4.id" @click="goTitle" >{{ child4.label }}</a></li>
 21 |                   <ul v-for="child5 in child4.children" :key="child5.id">
 22 |                     <li><a :href="'#' + child5.id" @click="goTitle" >{{ child5.label }}</a></li>
 23 |                   </ul>
 24 |                 </ul>
 25 |               </ul>
 26 |             </ul>
 27 |           </ul> -->
 28 |           <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(data.id)">{{ data.label }}</li>
 29 |           <ul v-for="child1 in data.children" :key="child1.id">
 30 |             <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(child1.id)">{{ child1.label }}</li>
 31 |             <ul v-for="child2 in child1.children" :key="child2.id">
 32 |               <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(child2.id)">{{ child2.label }}</li>
 33 |               <ul v-for="child3 in child2.children" :key="child3.id">
 34 |                 <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(child3.id)">{{ child3.label }}</li>
 35 |                 <ul v-for="child4 in child3.children" :key="child4.id">
 36 |                   <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(child4.id)">{{ child4.label }}</li>
 37 |                   <ul v-for="child5 in child4.children" :key="child5.id">
 38 |                     <li :class="{ 'li-hover': !mobileFlag }" @click="goTitle(child5.id)">{{ child5.label }}</li>
 39 |                   </ul>
 40 |                 </ul>
 41 |               </ul>
 42 |             </ul>
 43 |           </ul>
 44 |         </ul>
 45 |       </div>
 46 |     </div>
 47 |     <!-- <mask-screen></mask-screen> -->
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 |   import IconFont from '@/components/Iconfont'
 53 |   import MaskScreen from '@/components/front/MaskScreen'
 54 |   import { apiUrl } from '@/serviceAPI.config.js'
 55 |   import { dateFormat } from '@/common/js/tool.js'
 56 |   import { mapGetters } from 'vuex'
 57 |   export default {
 58 |     name: 'LeftEntry',
 59 |     props: ['chapterData'],
 60 |     data() {
 61 |       return {
 62 |         openIcon: 'icon-arrow_right',
 63 |         closeIcon: 'icon-arrow_left',
 64 |         fontSize: '16',
 65 |         openFlag: false,
 66 |         showFlag: false
 67 |       }
 68 |     },
 69 |     computed: {
 70 |       ...mapGetters([
 71 |         'mobileFlag'
 72 |       ])
 73 |     },
 74 |     created() {
 75 |       this.routeWatch()
 76 |       if (this.mobileFlag) {
 77 |         this.showFlag = true
 78 |       }
 79 |     },
 80 |     methods: {
 81 |       toggleShow() {
 82 |         this.openFlag = !this.openFlag
 83 |         this.$emit('leftEntry', {flag: this.openFlag, width: 250})
 84 |       },
 85 |       routeWatch() {
 86 |         if (this.$route.name === 'Article') {
 87 |           this.showFlag = true
 88 |         } else {
 89 |           this.showFlag = false
 90 |           this.openFlag = false
 91 |         }
 92 |         if (this.mobileFlag) {
 93 |           this.showFlag = true
 94 |         }
 95 |       },
 96 |       goTitle(id) {
 97 |         document.getElementById(id).scrollIntoView()
 98 |         setTimeout(() => {
 99 |           const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
100 |           document.documentElement.scrollTop = document.body.scrollTop = scrollTop - 60
101 |         }, 30)
102 |       }
103 |     },
104 |     watch: {
105 |       $route() {
106 |         this.routeWatch()
107 |       }
108 |     },
109 |     components: {
110 |       IconFont,
111 |       MaskScreen
112 |     }
113 |   }
114 | </script>
115 | 
116 | <style lang="scss" scoped>
117 |   @import '@/common/css/variable.scss';
118 |   .left-entry {
119 |     position: fixed;
120 |     z-index: 200;
121 |     color: $color-black;
122 |     height: 100%;
123 |     .icon-btn {
124 |       cursor: pointer;
125 |       position: absolute;
126 |       top: 10px;
127 |       width: 30px;
128 |       height: 30px;
129 |       background: $color-shallowgray;
130 |       border: 1px solid $color-gray;
131 |       border-radius: 3px;
132 |       color: $color-black;
133 |       display: flex;
134 |       justify-content: center;
135 |       align-items: center;
136 |       z-index: 1;
137 |       box-sizing: border-box;
138 |       &.open {
139 |         left: 10px;
140 |       }
141 |       &.close {
142 |         left: 210px;
143 |       }
144 |       &:hover {
145 |         color: $color-black;
146 |         background: #f3f5f7;
147 |       }
148 |     }
149 |   }
150 |   .content-wrapper {
151 |     height: 100%;
152 |     width: 250px;
153 |     position: absolute;
154 |     top: 0;
155 |     background: $color-white;
156 |     border-right: 1px solid #ddd;
157 |   }
158 |   .header-wrapper {
159 |     height: 50px;
160 |     line-height: 50px;
161 |     background: $color-shallowgray;
162 |     text-align: left;
163 |     padding-left: 10px;
164 |     border-bottom: 1px solid #ddd;
165 |     h1 {
166 |       font-weight: bold;
167 |     }
168 |   }
169 |   .catalog-wrapper {
170 |     width: 100%;
171 |     text-align: left;
172 |     color: $color-black;
173 |     position: absolute;
174 |     top: 50px;
175 |     bottom: 0;
176 |     overflow: auto;
177 |     ul {
178 |       text-indent: 15px;
179 |       li {
180 |         display: block;
181 |         font-size: 12px;
182 |         line-height: 16px;
183 |         padding: 6px 10px;
184 |         color: $color-black;
185 |         cursor: pointer;
186 |       }
187 |       li.li-hover:hover {
188 |         background: #edf6ff;
189 |       }
190 |     }
191 |     &>ul {
192 |       text-indent: 0;
193 |     }
194 |     ul.catalog-item:first-child {
195 |       >li:first-child {
196 |         padding-top: 6px;
197 |       }
198 |     }
199 |   }
200 | </style>
201 | 


--------------------------------------------------------------------------------
/src/views/front/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <top-header ref="topHeader"></top-header>
  4 |     <div :class="['preloader', {'displayn': imgLoad || mobileFlag}]" :style="{height: height}" v-if="!hasLoad" >
  5 |       <div :class="['loader', {'displayn': loadered}]" ></div>
  6 |     </div>
  7 |     <div class="background-wrapper" v-if="!mobileFlag">
  8 |       <img class="background" src="https://cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/bg.jpg" alt="" ref="background">
  9 |       <div class="txt">
 10 |         <p>{{ verseText }} <span :class="{'dom-hidden': finished}">|</span> </p>
 11 |       </div>
 12 |     </div>
 13 |     <div :style="{height: hMask}"></div>
 14 |     <div :class="['content-container', {mobile: mobileFlag}]" ref="contentContainer">
 15 |       <div class="content-container-1">
 16 |         <article-list></article-list>
 17 |         <right-content></right-content>
 18 |       </div>
 19 |     </div>
 20 |     <bottom-footer v-if="!mobileFlag"></bottom-footer>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 |   import TopHeader from '@/components/front/TopHeader'
 26 |   import BottomFooter from '@/components/front/BottomFooter'
 27 |   import ArticleList from '@/components/front/ArticleList'
 28 |   import RightContent from '@/components/front/RightContent'
 29 |   import IconFont from '@/components/Iconfont'
 30 |   import { mapGetters, mapMutations } from 'vuex'
 31 |   const jinrishici = require('jinrishici')
 32 |   export default {
 33 |     name: 'home',
 34 |     props: ['resize'],
 35 |     data() {
 36 |       return {
 37 |         mobileFlag: false,
 38 |         verse: '帝里重清明，人心自愁思。',
 39 |         verseText: '',
 40 |         finished: false,
 41 |         imgLoad: false,
 42 |         loadered: false,
 43 |         hasLoad: false,
 44 |         height: 0,
 45 |         hMask: 0
 46 |       }
 47 |     },
 48 |     created() {
 49 |       this.setMobile()
 50 |       this.hasLoad = sessionStorage.getItem('hasLoad')
 51 |     },
 52 |     mounted() {
 53 |       if (!this.mobileFlag) {
 54 |         this.setHeight()
 55 |         jinrishici.load(result => {
 56 |           this.verse = result.data.content
 57 |           this.writeText()
 58 |         })
 59 |       }
 60 |     },
 61 |     methods: {
 62 |       setMobile() {
 63 |         const width = document.documentElement.clientWidth
 64 |         if (width <= 736) {
 65 |           this.mobileFlag = true
 66 |         } else {
 67 |           this.mobileFlag = false
 68 |         }
 69 |         this.setMobileFlag(this.mobileFlag)
 70 |       },
 71 |       setHeight(flag = false) {
 72 |         let height = document.documentElement.clientHeight
 73 |         const width = document.documentElement.clientWidth
 74 |         const self = this
 75 |         this.height = height + 'px'
 76 |         this.hMask = height + 'px'
 77 |         this.$refs.background.style.height = height + 'px'
 78 |         this.$refs.contentContainer.style.minHeight = height + 'px'
 79 |         if (this.imgloader) {
 80 |           self.loadered = true
 81 |           self.imgLoad = true
 82 |           return
 83 |         }
 84 |         this.$refs.background.onload = function() {
 85 |           sessionStorage.setItem('hasLoad', '1')
 86 |           self.loadered = true
 87 |           let timer = setInterval(() => {
 88 |             if (height > 0) {
 89 |               height -= 20
 90 |               self.height = height + 'px'
 91 |             } else {
 92 |               self.imgLoad = true
 93 |               clearInterval(timer)
 94 |             }
 95 |           }, 10)
 96 |         }
 97 |       },
 98 |       writeText() {
 99 |         let arr = this.verse.split('')
100 |         let timer = setInterval(() => {
101 |           if (arr.length === 0) {
102 |             clearInterval(timer)
103 |             this.finished = true
104 |           } else {
105 |             this.verseText += arr.shift()
106 |           }
107 |         }, 150)
108 |       },
109 |       ...mapMutations({
110 |         setMobileFlag: 'SET_MOBILE_FLAG'
111 |       }),
112 |     },
113 |     watch: {
114 |       resize() {
115 |         if (this.resize) {
116 |           if (!this.mobileFlag) {
117 |             this.setHeight()
118 |           }
119 |         }
120 |       }
121 |     },
122 |     components: {
123 |       TopHeader,
124 |       BottomFooter,
125 |       ArticleList,
126 |       IconFont,
127 |       RightContent
128 |     }
129 |   }
130 | </script>
131 | 
132 | <style lang="scss" scoped>
133 |   @import '@/common/css/variable.scss';
134 |   .home {
135 |     color: $color-black;
136 |     height: 100%;
137 |     width: 100%;
138 |   }
139 |   .background-wrapper {
140 |     position: fixed;
141 |     background: $color-gray-1;
142 |     .background {
143 |       width: 100%;
144 |       object-fit: cover;
145 |       // background: url('https://cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/bg.jpg') no-repeat;
146 |       // background-size: cover;
147 |       // background-attachment: fixed;
148 |       // display: flex;
149 |       // align-items: center;
150 |     }
151 |   }
152 |   .txt {
153 |     position: fixed;
154 |     width: 100%;
155 |     color: $color-white;
156 |     font-size: 32px;
157 |     font-family: KaiTi, SimSun;
158 |     top: 50%;
159 |     margin-top: -32px;
160 |     .first-line {
161 |       text-indent: -50px;
162 |     }
163 |     .second-line {
164 |       text-indent: 50px;
165 |     }
166 |   }
167 |   .social-wrapper {
168 |     margin-top: 10px;
169 |     .social-icon {
170 |       cursor: pointer;
171 |       margin-right: 10px;
172 |       &:hover {
173 |         color: $color-blue;
174 |       }
175 |     }
176 |     .wechat {
177 |       width: 200px;
178 |       height: 200px;;
179 |     }
180 |   }
181 |   .content-container {
182 |     padding: 20px 30px;
183 |     background: $color-gray-1;
184 |     display: flex;
185 |     position: relative;
186 |     box-sizing: border-box;
187 |     .content-container-1 {
188 |       width: 80%;
189 |       display: flex;
190 |       margin: 0 auto;
191 |     }
192 |     &.mobile {
193 |       padding: initial;
194 |       .content-container-1 {
195 |         width: 100%;
196 |       }
197 |     }
198 |   }
199 |   .dom-hidden {
200 |     visibility: hidden;
201 |   }
202 |   .preloader {
203 |     position: fixed;
204 |     top: 0;
205 |     left: 0;
206 |     right: 0;
207 |     bottom: 0;
208 |     background-color: #fff;
209 |     z-index: 99999999;
210 |   }
211 |   .displayn {
212 |     display: none;
213 |   }
214 |   .loader {
215 |     position: absolute;
216 |     left: 53%;
217 |     top: 53%;
218 |     background-repeat: no-repeat;
219 |     background-position: center;
220 |     margin: -100px 0 0 -100px;
221 |     border: 10px solid #f3f3f3;
222 |     border-radius: 50%;
223 |     border-top: 10px solid #ed553b;
224 |     border-bottom: 10px solid #232d39;
225 |     width: 90px;
226 |     height: 90px;
227 |     -webkit-animation: spin 2s linear infinite;
228 |     animation: spin 2s linear infinite;
229 |   }
230 |   @keyframes spin {
231 |     0% { transform: rotate(0deg); }
232 |     100% { transform: rotate(360deg); }
233 |   }
234 | </style>
235 | 
236 | 


--------------------------------------------------------------------------------
/src/views/front/About.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="about">
  3 |     <div class="preloader animated fadeOut" v-if="!loader">
  4 |       <div class="loader">Loading...</div>
  5 |     </div>
  6 | 
  7 |     <img class="img-background" ref="imgBackground" src="https://cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/about-1.png" alt="">
  8 | 
  9 |     <video class="video-background" autoplay loop muted plays-inline>
 10 |         <source src="https://cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/about-2.mp4" type="video/mp4">
 11 |     </video>
 12 | 
 13 |     <div class="about-content">
 14 |       <div class="about-item about-self about-item-active" ref="item1">
 15 |         <div class="animated fadeInDown">
 16 |           <h1 class="animated heartBeat">HELLO</h1>
 17 |           <p class="desc">{{ workText }}</p>
 18 |           <div class="contact">
 19 |             <a class="contatc-item" href="https://github.com/Moon-Future/vue-node-blog" target="_blank">
 20 |               <icon-font class="social-icon" icon="icon-github" fontSize="42"></icon-font>
 21 |             </a>
 22 |             <el-popover
 23 |               placement="bottom"
 24 |               trigger="hover">
 25 |               <img class="wechat" src="../../assets/Wechat.jpg" alt="">
 26 |               <template slot="reference">
 27 |                 <icon-font class="social-icon" icon="icon-weixin-active" fontSize="42"></icon-font>
 28 |               </template>
 29 |             </el-popover>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 | 
 34 |       <div class="about-item about-self" ref="item2">
 35 |         <div class="animated fadeInDown">
 36 |           <h1>HELLO</h1>
 37 |           <p class="desc">{{ workText }}</p>
 38 |           <div class="contact">
 39 |             <a class="contatc-item" href="https://github.com/Moon-Future/vue-node-blog" target="_blank">
 40 |               <icon-font class="social-icon" icon="icon-github" fontSize="42"></icon-font>
 41 |             </a>
 42 |             <el-popover
 43 |               placement="bottom"
 44 |               trigger="hover">
 45 |               <img class="wechat" src="../../assets/Wechat.jpg" alt="">
 46 |               <template slot="reference">
 47 |                 <icon-font class="social-icon" icon="icon-weixin-active" fontSize="42"></icon-font>
 48 |               </template>
 49 |             </el-popover>
 50 |           </div>
 51 |         </div>
 52 |       </div>
 53 | 
 54 |       <div class="about-item about-self about-item-3" ref="item3">
 55 |         <div class="animated fadeInDown">
 56 |           <h1>HELLO</h1>
 57 |           <p class="desc">{{ workText }}</p>
 58 |           <div class="contact">
 59 |             <a class="contatc-item" href="https://github.com/Moon-Future/vue-node-blog" target="_blank">
 60 |               <icon-font class="social-icon" icon="icon-github" fontSize="42"></icon-font>
 61 |             </a>
 62 |             <el-popover
 63 |               placement="bottom"
 64 |               trigger="hover">
 65 |               <img class="wechat" src="../../assets/Wechat.jpg" alt="">
 66 |               <template slot="reference">
 67 |                 <icon-font class="social-icon" icon="icon-weixin-active" fontSize="42"></icon-font>
 68 |               </template>
 69 |             </el-popover>
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 |     </div>
 74 | 
 75 |     <div>
 76 | 
 77 |     </div>
 78 |   </div>
 79 | </template>
 80 | 
 81 | <script>
 82 |   import IconFont from '@/components/Iconfont'
 83 |   export default {
 84 |     data() {
 85 |       return {
 86 |         work: '程序不过是梦， 生于无形无象的禅中， 我们只是那做梦的人。',
 87 |         workText: '',
 88 |         loader: false
 89 |       }
 90 |     },
 91 |     components: {
 92 |       IconFont
 93 |     },
 94 |     created() {
 95 |       this.writeText()
 96 |     },
 97 |     mounted() {
 98 |       const self = this
 99 |       this.$refs.imgBackground.onload = function() {
100 |         setTimeout(() => {
101 |           self.loader = true
102 |         }, 800);
103 |       }
104 |     },
105 |     methods: {
106 |       writeText() {
107 |         let arr = this.work.split('')
108 |         let timer = setInterval(() => {
109 |           if (arr.length === 0) {
110 |             clearInterval(timer)
111 |           } else {
112 |             this.workText += arr.shift()
113 |           }
114 |         }, 100)
115 |       }
116 |     }
117 |   }
118 | </script>
119 | 
120 | <style lang="scss" scoped>
121 |   @import '@/common/css/variable.scss';
122 |   .about {
123 |     height: 100%;
124 |     // background: url('https://cl8023-1255423800.cos.ap-guangzhou.myqcloud.com/about-1.png') no-repeat;
125 |     // background-size: cover;
126 |     // background-attachment: fixed;
127 |     display: flex;
128 |     align-items: center;
129 |   }
130 |   .preloader {
131 |     position: fixed;
132 |     background: #000;
133 |     bottom: 0;
134 |     right: 0;
135 |     left: 0;
136 |     top: 0;
137 |     z-index: 9998;
138 |   }
139 |   .loader {
140 |     position: absolute;
141 |     border-left: 2px solid #ffffff;
142 |     border-top: 2px solid rgba(255, 255, 255, 0.2);
143 |     border-right: 2px solid rgba(255, 255, 255, 0.2);
144 |     border-bottom: 2px solid rgba(255, 255, 255, 0.2);
145 |     height: 46px;
146 |     width: 46px;
147 |     left: 50%;
148 |     top: 50%;
149 |     margin: -23px 0 0 -23px;
150 |     text-indent: -9999em;
151 |     font-size: 10px;
152 |     z-index: 9999;
153 |     animation: load 0.8s infinite linear;
154 |   }
155 |   .loader, .loader:after {
156 |     border-radius: 50%;
157 |     width: 46px;
158 |     height: 46px;
159 |   }
160 |   @keyframes load {
161 |     0% {
162 |       -webkit-transform: rotate(0deg);
163 |       transform: rotate(0deg);
164 |     }
165 |     100% {
166 |       -webkit-transform: rotate(360deg);
167 |       transform: rotate(360deg);
168 |     }
169 |   }
170 | 
171 |   .img-background {
172 |     width: 100%;
173 |     height: 100%;
174 |     object-fit: cover;
175 |   }
176 | 
177 |   .video-background {
178 |     position: fixed;
179 |     right: 0;
180 |     bottom: 0;
181 |     min-width: 100%;
182 |     min-height: 100%;
183 |     width: auto;
184 |     height: auto;
185 |   }
186 |   .about-content {
187 |     position: fixed;
188 |     left: 0;
189 |     right: 0;
190 |     top: 0;
191 |     bottom: 0;
192 |     z-index: 99;
193 |     margin: auto;
194 |     color: #FFF;
195 |     display: flex;
196 |     justify-content: center;
197 |     align-items: center;
198 |   }
199 |   .about-item {
200 |     position: absolute;
201 |     background: #000;
202 |     opacity: 0.3;
203 |     width: 60%;
204 |     height: 60%;
205 |     border-radius: 4px;
206 |   }
207 | 
208 |   .about-self {
209 |     display: flex;
210 |     flex-flow: column;
211 |     justify-content: center;
212 |     h1 {
213 |       font-size: 72px;
214 |       font-weight: 700;
215 |       font-family: 'Roboto Slab';
216 |     }
217 |     .desc {
218 |       font-size: 20px;
219 |       margin: 20px;
220 |     }
221 |     .contatc-item {
222 |       margin-right: 20px;
223 |     }
224 |   }
225 | 
226 |   .about-item-active {
227 |     
228 |   }
229 | </style>
230 | 
231 | 


--------------------------------------------------------------------------------
/src/views/admin/Markdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="markdown-container">
  3 |     <div class="crumbs">
  4 |       <el-breadcrumb separator="/">
  5 |         <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
  6 |         <el-breadcrumb-item>markdown</el-breadcrumb-item>
  7 |       </el-breadcrumb>
  8 |     </div>
  9 |     <div class="editor">
 10 |       <div class="title">
 11 |         标题：<input type="text" v-model="title" :title="title">
 12 |       </div>
 13 |       <div class="summary">
 14 |         <div class="summary-title">概要：</div>
 15 |         <el-input type="textarea" rows="5" v-model="summary"></el-input>
 16 |       </div>
 17 |       <markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
 18 |       <div class="tag">
 19 |         标签：
 20 |         <div class="tag-all">
 21 |           <el-tag v-for="tag in tags" :key="tag.id" @click.native="selectTag(tag)">{{ tag.name }}</el-tag>
 22 |         </div>
 23 |         <div class="tag-sel">
 24 |           <el-tag v-for="(tag, i) in tagSel" :key="tag.id" :closable="true" :close-transition="false" type="success" @close="closeTag(i)">{{ tag.name }}</el-tag>
 25 |           <el-input
 26 |             class="input-new-tag"
 27 |             v-if="inputVisible"
 28 |             v-model="inputValue"
 29 |             ref="saveTagInput"
 30 |             size="mini"
 31 |             @keyup.enter.native="tagInputConfirm"
 32 |             @blur="tagInputConfirm"
 33 |           >
 34 |           </el-input>
 35 |           <el-button v-else class="button-new-tag" size="small" @click="addNewTag">+ New Tag</el-button>
 36 |         </div>
 37 |       </div>
 38 |       <div class="submit">
 39 |         <el-button type="success" @click="submit(1)" :loading="loading" v-if="userInfo.root === 1">发布</el-button>
 40 |         <el-button type="primary" @click="submit(2)" :loading="loading">存稿</el-button>
 41 |       </div>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 |   import markdownEditor from 'vue-simplemde/src/markdown-editor'
 48 |   import { apiUrl } from '@/serviceAPI.config.js'
 49 |   export default {
 50 |     name: 'Markdown',
 51 |     props: {
 52 |       userInfo: {
 53 |         type: Object,
 54 |         default: {}
 55 |       }
 56 |     },
 57 |     components: {
 58 |       markdownEditor
 59 |     },
 60 |     data() {
 61 |       return {
 62 |         id: '-1',
 63 |         originTitle: '',
 64 |         title: '',
 65 |         content: '',
 66 |         tags: [],
 67 |         tagSel: [],
 68 |         tagIdMax: 1,
 69 |         inputVisible: false,
 70 |         inputValue: '',
 71 |         configs: {
 72 |           spellChecker: false, // 禁用拼写检查
 73 |           renderingConfig: {
 74 |             codeSyntaxHighlighting: true, // 开启代码高亮 
 75 |             highlightingTheme: 'vs'
 76 |           }
 77 |         },
 78 |         summary: '',
 79 |         loading: false
 80 |       }
 81 |     },
 82 |     created() {
 83 |       this.newTagId = 0
 84 |       let query = this.$route.query;
 85 |       this.$http.post(apiUrl.getTag).then((res) => {
 86 |         if (res.data.code === 200) {
 87 |           this.tags = res.data.message;
 88 |           this.tags.forEach(ele => {
 89 |             ele.id = ele._id
 90 |           })
 91 |         }
 92 |       })
 93 |       if (query.id) {
 94 |         this.id = query.id
 95 |         this.$http.post(apiUrl.getArticle, {
 96 |             data: {id: query.id, markdown: true}
 97 |           }).then((res) => {
 98 |             const message = res.data.message
 99 |             if (res.data.code === 200) {
100 |               this.title = message[0].title
101 |               this.summary = message[0].summary
102 |               this.tagSel = message[0].tag
103 |               this.content = message[0].content
104 |               this.tagSel.forEach(ele => {
105 |                 ele.id = ele._id
106 |               })
107 |               this.originTitle = message[0].title
108 |             } else {
109 |               this.$message.error(message)
110 |             }
111 |           })
112 |       }
113 |     },
114 |     methods: {
115 |       selectTag(tag) {
116 |         if(this.tagSel.indexOf(tag) === -1){
117 |           this.tagSel.splice(this.tagSel.length, 1, tag)
118 |         }
119 |       },
120 |       closeTag(index) {
121 |         this.tagSel.splice(index, 1)
122 |       },
123 |       tagInputConfirm() {
124 |         let inputValue = this.inputValue.trim(), flag = false, tagAll = this.tags.concat(this.tagSel)
125 |         tagAll.map((tag) => {
126 |           if(tag.name.toLocaleLowerCase() == inputValue.toLocaleLowerCase()){
127 |             flag = true
128 |           }
129 |         })
130 |         if (inputValue && !flag) {
131 |           this.tagSel.push({id: `${this.newTagId}_newTag`, name:inputValue})
132 |           this.newTagId += 1
133 |         }
134 |         this.inputVisible = false;
135 |         this.inputValue = '';
136 |       },
137 |       addNewTag() {
138 |         this.inputVisible = true;
139 |         this.$nextTick(() => {
140 |           this.$refs.saveTagInput.$refs.input.focus()
141 |         });
142 |       },
143 |       submit(state) {
144 |         if (this.loading) {
145 |           return
146 |         }
147 |         if (this.title === '' || this.summary === '' || this.content === '') {
148 |           this.$message.error('提交失败,请完善内容')
149 |           return
150 |         }
151 |         this.loading = true
152 |         this.$http.post(apiUrl.insertArticle, {
153 |           data: {
154 |             id: this.id,
155 |             originTitle: this.originTitle,
156 |             user: this.userInfo.id,
157 |             title: this.title,
158 |             summary: this.summary,
159 |             content: this.content,
160 |             tags: this.tagSel,
161 |             state
162 |           }
163 |         }).then((res) => {
164 |           this.loading = false
165 |           if (res.data.code === 200) {
166 |             this.$message.success(res.data.message);
167 |             this.$router.push('/admin/articles')
168 |           } else {
169 |             this.$message.error(res.data.message);
170 |           }
171 |         });
172 |       }
173 |     }
174 |   }
175 | </script>
176 | 
177 | <style lang="scss" scoped>
178 |   @import '@/common/css/variable.scss';
179 |   .markdown-container {
180 |     text-align: left;
181 |     .title {
182 |       padding: 10px;
183 |       input {
184 |         border: none;
185 |         outline: none;
186 |         border-bottom: 1px solid #000;
187 |         font-weight: bold;
188 |         font-size: 20px;
189 |         text-align: center;
190 |         min-width: 100px;
191 |       }
192 |     }
193 |     .summary {
194 |       display: flex;
195 |       padding: 10px;
196 |       .summary-title {
197 |         flex: 0 0 auto;
198 |       }
199 |     }
200 |     .markdown-editor {
201 |       height: 100%
202 |     }
203 |     .tag {
204 |       margin-bottom: 20px;
205 |       span.el-tag {
206 |         margin: 5px;
207 |         cursor: pointer;
208 |       }
209 |       .tag-all span {
210 |         &:hover {
211 |           color: $color-white;
212 |           background-color: $color-origin;
213 |         }
214 |         &:first-child {
215 |           margin-left: 0;
216 |         }
217 |       }
218 |       .tag-sel {
219 |         border: 1px dotted $color-green;
220 |         min-height: 50px;
221 |         padding: 5px;
222 |         .input-new-tag {
223 |           max-width: 77px;
224 |         }
225 |       }
226 |     }
227 |   }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/views/front/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-container">
  3 |     <div class="background">
  4 |       <img src="https://source.unsplash.com/random/1080x720" alt="">
  5 |     </div>
  6 |     <div class="avatar-wrapper">
  7 |       <img src="../../assets/avatar.jpg" alt="">
  8 |     </div>
  9 |     <div class="login-wrapper">
 10 |       <h1>后台管理</h1>
 11 |       <div class="form-wrapper">
 12 |         <el-form ref="loginForm" :rules="rules" :model="form">
 13 |           <el-form-item prop="email">
 14 |             <el-input class="form-input" clearable maxlength="20" placeholder="邮箱" v-model="form.email">
 15 |               <template slot="prepend">
 16 |                 <icon-font icon="icon-user"></icon-font>
 17 |               </template>
 18 |             </el-input>
 19 |           </el-form-item>
 20 |           <el-form-item prop="password">
 21 |             <el-input class="form-input" type="password" maxlength="20" clearable placeholder="密码" v-model="form.password" @keyup.enter.native="login">
 22 |               <template slot="prepend">
 23 |                 <icon-font icon="icon-password"></icon-font>
 24 |               </template>
 25 |             </el-input>
 26 |           </el-form-item>
 27 |           <div v-show="registerFlag">
 28 |             <el-form-item prop="password">
 29 |               <el-input class="form-input" type="password" maxlength="20" clearable placeholder="确认密码" v-model="form.rePassword">
 30 |                 <template slot="prepend">
 31 |                   <icon-font icon="icon-password"></icon-font>
 32 |                 </template>
 33 |               </el-input>
 34 |             </el-form-item>
 35 |             <el-form-item prop="name">
 36 |               <el-input class="form-input" maxlength="20" clearable placeholder="昵称" v-model="form.name">
 37 |                 <template slot="prepend">
 38 |                   昵称
 39 |                 </template>
 40 |               </el-input>
 41 |             </el-form-item>
 42 |             <el-form-item prop="website">
 43 |               <el-input class="form-input" maxlength="50" clearable placeholder="网站" v-model="form.website">
 44 |                 <template slot="prepend">
 45 |                   网站
 46 |                 </template>
 47 |               </el-input>
 48 |             </el-form-item>
 49 |           </div>
 50 |         </el-form>
 51 |         <div class="tool-button" v-show="!registerFlag">
 52 |           <el-button 
 53 |             type="primary" 
 54 |             :loading="subWait" 
 55 |             :class="subWait ? 'subWait' : ''" 
 56 |             @click="login">登陆</el-button>
 57 |         </div>
 58 |         <div class="tool-button">
 59 |           <el-button 
 60 |             type="success" 
 61 |             :loading="subWait && registerFlag" 
 62 |             :class="subWait && registerFlag ? 'subWait' : ''" 
 63 |             @click="register">注册</el-button>
 64 |         </div>
 65 |         <div class="tool-button" v-show="!registerFlag">
 66 |           <el-button type="warning" @click="goHome">返回主页</el-button>
 67 |         </div>
 68 |         <div class="tool-button" v-show="registerFlag">
 69 |           <el-button type="primary" @click="back">返回</el-button>
 70 |         </div>
 71 |       </div>
 72 |     </div>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 |   import IconFont from '@/components/Iconfont'
 78 |   import { apiUrl } from '@/serviceAPI.config.js'
 79 |   const crypto = require('crypto')
 80 |   export default {
 81 |     data() {
 82 |       return {
 83 |         form: {
 84 |           email: '',
 85 |           password: '',
 86 |           rePassword: '',
 87 |           name: '',
 88 |           website: '',
 89 |         },
 90 |         rules: {
 91 |           email: [
 92 |             {required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
 93 |           ],
 94 |           password: [
 95 |             {required: true, message: '请输入密码', trigger: 'blur'}
 96 |           ],
 97 |           rePassword: [
 98 |             {required: true, message: '两次输入密码不同', trigger: 'blur'}
 99 |           ],
100 |           name: [
101 |             {required: true, message: '请输入昵称', trigger: 'blur'}
102 |           ]
103 |         },
104 |         registerFlag: false,
105 |         subWait: false,
106 |         checked: false,
107 |         password: '',
108 |         cookieInfo: {}
109 |       }
110 |     },
111 |     beforeCreate() {
112 |       this.$http.post(apiUrl.getSession).then(res => {
113 |         if (res.data.code === 200) {
114 |           this.$router.push('/admin/selfinfo')
115 |         }
116 |       })
117 |     },
118 |     methods: {
119 |       register() {
120 |         if (!this.registerFlag) {
121 |           this.registerFlag = true
122 |           this.clear()
123 |           return
124 |         }
125 |         if (this.subWait) {
126 |           return
127 |         }
128 |         this.$refs.loginForm.validate((valid) => {
129 |           if (!valid) {
130 |             this.$message.error('请补充完整数据')
131 |             return
132 |           }
133 |           if (this.form.password !== this.form.rePassword) {
134 |             this.$message.error('两次输入密码不同')
135 |             return
136 |           }
137 |           this.subWait = true
138 |           this.$http.post(apiUrl.register, {
139 |             data: {
140 |               email: this.form.email,
141 |               password: crypto.createHash('sha1').update(this.form.password.trim()).digest('hex'),
142 |               name: this.form.name,
143 |               website: this.form.website
144 |             }
145 |           }).then(res => {
146 |             this.subWait = false
147 |             if (res.data.code === 200) {
148 |               this.$message.success(res.data.message)
149 |               this.registerFlag = false
150 |               this.form.password = ''
151 |               this.form.rePassword = ''
152 |               this.form.name = ''
153 |               this.form.website = ''
154 |             } else {
155 |               this.$message.error(res.data.message)
156 |             }
157 |           }).catch(err => {
158 |             this.subWait = false
159 |             this.$message.error('服务器君傲娇啦😭')
160 |           })
161 |         })
162 |       },
163 |       login() {
164 |         if (this.subWait) {
165 |           return
166 |         }
167 |         if (this.form.email === '' || this.form.password === '') {
168 |           this.$message.error('请输入邮箱和密码')
169 |           return
170 |         }
171 |         this.subWait = true
172 |         this.$http.post(apiUrl.login, {
173 |           data: {
174 |             email: this.form.email,
175 |             password: crypto.createHash('sha1').update(this.form.password.trim()).digest('hex')
176 |           }
177 |         }).then(res => {
178 |           this.subWait = false
179 |           if (res.data.code === 200) {
180 |             this.$message.success(res.data.message)
181 |             this.$router.push('/admin/selfinfo')
182 |           } else {
183 |             this.$message.error(res.data.message)
184 |           }
185 |         }).catch(err => {
186 |           this.subWait = false
187 |           this.$message.error('服务器君傲娇啦😭')
188 |         })
189 |       },
190 |       back() {
191 |         if (this.subWait) {
192 |           return
193 |         }
194 |         this.registerFlag = false
195 |         this.clear()
196 |       },
197 |       goHome() {
198 |         this.$router.push('/')
199 |       },
200 |       clear() {
201 |         this.$refs.loginForm.resetFields()
202 |         this.form.email = ''
203 |         this.form.password = ''
204 |       }
205 |     },
206 |     components: {
207 |       IconFont
208 |     }
209 |   }
210 | </script>
211 | 
212 | <style lang="scss" scoped>
213 |   @import '@/common/css/variable.scss';
214 | 
215 |   .login-container {
216 |     display: flex;
217 |     justify-content: center;
218 |     align-items: center;
219 |     height: 100%;
220 |     .background {
221 |       position: fixed;
222 |       top: 0;
223 |       bottom: 0;
224 |       left: 0;
225 |       right: 0;
226 |       z-index: -1;
227 |       img {
228 |         width: 100%;
229 |       }
230 |     }
231 |     .avatar-wrapper {
232 |       width: 100px;
233 |       height: 100px;
234 |       margin-right: 50px;
235 |       cursor: pointer;
236 |       position: relative;
237 |       img {
238 |         width: 100%;
239 |         border-radius: 50%;
240 |       }
241 |       .click-msg {
242 |         position: absolute;
243 |         top: 50px;
244 |         color: $color-white;
245 |         font-size: 12px;
246 |         text-align: center;
247 |         width: 100%;
248 |       }
249 |     }
250 |     .login-wrapper {
251 |       width: 350px;
252 |       padding: 10px;
253 |       border: 1px solid $color-gray;
254 |       box-shadow: 0 0 1px $color-gray;
255 |       background-color: $color-white;
256 |       h1 {
257 |         font-weight: bold;
258 |         padding: 10px 0;
259 |       }
260 |       .form-wrapper {
261 |         .tool-button {
262 |           display: flex;
263 |           flex-flow: column;
264 |           padding: 10px 0;
265 |         }
266 |         .remember-wrapper {
267 |           text-align: left;
268 |         }
269 |       }
270 |     }
271 |   }
272 | </style>
273 | 


--------------------------------------------------------------------------------
/articles/vue+node+mysql搭建个人博客（二）.md:
--------------------------------------------------------------------------------
  1 | # 组件
  2 | 
  3 | ### 父组件向子组件通信
  4 |     父组件通过 props 向子组件通信，在父组件内可通过 this.$children 来读取子组件中的值。props 是单向绑定，不可在子组件中赋值。
  5 | #### 创建单文件组件
  6 | 在 src/components 目录下创建文件夹 common 用于存放公共组件，并在 common 下创建单文件组件 LeftNavItem.vue（子组件）
  7 | ```js
  8 | <template>
  9 |   <div>
 10 |     {{ childMes }}
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 |   export default {
 16 |     name: 'LeftNav',
 17 |     props: ['childMes'],
 18 |   }
 19 | </script>
 20 | 
 21 | <style lang="scss">
 22 | 
 23 | </style>
 24 | ```
 25 | 
 26 | #### 引入组件
 27 | 在 src/components/page/Blog.vue（父组件） 里引入组件 LeftNavItem.vue
 28 | ```js
 29 | <template>
 30 |   <div>
 31 |     <div class="child-area">
 32 |       <Leftnav :childMes="message"></Leftnav>
 33 |       <button @click="getChild">getChild</button>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 |   import Leftnav from '../common/LeftNavItem'
 40 |   export default {
 41 |     name: 'blog',
 42 |     data() {
 43 |       return {
 44 |         message: 'father message',
 45 |       }
 46 |     },
 47 |     components: {
 48 |       Leftnav
 49 |     },
 50 |     methods: {
 51 |       getChild() {
 52 |         console.log(this.$children[0].childMes);
 53 |       }
 54 |     }
 55 |   }
 56 | </script>
 57 | 
 58 | <style scoped>
 59 |   .father-area {
 60 |     background-color: aqua;
 61 |     padding: 10px;
 62 |   }
 63 |   .child-area {
 64 |     background-color: bisque;
 65 |     padding: 10px;
 66 |   }
 67 | </style>
 68 | ```
 69 | 
 70 | 这里父组件是 Blog.vue，子组件是 LeftNavItem.vue，父组件中调用子组件 
 71 | ```js
 72 | <Leftnav :childMes="message"></Leftnav>
 73 | ```
 74 | 其中 :childMes 中的 childMes 是要传递到子组件中的变量，即对应 LeftNavItem.vue 中 props 属性中的值，可以传递多个变量
 75 | ```js
 76 | props: ['childMes', 'childMes2', 'childMes3'],
 77 | ```
 78 | - props 中的变量和 data 的变量一样，直接使用 this.childMes 获取值，
 79 | - :childMes="message" 中的 "message" 即是父组件自身 data 中的变量，
 80 | 这样在父组件中更改 message 的值，子组件便会得到相应的更新。
 81 | - 方法 getChild 中的 this.$children[0].childMes 可以的到子组件中 childMes的值，但不可给其赋值，否值的话会报错，只能通过父组件中的 message 来更改值。
 82 | 
 83 | ### 子组件向父组件通信
 84 |     父组件向子组件传递事件方法，子组件通过 $emit 触发事件，回调给父组件。使用$parent可以访问父组件的数据
 85 | 在 LeftNavItem.vue 中增加代码
 86 | ```js
 87 | <template>
 88 |   <div>
 89 |     {{ childMes }}
 90 |     <button @click="toParent">toParent</button>
 91 |   </div>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'LeftNav',
 97 |     props: ['childMes'],
 98 |     methods: {
 99 |       toParent() {
100 |         this.$emit('mesFunc', 'from children');
101 |         console.log(this.$parent);
102 |       }
103 |     }
104 |   }
105 | </script>
106 | 
107 | <style lang="scss">
108 | 
109 | </style>
110 | ```
111 | Blog.vue 增加代码
112 | ```js
113 | <template>
114 |   <div>
115 |     <div class="father-area">
116 |       {{ fatherMes }}
117 |     </div>
118 |     <div class="child-area">
119 |       <Leftnav :childMes="message" @mesFunc="func"></Leftnav>
120 |       <button @click="getChild">getChild</button>
121 |     </div>
122 |   </div>
123 | </template>
124 | 
125 | <script>
126 |   import Leftnav from '../common/LeftNavItem'
127 |   export default {
128 |     name: 'blog',
129 |     data() {
130 |       return {
131 |         message: 'father message',
132 |         fatherMes: 'Hello World'
133 |       }
134 |     },
135 |     components: {
136 |       Leftnav
137 |     },
138 |     methods: {
139 |       getChild() {
140 |         console.log(this.$children[0].childMes);
141 |       },
142 |       func(data) {
143 |         console.log(data);
144 |         this.fatherMes = data;
145 |       }
146 |     }
147 |   }
148 | </script>
149 | 
150 | <style scoped>
151 |   .father-area {
152 |     background-color: aqua;
153 |     padding: 10px;
154 |   }
155 |   .child-area {
156 |     background-color: bisque;
157 |     padding: 10px;
158 |   }
159 | </style>
160 | ```
161 | - 父组件 Blog.vue 中通过
162 | 
163 |     ```js
164 |     <Leftnav :childMes="message" @mesFunc="func"></Leftnav>
165 |     ```
166 |     将事件方法 mesFunc 传递到子组件
167 | - 子组件 LeftNavItem.vue 中通过 $emit 可以触发事件，并传递数据
168 | 
169 |     ```js
170 |     this.$emit('mesFunc', 'from children')
171 |     // 第一个参数：父组件传递过来的事件
172 |     // 第二个参数：要传递到父组件的数据
173 |     ```
174 | 
175 | 
176 | # 状态管理（Vuex）
177 | [Vuex 是什么](https://vuex.vuejs.org/zh/)
178 | 
179 |     Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
180 | 以上是官方介绍，通俗点将有点类似全局变量，来管理各种状态。
181 | Vuex 中 Store 的模版化定义如下：
182 | ```js
183 | import Vue from 'vue'
184 | import Vuex from 'vuex'
185 | Vue.use(Vuex)
186 | const store = new Vuex.Store({
187 |   state: {
188 |   },
189 |   actions: {
190 |   },
191 |   mutations: {
192 |   },
193 |   getters: {
194 |   },  
195 |   modules: {
196 |   }
197 | })
198 | export default store
199 | ```
200 | - state：定义了应用状态的数据结构，"状态值"的存放处
201 | - action：定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用 store.commit() 来调用更改 Store 中的状态。可以在组件中使用 dispatch 来发出 actions
202 | - mutations：唯一允许更新应用状态的地方
203 | - getters：Getters 允许组件从 Store 中获取数据
204 | - modules：modules 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中
205 | 
206 | ## 初始化 state
207 | 在 scr 下新建文件夹 store，并在 store 里新建文件 index.js
208 | ```js
209 | import Vue from 'vue'
210 | import Vuex from 'vuex'
211 | 
212 | Vue.use(Vuex);
213 | 
214 | const state = {
215 |   currentArticle: {id: '1', title: '学习笔记', tag: 'vue'},   // 当前文章状态, 名字, 标签
216 |   count: 1
217 | }
218 | 
219 | // 使用常量替代 Mutation 事件类型
220 | const types = {
221 |   CURRENT_ARTICLE: 'CURRENT_ARTICLE',
222 |   COUNT: 'COUNT'
223 | }
224 | 
225 | const actions = {
226 |   currentArticle({commit}, obj) {
227 |     commit(types.CURRENT_ARTICLE, obj);
228 |   },
229 |   countIncrement({commit}, n) {
230 |     commit(types.COUNT, n);
231 |   }
232 | }
233 | 
234 | const mutations = {
235 |   [types.CURRENT_ARTICLE](state, obj) {
236 |     obj.id == undefined ? false : state.currentArticle.id = obj.id;
237 |     obj.title == undefined ? false : state.currentArticle.title = obj.title;
238 |     obj.tag == undefined ? false : state.currentArticle.tag = obj.tag;
239 |     obj.catalog == undefined ? false : state.currentArticle.catalog = obj.catalog;
240 |   },
241 |   [types.COUNT](state, n = 1) {
242 |     state.count += n;
243 |   }
244 | }
245 | 
246 | export default new Vuex.Store({
247 |   state,
248 |   actions,
249 |   mutations,
250 | })
251 | ```
252 | ---
253 | ### ES6 了解下
254 | 往下之前先了解下 ES6 的新语法 [ES6教程](http://es6.ruanyifeng.com/#docs/object)
255 | 
256 | 1. 对象的解构赋值，变量必须与属性同名，才能取到正确的值
257 |     ```js
258 |     let { foo, bar } = { foo: "aaa", bar: "bbb" };
259 |     foo // "aaa"
260 |     bar // "bbb"
261 |     
262 |     const actions = {
263 |       currentArticle({commit}, obj) {
264 |         commit(types.CURRENT_ARTICLE, obj);
265 |       },
266 |     }
267 |     // 等同于
268 |     const actions = {
269 |       currentArticle(context, obj) {
270 |         context.commit(types.CURRENT_ARTICLE, obj);
271 |       },
272 |     }
273 |     
274 |     // 传入 currentArticle 的第一个参数是一个与 store 实例具有相同方法和属性的 context 对象，可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters，这里只要用到 context.commit 这个方法，所以可以 
275 |     {commit} = context 即 commit = context.commit
276 |     ```
277 |     
278 | 2. ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值
279 |     ```js
280 |     const foo = 'bar';
281 |     const baz = {foo};
282 |     baz // {foo: "bar"}
283 |     
284 |     // 等同于
285 |     const baz = {foo: foo};
286 |     
287 |     export default new Vuex.Store({
288 |       state,
289 |       actions,
290 |       mutations,
291 |     })
292 |     
293 |     // 等同于
294 |     export default new Vuex.Store({
295 |       state: state,
296 |       actions: actions,
297 |       mutations: mutations
298 |     })
299 |     ```
300 | 3. 对象方法属性可以简写
301 |     ```js
302 |     const o = {
303 |       method() {
304 |         return "Hello!";
305 |       }
306 |     };
307 | 
308 |     // 等同于
309 | 
310 |     const o = {
311 |       method: function() {
312 |         return "Hello!";
313 |       }
314 |     };
315 |     ```
316 | 4. ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内 
317 |     ```js
318 |     let propKey = 'foo';
319 | 
320 |     let obj = {
321 |       [propKey]: true,
322 |       ['a' + 'bc']: 123
323 |     };
324 |     ```
325 |     所以
326 |     ```js
327 |     const mutations = {
328 |       [types.CURRENT_ARTICLE](state, obj) {
329 |   
330 |       },
331 |     }
332 |     // 等同于
333 |     const mutations = {
334 |       ['CURRENT_ARTICLE'](state, obj) {
335 |   
336 |       },
337 |     }
338 |     // 等同于
339 |     const mutations = {
340 |       CURRENT_ARTICLE: function(state, obj) {
341 |   
342 |       },
343 |     }
344 |     ```
345 | 
346 | ---
347 | ### 组件中使用 state
348 | 言归正传，我们定义一个 state 状态属性 currentArticle 对象，用来记录当前文章的 id，title，tags，catalog，还是使用 Blog.vue 和 LeftNavItem.vue 来测试
349 | ```js
350 | // Blog.vue
351 | <template>
352 |   <div>
353 |     <div class="father-area">
354 |       id: <input type="text" v-model="currentArticle.id">
355 |       title: <input type="text" v-model="currentArticle.title">
356 |       tag: <input type="text" v-model="currentArticle.tag">
357 |       count: <input type="text" v-model="count">
358 |     </div>
359 |     <div class="child-area">
360 |       <Leftnav></Leftnav>
361 |     </div>
362 |   </div>
363 | </template>
364 | 
365 | <script>
366 |   import Leftnav from '../common/LeftNavItem'
367 |   import store from '../../store/demo'
368 |   export default {
369 |     name: 'blog',
370 |     data() {
371 |       return {
372 |         message: 'father message'
373 |       }
374 |     },
375 |     components: {
376 |       Leftnav
377 |     },
378 |     methods: {
379 | 
380 |     },
381 |     computed: {
382 |       currentArticle() {
383 |         return store.state.currentArticle
384 |       },
385 |       count() {
386 |         return store.state.count
387 |       }
388 |     }
389 |   }
390 | </script>
391 | 
392 | <style scoped>
393 |   .father-area {
394 |     background-color: aqua;
395 |     padding: 10px;
396 |   }
397 |   .child-area {
398 |     background-color: bisque;
399 |     padding: 10px;
400 |   }
401 | </style>
402 | ```
403 | 我们可以在每个组件内引入 store  
404 | ```js
405 | import store from '../../store/index'
406 | ```
407 | 然后通过计算属性（命名符合规则即可）来获取状态值，可以看到，要获得多个状态时，将这些状态都声明为计算属性会有些重复和冗余，内置 mapState 辅助函数可以帮助我们生产计算属性。要想使用辅助函数，需要先将 store 实例注册到 vue 实例中，这样 store 实例会注入到跟组件下的所有组件，且子组件能通过 this.$store 访问到。
408 | 
409 | 大家 src/main.js 引入 store 实例，并在 vue 根实例中注册 store 选项
410 | ```js
411 | import Vue from 'vue'
412 | import App from './App'
413 | import router from './router'
414 | import ElementUI from 'element-ui'
415 | import 'element-ui/lib/theme-chalk/index.css'
416 | import axios from 'axios'
417 | import store from './store/index.js'
418 | 
419 | Vue.config.productionTip = false
420 | 
421 | Vue.use(ElementUI)
422 | Vue.prototype.$http = axios
423 | 
424 | /* eslint-disable no-new */
425 | new Vue({
426 |   el: '#app',
427 |   router,
428 |   store,
429 |   components: { App },
430 |   template: '<App/>'
431 | })
432 | ```
433 | 改写 src/components/page/Blog.vue 使用 mapState 辅助函数生产状态属性
434 | ```js
435 | <template>
436 |   <div>
437 |     <div class="father-area">
438 |       id: <input type="text" v-model="currentArticle.id">
439 |       title: <input type="text" v-model="currentArticle.title">
440 |       tag: <input type="text" v-model="currentArticle.tag">
441 |       count: <input type="text" v-model="count">
442 |     </div>
443 |     <div class="child-area">
444 |       <Leftnav></Leftnav>
445 |     </div>
446 |   </div>
447 | </template>
448 | 
449 | <script>
450 |   import Leftnav from '../common/LeftNavItem'
451 |   import { mapState } from 'vuex';
452 |   export default {
453 |     name: 'blog',
454 |     data() {
455 |       return {
456 |         message: 'father message'
457 |       }
458 |     },
459 |     components: {
460 |       Leftnav
461 |     },
462 |     methods: {
463 | 
464 |     },
465 |     computed: mapState(['currentArticle', 'count'])
466 |   }
467 | </script>
468 | 
469 | <style scoped>
470 |   .father-area {
471 |     background-color: aqua;
472 |     padding: 10px;
473 |   }
474 |   .child-area {
475 |     background-color: bisque;
476 |     padding: 10px;
477 |   }
478 | </yle>
479 | ```
480 | mapState 除了可以传入数组外，还可传入对象
481 | ```js
482 | // 1. 直接只用函数返回状态住
483 | computed: mapState({
484 |   currentArticle: state => state.currentArticle,
485 |   count: state => state.count
486 | })
487 | 
488 | // 2. 使用别名对应状态属性，对象中的值 value 对应等同于 state => state.value
489 | // key 值是状态值的别名，value 是 state 中的状态值，不能简写成 {currentArticle, count}，必须有对应的状态属性
490 | computed: mapState({
491 |   currentArticle: 'currentArticle',
492 |   count: 'count'
493 | })
494 | 
495 | // 3. 因为 computed 中也可能会有其他计算属性，不只有 mapState，要将它与其他计算属性混合使用，就要用到对象的扩展运算符（...），用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，例如：
496 | let z = { a: 3, b: 4};
497 | let n = { ...z }; // 等同于 n = Object.assign({}, z)
498 | n // ( a: 3, b: 4 )
499 | 
500 | // mapState 函数返回的是一个对象，所以混合其他计算属性：
501 | computed: {
502 |   otherComputed() {
503 | 
504 |   },
505 |   ...mapState(['currentArticle', 'count']) // 也可传入对象
506 | }
507 | ```
508 | 
509 | ## Action
510 |     Action 提交的是 mutation，而不是直接修改状态
511 | ### 分发 Action
512 | Action 通过 store.dispatch 方法触发
513 | 在 Blog.vue 中增加一个按钮和一个方法来增加 count 的值
514 | ```js
515 | <template>
516 |   <div>
517 |     <div class="father-area">
518 |       id: <input type="text" v-model="currentArticle.id">
519 |       title: <input type="text" v-model="currentArticle.title">
520 |       tag: <input type="text" v-model="currentArticle.tag">
521 |       count: <input type="text" v-model="count">
522 |       <button @click="countAdd">+</button>
523 |     </div>
524 |     <div class="child-area">
525 |       <Leftnav></Leftnav>
526 |     </div>
527 |   </div>
528 | </template>
529 | 
530 | <script>
531 |   import Leftnav from '../common/LeftNavItem'
532 |   import { mapState } from 'vuex';
533 |   export default {
534 |     name: 'blog',
535 |     data() {
536 |       return {
537 |         message: 'father message'
538 |       }
539 |     },
540 |     components: {
541 |       Leftnav
542 |     },
543 |     methods: {
544 |       countAdd() {
545 |         this.$store.dispatch('countIncrement');
546 |       }
547 |     },
548 |     computed: mapState(['currentArticle', 'count'])
549 |   }
550 | </script>
551 | 
552 | <style scoped>
553 |   .father-area {
554 |     background-color: aqua;
555 |     padding: 10px;
556 |   }
557 |   .child-area {
558 |     background-color: bisque;
559 |     padding: 10px;
560 |   }
561 | </style>
562 | ```
563 | 点击 + 号后调用方法 countAdd 触发 countIncrement 的 Action，接着触发类型为 COUNT 的 mutation，完成状态的修改。根据 action 中 countIncrement 方法的定义，可以传入第二个参数，this.$store.dispatch('countIncrement', 3)。
564 | 
565 | ### 辅助函数 mapAction
566 | Action 也有辅助函数 mapAction 将组件的 methods 映射为 store.dispatch（需要现在根结点注入 store）
567 | ```js
568 | <template>
569 |   <div>
570 |     <div class="father-area">
571 |       id: <input type="text" v-model="currentArticle.id">
572 |       title: <input type="text" v-model="currentArticle.title">
573 |       tag: <input type="text" v-model="currentArticle.tag">
574 |       count: <input type="text" v-model="count">
575 |       <button @click="countAdd">+</button>
576 |     </div>
577 |     <div class="child-area">
578 |       <Leftnav></Leftnav>
579 |     </div>
580 |   </div>
581 | </template>
582 | 
583 | <script>
584 |   import Leftnav from '../common/LeftNavItem'
585 |   import { mapState, mapActions } from 'vuex';
586 |   export default {
587 |     name: 'blog',
588 |     data() {
589 |       return {
590 |         message: 'father message'
591 |       }
592 |     },
593 |     components: {
594 |       Leftnav
595 |     },
596 |     methods: {
597 |       countAdd() {
598 |         this.countIncrement(2);
599 |       },
600 |       ...mapActions(['countIncrement']) // 将 this.countIncrement 映射为 this.$store.dispatch('countIncrement)
601 |     },
602 |     computed: mapState(['currentArticle', 'count'])
603 |   }
604 | </script>
605 | 
606 | <style scoped>
607 |   .father-area {
608 |     background-color: aqua;
609 |     padding: 10px;
610 |   }
611 |   .child-area {
612 |     background-color: bisque;
613 |     padding: 10px;
614 |   }
615 | </style>
616 | ```
617 | 和 mapStata 类似，mapActions 也可以传入对象，使用别名来代替 countIncrement
618 | ```js
619 | methods: {
620 |   countAdd() {
621 |     this.add(2);
622 |   },
623 |   ...mapActions({
624 |     add: 'countIncrement'
625 |   })
626 | }
627 | ```
628 | 我个人觉得 vuex 中的 state、actions 比较难理解，所以笔记就记下这两块，其他官方文档应该可以看明白，和这两个用法也都比较类似。
629 | 
630 | ## 模块化 store
631 |     对于大型项目，一般把 vuex 相关代码分割到模块中
632 | 在 src/store 下新建文件
633 | - index.js // 初始化 state，导出 Vuex.Store 实例
634 | - actions.js // acitons 对象
635 | - mutation_type.js // 常量化 mutation 类型
636 | - mutation.js // mutation 对象
637 | 
638 | ```js
639 | // index.js
640 | import Vue from 'vue'
641 | import Vuex from 'vuex'
642 | import actions from './action'
643 | import mutations from './mutation'
644 | 
645 | Vue.use(Vuex);
646 | 
647 | const state = {
648 |   currentArticle: {id: '1', title: '学习笔记', tag: 'vue'},
649 |   count: 1
650 | }
651 | 
652 | export default new Vuex.Store({
653 |   state,
654 |   actions,
655 |   mutations,
656 | })
657 | ```
658 | 
659 | ```js
660 | // actions.js
661 | import * as types from './mutation_type'
662 | 
663 | export default {
664 |   currentArticle({commit}, obj) {
665 |     commit(types.CURRENT_ARTICLE, obj);
666 |   },
667 |   countIncrement({commit}, n) {
668 |     commit(types.COUNT, n);
669 |   }
670 | }
671 | ```
672 | 
673 | ```js
674 | // mutation_type.js
675 | export const CURRENT_ARTICLE = 'CURRENT_ARTICLE'
676 | export const COUNT = 'COUNT'
677 | ```
678 | 
679 | ```js
680 | // mutation.js
681 | import * as types from './mutation_type'
682 | 
683 | export default {
684 |   [types.CURRENT_ARTICLE](state, obj) {
685 |     obj.id == undefined ? false : state.currentArticle.id = obj.id;
686 |     obj.title == undefined ? false : state.currentArticle.title = obj.title;
687 |     obj.tag == undefined ? false : state.currentArticle.tag = obj.tag;
688 |     obj.catalog == undefined ? false : state.currentArticle.catalog = obj.catalog;
689 |   },
690 |   [types.COUNT](state, n = 1) {
691 |     state.count += n;
692 |   }
693 | }
694 | ```
695 | 然后在 main.js 中注册 Store 实例即可
696 | ```js
697 | // main.js
698 | import Vue from 'vue'
699 | import App from './App'
700 | import router from './router'
701 | import store from './store/index.js'
702 | 
703 | Vue.config.productionTip = false
704 | 
705 | /* eslint-disable no-new */
706 | new Vue({
707 |   el: '#app',
708 |   router,
709 |   store,
710 |   components: { App },
711 |   template: '<App/>'
712 | })
713 | ```


--------------------------------------------------------------------------------
/articles/vue+node+mysql搭建个人博客（一）.md:
--------------------------------------------------------------------------------
  1 | # 准备工作
  2 | 
  3 | ## 安装node，这是必须的
  4 | 新版node自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西。
  5 | 验证是否安装成功：  
  6 | ![验证是否安装成功](http://otr9a8wg0.bkt.clouddn.com/cmder%E9%AA%8C%E8%AF%81node_npm_vue.jpg)  
  7 | 推荐windows下终端工具：[cmder](http://cmder.net/)
  8 | 
  9 | ## npm安装vue-cli
 10 | 使用npm下载依赖包是可能有些慢，所以这里可以换上淘宝的镜像cnpm。  
 11 | 打开终端(可以在任何位置)，输入  
 12 | ```npm install cnpm -g --registry=https://registry.npm.taobao.org```   
 13 | cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。  
 14 | 现在来安装vue-cli：输入  
 15 | ```npm install -g vue-cli``` 或者 ```cnpm install -g vue-cli```  
 16 | 命令中 -g 表示全局安装，会安装到node安装目录下的node_modules文件夹下，看看里面是不是多了vue-cli文件夹，如果没有，看看npm模块的安装路径
 17 | ```npm config ls``` 
 18 | 可以查看模块的安装路径 prefix，具体设置请自行百度。
 19 | 
 20 | ![npm模块安装路径](http://otr9a8wg0.bkt.clouddn.com/npm%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E8%B7%AF%E5%BE%84.jpg) 
 21 | 
 22 | ## vue-cli快速构建项目
 23 | - 选定一个你喜欢的文件夹，进入该文件夹下，之后创建的项目目录就在文件夹下
 24 | - 打开终端，进入目标文件夹，以 D:\ 为例，使用webpack模板构建项目，输入 
 25 | ```vue init webpack my-blog```  
 26 | 此时会自动从github下载文件目录到目标文件夹，上不了github的只能想办法了，从别处把构建好的文件全部拷过来也是可以的。
 27 | 
 28 | ## 运行项目
 29 | - 1、进入my-blog文件夹，首先可以看到文件夹下有一个package.json文件，这个文件很重要，里面记录的项目的一些信息和运行成功运行项目必须的一些依赖包，之后安装的一些包也要记录到里面，方便别人拷贝过来你的项目时安装依赖，顺利运行。
 30 | - 2、新版本的 vue-cli 在执行 ```vue init webpack my-blog``` 第9步时会有一个选择：
 31 |     ![npm i for pro](http://otr9a8wg0.bkt.clouddn.com/npm%20i%20for%20pro.jpg)  
 32 |     如果选择了Yes，则可跳过步骤3，如果选择了No，则按照步骤3进入文件夹安装依赖。
 33 | - 3、终端输入（要在此文件夹下）输入：```cnpm install``` install可以简写为 i 即 ```cnpm i```，cnpm安装应该挺快的，安装完成后会看到文件夹下多了个node_modules文件夹，里面就是运行项目所需要的一些依赖包，可以看到此文件夹虽然不大，但是里面文件个数有上千个，所以拷贝起来也是挺麻烦的，所以把依赖包记录到package.json里面，别人只要重新下载安装一下就好了，上传到github上也方便。
 34 | - 4、启动项目：输入 ```npm run dev```，等待浏览器自动打开。  
 35 |  npm run dev 执行的命令即是package.json里 scripts下的dev：node build/dev-server.js
 36 | 	```
 37 | 	"scripts": {
 38 | 			"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 39 | 			"start": "npm run dev",
 40 | 			"build": "node build/build.js"
 41 | 		},
 42 | 	```
 43 |   ![构建项目](http://otr9a8wg0.bkt.clouddn.com/vue%20init%20webpack.jpg) 
 44 | 
 45 |   默认端口为8080，若此时8080端口被占用则会出错
 46 |   ```
 47 |   ...
 48 |   > Starting dev server...
 49 |   events.js:160
 50 |   throw er; // Unhandled 'error' event
 51 |         ^
 52 |   Error: listen EADDRINUSE :::8080  
 53 |   .....
 54 |   ```
 55 |   可以在D:\\my-blog\\config\\index.js里修改端口  
 56 |   ```
 57 |   dev: {
 58 | 
 59 |       // Paths
 60 |       assetsSubDirectory: 'static',
 61 |       assetsPublicPath: '/',
 62 |       proxyTable: {},
 63 | 
 64 |       // Various Dev Server settings
 65 |       host: 'localhost', // can be overwritten by process.env.HOST
 66 |       port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 67 |       autoOpenBrowser: false,
 68 |       errorOverlay: true,
 69 |       notifyOnErrors: true,
 70 |       poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 71 | 
 72 |       // https://webpack.js.org/configuration/devtool/#development
 73 |       devtool: 'cheap-module-eval-source-map',
 74 | 
 75 |       // If you have problems debugging vue-files in devtools,
 76 |       // set this to false - it *may* help
 77 |       // https://vue-loader.vuejs.org/en/options.html#cachebusting
 78 |       cacheBusting: true,
 79 | 
 80 |       cssSourceMap: true
 81 |     },
 82 |   ```
 83 |   启动成功后：
 84 |     ```
 85 |   ...
 86 |   DONE  Compiled successfully in 2597ms                                                          
 87 |   I  Your application is running here: http://localhost:8080
 88 |     ``` 
 89 |    ![启动成功](http://otr9a8wg0.bkt.clouddn.com/17-7-28/73659113.jpg)
 90 | 
 91 | 
 92 | # 安装需要用到的包
 93 | 首先安装项目要用到的一些组件，也可以之后遇到什么需要的再安装
 94 | - element-ui：饿了么前段组件库，可以帮助快速建立起前段页面，少些很多样式
 95 | - vuex：vue状态管理
 96 | - axios：基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
 97 | - mysql：连接mysql数据库
 98 | - express：
 99 | - body-parser：
100 | - node-sass：sass-loader依赖
101 | - sass-loader：解析sass/scss文件
102 | 
103 | 可以依次安装( npm 安装很慢的可以使用 cnpm )：  
104 | ```
105 | npm install element-ui --save  （回车）
106 | npm install vuex --save  （回车）
107 | npm install axios --save  （回车）
108 | npm install mysql --save  （回车）
109 | npm install express --save  （回车）
110 | npm install body-parser --save  （回车）
111 | npm install node-sass --save-dev  （回车）
112 | npm install sass-loader --save-dev  （回车）
113 | ```
114 | 也可以一起安装：
115 | ```
116 | npm install element-ui vuex axios mysql express body-parser --save  （回车）
117 | npm install node-sass sass-loader --save-dev  （回车）
118 | ```
119 | --save 意思就是将依赖记录在 package.json 里的 dependencies 下，之后生产环境也是需要这些包的，--sava-dev 是将依赖记录在 package.json 里的 devDependencies 下，只是开发环境需要这些包，方便开发调试，而生产环境不需要。（-S 是 --save 的缩写，-D 是 --save-dev 的缩写）
120 | ```
121 |   "dependencies": {
122 |     "axios": "^0.18.0",
123 |     "body-parser": "^1.18.3",
124 |     "element-ui": "^2.3.9",
125 |     "express": "^4.16.3",
126 |     "mysql": "^2.15.0",
127 |     "vue": "^2.5.2",  // 项目构建完就有了
128 |     "vue-router": "^3.0.1",  // 项目构建完就有了 当时"Install vue-router"选了Yes
129 |     "vuex": "^3.0.1"
130 |   },
131 |   "devDependencies": {
132 |     ...
133 |     "node-sass": "^4.9.0",
134 |     "sass-loader": "^7.0.1",
135 |     ...
136 |   },
137 | ```
138 | 
139 | ```
140 | 使用scss/sass前必须先安装node-sass、sass-loader，否则运行npm run dev时会报错
141 | <style lang="scss" scoped>
142 | 	$bgColor: #F90;
143 | 	.blog-home {
144 | 		background: $bgColor
145 | 	}
146 | </style>
147 | ```
148 | 
149 | # 调用后台接口 ajax 请求数据
150 | 
151 | 1、打开入口js文件main.js，引入element-ui组件来搭建页面 [element-ui 查看官网文档](http://element.eleme.io/#/zh-CN/component/installation)。
152 | ```
153 | // The Vue build version to load with the `import` command
154 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
155 | import Vue from 'vue'
156 | import App from './App'
157 | import router from './router'
158 | import axios from 'axios'
159 | import ElementUI from 'element-ui'
160 | import 'element-ui/lib/theme-chalk/index.css'
161 | 
162 | Vue.config.productionTip = false
163 | Vue.use(ElementUI);
164 | Vue.prototype.$http = axios;
165 | 
166 | /* eslint-disable no-new */
167 | new Vue({
168 | 	el: '#app',
169 | 	router,
170 | 	components: { App },
171 | 	template: '<App/>'
172 | })
173 | ```
174 | 其中 axios 用来完成 ajax 请求，
175 | ```
176 | import axios from 'axios'
177 | axios.get('/', function() {});
178 | axios.post('/', function() {});
179 | 
180 | // 将 axios 添加的 Vue 原型上后就不需要再在每个需要使用它的页面引入了
181 | Vue.prototype.$http = axios;
182 | $http.get('/', function() {});
183 | $http.post('/', function() {});
184 | ```
185 | 
186 | 2、每个页面都相当于一个组件，文件以.vue结尾，第一次启动成功时看到的页面就是组件Hello.vue，路径src/components/Hello.vue。路由地址在 src/router/index.js 中配置，打开修改我们待会自己要用的：
187 | ```
188 | import Vue from 'vue'
189 | import Router from 'vue-router'
190 | import HelloWorld from '@/components/HelloWorld'
191 | import Home from '@/components/pages/Home'
192 | import Blog from '@/components/pages/Blog'
193 | 
194 | Vue.use(Router)
195 | 
196 | export default new Router({
197 |   routes: [
198 |     // {
199 |     //   path: '/',
200 |     //   name: 'HelloWorld',
201 |     //   component: HelloWorld
202 |     // },
203 |     {
204 |       path: '/', // http://localhost:8080/#/
205 |       name: 'Home',
206 |       component: Home
207 |     },
208 |     {
209 |       path: '/blog', // http://localhost:8080/#/blog
210 |       name: 'Blog',
211 |       component: Blog
212 |     }
213 |   ]
214 | })
215 | ```
216 | 上面引入了三个组件HelloWorld.vue(默认)，Home.vue，Blog.vue。
217 | path是页面地址，name可以随便写，component 是 import 的组件名。
218 | 
219 | 3、在 scr/components 下新建文件夹 pages，在 pages 下新建文件 Home.vue，Blog.vue，里面按规则要求写好内容，运行工程打开页面 http://localhost:8080/#/、http://localhost:8080/#/blog 即可看到相应的内容。
220 | 在 Blog.vue 中输入下面内容用来后面测试调用接口
221 | ```
222 | <template>
223 |   <div class="">
224 |     <el-button type="primary" @click="getArticle">调用后台接口</el-button>
225 |     <el-input v-model="inpContent"></el-input>
226 |   </div>
227 | </template>
228 | 
229 | <script>
230 | export default {
231 |   name: 'blog',
232 |   data() {
233 |     return {
234 |       inpContent: 'Blog'
235 |     }
236 |   },
237 |   methods: {
238 |     getArticle() {
239 |       this.$http.get('/api/getArticle')
240 |         .then( (res) => {
241 |           console.log('res', res);
242 |           this.inpContent = res.data.data;
243 |         })
244 |     }
245 |   }
246 | }
247 | </script>
248 | ```
249 | 4、后端使用Express做服务端提供数据接口，不了解的可以先去官网文档大致了解一下 [Express官网](http://expressjs.com/en/starter/installing.html)，在根目录my-blog下创建文件夹server用来存放后端数据库配置数据和相关方法api。  
250 | server文件夹下创建文件：index.js  
251 | ```
252 | const path = require('path');
253 | const express = require('express');
254 | const app = express();
255 | 
256 | app.get('/api/getArticle', (req, res, next) => {
257 |   res.json({
258 |       data: '后台返回结果 getArticle'
259 |     })
260 | })
261 | 
262 | // 监听端口
263 | app.listen(3000);
264 | console.log('success listen at port:3000......');
265 | ```
266 | 另开一个 CMD 窗口，进入目录 D:\my-blog\server
267 | ```
268 | D:\my-blog\server
269 | $ node index.js
270 | success listen at port:3000......
271 | ```
272 | 5、打开 http://localhost:8080/#/blog 点击按钮"调用后台接口"，会发现控制台报错  
273 | ![调后台接口报错_跨域](http://otr9a8wg0.bkt.clouddn.com/%E8%B0%83%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%E6%8A%A5%E9%94%99_%E8%B7%A8%E5%9F%9F.jpg)   
274 | 这是因为我们工程运行的端口是8080，而后端程序运行的端口是3000，所以是跨域请求，要想请求成功，就要先在配置里设置一下代理
275 | 
276 | 6、打开文件 /config/index.js，将 proxyTable 项设置如下  
277 | ```
278 | proxyTable: {
279 |   '/api': {
280 |     target: 'http://localhost:3000/api',
281 |     changeOrigin: true,
282 |     pathRewrite: {
283 |       '^/api': ''
284 |     }
285 |   }
286 | }
287 | 
288 | ```
289 | - '/api': 表示所有以 /api 为开头的请求，如我们的请求 this.$http.get('/api/getArticle')
290 | - target: 将所有以 /api 为开头请求转发到 http://localhost:3000/api
291 | - changeOrigin: true/false, Default: false，本地会虚拟一个服务端接收你的请求并代你发送该请求(不太明白，false 试了也可以)
292 | - pathRewrite: 重写地址。 '^/api': '' 表示将以 /api 开头的请求的地址中的 '/api' 替换为 ''，  
293 |     即 path = path.replace(/^\/api/, '')  
294 |     eg: this.\$http.get('/api/getArticle')  
295 |     path = '/api/getArticle'  
296 |     path = path.replace(/^\/api/, '') = '/getArticle'  
297 |     这样目标请求就变成了 http://localhost:3000/api/getArticle ,
298 |     如果不写 pathRewrite， 请求则为 http://localhost:3000/api/api/getArticle  所以也可以这样
299 |       ```
300 |       proxyTable: {
301 |         '/api': {
302 |           target: 'http://localhost:3000',
303 |           changeOrigin: true,
304 |         }
305 |       }
306 |       ```
307 |       最后请求同样转发为 http://localhost:3000/api/getArticle , 总之要和后台的接口路径对应上，不过还是建议加上 pathRewrite，方便同类方法调用
308 |       ```
309 |       // server/index.js
310 |       const path = require('path');
311 |       const express = require('express');
312 |       const router = express.Router();
313 |       const app = express();
314 |     
315 |       app.use('/add', router);
316 |       app.use('/del', router);
317 |     
318 |       router.get('/getArticle1', (req, res, next) => {
319 |         api.getArticle(req, res, next);
320 |       })
321 |       router.get('/getArticle2', (req, res, next) => {
322 |         api.getArticle(req, res, next);
323 |       })
324 |     
325 |       router.get('/delArticle1', (req, res, next) => {
326 |         api.getArticle(req, res, next);
327 |       })
328 |       router.get('/delArticle2', (req, res, next) => {
329 |         api.getArticle(req, res, next);
330 |       })
331 |     
332 |       // 监听端口
333 |       app.listen(3000);
334 |       console.log('success listen at port:3000......');
335 |     
336 |       ----------------------------------------------
337 |     
338 |       // congif/index.js
339 |       proxyTable: {
340 |         '/add': {
341 |           target: 'http://localhost:3000/add',
342 |           changeOrigin: true,
343 |           pathRewrite: {
344 |               '^/add': ''
345 |             }
346 |         },
347 |         '/del': {
348 |           target: 'http://localhost:3000/del',
349 |           changeOrigin: true,
350 |           pathRewrite: {
351 |               '^/del': ''
352 |             }
353 |         },
354 |       },
355 |       ```
356 | 
357 | 7、正确返回数据
358 | ![](http://otr9a8wg0.bkt.clouddn.com/%E5%90%8E%E5%8F%B0%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C.jpg)
359 | 
360 | 
361 | # 数据库存取数据（Mysql）
362 |     Mysql可视化工具我用的是Navicat For Mysql，新建连接，数据库，数据表，查询等都可在其中完成，当然熟悉命令的都可以在cmd中命令完成 
363 | ### Mysql 新建连接
364 | ![新建数据库](http://otr9a8wg0.bkt.clouddn.com/%E6%96%B0%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93Mysql.jpg)
365 | ### 连接数据库
366 | 在 src/server 下新建文件 db.js，写入下面代码
367 | ```js
368 | const mysql = require('mysql');
369 | 
370 | const mysqlConfig = {
371 |   host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
372 |   user: 'root', 
373 |   password: '8023', // root 密码
374 |   database: 'myBlog', // 数据库名
375 |   port: '3306'
376 | }
377 | const pool = mysql.createPool({
378 |   host: mysqlConfig.host,
379 |   user: mysqlConfig.user,
380 |   password: mysqlConfig.password,
381 |   database: mysqlConfig.database,
382 |   port: mysqlConfig.port,
383 |   multipleStatements: true    // 多语句查询
384 | });
385 | 
386 | var setValue = function() {
387 |   pool.getConnection((err, connection) => {
388 |     var sql = 'INSERT INTO test(id, name) VALUES (1, "blog")'
389 |     connection.query(sql, (err, result) => {
390 |         console.log(result);
391 |         connection.release();
392 |     })
393 |   })
394 | }
395 | 
396 | setValue();
397 | ```
398 | 引入包 mysql，创建连接池 mysql.createPool，sql语法和在命令中使用的形同，拼成字符串即可，在 server 目录下运行 db.js 文件，刷新数据库
399 | ![添加数据](http://otr9a8wg0.bkt.clouddn.com/dbSetValue.jpg)
400 | 
401 | 同理可增删查改数据
402 | ```js
403 | // 查询数据，？ 的值填入 connection.jquery 的第二个参数（数组）中
404 | // WHERE id = ? AND name = ? ---> connetion.query(sql, [1, "blog"], () => )
405 | var getValue = function() {
406 |   pool.getConnection((err, connection) => {
407 |     var sql = 'SELECT * FROM test WHERE id = ?'
408 |     connection.query(sql, [1], (err, result) => {
409 |         console.log(result);
410 |         connection.release();
411 |     })
412 |   })
413 | }
414 | getValue();
415 | 
416 | /*
417 | $ node db.js
418 | [ RowDataPacket { id: '1', name: 'blog' } ]
419 | */
420 | 
421 | // 更新数据
422 | var updValue = function() {
423 |   pool.getConnection((err, connection) => {
424 |     var sql = 'UPDATE test SET name = ? WHERE id = ?'
425 |     connection.query(sql, [22, 1], (err, result) => {
426 |         console.log(result);
427 |         connection.release();
428 |     })
429 |   })
430 | }
431 | updValue();
432 | 
433 | // 删除数据
434 | var delValue = function() {
435 |   pool.getConnection((err, connection) => {
436 |     var sql = 'DELETE FROM test WHERE id = ?'
437 |     connection.query(sql, [1], (err, result) => {
438 |         console.log(result);
439 |         connection.release();
440 |     })
441 |   })
442 | }
443 | delValue();
444 | ```
445 | 结合前面的 ajax 请求数据，我们便可以轻松的对数据库中的数据进行操作了，下面来模块化这些操作。
446 | ### 模块化后端代码
447 | 在 /server 下创建文件
448 | - db.js 数据库连接配置
449 | - api.js 连接数据库，各种方法实现
450 | - sqlMap.js sql语句
451 | - router.js 后端 express 路由配置
452 | - index.js 后端入口文件，启动后端服务
453 | 
454 | 1、db.js
455 | ```js
456 | // 数据库连接配置
457 | module.exports = {
458 |   mysql: {
459 |     host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
460 |     user: 'root', 
461 |     password: '8023', // root 密码
462 |     database: 'myBlog', // 数据库名
463 |     port: '3306'
464 |   }
465 | }
466 | ```
467 | 2、api.js
468 | ```js
469 | const mysql = require('mysql');
470 | const dbConfig = require('./db');
471 | const sqlMap = require('./sqlMap');
472 | 
473 | const pool = mysql.createPool({
474 |   host: dbConfig.mysql.host,
475 |   user: dbConfig.mysql.user,
476 |   password: dbConfig.mysql.password,
477 |   database: dbConfig.mysql.database,
478 |   port: dbConfig.mysql.port,
479 |   multipleStatements: true    // 多语句查询
480 | });
481 | 
482 | module.exports = {
483 |   getValue(req, res, next) {
484 |     var id = req.query.id;
485 |     pool.getConnection((err, connection) => {
486 |       var sql = sqlMap.getValue;
487 |       connection.query(sql, [id], (err, result) => {
488 |           res.json(result);
489 |           connection.release();
490 |       })
491 |     })
492 |   },
493 |   setValue(req, res, next) {
494 |     console.log(req.body);
495 |     var id = req.body.id, name = req.body.name;
496 |     pool.getConnection((err, connection) => {
497 |       var sql = sqlMap.setValue;
498 |       connection.query(sql, [name, id], (err, result) => {
499 |           res.json(result);
500 |           connection.release();
501 |       })
502 |     })
503 |   }
504 | }
505 | 
506 | ```
507 | 3、sqlMap.js
508 | ```js
509 | var sqlMap = {
510 |   getValue: 'SELECT * FROM test WHERE id = ?',
511 |   setValue: 'UPDATE test SET name = ? WHERE id = ?'
512 | }
513 | 
514 | module.exports = sqlMap;
515 | ```
516 | 4、router.js
517 | ```js
518 | const express = require('express');
519 | const router = express.Router();
520 | const api = require('./api');
521 | 
522 | router.get('/getValue', (req, res, next) => {
523 |   api.getValue(req, res, next);
524 | });
525 | 
526 | router.post('/setValue', (req, res, next) => {
527 |   api.setValue(req, res, next);
528 | });
529 | 
530 | module.exports = router;
531 | ```
532 | 5、index.js
533 | ```js
534 | const routerApi = require('./router');
535 | const bodyParser = require('body-parser'); // post 数据是需要
536 | const express = require('express');
537 | const app = express();
538 | 
539 | app.use(bodyParser.json());
540 | 
541 | // 后端api路由
542 | app.use('/api', routerApi);
543 | 
544 | // 监听端口
545 | app.listen(3000);
546 | console.log('success listen at port:3000......');
547 | ```
548 | 
549 | 在 /scr/components/pages/Blog.vue 文件中写入下面代码测试
550 | ```js
551 | <template>
552 |   <div class="">
553 |     <el-input v-model="inpContent"></el-input>
554 |     <el-button type="primary" @click="getValue">获取数据</el-button>
555 |     <el-button type="primary" @click="setValue">添加数据</el-button>
556 |   </div>
557 | </template>
558 | 
559 | <script>
560 | export default {
561 |   name: 'blog',
562 |   data() {
563 |     return {
564 |       inpContent: ''
565 |     }
566 |   },
567 |   methods: {
568 |     getValue() {
569 |       // axios.get('/', {params: ''})
570 |       this.$http.get('/api/getValue', {
571 |         params: {id: 1}
572 |       }).then( (res) => {
573 |         console.log('res', res);
574 |         this.inpContent = res.data[0].name;
575 |       })
576 |     },
577 |     setValue() {
578 |       // axios.post('/', {})
579 |       this.$http.post('/api/setValue', {
580 |         id: 1, name: this.inpContent
581 |       }).then( (res) => {
582 |         console.log('res', res);
583 |       })
584 |     }
585 |   }
586 | }
587 | </script>
588 | ```
589 | - get：第二个参数（可选）是一个对象，以 params 为属性，将条件数据传到后台，后台通过 req.query 可以获得 params 对应的值
590 | - post：第二个参数（可选）也是一个对象，属性任意，将提交数据传到后台，后台通过 req.body 可以获得这个对象，req.body 数据的解析需要用到包 body-parser，在 index.js 中引入 use 即可。
591 | 
592 | 打开两个命令窗口分别运行工程，运行后端服务，即可进行测试：
593 | ```js
594 | D:\my-blog
595 | $ npm run dev
596 | ```
597 | ```js
598 | D:\my-blog\server
599 | $ node index.js
600 | ```


--------------------------------------------------------------------------------
/articles/5d2c3ebf6345ec09e0d99d35_555.md:
--------------------------------------------------------------------------------
  1 | # 准备工作
  2 | 
  3 | ## 安装node，这是必须的
  4 | 新版node自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西。
  5 | 验证是否安装成功：  
  6 | ![验证是否安装成功](http://otr9a8wg0.bkt.clouddn.com/cmder%E9%AA%8C%E8%AF%81node_npm_vue.jpg)  
  7 | 推荐windows下终端工具：[cmder](http://cmder.net/)
  8 | 
  9 | ## npm安装vue-cli
 10 | 使用npm下载依赖包是可能有些慢，所以这里可以换上淘宝的镜像cnpm。  
 11 | 打开终端(可以在任何位置)，输入  
 12 | ```npm install cnpm -g --registry=https://registry.npm.taobao.org```   
 13 | cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。  
 14 | 现在来安装vue-cli：输入  
 15 | ```npm install -g vue-cli``` 或者 ```cnpm install -g vue-cli```  
 16 | 命令中 -g 表示全局安装，会安装到node安装目录下的node_modules文件夹下，看看里面是不是多了vue-cli文件夹，如果没有，看看npm模块的安装路径
 17 | ```npm config ls``` 
 18 | 可以查看模块的安装路径 prefix，具体设置请自行百度。
 19 | 
 20 | ![npm模块安装路径](http://otr9a8wg0.bkt.clouddn.com/npm%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E8%B7%AF%E5%BE%84.jpg) 
 21 | 
 22 | ## vue-cli快速构建项目
 23 | - 选定一个你喜欢的文件夹，进入该文件夹下，之后创建的项目目录就在文件夹下
 24 | - 打开终端，进入目标文件夹，以 D:\ 为例，使用webpack模板构建项目，输入 
 25 | ```vue init webpack my-blog```  
 26 | 此时会自动从github下载文件目录到目标文件夹，上不了github的只能想办法了，从别处把构建好的文件全部拷过来也是可以的。
 27 | 
 28 | ## 运行项目
 29 | - 1、进入my-blog文件夹，首先可以看到文件夹下有一个package.json文件，这个文件很重要，里面记录的项目的一些信息和运行成功运行项目必须的一些依赖包，之后安装的一些包也要记录到里面，方便别人拷贝过来你的项目时安装依赖，顺利运行。
 30 | - 2、新版本的 vue-cli 在执行 ```vue init webpack my-blog``` 第9步时会有一个选择：
 31 |     ![npm i for pro](http://otr9a8wg0.bkt.clouddn.com/npm%20i%20for%20pro.jpg)  
 32 |     如果选择了Yes，则可跳过步骤3，如果选择了No，则按照步骤3进入文件夹安装依赖。
 33 | - 3、终端输入（要在此文件夹下）输入：```cnpm install``` install可以简写为 i 即 ```cnpm i```，cnpm安装应该挺快的，安装完成后会看到文件夹下多了个node_modules文件夹，里面就是运行项目所需要的一些依赖包，可以看到此文件夹虽然不大，但是里面文件个数有上千个，所以拷贝起来也是挺麻烦的，所以把依赖包记录到package.json里面，别人只要重新下载安装一下就好了，上传到github上也方便。
 34 | - 4、启动项目：输入 ```npm run dev```，等待浏览器自动打开。  
 35 |  npm run dev 执行的命令即是package.json里 scripts下的dev：node build/dev-server.js
 36 | 	```
 37 | 	"scripts": {
 38 | 			"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 39 | 			"start": "npm run dev",
 40 | 			"build": "node build/build.js"
 41 | 		},
 42 | 	```
 43 |   ![构建项目](http://otr9a8wg0.bkt.clouddn.com/vue%20init%20webpack.jpg) 
 44 | 
 45 |   默认端口为8080，若此时8080端口被占用则会出错
 46 |   ```
 47 |   ...
 48 |   > Starting dev server...
 49 |   events.js:160
 50 |   throw er; // Unhandled 'error' event
 51 |         ^
 52 |   Error: listen EADDRINUSE :::8080  
 53 |   .....
 54 |   ```
 55 |   可以在D:\\my-blog\\config\\index.js里修改端口  
 56 |   ```
 57 |   dev: {
 58 | 
 59 |       // Paths
 60 |       assetsSubDirectory: 'static',
 61 |       assetsPublicPath: '/',
 62 |       proxyTable: {},
 63 | 
 64 |       // Various Dev Server settings
 65 |       host: 'localhost', // can be overwritten by process.env.HOST
 66 |       port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 67 |       autoOpenBrowser: false,
 68 |       errorOverlay: true,
 69 |       notifyOnErrors: true,
 70 |       poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 71 | 
 72 |       // https://webpack.js.org/configuration/devtool/#development
 73 |       devtool: 'cheap-module-eval-source-map',
 74 | 
 75 |       // If you have problems debugging vue-files in devtools,
 76 |       // set this to false - it *may* help
 77 |       // https://vue-loader.vuejs.org/en/options.html#cachebusting
 78 |       cacheBusting: true,
 79 | 
 80 |       cssSourceMap: true
 81 |     },
 82 |   ```
 83 |   启动成功后：
 84 |     ```
 85 |   ...
 86 |   DONE  Compiled successfully in 2597ms                                                          
 87 |   I  Your application is running here: http://localhost:8080
 88 |     ``` 
 89 |    ![启动成功](http://otr9a8wg0.bkt.clouddn.com/17-7-28/73659113.jpg)
 90 | 
 91 | 
 92 | # 安装需要用到的包
 93 | 首先安装项目要用到的一些组件，也可以之后遇到什么需要的再安装
 94 | - element-ui：饿了么前段组件库，可以帮助快速建立起前段页面，少些很多样式
 95 | - vuex：vue状态管理
 96 | - axios：基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
 97 | - mysql：连接mysql数据库
 98 | - express：
 99 | - body-parser：
100 | - node-sass：sass-loader依赖
101 | - sass-loader：解析sass/scss文件
102 | 
103 | 可以依次安装( npm 安装很慢的可以使用 cnpm )：  
104 | ```
105 | npm install element-ui --save  （回车）
106 | npm install vuex --save  （回车）
107 | npm install axios --save  （回车）
108 | npm install mysql --save  （回车）
109 | npm install express --save  （回车）
110 | npm install body-parser --save  （回车）
111 | npm install node-sass --save-dev  （回车）
112 | npm install sass-loader --save-dev  （回车）
113 | ```
114 | 也可以一起安装：
115 | ```
116 | npm install element-ui vuex axios mysql express body-parser --save  （回车）
117 | npm install node-sass sass-loader --save-dev  （回车）
118 | ```
119 | --save 意思就是将依赖记录在 package.json 里的 dependencies 下，之后生产环境也是需要这些包的，--sava-dev 是将依赖记录在 package.json 里的 devDependencies 下，只是开发环境需要这些包，方便开发调试，而生产环境不需要。（-S 是 --save 的缩写，-D 是 --save-dev 的缩写）
120 | ```
121 |   "dependencies": {
122 |     "axios": "^0.18.0",
123 |     "body-parser": "^1.18.3",
124 |     "element-ui": "^2.3.9",
125 |     "express": "^4.16.3",
126 |     "mysql": "^2.15.0",
127 |     "vue": "^2.5.2",  // 项目构建完就有了
128 |     "vue-router": "^3.0.1",  // 项目构建完就有了 当时"Install vue-router"选了Yes
129 |     "vuex": "^3.0.1"
130 |   },
131 |   "devDependencies": {
132 |     ...
133 |     "node-sass": "^4.9.0",
134 |     "sass-loader": "^7.0.1",
135 |     ...
136 |   },
137 | ```
138 | 
139 | ```
140 | 使用scss/sass前必须先安装node-sass、sass-loader，否则运行npm run dev时会报错
141 | <style lang="scss" scoped>
142 | 	$bgColor: #F90;
143 | 	.blog-home {
144 | 		background: $bgColor
145 | 	}
146 | </style>
147 | ```
148 | 
149 | # 调用后台接口 ajax 请求数据
150 | 
151 | 1、打开入口js文件main.js，引入element-ui组件来搭建页面 [element-ui 查看官网文档](http://element.eleme.io/#/zh-CN/component/installation)。
152 | ```
153 | // The Vue build version to load with the `import` command
154 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
155 | import Vue from 'vue'
156 | import App from './App'
157 | import router from './router'
158 | import axios from 'axios'
159 | import ElementUI from 'element-ui'
160 | import 'element-ui/lib/theme-chalk/index.css'
161 | 
162 | Vue.config.productionTip = false
163 | Vue.use(ElementUI);
164 | Vue.prototype.$http = axios;
165 | 
166 | /* eslint-disable no-new */
167 | new Vue({
168 | 	el: '#app',
169 | 	router,
170 | 	components: { App },
171 | 	template: '<App/>'
172 | })
173 | ```
174 | 其中 axios 用来完成 ajax 请求，
175 | ```
176 | import axios from 'axios'
177 | axios.get('/', function() {});
178 | axios.post('/', function() {});
179 | 
180 | // 将 axios 添加的 Vue 原型上后就不需要再在每个需要使用它的页面引入了
181 | Vue.prototype.$http = axios;
182 | $http.get('/', function() {});
183 | $http.post('/', function() {});
184 | ```
185 | 
186 | 2、每个页面都相当于一个组件，文件以.vue结尾，第一次启动成功时看到的页面就是组件Hello.vue，路径src/components/Hello.vue。路由地址在 src/router/index.js 中配置，打开修改我们待会自己要用的：
187 | ```
188 | import Vue from 'vue'
189 | import Router from 'vue-router'
190 | import HelloWorld from '@/components/HelloWorld'
191 | import Home from '@/components/pages/Home'
192 | import Blog from '@/components/pages/Blog'
193 | 
194 | Vue.use(Router)
195 | 
196 | export default new Router({
197 |   routes: [
198 |     // {
199 |     //   path: '/',
200 |     //   name: 'HelloWorld',
201 |     //   component: HelloWorld
202 |     // },
203 |     {
204 |       path: '/', // http://localhost:8080/#/
205 |       name: 'Home',
206 |       component: Home
207 |     },
208 |     {
209 |       path: '/blog', // http://localhost:8080/#/blog
210 |       name: 'Blog',
211 |       component: Blog
212 |     }
213 |   ]
214 | })
215 | ```
216 | 上面引入了三个组件HelloWorld.vue(默认)，Home.vue，Blog.vue。
217 | path是页面地址，name可以随便写，component 是 import 的组件名。
218 | 
219 | 3、在 scr/components 下新建文件夹 pages，在 pages 下新建文件 Home.vue，Blog.vue，里面按规则要求写好内容，运行工程打开页面 http://localhost:8080/#/、http://localhost:8080/#/blog 即可看到相应的内容。
220 | 在 Blog.vue 中输入下面内容用来后面测试调用接口
221 | ```
222 | <template>
223 |   <div class="">
224 |     <el-button type="primary" @click="getArticle">调用后台接口</el-button>
225 |     <el-input v-model="inpContent"></el-input>
226 |   </div>
227 | </template>
228 | 
229 | <script>
230 | export default {
231 |   name: 'blog',
232 |   data() {
233 |     return {
234 |       inpContent: 'Blog'
235 |     }
236 |   },
237 |   methods: {
238 |     getArticle() {
239 |       this.$http.get('/api/getArticle')
240 |         .then( (res) => {
241 |           console.log('res', res);
242 |           this.inpContent = res.data.data;
243 |         })
244 |     }
245 |   }
246 | }
247 | </script>
248 | ```
249 | 4、后端使用Express做服务端提供数据接口，不了解的可以先去官网文档大致了解一下 [Express官网](http://expressjs.com/en/starter/installing.html)，在根目录my-blog下创建文件夹server用来存放后端数据库配置数据和相关方法api。  
250 | server文件夹下创建文件：index.js  
251 | ```
252 | const path = require('path');
253 | const express = require('express');
254 | const app = express();
255 | 
256 | app.get('/api/getArticle', (req, res, next) => {
257 |   res.json({
258 |       data: '后台返回结果 getArticle'
259 |     })
260 | })
261 | 
262 | // 监听端口
263 | app.listen(3000);
264 | console.log('success listen at port:3000......');
265 | ```
266 | 另开一个 CMD 窗口，进入目录 D:\my-blog\server
267 | ```
268 | D:\my-blog\server
269 | $ node index.js
270 | success listen at port:3000......
271 | ```
272 | 5、打开 http://localhost:8080/#/blog 点击按钮"调用后台接口"，会发现控制台报错  
273 | ![调后台接口报错_跨域](http://otr9a8wg0.bkt.clouddn.com/%E8%B0%83%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%E6%8A%A5%E9%94%99_%E8%B7%A8%E5%9F%9F.jpg)   
274 | 这是因为我们工程运行的端口是8080，而后端程序运行的端口是3000，所以是跨域请求，要想请求成功，就要先在配置里设置一下代理
275 | 
276 | 6、打开文件 /config/index.js，将 proxyTable 项设置如下  
277 | ```
278 | proxyTable: {
279 |   '/api': {
280 |     target: 'http://localhost:3000/api',
281 |     changeOrigin: true,
282 |     pathRewrite: {
283 |       '^/api': ''
284 |     }
285 |   }
286 | }
287 | 
288 | ```
289 | - '/api': 表示所有以 /api 为开头的请求，如我们的请求 this.$http.get('/api/getArticle')
290 | - target: 将所有以 /api 为开头请求转发到 http://localhost:3000/api
291 | - changeOrigin: true/false, Default: false，本地会虚拟一个服务端接收你的请求并代你发送该请求(不太明白，false 试了也可以)
292 | - pathRewrite: 重写地址。 '^/api': '' 表示将以 /api 开头的请求的地址中的 '/api' 替换为 ''，  
293 |     即 path = path.replace(/^\/api/, '')  
294 |     eg: this.\$http.get('/api/getArticle')  
295 |     path = '/api/getArticle'  
296 |     path = path.replace(/^\/api/, '') = '/getArticle'  
297 |     这样目标请求就变成了 http://localhost:3000/api/getArticle ,
298 |     如果不写 pathRewrite， 请求则为 http://localhost:3000/api/api/getArticle  所以也可以这样
299 |       ```
300 |       proxyTable: {
301 |         '/api': {
302 |           target: 'http://localhost:3000',
303 |           changeOrigin: true,
304 |         }
305 |       }
306 |       ```
307 |       最后请求同样转发为 http://localhost:3000/api/getArticle , 总之要和后台的接口路径对应上，不过还是建议加上 pathRewrite，方便同类方法调用
308 |       ```
309 |       // server/index.js
310 |       const path = require('path');
311 |       const express = require('express');
312 |       const router = express.Router();
313 |       const app = express();
314 |     
315 |       app.use('/add', router);
316 |       app.use('/del', router);
317 |     
318 |       router.get('/getArticle1', (req, res, next) => {
319 |         api.getArticle(req, res, next);
320 |       })
321 |       router.get('/getArticle2', (req, res, next) => {
322 |         api.getArticle(req, res, next);
323 |       })
324 |     
325 |       router.get('/delArticle1', (req, res, next) => {
326 |         api.getArticle(req, res, next);
327 |       })
328 |       router.get('/delArticle2', (req, res, next) => {
329 |         api.getArticle(req, res, next);
330 |       })
331 |     
332 |       // 监听端口
333 |       app.listen(3000);
334 |       console.log('success listen at port:3000......');
335 |     
336 |       ----------------------------------------------
337 |     
338 |       // congif/index.js
339 |       proxyTable: {
340 |         '/add': {
341 |           target: 'http://localhost:3000/add',
342 |           changeOrigin: true,
343 |           pathRewrite: {
344 |               '^/add': ''
345 |             }
346 |         },
347 |         '/del': {
348 |           target: 'http://localhost:3000/del',
349 |           changeOrigin: true,
350 |           pathRewrite: {
351 |               '^/del': ''
352 |             }
353 |         },
354 |       },
355 |       ```
356 | 
357 | 7、正确返回数据
358 | ![](http://otr9a8wg0.bkt.clouddn.com/%E5%90%8E%E5%8F%B0%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C.jpg)
359 | 
360 | 
361 | # 数据库存取数据（Mysql）
362 |     Mysql可视化工具我用的是Navicat For Mysql，新建连接，数据库，数据表，查询等都可在其中完成，当然熟悉命令的都可以在cmd中命令完成 
363 | ### Mysql 新建连接
364 | ![新建数据库](http://otr9a8wg0.bkt.clouddn.com/%E6%96%B0%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93Mysql.jpg)
365 | ### 连接数据库
366 | 在 src/server 下新建文件 db.js，写入下面代码
367 | ```js
368 | const mysql = require('mysql');
369 | 
370 | const mysqlConfig = {
371 |   host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
372 |   user: 'root', 
373 |   password: '8023', // root 密码
374 |   database: 'myBlog', // 数据库名
375 |   port: '3306'
376 | }
377 | const pool = mysql.createPool({
378 |   host: mysqlConfig.host,
379 |   user: mysqlConfig.user,
380 |   password: mysqlConfig.password,
381 |   database: mysqlConfig.database,
382 |   port: mysqlConfig.port,
383 |   multipleStatements: true    // 多语句查询
384 | });
385 | 
386 | var setValue = function() {
387 |   pool.getConnection((err, connection) => {
388 |     var sql = 'INSERT INTO test(id, name) VALUES (1, "blog")'
389 |     connection.query(sql, (err, result) => {
390 |         console.log(result);
391 |         connection.release();
392 |     })
393 |   })
394 | }
395 | 
396 | setValue();
397 | ```
398 | 引入包 mysql，创建连接池 mysql.createPool，sql语法和在命令中使用的形同，拼成字符串即可，在 server 目录下运行 db.js 文件，刷新数据库
399 | ![添加数据](http://otr9a8wg0.bkt.clouddn.com/dbSetValue.jpg)
400 | 
401 | 同理可增删查改数据
402 | ```js
403 | // 查询数据，？ 的值填入 connection.jquery 的第二个参数（数组）中
404 | // WHERE id = ? AND name = ? ---> connetion.query(sql, [1, "blog"], () => )
405 | var getValue = function() {
406 |   pool.getConnection((err, connection) => {
407 |     var sql = 'SELECT * FROM test WHERE id = ?'
408 |     connection.query(sql, [1], (err, result) => {
409 |         console.log(result);
410 |         connection.release();
411 |     })
412 |   })
413 | }
414 | getValue();
415 | 
416 | /*
417 | $ node db.js
418 | [ RowDataPacket { id: '1', name: 'blog' } ]
419 | */
420 | 
421 | // 更新数据
422 | var updValue = function() {
423 |   pool.getConnection((err, connection) => {
424 |     var sql = 'UPDATE test SET name = ? WHERE id = ?'
425 |     connection.query(sql, [22, 1], (err, result) => {
426 |         console.log(result);
427 |         connection.release();
428 |     })
429 |   })
430 | }
431 | updValue();
432 | 
433 | // 删除数据
434 | var delValue = function() {
435 |   pool.getConnection((err, connection) => {
436 |     var sql = 'DELETE FROM test WHERE id = ?'
437 |     connection.query(sql, [1], (err, result) => {
438 |         console.log(result);
439 |         connection.release();
440 |     })
441 |   })
442 | }
443 | delValue();
444 | ```
445 | 结合前面的 ajax 请求数据，我们便可以轻松的对数据库中的数据进行操作了，下面来模块化这些操作。
446 | ### 模块化后端代码
447 | 在 /server 下创建文件
448 | - db.js 数据库连接配置
449 | - api.js 连接数据库，各种方法实现
450 | - sqlMap.js sql语句
451 | - router.js 后端 express 路由配置
452 | - index.js 后端入口文件，启动后端服务
453 | 
454 | 1、db.js
455 | ```js
456 | // 数据库连接配置
457 | module.exports = {
458 |   mysql: {
459 |     host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
460 |     user: 'root', 
461 |     password: '8023', // root 密码
462 |     database: 'myBlog', // 数据库名
463 |     port: '3306'
464 |   }
465 | }
466 | ```
467 | 2、api.js
468 | ```js
469 | const mysql = require('mysql');
470 | const dbConfig = require('./db');
471 | const sqlMap = require('./sqlMap');
472 | 
473 | const pool = mysql.createPool({
474 |   host: dbConfig.mysql.host,
475 |   user: dbConfig.mysql.user,
476 |   password: dbConfig.mysql.password,
477 |   database: dbConfig.mysql.database,
478 |   port: dbConfig.mysql.port,
479 |   multipleStatements: true    // 多语句查询
480 | });
481 | 
482 | module.exports = {
483 |   getValue(req, res, next) {
484 |     var id = req.query.id;
485 |     pool.getConnection((err, connection) => {
486 |       var sql = sqlMap.getValue;
487 |       connection.query(sql, [id], (err, result) => {
488 |           res.json(result);
489 |           connection.release();
490 |       })
491 |     })
492 |   },
493 |   setValue(req, res, next) {
494 |     console.log(req.body);
495 |     var id = req.body.id, name = req.body.name;
496 |     pool.getConnection((err, connection) => {
497 |       var sql = sqlMap.setValue;
498 |       connection.query(sql, [name, id], (err, result) => {
499 |           res.json(result);
500 |           connection.release();
501 |       })
502 |     })
503 |   }
504 | }
505 | 
506 | ```
507 | 3、sqlMap.js
508 | ```js
509 | var sqlMap = {
510 |   getValue: 'SELECT * FROM test WHERE id = ?',
511 |   setValue: 'UPDATE test SET name = ? WHERE id = ?'
512 | }
513 | 
514 | module.exports = sqlMap;
515 | ```
516 | 4、router.js
517 | ```js
518 | const express = require('express');
519 | const router = express.Router();
520 | const api = require('./api');
521 | 
522 | router.get('/getValue', (req, res, next) => {
523 |   api.getValue(req, res, next);
524 | });
525 | 
526 | router.post('/setValue', (req, res, next) => {
527 |   api.setValue(req, res, next);
528 | });
529 | 
530 | module.exports = router;
531 | ```
532 | 5、index.js
533 | ```js
534 | const routerApi = require('./router');
535 | const bodyParser = require('body-parser'); // post 数据是需要
536 | const express = require('express');
537 | const app = express();
538 | 
539 | app.use(bodyParser.json());
540 | 
541 | // 后端api路由
542 | app.use('/api', routerApi);
543 | 
544 | // 监听端口
545 | app.listen(3000);
546 | console.log('success listen at port:3000......');
547 | ```
548 | 
549 | 在 /scr/components/pages/Blog.vue 文件中写入下面代码测试
550 | ```js
551 | <template>
552 |   <div class="">
553 |     <el-input v-model="inpContent"></el-input>
554 |     <el-button type="primary" @click="getValue">获取数据</el-button>
555 |     <el-button type="primary" @click="setValue">添加数据</el-button>
556 |   </div>
557 | </template>
558 | 
559 | <script>
560 | export default {
561 |   name: 'blog',
562 |   data() {
563 |     return {
564 |       inpContent: ''
565 |     }
566 |   },
567 |   methods: {
568 |     getValue() {
569 |       // axios.get('/', {params: ''})
570 |       this.$http.get('/api/getValue', {
571 |         params: {id: 1}
572 |       }).then( (res) => {
573 |         console.log('res', res);
574 |         this.inpContent = res.data[0].name;
575 |       })
576 |     },
577 |     setValue() {
578 |       // axios.post('/', {})
579 |       this.$http.post('/api/setValue', {
580 |         id: 1, name: this.inpContent
581 |       }).then( (res) => {
582 |         console.log('res', res);
583 |       })
584 |     }
585 |   }
586 | }
587 | </script>
588 | ```
589 | - get：第二个参数（可选）是一个对象，以 params 为属性，将条件数据传到后台，后台通过 req.query 可以获得 params 对应的值
590 | - post：第二个参数（可选）也是一个对象，属性任意，将提交数据传到后台，后台通过 req.body 可以获得这个对象，req.body 数据的解析需要用到包 body-parser，在 index.js 中引入 use 即可。
591 | 
592 | 打开两个命令窗口分别运行工程，运行后端服务，即可进行测试：
593 | ```js
594 | D:\my-blog
595 | $ npm run dev
596 | ```
597 | ```js
598 | D:\my-blog\server
599 | $ node index.js
600 | ```


--------------------------------------------------------------------------------
/articles/5d3aa128f6d6eb0c9404ac1d_aaaaaa.md:
--------------------------------------------------------------------------------
  1 | # 准备工作
  2 | 
  3 | ## 安装node，这是必须的
  4 | 新版node自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西。
  5 | 验证是否安装成功：  
  6 | ![验证是否安装成功](http://otr9a8wg0.bkt.clouddn.com/cmder%E9%AA%8C%E8%AF%81node_npm_vue.jpg)  
  7 | 推荐windows下终端工具：[cmder](http://cmder.net/)
  8 | 
  9 | ## npm安装vue-cli
 10 | 使用npm下载依赖包是可能有些慢，所以这里可以换上淘宝的镜像cnpm。  
 11 | 打开终端(可以在任何位置)，输入  
 12 | ```npm install cnpm -g --registry=https://registry.npm.taobao.org```   
 13 | cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。  
 14 | 现在来安装vue-cli：输入  
 15 | ```npm install -g vue-cli``` 或者 ```cnpm install -g vue-cli```  
 16 | 命令中 -g 表示全局安装，会安装到node安装目录下的node_modules文件夹下，看看里面是不是多了vue-cli文件夹，如果没有，看看npm模块的安装路径
 17 | ```npm config ls``` 
 18 | 可以查看模块的安装路径 prefix，具体设置请自行百度。
 19 | 
 20 | ![npm模块安装路径](http://otr9a8wg0.bkt.clouddn.com/npm%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E8%B7%AF%E5%BE%84.jpg) 
 21 | 
 22 | ## vue-cli快速构建项目
 23 | - 选定一个你喜欢的文件夹，进入该文件夹下，之后创建的项目目录就在文件夹下
 24 | - 打开终端，进入目标文件夹，以 D:\ 为例，使用webpack模板构建项目，输入 
 25 | ```vue init webpack my-blog```  
 26 | 此时会自动从github下载文件目录到目标文件夹，上不了github的只能想办法了，从别处把构建好的文件全部拷过来也是可以的。
 27 | 
 28 | ## 运行项目
 29 | - 1、进入my-blog文件夹，首先可以看到文件夹下有一个package.json文件，这个文件很重要，里面记录的项目的一些信息和运行成功运行项目必须的一些依赖包，之后安装的一些包也要记录到里面，方便别人拷贝过来你的项目时安装依赖，顺利运行。
 30 | - 2、新版本的 vue-cli 在执行 ```vue init webpack my-blog``` 第9步时会有一个选择：
 31 |     ![npm i for pro](http://otr9a8wg0.bkt.clouddn.com/npm%20i%20for%20pro.jpg)  
 32 |     如果选择了Yes，则可跳过步骤3，如果选择了No，则按照步骤3进入文件夹安装依赖。
 33 | - 3、终端输入（要在此文件夹下）输入：```cnpm install``` install可以简写为 i 即 ```cnpm i```，cnpm安装应该挺快的，安装完成后会看到文件夹下多了个node_modules文件夹，里面就是运行项目所需要的一些依赖包，可以看到此文件夹虽然不大，但是里面文件个数有上千个，所以拷贝起来也是挺麻烦的，所以把依赖包记录到package.json里面，别人只要重新下载安装一下就好了，上传到github上也方便。
 34 | - 4、启动项目：输入 ```npm run dev```，等待浏览器自动打开。  
 35 |  npm run dev 执行的命令即是package.json里 scripts下的dev：node build/dev-server.js
 36 | 	```
 37 | 	"scripts": {
 38 | 			"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 39 | 			"start": "npm run dev",
 40 | 			"build": "node build/build.js"
 41 | 		},
 42 | 	```
 43 |   ![构建项目](http://otr9a8wg0.bkt.clouddn.com/vue%20init%20webpack.jpg) 
 44 | 
 45 |   默认端口为8080，若此时8080端口被占用则会出错
 46 |   ```
 47 |   ...
 48 |   > Starting dev server...
 49 |   events.js:160
 50 |   throw er; // Unhandled 'error' event
 51 |         ^
 52 |   Error: listen EADDRINUSE :::8080  
 53 |   .....
 54 |   ```
 55 |   可以在D:\\my-blog\\config\\index.js里修改端口  
 56 |   ```
 57 |   dev: {
 58 | 
 59 |       // Paths
 60 |       assetsSubDirectory: 'static',
 61 |       assetsPublicPath: '/',
 62 |       proxyTable: {},
 63 | 
 64 |       // Various Dev Server settings
 65 |       host: 'localhost', // can be overwritten by process.env.HOST
 66 |       port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 67 |       autoOpenBrowser: false,
 68 |       errorOverlay: true,
 69 |       notifyOnErrors: true,
 70 |       poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 71 | 
 72 |       // https://webpack.js.org/configuration/devtool/#development
 73 |       devtool: 'cheap-module-eval-source-map',
 74 | 
 75 |       // If you have problems debugging vue-files in devtools,
 76 |       // set this to false - it *may* help
 77 |       // https://vue-loader.vuejs.org/en/options.html#cachebusting
 78 |       cacheBusting: true,
 79 | 
 80 |       cssSourceMap: true
 81 |     },
 82 |   ```
 83 |   启动成功后：
 84 |     ```
 85 |   ...
 86 |   DONE  Compiled successfully in 2597ms                                                          
 87 |   I  Your application is running here: http://localhost:8080
 88 |     ``` 
 89 |    ![启动成功](http://otr9a8wg0.bkt.clouddn.com/17-7-28/73659113.jpg)
 90 | 
 91 | 
 92 | # 安装需要用到的包
 93 | 首先安装项目要用到的一些组件，也可以之后遇到什么需要的再安装
 94 | - element-ui：饿了么前段组件库，可以帮助快速建立起前段页面，少些很多样式
 95 | - vuex：vue状态管理
 96 | - axios：基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
 97 | - mysql：连接mysql数据库
 98 | - express：
 99 | - body-parser：
100 | - node-sass：sass-loader依赖
101 | - sass-loader：解析sass/scss文件
102 | 
103 | 可以依次安装( npm 安装很慢的可以使用 cnpm )：  
104 | ```
105 | npm install element-ui --save  （回车）
106 | npm install vuex --save  （回车）
107 | npm install axios --save  （回车）
108 | npm install mysql --save  （回车）
109 | npm install express --save  （回车）
110 | npm install body-parser --save  （回车）
111 | npm install node-sass --save-dev  （回车）
112 | npm install sass-loader --save-dev  （回车）
113 | ```
114 | 也可以一起安装：
115 | ```
116 | npm install element-ui vuex axios mysql express body-parser --save  （回车）
117 | npm install node-sass sass-loader --save-dev  （回车）
118 | ```
119 | --save 意思就是将依赖记录在 package.json 里的 dependencies 下，之后生产环境也是需要这些包的，--sava-dev 是将依赖记录在 package.json 里的 devDependencies 下，只是开发环境需要这些包，方便开发调试，而生产环境不需要。（-S 是 --save 的缩写，-D 是 --save-dev 的缩写）
120 | ```
121 |   "dependencies": {
122 |     "axios": "^0.18.0",
123 |     "body-parser": "^1.18.3",
124 |     "element-ui": "^2.3.9",
125 |     "express": "^4.16.3",
126 |     "mysql": "^2.15.0",
127 |     "vue": "^2.5.2",  // 项目构建完就有了
128 |     "vue-router": "^3.0.1",  // 项目构建完就有了 当时"Install vue-router"选了Yes
129 |     "vuex": "^3.0.1"
130 |   },
131 |   "devDependencies": {
132 |     ...
133 |     "node-sass": "^4.9.0",
134 |     "sass-loader": "^7.0.1",
135 |     ...
136 |   },
137 | ```
138 | 
139 | ```
140 | 使用scss/sass前必须先安装node-sass、sass-loader，否则运行npm run dev时会报错
141 | <style lang="scss" scoped>
142 | 	$bgColor: #F90;
143 | 	.blog-home {
144 | 		background: $bgColor
145 | 	}
146 | </style>
147 | ```
148 | 
149 | # 调用后台接口 ajax 请求数据
150 | 
151 | 1、打开入口js文件main.js，引入element-ui组件来搭建页面 [element-ui 查看官网文档](http://element.eleme.io/#/zh-CN/component/installation)。
152 | ```
153 | // The Vue build version to load with the `import` command
154 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
155 | import Vue from 'vue'
156 | import App from './App'
157 | import router from './router'
158 | import axios from 'axios'
159 | import ElementUI from 'element-ui'
160 | import 'element-ui/lib/theme-chalk/index.css'
161 | 
162 | Vue.config.productionTip = false
163 | Vue.use(ElementUI);
164 | Vue.prototype.$http = axios;
165 | 
166 | /* eslint-disable no-new */
167 | new Vue({
168 | 	el: '#app',
169 | 	router,
170 | 	components: { App },
171 | 	template: '<App/>'
172 | })
173 | ```
174 | 其中 axios 用来完成 ajax 请求，
175 | ```
176 | import axios from 'axios'
177 | axios.get('/', function() {});
178 | axios.post('/', function() {});
179 | 
180 | // 将 axios 添加的 Vue 原型上后就不需要再在每个需要使用它的页面引入了
181 | Vue.prototype.$http = axios;
182 | $http.get('/', function() {});
183 | $http.post('/', function() {});
184 | ```
185 | 
186 | 2、每个页面都相当于一个组件，文件以.vue结尾，第一次启动成功时看到的页面就是组件Hello.vue，路径src/components/Hello.vue。路由地址在 src/router/index.js 中配置，打开修改我们待会自己要用的：
187 | ```
188 | import Vue from 'vue'
189 | import Router from 'vue-router'
190 | import HelloWorld from '@/components/HelloWorld'
191 | import Home from '@/components/pages/Home'
192 | import Blog from '@/components/pages/Blog'
193 | 
194 | Vue.use(Router)
195 | 
196 | export default new Router({
197 |   routes: [
198 |     // {
199 |     //   path: '/',
200 |     //   name: 'HelloWorld',
201 |     //   component: HelloWorld
202 |     // },
203 |     {
204 |       path: '/', // http://localhost:8080/#/
205 |       name: 'Home',
206 |       component: Home
207 |     },
208 |     {
209 |       path: '/blog', // http://localhost:8080/#/blog
210 |       name: 'Blog',
211 |       component: Blog
212 |     }
213 |   ]
214 | })
215 | ```
216 | 上面引入了三个组件HelloWorld.vue(默认)，Home.vue，Blog.vue。
217 | path是页面地址，name可以随便写，component 是 import 的组件名。
218 | 
219 | 3、在 scr/components 下新建文件夹 pages，在 pages 下新建文件 Home.vue，Blog.vue，里面按规则要求写好内容，运行工程打开页面 http://localhost:8080/#/、http://localhost:8080/#/blog 即可看到相应的内容。
220 | 在 Blog.vue 中输入下面内容用来后面测试调用接口
221 | ```
222 | <template>
223 |   <div class="">
224 |     <el-button type="primary" @click="getArticle">调用后台接口</el-button>
225 |     <el-input v-model="inpContent"></el-input>
226 |   </div>
227 | </template>
228 | 
229 | <script>
230 | export default {
231 |   name: 'blog',
232 |   data() {
233 |     return {
234 |       inpContent: 'Blog'
235 |     }
236 |   },
237 |   methods: {
238 |     getArticle() {
239 |       this.$http.get('/api/getArticle')
240 |         .then( (res) => {
241 |           console.log('res', res);
242 |           this.inpContent = res.data.data;
243 |         })
244 |     }
245 |   }
246 | }
247 | </script>
248 | ```
249 | 4、后端使用Express做服务端提供数据接口，不了解的可以先去官网文档大致了解一下 [Express官网](http://expressjs.com/en/starter/installing.html)，在根目录my-blog下创建文件夹server用来存放后端数据库配置数据和相关方法api。  
250 | server文件夹下创建文件：index.js  
251 | ```
252 | const path = require('path');
253 | const express = require('express');
254 | const app = express();
255 | 
256 | app.get('/api/getArticle', (req, res, next) => {
257 |   res.json({
258 |       data: '后台返回结果 getArticle'
259 |     })
260 | })
261 | 
262 | // 监听端口
263 | app.listen(3000);
264 | console.log('success listen at port:3000......');
265 | ```
266 | 另开一个 CMD 窗口，进入目录 D:\my-blog\server
267 | ```
268 | D:\my-blog\server
269 | $ node index.js
270 | success listen at port:3000......
271 | ```
272 | 5、打开 http://localhost:8080/#/blog 点击按钮"调用后台接口"，会发现控制台报错  
273 | ![调后台接口报错_跨域](http://otr9a8wg0.bkt.clouddn.com/%E8%B0%83%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%E6%8A%A5%E9%94%99_%E8%B7%A8%E5%9F%9F.jpg)   
274 | 这是因为我们工程运行的端口是8080，而后端程序运行的端口是3000，所以是跨域请求，要想请求成功，就要先在配置里设置一下代理
275 | 
276 | 6、打开文件 /config/index.js，将 proxyTable 项设置如下  
277 | ```
278 | proxyTable: {
279 |   '/api': {
280 |     target: 'http://localhost:3000/api',
281 |     changeOrigin: true,
282 |     pathRewrite: {
283 |       '^/api': ''
284 |     }
285 |   }
286 | }
287 | 
288 | ```
289 | - '/api': 表示所有以 /api 为开头的请求，如我们的请求 this.$http.get('/api/getArticle')
290 | - target: 将所有以 /api 为开头请求转发到 http://localhost:3000/api
291 | - changeOrigin: true/false, Default: false，本地会虚拟一个服务端接收你的请求并代你发送该请求(不太明白，false 试了也可以)
292 | - pathRewrite: 重写地址。 '^/api': '' 表示将以 /api 开头的请求的地址中的 '/api' 替换为 ''，  
293 |     即 path = path.replace(/^\/api/, '')  
294 |     eg: this.\$http.get('/api/getArticle')  
295 |     path = '/api/getArticle'  
296 |     path = path.replace(/^\/api/, '') = '/getArticle'  
297 |     这样目标请求就变成了 http://localhost:3000/api/getArticle ,
298 |     如果不写 pathRewrite， 请求则为 http://localhost:3000/api/api/getArticle  所以也可以这样
299 |       ```
300 |       proxyTable: {
301 |         '/api': {
302 |           target: 'http://localhost:3000',
303 |           changeOrigin: true,
304 |         }
305 |       }
306 |       ```
307 |       最后请求同样转发为 http://localhost:3000/api/getArticle , 总之要和后台的接口路径对应上，不过还是建议加上 pathRewrite，方便同类方法调用
308 |       ```
309 |       // server/index.js
310 |       const path = require('path');
311 |       const express = require('express');
312 |       const router = express.Router();
313 |       const app = express();
314 |     
315 |       app.use('/add', router);
316 |       app.use('/del', router);
317 |     
318 |       router.get('/getArticle1', (req, res, next) => {
319 |         api.getArticle(req, res, next);
320 |       })
321 |       router.get('/getArticle2', (req, res, next) => {
322 |         api.getArticle(req, res, next);
323 |       })
324 |     
325 |       router.get('/delArticle1', (req, res, next) => {
326 |         api.getArticle(req, res, next);
327 |       })
328 |       router.get('/delArticle2', (req, res, next) => {
329 |         api.getArticle(req, res, next);
330 |       })
331 |     
332 |       // 监听端口
333 |       app.listen(3000);
334 |       console.log('success listen at port:3000......');
335 |     
336 |       ----------------------------------------------
337 |     
338 |       // congif/index.js
339 |       proxyTable: {
340 |         '/add': {
341 |           target: 'http://localhost:3000/add',
342 |           changeOrigin: true,
343 |           pathRewrite: {
344 |               '^/add': ''
345 |             }
346 |         },
347 |         '/del': {
348 |           target: 'http://localhost:3000/del',
349 |           changeOrigin: true,
350 |           pathRewrite: {
351 |               '^/del': ''
352 |             }
353 |         },
354 |       },
355 |       ```
356 | 
357 | 7、正确返回数据
358 | ![](http://otr9a8wg0.bkt.clouddn.com/%E5%90%8E%E5%8F%B0%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C.jpg)
359 | 
360 | 
361 | # 数据库存取数据（Mysql）
362 |     Mysql可视化工具我用的是Navicat For Mysql，新建连接，数据库，数据表，查询等都可在其中完成，当然熟悉命令的都可以在cmd中命令完成 
363 | ### Mysql 新建连接
364 | ![新建数据库](http://otr9a8wg0.bkt.clouddn.com/%E6%96%B0%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93Mysql.jpg)
365 | ### 连接数据库
366 | 在 src/server 下新建文件 db.js，写入下面代码
367 | ```js
368 | const mysql = require('mysql');
369 | 
370 | const mysqlConfig = {
371 |   host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
372 |   user: 'root', 
373 |   password: '8023', // root 密码
374 |   database: 'myBlog', // 数据库名
375 |   port: '3306'
376 | }
377 | const pool = mysql.createPool({
378 |   host: mysqlConfig.host,
379 |   user: mysqlConfig.user,
380 |   password: mysqlConfig.password,
381 |   database: mysqlConfig.database,
382 |   port: mysqlConfig.port,
383 |   multipleStatements: true    // 多语句查询
384 | });
385 | 
386 | var setValue = function() {
387 |   pool.getConnection((err, connection) => {
388 |     var sql = 'INSERT INTO test(id, name) VALUES (1, "blog")'
389 |     connection.query(sql, (err, result) => {
390 |         console.log(result);
391 |         connection.release();
392 |     })
393 |   })
394 | }
395 | 
396 | setValue();
397 | ```
398 | 引入包 mysql，创建连接池 mysql.createPool，sql语法和在命令中使用的形同，拼成字符串即可，在 server 目录下运行 db.js 文件，刷新数据库
399 | ![添加数据](http://otr9a8wg0.bkt.clouddn.com/dbSetValue.jpg)
400 | 
401 | 同理可增删查改数据
402 | ```js
403 | // 查询数据，？ 的值填入 connection.jquery 的第二个参数（数组）中
404 | // WHERE id = ? AND name = ? ---> connetion.query(sql, [1, "blog"], () => )
405 | var getValue = function() {
406 |   pool.getConnection((err, connection) => {
407 |     var sql = 'SELECT * FROM test WHERE id = ?'
408 |     connection.query(sql, [1], (err, result) => {
409 |         console.log(result);
410 |         connection.release();
411 |     })
412 |   })
413 | }
414 | getValue();
415 | 
416 | /*
417 | $ node db.js
418 | [ RowDataPacket { id: '1', name: 'blog' } ]
419 | */
420 | 
421 | // 更新数据
422 | var updValue = function() {
423 |   pool.getConnection((err, connection) => {
424 |     var sql = 'UPDATE test SET name = ? WHERE id = ?'
425 |     connection.query(sql, [22, 1], (err, result) => {
426 |         console.log(result);
427 |         connection.release();
428 |     })
429 |   })
430 | }
431 | updValue();
432 | 
433 | // 删除数据
434 | var delValue = function() {
435 |   pool.getConnection((err, connection) => {
436 |     var sql = 'DELETE FROM test WHERE id = ?'
437 |     connection.query(sql, [1], (err, result) => {
438 |         console.log(result);
439 |         connection.release();
440 |     })
441 |   })
442 | }
443 | delValue();
444 | ```
445 | 结合前面的 ajax 请求数据，我们便可以轻松的对数据库中的数据进行操作了，下面来模块化这些操作。
446 | ### 模块化后端代码
447 | 在 /server 下创建文件
448 | - db.js 数据库连接配置
449 | - api.js 连接数据库，各种方法实现
450 | - sqlMap.js sql语句
451 | - router.js 后端 express 路由配置
452 | - index.js 后端入口文件，启动后端服务
453 | 
454 | 1、db.js
455 | ```js
456 | // 数据库连接配置
457 | module.exports = {
458 |   mysql: {
459 |     host: 'localhost',  // 新建数据库连接时的 主机名或ID地址 内容
460 |     user: 'root', 
461 |     password: '8023', // root 密码
462 |     database: 'myBlog', // 数据库名
463 |     port: '3306'
464 |   }
465 | }
466 | ```
467 | 2、api.js
468 | ```js
469 | const mysql = require('mysql');
470 | const dbConfig = require('./db');
471 | const sqlMap = require('./sqlMap');
472 | 
473 | const pool = mysql.createPool({
474 |   host: dbConfig.mysql.host,
475 |   user: dbConfig.mysql.user,
476 |   password: dbConfig.mysql.password,
477 |   database: dbConfig.mysql.database,
478 |   port: dbConfig.mysql.port,
479 |   multipleStatements: true    // 多语句查询
480 | });
481 | 
482 | module.exports = {
483 |   getValue(req, res, next) {
484 |     var id = req.query.id;
485 |     pool.getConnection((err, connection) => {
486 |       var sql = sqlMap.getValue;
487 |       connection.query(sql, [id], (err, result) => {
488 |           res.json(result);
489 |           connection.release();
490 |       })
491 |     })
492 |   },
493 |   setValue(req, res, next) {
494 |     console.log(req.body);
495 |     var id = req.body.id, name = req.body.name;
496 |     pool.getConnection((err, connection) => {
497 |       var sql = sqlMap.setValue;
498 |       connection.query(sql, [name, id], (err, result) => {
499 |           res.json(result);
500 |           connection.release();
501 |       })
502 |     })
503 |   }
504 | }
505 | 
506 | ```
507 | 3、sqlMap.js
508 | ```js
509 | var sqlMap = {
510 |   getValue: 'SELECT * FROM test WHERE id = ?',
511 |   setValue: 'UPDATE test SET name = ? WHERE id = ?'
512 | }
513 | 
514 | module.exports = sqlMap;
515 | ```
516 | 4、router.js
517 | ```js
518 | const express = require('express');
519 | const router = express.Router();
520 | const api = require('./api');
521 | 
522 | router.get('/getValue', (req, res, next) => {
523 |   api.getValue(req, res, next);
524 | });
525 | 
526 | router.post('/setValue', (req, res, next) => {
527 |   api.setValue(req, res, next);
528 | });
529 | 
530 | module.exports = router;
531 | ```
532 | 5、index.js
533 | ```js
534 | const routerApi = require('./router');
535 | const bodyParser = require('body-parser'); // post 数据是需要
536 | const express = require('express');
537 | const app = express();
538 | 
539 | app.use(bodyParser.json());
540 | 
541 | // 后端api路由
542 | app.use('/api', routerApi);
543 | 
544 | // 监听端口
545 | app.listen(3000);
546 | console.log('success listen at port:3000......');
547 | ```
548 | 
549 | 在 /scr/components/pages/Blog.vue 文件中写入下面代码测试
550 | ```js
551 | <template>
552 |   <div class="">
553 |     <el-input v-model="inpContent"></el-input>
554 |     <el-button type="primary" @click="getValue">获取数据</el-button>
555 |     <el-button type="primary" @click="setValue">添加数据</el-button>
556 |   </div>
557 | </template>
558 | 
559 | <script>
560 | export default {
561 |   name: 'blog',
562 |   data() {
563 |     return {
564 |       inpContent: ''
565 |     }
566 |   },
567 |   methods: {
568 |     getValue() {
569 |       // axios.get('/', {params: ''})
570 |       this.$http.get('/api/getValue', {
571 |         params: {id: 1}
572 |       }).then( (res) => {
573 |         console.log('res', res);
574 |         this.inpContent = res.data[0].name;
575 |       })
576 |     },
577 |     setValue() {
578 |       // axios.post('/', {})
579 |       this.$http.post('/api/setValue', {
580 |         id: 1, name: this.inpContent
581 |       }).then( (res) => {
582 |         console.log('res', res);
583 |       })
584 |     }
585 |   }
586 | }
587 | </script>
588 | ```
589 | - get：第二个参数（可选）是一个对象，以 params 为属性，将条件数据传到后台，后台通过 req.query 可以获得 params 对应的值
590 | - post：第二个参数（可选）也是一个对象，属性任意，将提交数据传到后台，后台通过 req.body 可以获得这个对象，req.body 数据的解析需要用到包 body-parser，在 index.js 中引入 use 即可。
591 | 
592 | 打开两个命令窗口分别运行工程，运行后端服务，即可进行测试：
593 | ```js
594 | D:\my-blog
595 | $ npm run dev
596 | ```
597 | ```js
598 | D:\my-blog\server
599 | $ node index.js
600 | ```


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