├── static
    └── .gitkeep
├── src
    ├── assets
    │   └── static
    │   │   ├── css
    │   │       ├── el-main.css
    │   │       ├── background_image.css
    │   │       └── home.css
    │   │   └── js
    │   │       └── time.js
    ├── components
    │   ├── admin
    │   │   ├── File.vue
    │   │   ├── Linkz.vue
    │   │   ├── Settings.vue
    │   │   ├── Page.vue
    │   │   ├── Index.vue
    │   │   ├── Admin.vue
    │   │   ├── label.vue
    │   │   ├── article.vue
    │   │   └── Publish.vue
    │   ├── front
    │   │   ├── Links.vue
    │   │   ├── Archives.vue
    │   │   ├── Laboratory.vue
    │   │   ├── About.vue
    │   │   ├── Login.vue
    │   │   └── Home.vue
    │   └── Template.vue
    ├── App.vue
    ├── main.js
    └── router
    │   └── index.js
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/static/css/el-main.css:
--------------------------------------------------------------------------------
1 | .el-main {
2 |     padding: 15px 15px 15px 0px;
3 | }


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/components/admin/File.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>文件管理</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         name: "fileNav"
 8 |     }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/src/components/admin/Linkz.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>友链</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         name: "linkz"
 8 |     }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/src/components/admin/Settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>系统设置</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         name: "settingsNav"
 8 |     }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/admin/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>页面管理</h1>
 4 | 
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: "pageNav",
11 |     data() {
12 |       return {};
13 |     }
14 |   };
15 | </script>
16 | 
17 | <style scoped>
18 | </style>
19 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/front/Links.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-main>友链</el-main>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "links",
 8 |   data() {
 9 |     return {};
10 |   }
11 | };
12 | </script>
13 | 
14 | <style scoped>
15 | @import "../../assets/static/css/el-main.css";
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/front/Archives.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-main>归档</el-main>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "archives",
 8 |   data() {
 9 |     return {};
10 |   }
11 | };
12 | </script>
13 | 
14 | <style scoped>
15 | @import "../../assets/static/css/el-main.css";
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/front/Laboratory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  <el-main>统计</el-main>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "laboratory",
 8 |   data() {
 9 |     return {};
10 |   }
11 | };
12 | </script>
13 | 
14 | <style scoped>
15 | @import "../../assets/static/css/el-main.css";
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/front/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-main>
 3 |     关于
 4 |   </el-main>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "about",
10 |   data() {
11 |     return {};
12 |   }
13 | };
14 | </script>
15 | 
16 | <style scoped>
17 | @import "../../assets/static/css/el-main.css";
18 | </style>
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>博客后台管理</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/components/admin/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>数据统计</h1>
 4 | 
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: "indexNav",
11 |   data() {
12 |     return {};
13 |   },
14 |   created() {
15 |     // console.log("shauxin");
16 |   }
17 | };
18 | </script>
19 | 
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/assets/static/css/background_image.css:
--------------------------------------------------------------------------------
 1 | /*背景图*/
 2 | 
 3 | #background_image {
 4 |     position: absolute;
 5 |     width: 100%;
 6 |     height: 100%;
 7 |     top: 0;
 8 |     left: 0;
 9 |     overflow-y: auto;
10 |     background-size: 20px 20px;
11 |     background-image: linear-gradient( 90deg, rgba(37, 82, 110, 0.1) 1px, transparent 0), linear-gradient(180deg, rgba(37, 82, 110, 0.1) 1px, transparent 0);
12 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuepro
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view v-if="isRouterAlive"></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "App",
10 |  
11 |   data() {
12 |     return {
13 |       isRouterAlive: true
14 |     };
15 |   },
16 |    provide() {
17 |     return {
18 |       reload: this.reload
19 |     };
20 |   },
21 |   methods: {
22 |     reload() {
23 |       this.isRouterAlive = false;
24 |       this.$nextTick(function() {
25 |         this.isRouterAlive = true;
26 |       });
27 |     }
28 |   }
29 | };
30 | </script>
31 | 
32 | <style>
33 | body {
34 |   /*充满屏幕*/
35 |   padding: 0;
36 |   margin: 0;
37 |   height: 100%;
38 |   background: #f5f8f9;
39 |   font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
40 |     Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/assets/static/js/time.js:
--------------------------------------------------------------------------------
 1 | export function formatDate(date, fmt) {
 2 |     if (/(y+)/.test(fmt)) {
 3 |         fmt = fmt.replace(
 4 |             RegExp.$1,
 5 |             (date.getFullYear() + "").substr(4 - RegExp.$1.length)
 6 |         );
 7 |     }
 8 |     let o = {
 9 |         "M+": date.getMonth() + 1,
10 |         "d+": date.getDate(),
11 |         "h+": date.getHours(),
12 |         "m+": date.getMinutes(),
13 |         "s+": date.getSeconds()
14 |     };
15 |     for (let k in o) {
16 |         if (new RegExp(`(${k})`).test(fmt)) {
17 |             let str = o[k] + "";
18 |             fmt = fmt.replace(
19 |                 RegExp.$1,
20 |                 RegExp.$1.length === 1 ? str : padLeftZero(str)
21 |             );
22 |         }
23 |     }
24 |     return fmt;
25 | }
26 | 
27 | function padLeftZero(str) {
28 |     return ("00" + str).substr(str.length);
29 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | import ElementUI from 'element-ui' // 引入element-ui 所有组件
 5 | import 'element-ui/lib/theme-chalk/index.css' // 引入element-ui CSS样式
 6 | import axios from '../node_modules/axios'
 7 | 
 8 | import Router from 'vue-router'; //如果已引用，不需要重复引用
 9 | const VueRouterPush = Router.prototype.push
10 | Router.prototype.push = function push(to) {
11 |     return VueRouterPush.call(this, to).catch(err => err)
12 | }
13 | import mavonEditor from 'mavon-editor' // 引入markdown 所有组件
14 | import 'mavon-editor/dist/css/index.css'
15 | 
16 | 
17 | 
18 | 
19 | Vue.prototype.$axios = axios;
20 | Vue.config.productionTip = false
21 | 
22 | Vue.use(ElementUI); // 在vue脚手架中使用ElementUI
23 | Vue.use(mavonEditor) // markdown  挂在到全局
24 |     // Vue.use(router)
25 | 
26 | /* eslint-disable no-new */
27 | new Vue({
28 |     el: '#app',
29 |     router,
30 |     components: { App },
31 |     template: '<App/>'
32 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuepro",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Lz12 <212225353@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.19.2",
14 |     "element-ui": "^2.13.1",
15 |     "mavon-editor": "^2.9.0",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "node-notifier": "^5.1.2",
37 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
38 |     "ora": "^1.2.0",
39 |     "portfinder": "^1.0.13",
40 |     "postcss-import": "^11.0.0",
41 |     "postcss-loader": "^2.0.8",
42 |     "postcss-url": "^7.2.1",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 6.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/Template.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="background_image">
 3 |     <div class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
 4 |       <div class="container">
 5 |         <a
 6 |           class="navbar-brand"
 7 |           href="#"
 8 |           style="font-family: Nunito;font-weight: bold;font-size: 1.5rem"
 9 |         >Lz12Code</a>
10 |         <div style="float:right" class="navbar-brand">
11 |           <router-link style="font-family: inherit; font-size: 1rem" :to="{name:'home'}">&nbsp;首页&nbsp;</router-link>
12 |           <router-link style="font-family: Nunito; font-size: 1rem" :to="{name:'archives'}">&nbsp;归档&nbsp;</router-link>
13 |           <router-link style="font-family: Nunito; font-size: 1rem" :to="{name:'laboratory'}">&nbsp;统计&nbsp;</router-link>
14 |           <router-link style="font-family: Nunito; font-size: 1rem" :to="{name:'link'}">&nbsp;友链&nbsp;</router-link>
15 |           <router-link style="font-family: Nunito; font-size: 1rem" :to="{name:'about'}">&nbsp;关于&nbsp;</router-link>
16 |           <router-link
17 |             style="font-family: Nunito; font-size: 1rem"
18 |             class="el-icon-s-custom"
19 |             :to="{name:'login'}"
20 |           >&nbsp;后台登录</router-link>
21 |         </div>
22 |       </div>
23 |     </div>
24 | 
25 |     <div class="container">
26 |       <el-row>
27 |         <!--左侧部分-->
28 |         <el-col :span="17">
29 |           <el-main>
30 |             <router-view></router-view>
31 |           </el-main>
32 |         </el-col>
33 |         <el-col :span="7">
34 |           <!--右侧边栏-->
35 |           <div class="sidebar" style="background-color: #ffffff;">
36 |             <img id="avatar" src="#" alt="博主简介" style="display: block;">
37 |           </div>
38 |         </el-col>
39 |         <el-col :span="7">
40 |           <!--右侧边栏-->
41 |         </el-col>
42 |       </el-row>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   name: "front",
50 |   data() {
51 |     return {};
52 |   }
53 | };
54 | </script>
55 | 
56 | <style scoped>
57 | @import "../assets/static/css/home.css";
58 | </style>
59 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | // import Home from '@/components/Home' // 引入组件
 4 | 
 5 | /*后台*/
 6 | import Admin from '@/components/admin/Admin' // 后台管理模板
 7 | import Index from '@/components/admin/Index' // 数据统计
 8 | import Page from '@/components/admin/Page' // 页面管理
 9 | import Publish from '@/components/admin/Publish' // 发布文章
10 | import Article from '@/components/admin/Article' // 文章管理
11 | import Label from '@/components/admin/Label' // 标签
12 | import File from '@/components/admin/File' // 文件管理
13 | import Linkz from '@/components/admin/Linkz' // 友链
14 | import Settings from '@/components/admin/Settings' // 系统设置
15 | /*前台*/
16 | import Template from '@/components/Template' // 首页模板
17 | import Home from '@/components/front/Home' // 首页
18 | import About from '@/components/front/About' // 关于
19 | import Login from '@/components/front/Login' // 后台登录
20 | import Archives from '@/components/front/Archives' // 归档
21 | import Links from '@/components/front/Links' // 友链
22 | import Laboratory from '@/components/front/Laboratory' // 统计
23 | 
24 | 
25 | Vue.use(Router)
26 | 
27 | export default new Router({
28 |     routes: [{
29 |             // 前台展示页面
30 |             path: '/',
31 |             name: 'template',
32 |             component: Template,
33 |             redirect: '/',
34 |             children: [
35 |                 { path: '/', name: 'home', component: Home },
36 |                 { path: '/about', name: 'about', component: About },
37 |                 { path: '/archives', name: 'archives', component: Archives },
38 |                 { path: '/link', name: 'link', component: Links },
39 |                 { path: '/laboratory', name: 'laboratory', component: Laboratory },
40 |             ]
41 | 
42 |         },
43 | 
44 |         // 后台登录
45 |         { path: '/login', name: 'login', component: Login },
46 | 
47 | 
48 |         { // 后台页面管理
49 |             path: '/admin',
50 |             name: 'admin',
51 |             component: Admin,
52 |             redirect: '/admin/index',
53 |             children: [
54 |                 { path: '/admin/index', name: 'index', component: Index },
55 |                 { path: '/admin/page', name: 'page', component: Page },
56 |                 { path: '/admin/publish', name: 'publish', component: Publish },
57 |                 { path: '/admin/article', name: 'article', component: Article },
58 |                 { path: '/admin/file', name: 'file', component: File },
59 |                 { path: '/admin/label', name: 'label', component: Label },
60 |                 { path: '/admin/linkz', name: 'linkz', component: Linkz },
61 |                 { path: '/admin/settings', name: 'settings', component: Settings },
62 |             ]
63 |         },
64 | 
65 |     ]
66 | })


--------------------------------------------------------------------------------
/src/components/front/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="background_image">
  3 |     <el-container>
  4 |       <el-header>系统登录</el-header>
  5 |       <div id="main">
  6 |         <el-row>
  7 |           <!--登录框居中-->
  8 |           <el-col :span="6" :offset="9">
  9 |             <div id="input">
 10 |               <el-row :gutter="10">
 11 |                 <el-col>
 12 |                   <el-input
 13 |                     placeholder="请输入用户名"
 14 |                     v-model="username"
 15 |                     :maxlength="20"
 16 |                     clearable
 17 |                     prefix-icon="el-icon-s-custom"
 18 |                   ></el-input>
 19 |                 </el-col>
 20 |               </el-row>
 21 |               <br />
 22 |               <el-row :gutter="10">
 23 |                 <el-col>
 24 |                   <el-input
 25 |                     placeholder="请输入密码"
 26 |                     v-model="password"
 27 |                     show-password
 28 |                     prefix-icon="el-icon-lock"
 29 |                   ></el-input>
 30 |                 </el-col>
 31 |               </el-row>
 32 |               <br />
 33 |               <el-button type="primary" @click="LoginFunc(username,password)">登录</el-button>
 34 |             </div>
 35 |           </el-col>
 36 |         </el-row>
 37 |       </div>
 38 |     </el-container>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | import axios from "axios";
 44 | export default {
 45 |   name: "login",
 46 |   data() {
 47 |     return {
 48 |       username: "",
 49 |       password: ""
 50 |     };
 51 |   },
 52 |   methods: {
 53 |     LoginFunc(username, password) {
 54 |       if ((username, password)) {
 55 |         // 全局修改axios默认配置
 56 |         axios.defaults.baseURL = "http://127.0.0.1:8081";
 57 |         this.$axios
 58 |           .post("/api/v1/user/login", {
 59 |             username: username,
 60 |             password: password
 61 |           })
 62 |           .then(res => {
 63 |             // 校验后端返回的code
 64 |             if (res.data.code === 1000) {
 65 |               alert("登录成功");
 66 |               // 登录成功跳转到后台页面
 67 |               this.$router.push("/admin");
 68 |             } else {
 69 |               alert("登录失败");
 70 |               // 登陆失败留在当前登录页面
 71 |               this.$router.push("/login");
 72 |             }
 73 |           })
 74 |           .catch(err => {
 75 |             console.log(err);
 76 |           });
 77 |       } else {
 78 |         alert("用户名或密码不能为空！");
 79 |       }
 80 |     }
 81 |   }
 82 | };
 83 | </script>
 84 | 
 85 | <style scoped>
 86 | /*加入背景样式*/
 87 | @import "../../assets/static/css/background_image.css";
 88 | .el-header {
 89 |   background-color: #b3c0d1;
 90 |   color: #333;
 91 |   text-align: center;
 92 |   line-height: 60px;
 93 | }
 94 | .el-main {
 95 |   background-color: #e9eef3;
 96 |   color: #333;
 97 |   text-align: center;
 98 |   line-height: 160px;
 99 | }
100 | #input {
101 |   height: 200px;
102 |   margin-top: 300px;
103 | }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/src/components/admin/Admin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container>
  3 |     <div id="menu">
  4 |       <!--定义鼠标经过时鼠标图型样式-->
  5 |       <i
  6 |         class="el-icon-menu"
  7 |         style=" position: absolute;font-size: 20px;margin-left: 22px;margin-top: 25px; cursor:pointer"
  8 |         @click="IsCollapse"
  9 |       ></i>
 10 |     </div>
 11 | 
 12 |     <el-header>
 13 |       <span>博客后台管理</span>
 14 |     </el-header>
 15 |     <el-container>
 16 |       <el-aside width="IsCollapse ? 80px : 300px">
 17 |         <el-menu
 18 |           default-active="2"
 19 |           background-color="rgba(238,238,238,.2)"
 20 |           text-color="#666"
 21 |           active-text-color="#79171c"
 22 |           class="el-menu-vertical-demo"
 23 |           :collapse="isCollapse"
 24 |           :collapse-transition="true"
 25 |         >
 26 |           <!--collapse 是否水平收起菜单-->
 27 |           <!--使用element-ui的菜单，在SubMenu Attribute中有一个index的属性，如果index的值从后端传入，则会报错-->
 28 |           <!-- index的值不能有空格，并且要为字符串类型，将其转为字符串就不会报错了-->
 29 |           <el-menu-item
 30 |             :index="item.index.toString()"
 31 |             v-for="(item) in MenuList"
 32 |             :key="item.index"
 33 |             @click="MenuFunc(item.RouterName)"
 34 |           >
 35 |             <i :class="item.icon"></i>
 36 |             <span slot="title">{{item.title}}</span>
 37 |           </el-menu-item>
 38 |         </el-menu>
 39 |       </el-aside>
 40 |       <el-main>
 41 |         <router-view></router-view>
 42 |       </el-main>
 43 |     </el-container>
 44 |   </el-container>
 45 | </template>
 46 | 
 47 | <script>
 48 | var MenuList = [
 49 |   { index: 1, title: "数据统计", icon: "el-icon-s-data", RouterName: "index" },
 50 |   {
 51 |     index: 2,
 52 |     title: "发布文章",
 53 |     icon: "el-icon-edit-outline",
 54 |     RouterName: "publish"
 55 |   },
 56 |   {
 57 |     index: 3,
 58 |     title: "文章管理",
 59 |     icon: "el-icon-tickets",
 60 |     RouterName: "article"
 61 |   },
 62 |   { index: 4, title: "页面管理", icon: "el-icon-reading", RouterName: "page" },
 63 |   {
 64 |     index: 5,
 65 |     title: "分类/标签",
 66 |     icon: "el-icon-price-tag",
 67 |     RouterName: "label"
 68 |   },
 69 |   { index: 6, title: "文件管理", icon: "el-icon-s-help", RouterName: "file" },
 70 |   { index: 7, title: "友链管理", icon: "el-icon-link", RouterName: "linkz" },
 71 |   {
 72 |     index: 8,
 73 |     title: "系统设置",
 74 |     icon: "el-icon-setting",
 75 |     RouterName: "settings"
 76 |   }
 77 | ];
 78 | export default {
 79 |   name: "admin",
 80 | 
 81 |   data() {
 82 |     return {
 83 |       MenuList: MenuList,
 84 |       isCollapse: false
 85 |     };
 86 |   },
 87 |   methods: {
 88 |     MenuFunc(val) {
 89 |       this.$router.push({ name: val }); // 必须给一个路由出口<router-view></router-view>
 90 |     },
 91 |     IsCollapse() {
 92 |       this.isCollapse = !this.isCollapse; // 菜单是否隐藏
 93 |     }
 94 |   }
 95 | };
 96 | </script>
 97 | 
 98 | <style scoped>
 99 | .el-menu-vertical-demo:not(.el-menu--collapse) {
100 |   width: 150px;
101 |   /*min-height: 400px;*/
102 | }
103 | .el-header {
104 |   font-size: 20px;
105 |   font-weight: bold;
106 | }
107 | .el-header {
108 |   background-color: #f6f6f6;
109 |   color: #666;
110 |   text-align: center;
111 |   line-height: 60px;
112 | }
113 | 
114 | /*菜单按钮 鼠标悬停颜色*/
115 | #menu i:hover {
116 |   background-color: #f6f6f6;
117 | }
118 | 
119 | /*滚动条样式*/
120 | .el-aside::-webkit-scrollbar {
121 |   width: 5px;
122 |   /*height: 4px;*/
123 | }
124 | .el-aside::-webkit-scrollbar-thumb {
125 |   border-radius: 10px;
126 |   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
127 |   /*background: rgba(0,0,0,0.2);    改变滚轮颜色*/
128 | }
129 | .el-aside::-webkit-scrollbar-track {
130 |   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
131 |   border-radius: 0;
132 |   /*background: rgba(0,0,0,0.1);    改变滚轮颜色*/
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/assets/static/css/home.css:
--------------------------------------------------------------------------------
  1 | /*头部布局*/
  2 | 
  3 | .container {
  4 |     width: 100%;
  5 |     padding-right: 15px;
  6 |     padding-left: 15px;
  7 |     margin-right: auto;
  8 |     margin-left: auto;
  9 |     max-width: 1000px;
 10 | }
 11 | 
 12 | .shadow-sm {
 13 |     box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
 14 | }
 15 | 
 16 | .bg-white {
 17 |     background-color: #fff!important;
 18 | }
 19 | 
 20 | .navbar {
 21 |     position: relative;
 22 |     padding: .5rem 1rem;
 23 | }
 24 | 
 25 | .navbar-brand {
 26 |     display: inline-block;
 27 |     padding-top: .3rem;
 28 |     padding-bottom: .3rem;
 29 |     /* margin-right: 1rem; */
 30 |     font-size: 1.25rem;
 31 |     line-height: inherit;
 32 |     white-space: nowrap;
 33 | }
 34 | 
 35 | a {
 36 |     color: #3490dc;
 37 |     text-decoration: none;
 38 |     background-color: transparent;
 39 | }
 40 | 
 41 | element.style {
 42 |     font-family: Nunito;
 43 |     font-weight: bold;
 44 |     font-size: 1.5rem;
 45 | }
 46 | 
 47 | 
 48 | /*正文界面整体布局*/
 49 | 
 50 | .el-main {
 51 |     padding: 15px 15px 15px 0px;
 52 | }
 53 | 
 54 | 
 55 | /*轮播图*/
 56 | 
 57 | .carousel-caption {
 58 |     position: absolute;
 59 |     right: 0;
 60 |     bottom: 0;
 61 |     left: 0;
 62 |     z-index: 10;
 63 |     text-align: left;
 64 |     padding: 10px;
 65 |     margin-right: 100px;
 66 |     overflow: hidden;
 67 |     text-overflow: ellipsis;
 68 |     white-space: nowrap;
 69 |     color: #fff;
 70 |     font-size: 16px;
 71 | }
 72 | 
 73 | .item img {
 74 |     width: auto;
 75 |     height: auto;
 76 |     max-width: 100%;
 77 |     max-height: 100%;
 78 | }
 79 | 
 80 | .carousel-bg {
 81 |     position: absolute;
 82 |     right: 0;
 83 |     bottom: 0;
 84 |     left: 0;
 85 |     height: 40px;
 86 |     z-index: 9;
 87 |     background-color: #000;
 88 |     filter: alpha(opacity=70);
 89 |     opacity: .7;
 90 | }
 91 | 
 92 | 
 93 | /*文章样式*/
 94 | 
 95 | .excerpt-one {
 96 |     position: relative;
 97 | }
 98 | 
 99 | .excerpt {
100 |     border-bottom: 1px solid #eee;
101 |     position: relative;
102 |     overflow: hidden;
103 |     padding: 25px;
104 |     margin-top: 25px;
105 | }
106 | 
107 | .excerpt h2 {
108 |     display: inline;
109 |     font-size: 20px;
110 |     margin: 0;
111 |     font-weight: 400;
112 |     position: relative;
113 |     top: 1px;
114 |     line-height: 25px;
115 |     margin-left: 10px;
116 | }
117 | 
118 | 
119 | /*鼠标悬浮字体颜色渐变*/
120 | 
121 | .excerpt h2 a {
122 |     -moz-transition: all 1s ease;
123 |     -webkit-transition: all 1s ease;
124 |     transition: all 1s ease;
125 |     color: #444;
126 | }
127 | 
128 | .excerpt h2 a:hover {
129 |     /* color: #FF5E52; */
130 |     color: #0d6cbf;
131 | }
132 | 
133 | .excerpt header .label {
134 |     margin-right: 5px;
135 |     position: relative;
136 |     top: -2px;
137 | }
138 | 
139 | .label {
140 |     position: relative;
141 |     display: inline-block;
142 |     padding: 5px 7px;
143 |     font-size: 12px;
144 |     line-height: 14px;
145 |     color: #ffffff;
146 |     vertical-align: baseline;
147 |     white-space: nowrap;
148 |     /* background-color: #FF5E52; */
149 |     background-color: #0d6cbf;
150 | }
151 | 
152 | .label .label-arrow {
153 |     top: 7px;
154 |     right: -4px;
155 |     /* border-left: 4px solid #FF5E52; */
156 |     border-left: 4px solid #0d6cbf;
157 |     border-top: 4px solid transparent;
158 |     border-bottom: 4px solid transparent;
159 | }
160 | 
161 | .label-arrow {
162 |     position: absolute;
163 |     width: 0;
164 |     height: 0;
165 |     vertical-align: top;
166 |     content: "";
167 | }
168 | 
169 | .excerpt .text-muted {
170 |     font-size: 12px;
171 | }
172 | 
173 | .text-muted {
174 |     color: #999;
175 | }
176 | 
177 | p {
178 |     display: block;
179 |     margin-block-start: 1em;
180 |     margin-block-end: 1em;
181 |     margin-inline-start: 0px;
182 |     margin-inline-end: 0px;
183 | }
184 | 
185 | .excerpt .note {
186 |     color: #777;
187 |     font-size: 14px;
188 |     line-height: 22px;
189 |     margin-bottom: 10px;
190 | }
191 | 
192 | .excerpt-one .note {
193 |     margin-top: 6px;
194 |     padding-right: 15px;
195 |     margin-right: 25.3%;
196 | }
197 | 
198 | .excerpt p {
199 |     margin-bottom: 0;
200 | }
201 | 
202 | span {
203 |     margin: 0 0 10px;
204 |     margin-top: 10px;
205 | }
206 | 
207 | 
208 | /*文章封面*/
209 | 
210 | .excerpt-one .focus {
211 |     float: right;
212 |     width: 25.3%;
213 |     margin-top: 0;
214 |     margin-right: 0;
215 | }
216 | 
217 | .excerpt .focus {
218 |     position: relative;
219 |     margin: 10px -6px 0 0;
220 |     overflow: hidden;
221 | }
222 | 
223 | .focus .thumbnail .thumb {
224 |     height: 132px;
225 | }
226 | 
227 | .thumbnail .thumb {
228 |     max-width: 240px;
229 |     width: 100%;
230 |     max-height: 132px;
231 | }
232 | 
233 | img {
234 |     vertical-align: middle;
235 |     max-width: 100%;
236 | }
237 | 
238 | img {
239 |     border: 0;
240 | }
241 | 
242 | 
243 | /*文章预览 只显示5行  
244 | 这里注意：
245 | 在拿到后端返回的文章内容时 预览内容只需要文章内容的前几行 并不是把全部文章都渲染
246 | 也就是说后端给的内容我们需要截断后在进行渲染 截断的部分如果超出预览框就以...显示
247 | 这只是文章的列表提供了预览文章内容 想要查看文章需要点击文章标题进入文章详情页查看
248 | */
249 | 
250 | .excerpt .note {
251 |     color: #777;
252 |     font-size: 14px;
253 |     line-height: 22px;
254 |     margin-bottom: 10px;
255 |     display: -webkit-box;
256 |     -webkit-box-orient: vertical;
257 |     -webkit-line-clamp: 5;
258 |     overflow: hidden;
259 | }
260 | 
261 | .excerpt-one .note {
262 |     margin-top: 6px;
263 |     padding-right: 15px;
264 | }
265 | 
266 | 
267 | /*阅读 评论 标签*/
268 | 
269 | .excerpt .views>span,
270 | .excerpt .views>a {
271 |     margin-right: 20px;
272 | }
273 | 
274 | 
275 | /*右侧侧边栏*/
276 | 
277 | .sidebar {
278 |     background-color: #74ffb2;
279 |     width: 100%;
280 |     height: 300px;
281 |     margin-top: 30px;
282 | }


--------------------------------------------------------------------------------
/src/components/admin/label.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-main>
  3 |     <h1>分类</h1>
  4 | 
  5 |     <el-row>
  6 |       <el-col>
  7 |         <el-button type="text" @click="dialogVisible = true,clickFlag('insert')">添加分类</el-button>
  8 | 
  9 |         <el-dialog title="分类" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
 10 |           <el-input v-model="category" placeholder="请输入分类名称"></el-input>
 11 |           <span slot="footer" class="dialog-footer">
 12 |             <el-button @click="dialogVisible = false">取 消</el-button>
 13 |             <!-- <el-button type="primary" @click="insertCategory(category)">确 定</el-button> -->
 14 | 
 15 |             <!--这里用到flag判断点击的不同按钮执行不同的操作 按钮的显示隐藏用到v-show判断flag的值-->
 16 |             <el-button type="primary" v-show="flag==='insert'" @click="insertCategory(category)">确 定</el-button>
 17 | 
 18 |             <el-button
 19 |               type="primary"
 20 |               v-show="flag==='modify'"
 21 |               @click="handleModify(modifyId,category)"
 22 |             >修 改</el-button>
 23 |           </span>
 24 |         </el-dialog>
 25 |       </el-col>
 26 |     </el-row>
 27 | 
 28 |     <el-row>
 29 |       <el-col :span="11.2">
 30 |         <el-table
 31 |           :data="tableData"
 32 |           border
 33 |           fit
 34 |           stripe
 35 |           size="medium "
 36 |           highlight-current-row
 37 |           style="width: 100%"
 38 |         >
 39 |           <el-table-column type="index" label="序号" width="100"></el-table-column>
 40 |           <!-- <el-table-column prop="id" label="id" width="50"></el-table-column> -->
 41 |           <el-table-column prop="category_name" label="名称" width="200"></el-table-column>
 42 |           <el-table-column prop="create_time" label="创建时间" width="200">
 43 |             <template slot-scope="scope">
 44 |               <span>{{scope.row.create_time | formatDate}}</span>
 45 |             </template>
 46 |           </el-table-column>
 47 |           <el-table-column prop="update_time" label="更新时间" width="200">
 48 |             <template slot-scope="scope">
 49 |               <span>{{scope.row.update_time | formatDate}}</span>
 50 |             </template>
 51 |           </el-table-column>
 52 | 
 53 |           <el-table-column label="操作" width="100">
 54 |             <template slot-scope="scope">
 55 |               <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
 56 |               <el-button
 57 |                 @click="dialogVisible = true,clickFlag('modify',scope.row.id,scope.row.category_name)"
 58 |                 type="text"
 59 |                 size="small"
 60 |               >编辑</el-button>
 61 |             </template>
 62 |           </el-table-column>
 63 |         </el-table>
 64 |       </el-col>
 65 |     </el-row>
 66 |   </el-main>
 67 | </template>
 68 | 
 69 | <script>
 70 | import axios from "axios";
 71 | import qs from "qs"; // post请求传form-data要转换
 72 | // 导入时间戳转换日期时间的js
 73 | import { formatDate } from "../../assets/static/js/time.js";
 74 | axios.defaults.baseURL = "http://127.0.0.1:8081";
 75 | export default {
 76 |   name: "labelNav",
 77 |   inject: ["reload"],
 78 |   data() {
 79 |     return {
 80 |       tableData: [],
 81 |       dialogVisible: false,
 82 |       category: "", // 输入的分类名称
 83 |       flag: "", // 标识是哪个按钮 编辑还是添加 用于区别点击的按钮来操作不同的事件 复用模态框,
 84 |       modifyId: ""
 85 |     };
 86 |   },
 87 |   methods: {
 88 |     // 删除分类
 89 |     handleDelete(res) {
 90 |       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
 91 |         confirmButtonText: "确定",
 92 |         cancelButtonText: "取消",
 93 |         type: "warning"
 94 |       })
 95 |         .then(() => {
 96 |           // 点击确认删除后向后端发起请求删除该数据
 97 |           this.$axios.delete("/api/v1/category/delete", {
 98 |             params: {
 99 |               id: res
100 |             }
101 |           });
102 |           this.$message({
103 |             type: "success",
104 |             message: "删除成功!"
105 |           });
106 |           this.reload(); // 局部刷新参考：https://blog.csdn.net/qq_39009348/article/details/81698316
107 |         })
108 |         .catch(() => {
109 |           this.$message({
110 |             type: "info",
111 |             message: "已取消删除"
112 |           });
113 |         });
114 |     },
115 |     handleClose(done) {
116 |       this.$confirm("确认关闭？")
117 |         .then(_ => {
118 |           done();
119 |         })
120 |         .catch(_ => {});
121 |     },
122 |     // 添加分类函数
123 |     insertCategory(res) {
124 |       if (!res) {
125 |         alert("分类不能为空");
126 |       } else {
127 |         console.log(res);
128 |         this.$axios
129 |           .post(
130 |             "/api/v1/category/create",
131 |             // 构造请求参数form-data
132 |             qs.stringify({
133 |               category_name: res
134 |             })
135 |           )
136 |           .then(function(response) {
137 |             console.log(response);
138 |           })
139 |           .catch(function(error) {
140 |             console.log(error);
141 |           });
142 |         this.reload();
143 |       }
144 |     },
145 |     // 修改分类
146 |     handleModify(categoryId, categoryName) {
147 |       console.log(categoryId, categoryName);
148 |       this.$axios
149 |         .put(
150 |           "/api/v1/category/modify",
151 |           // 构造请求参数form-data
152 |           qs.stringify({
153 |             id: categoryId,
154 |             category_name: categoryName
155 |           })
156 |         )
157 | 
158 |         .then(function(response) {
159 |           console.log(response);
160 |         })
161 |         .catch(function(error) {
162 |           console.log(error);
163 |         });
164 |       this.reload();
165 |     },
166 |     // 主要用来区分是什么按钮添加分类或修改分类
167 |     clickFlag(res, categoryId, category_name) {
168 |       this.flag = res;
169 |       this.modifyId = categoryId;
170 |       this.category = category_name; // v-model在输入框内显示选择分类的分类名称
171 |       console.log(this.flag, this.modifyId);
172 |     }
173 |   },
174 |   // 日期过滤器 时间戳转换成日期时间
175 |   filters: {
176 |     formatDate(time) {
177 |       var date = new Date(time);
178 |       return formatDate(date, "yyyy-MM-dd hh:mm");
179 |     }
180 |   },
181 |   // 钩子 组件加载后运行 查询所有分类
182 |   created: function() {
183 |     // 组件创建之后
184 |     // 在created这个方法中可以操作后端的数据  数据驱动试图
185 |     // 应用：发起Ajax请求
186 | 
187 |     this.$axios
188 |       .get("/api/v1/category/all")
189 |       .then(res => {
190 |         // 校验后端返回的code
191 |         if (res.data.code === 1000) {
192 |           this.tableData = res.data.categoryList;
193 |         } else {
194 |           alert("数据获取失败");
195 |         }
196 |       })
197 |       .catch(err => {
198 |         console.log(err);
199 |       });
200 |   }
201 | };
202 | </script>
203 | 
204 | <style scoped>
205 | </style>
206 | 


--------------------------------------------------------------------------------
/src/components/front/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-main>
  3 |     <!--轮播图-->
  4 |     <el-carousel direction="vertical" :interval="5000">
  5 |       <el-carousel-item v-for="carousel in carousel_array" :key="carousel.carousel_id">
  6 |         <!-- <h3>{{ item }}</h3> -->
  7 |         <div class="item">
  8 |           <a target="_blank" :href="carousel.carousel_href">
  9 |             <img :src="carousel.carousel_src" />
 10 |             <span class="carousel-caption">{{carousel.carousel_caption}}</span>
 11 |             <span class="carousel-bg"></span>
 12 |           </a>
 13 |         </div>
 14 |       </el-carousel-item>
 15 |     </el-carousel>
 16 |     <!--分割线-->
 17 |     <!-- <el-divider content-position="left" >文章内容</el-divider> -->
 18 |     <!--文章内容布局 <el-row :v-for>-->
 19 | 
 20 |     <el-row v-for="article in article_array" :key="article.article_id">
 21 |       <el-col>
 22 |         <!--文章正文-->
 23 |         <article class="excerpt excerpt-one" style="background-color: #ffffff;">
 24 |           <header>
 25 |             <!--文章分类-->
 26 |             <a
 27 |               class="label label-important"
 28 |               :href="article.article_class_url"
 29 |               :title="article.article_class"
 30 |             >
 31 |               {{article.article_class}}
 32 |               <i class="label-arrow"></i>
 33 |             </a>
 34 | 
 35 |             <!--文章标题-->
 36 |             <h2>
 37 |               <a
 38 |                 target="_blank"
 39 |                 :href="article.article_detail_url"
 40 |                 :title="article.article_title"
 41 |               >{{article.article_title}}</a>
 42 |             </h2>
 43 |           </header>
 44 |           <!--文章发布时间-->
 45 |           <span
 46 |             class="text-muted time el-icon-s-custom"
 47 |           >&nbsp;&nbsp;{{article.article_author}}&nbsp;&nbsp;发布于&nbsp;&nbsp;</span>
 48 |           <span class="text-muted time el-icon-time">&nbsp;&nbsp;{{article.article_release_time}}</span>
 49 |           <!--文章封面-->
 50 |           <p class="focus">
 51 |             <a target="_blank" :href="article.article_detail_url" class="thumbnail">
 52 |               <span>
 53 |                 <img :src="article.article_focus_url" class="thumb" style="display: inline;" />
 54 |               </span>
 55 |             </a>
 56 |           </p>
 57 |           <!--文章预览-->
 58 |           <p class="note">{{article.article_content}}</p>
 59 |           <p class="text-muted views">
 60 |             <span class="post-views">阅读({{article.article_views}})</span>
 61 |             <span class="post-comments">评论({{article.article_comments}})</span>
 62 |             <span class="post-tags">
 63 |               标签：
 64 |               <a
 65 |                 :href="tag.tag_class_url"
 66 |                 rel="tag"
 67 |                 data-original-title
 68 |                 title
 69 |                 v-for="tag in article.article_tags"
 70 |                 :key="tag.tag_id"
 71 |               >{{tag.tag}}&nbsp;&nbsp;/&nbsp;&nbsp;</a>
 72 |             </span>
 73 |           </p>
 74 |         </article>
 75 |       </el-col>
 76 |     </el-row>
 77 |   </el-main>
 78 | </template>
 79 | 
 80 | <script>
 81 | // 轮播图
 82 | var carousel_array = [
 83 |   {
 84 |     carousel_src: "https://lz12code.oss-cn-beijing.aliyuncs.com/myblog/3c09d3fb-6ead-4d8a-aa6c-783178a1f14d.jpg",
 85 |     carousel_id: "1",
 86 |     carousel_caption: "时间就是金钱",
 87 |     carousel_href: "https://mp.weixin.qq.com/s/CiUGkKNKYsQyVPtsRv6z4Q"
 88 |   },
 89 |   {
 90 |     carousel_src: "https://lz12code.oss-cn-beijing.aliyuncs.com/myblog/64c33d0f-8a30-4706-9e70-28e82e2c66e6.jpg",
 91 |     carousel_id: "2",
 92 |     carousel_caption: "风光壁纸-缤纷植物图",
 93 |     carousel_href: "https://mp.weixin.qq.com/s/CiUGkKNKYsQyVPtsRv6z4Q"
 94 |   },
 95 |   {
 96 |     carousel_src: "https://lz12code.oss-cn-beijing.aliyuncs.com/myblog/da46bf2f-284f-4ebe-8158-98fb3a6c7e6a.jpg",
 97 |     carousel_id: "3",
 98 |     carousel_caption: "做个有良知的人",
 99 |     carousel_href: "https://mp.weixin.qq.com/s/CiUGkKNKYsQyVPtsRv6z4Q"
100 |   },
101 |   {
102 |     carousel_src: "https://lz12code.oss-cn-beijing.aliyuncs.com/myblog/da46bf2f-284f-4ebe-8158-98fb3a6c7e6a.jpg",
103 |     carousel_id: "4",
104 |     carousel_caption: "做个有良知的人",
105 |     carousel_href: "https://mp.weixin.qq.com/s/CiUGkKNKYsQyVPtsRv6z4Q"
106 |   }
107 | ];
108 | // 文章列表
109 | var article_array = [
110 |   {
111 |     article_id: "1",
112 |     article_class: "博客全站导航",
113 |     article_class_url: "https://www.cnblogs.com/songzhixue/",
114 |     article_detail_url: "https://www.cnblogs.com/songzhixue/p/10717975.html",
115 |     article_title: "GIT版本控制工具",
116 |     article_release_time: "2020-05-30 14-22-09",
117 |     article_author: "Lz12Code",
118 |     article_focus_url:
119 |       "http://images-1253193383.cos.ap-beijing.myqcloud.com/0bff613caa7d54275711ab7832afe02e.png",
120 |     article_content:
121 |       "Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。",
122 |     article_views: "9999",
123 |     article_comments: "8888",
124 |     article_tags: [
125 |       {
126 |         tag_id: "1",
127 |         tag: "Go",
128 |         tag_class_url: "https://github.com/Lz12Code/go-blog"
129 |       },
130 |       {
131 |         tag_id: "2",
132 |         tag: "Python",
133 |         tag_class_url: "https://www.cnblogs.com/songzhixue/"
134 |       },
135 |       {
136 |         tag_id: "3",
137 |         tag: "Linux",
138 |         tag_class_url: "https://www.cnblogs.com/songzhixue/p/11145760.html"
139 |       }
140 |     ]
141 |   },
142 |   {
143 |     article_id: "2",
144 |     article_class: "博客管理系统",
145 |     article_class_url: "https://www.cnblogs.com/songzhixue/",
146 |     article_detail_url: "https://www.cnblogs.com/songzhixue/p/10717975.html",
147 |     article_title: "博客管理系统",
148 |     article_release_time: "2020-05-30 14-22-09",
149 |     article_author: "Lz12Code",
150 |     article_focus_url:
151 |       "http://images-1253193383.cos.ap-beijing.myqcloud.com/0bff613caa7d54275711ab7832afe02e.png",
152 |     article_content:
153 |       "Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一Git 是一个开源的分布式版本控制系统Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。",
154 |     article_views: "9999",
155 |     article_comments: "8888",
156 |     article_tags: [
157 |       {
158 |         tag_id: "1",
159 |         tag: "Go",
160 |         tag_class_url: "https://github.com/Lz12Code/go-blog"
161 |       },
162 |       {
163 |         tag_id: "2",
164 |         tag: "Python",
165 |         tag_class_url: "https://www.cnblogs.com/songzhixue/"
166 |       },
167 |       {
168 |         tag_id: "3",
169 |         tag: "Linux",
170 |         tag_class_url: "https://www.cnblogs.com/songzhixue/p/11145760.html"
171 |       }
172 |     ]
173 |   }
174 | ];
175 | export default {
176 |   name: "home",
177 |   data() {
178 |     return {
179 |       carousel_array: carousel_array,
180 |       article_array: article_array
181 |     };
182 |   }
183 | };
184 | </script>
185 | 
186 | <style scoped>
187 | /*当前页面CSS样式*/
188 | /* @import "../assets/static/css/background_image.css"; */
189 | @import "../../assets/static/css/home.css";
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/components/admin/article.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container>
  3 |     <el-main>
  4 |       <h1>文章管理</h1>
  5 |       <!--搜索功能-->
  6 |       <el-row>
  7 |         <el-col :span="4" :xs="8">
  8 |           <el-input placeholder="根据文章标题或分类搜索" v-model="search" clearable></el-input>
  9 |         </el-col>
 10 |         <el-button type="primary" icon="el-icon-search" @click="SearchArtcle(search)"></el-button>
 11 |         <el-button type="danger" icon="el-icon-delete" @click="DeleteArtcle"></el-button>
 12 |       </el-row>
 13 |       <!--文章展示-->
 14 |       <el-row>
 15 |         <el-col>
 16 |           <el-table :data="tableData" border style="width: 100%" highlight-current-row>
 17 |             <!--多选框-->
 18 |             <el-table-column type="selection" width="40"></el-table-column>
 19 |             <el-table-column fixed label="序号" type="index" width="80"></el-table-column>
 20 |             <!--ID-->
 21 |             <!-- <el-table-column prop="id" label="id" width="80"></el-table-column> -->
 22 |             <!--文章标题-->
 23 |             <el-table-column prop="title" label="标题" width="170" show-overflow-tooltip></el-table-column>
 24 |             <!--文章所属分类-->
 25 |             <el-table-column prop="category_name" label="分类" width="100" show-overflow-tooltip></el-table-column>
 26 |             <!--文章标签-->
 27 |             <el-table-column prop="tag_name" label="标签" width="200" show-overflow-tooltip>
 28 |               <template slot-scope="scope">
 29 |                 <span>{{scope.row.tag_name}}</span>
 30 |               </template>
 31 |             </el-table-column>
 32 |             <!--文章封面-->
 33 |             <el-table-column label="文章封面" show-overflow-tooltip width="130">
 34 |               <template slot-scope="scope">
 35 |                 <div class="demo-image__preview">
 36 |                   <el-image :src="scope.row.cover_address" style="width: 100px; height: 40px"></el-image>
 37 |                 </div>
 38 |               </template>
 39 |             </el-table-column>
 40 |             <!--文章添加时间-->
 41 |             <el-table-column prop="create_time" label="发布时间" width="200">
 42 |               <template slot-scope="scope">
 43 |                 <span>{{scope.row.create_time | formatDate}}</span>
 44 |               </template>
 45 |             </el-table-column>
 46 |             <!--文章更新时间-->
 47 |             <el-table-column prop="update_time" label="更新时间" width="200">
 48 |               <template slot-scope="scope">
 49 |                 <span>{{scope.row.update_time | formatDate}}</span>
 50 |               </template>
 51 |             </el-table-column>
 52 |             <!--文章浏览量-->
 53 |             <el-table-column prop="views" label="浏览量" width="100"></el-table-column>
 54 |             <!--文章评论数-->
 55 |             <!-- <el-table-column prop="comments_number" label="评论数" width="80"></el-table-column> -->
 56 |             <!--文章推荐分数-->
 57 |             <!-- <el-table-column label="推荐分数" show-overflow-tooltip width="170">
 58 |               <template slot-scope="scope">
 59 |                 <div class="block">
 60 |                   <el-rate v-model="scope.row.score" disabled show-score text-color="#ff9900"></el-rate>
 61 |                 </div>
 62 |               </template>
 63 |             </el-table-column>-->
 64 |             <!--文章发布状态-->
 65 |             <el-table-column label="发布状态" show-overflow-tooltip width="80">
 66 |               <template slot-scope="scope">
 67 |                 <el-switch v-model="scope.row.status" disabled active-color="#13ce66"></el-switch>
 68 |               </template>
 69 |             </el-table-column>
 70 | 
 71 |             <!--操作-->
 72 |             <el-table-column label="操作" show-overflow-tooltip>
 73 |               <template slot-scope="scope">
 74 |                 <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
 75 |                 <el-button @click="handleEdit(scope.row.id)" type="text" size="small">编辑</el-button>
 76 |               </template>
 77 |             </el-table-column>
 78 |           </el-table>
 79 |         </el-col>
 80 |       </el-row>
 81 |       <!--分页-->
 82 |       <el-row>
 83 |         <el-col>
 84 |           <div class="block">
 85 |             <el-pagination
 86 |               @size-change="handleSizeChange"
 87 |               @current-change="handleCurrentChange"
 88 |               :current-page="currentPage4"
 89 |               :page-sizes="[10, 20, 30, 40]"
 90 |               :page-size="100"
 91 |               layout="total, sizes, prev, pager, next, jumper"
 92 |               :total="100"
 93 |             ></el-pagination>
 94 |           </div>
 95 |         </el-col>
 96 |       </el-row>
 97 |     </el-main>
 98 |   </el-container>
 99 | </template>
100 | 
101 | <script>
102 | // var tableData = [
103 | //   {
104 | //     id: "1000", // 文章id
105 | //     title: "上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄", // 文章标题
106 | //     category: "Vue学习", // 所属分类
107 | //     createTime: "2020-02-16 09:27:33", // 发布时间
108 | //     updateTime: "2020-05-16 16:27:33", // 修改时间
109 | //     viewsNumber: "9999", //浏览量
110 | //     status: true, // 发布状态
111 | //     coverAddress:
112 | //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 文章封面地址
113 | //     coverPreview: [
114 | //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" //  文章预览图地址同封面地址
115 | //     ],
116 | //     // score: 3.1 // 文章推荐分数 总计5分  后端根据浏览量和评论数计算推荐分数  值必须为int类型
117 | //   },
118 | // ];
119 | // 导入时间戳转换日期时间的js
120 | import { formatDate } from "../../assets/static/js/time.js";
121 | export default {
122 |   name: "articleNav",
123 |   data() {
124 |     return {
125 |       tableData: [],
126 |       search: "",
127 |       currentPage1: 5,
128 |       currentPage2: 5,
129 |       currentPage3: 5,
130 |       currentPage4: 4
131 |     };
132 |   },
133 |   methods: {
134 |     // 编辑文章按钮
135 |     handleEdit(index, row) {
136 |       console.log(index, row);
137 |     },
138 |     // 删除文章按钮
139 |     handleDelete(articleId) {
140 |       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
141 |         confirmButtonText: "确定",
142 |         cancelButtonText: "取消",
143 |         type: "warning"
144 |       })
145 |         .then(() => {
146 |           // 点击确认删除后向后端发起请求删除该数据
147 |          
148 |           this.$axios.delete("/api/v1/article/delete", {
149 |             params: {
150 |               articleId: articleId
151 |             }
152 |           });
153 |           console.log(articleId);
154 |           this.$message({
155 |             type: "success",
156 |             message: "删除成功!"
157 |           });
158 |         })
159 |         .catch(() => {
160 |           this.$message({
161 |             type: "info",
162 |             message: "已取消删除"
163 |           });
164 |         });
165 |     },
166 |     // 模糊搜索文章
167 |     SearchArtcle(value) {
168 |       console.log(value);
169 |     },
170 |     // 批量删除
171 |     DeleteArtcle() {},
172 |     // 分页
173 |     handleSizeChange(val) {
174 |       console.log(`每页 ${val} 条`);
175 |     },
176 |     handleCurrentChange(val) {
177 |       console.log(`当前页: ${val}`);
178 |     }
179 |   },
180 |   // 日期过滤器 时间戳转换成日期时间
181 |   filters: {
182 |     formatDate(time) {
183 |       var date = new Date(time);
184 |       return formatDate(date, "yyyy-MM-dd hh:mm");
185 |     }
186 |   },
187 |   // 钩子 组件加载后运行 查询所有分类
188 |   created: function() {
189 |     // 组件创建之后
190 |     // 在created这个方法中可以操作后端的数据  数据驱动试图
191 |     // 应用：发起Ajax请求
192 | 
193 |     this.$axios
194 |       .get("/api/v1/article/all")
195 |       .then(res => {
196 |         // 校验后端返回的code
197 |         if (res.data.code === 1000) {
198 |           this.tableData = res.data.articleList;
199 |         } else {
200 |           alert("数据获取失败");
201 |         }
202 |       })
203 |       .catch(err => {
204 |         console.log(err);
205 |       });
206 |   }
207 | };
208 | </script>
209 | 
210 | <style scoped>
211 | .el-row {
212 |   margin-bottom: 20px;
213 | }
214 | .el-col {
215 |   border-radius: 4px;
216 | }
217 | </style>
218 | 


--------------------------------------------------------------------------------
/src/components/admin/Publish.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container>
  3 |     <el-row>
  4 |       <el-col :span="24">
  5 |         <el-main>
  6 |           <h1>发布文章</h1>
  7 |           <el-row :gutter="3">
  8 |             <el-col :span="12">
  9 |               <el-input v-model="title" placeholder="请输入文章标题" clearable></el-input>
 10 |             </el-col>
 11 |           </el-row>
 12 |           <el-row>
 13 |             <el-col>
 14 |               <el-select
 15 |                 v-model="category"
 16 |                 placeholder="请选择文章分类"
 17 |                 size="medium"
 18 |                 :filterable="true"
 19 |                 style="width: 50%"
 20 |               >
 21 |                 <el-option
 22 |                   v-for="item in options"
 23 |                   :key="item.id"
 24 |                   :label="item.category_name"
 25 |                   :value="item.id"
 26 |                 ></el-option>
 27 |               </el-select>
 28 |             </el-col>
 29 |           </el-row>
 30 |           <el-row :gutter="3">
 31 |             <el-col :span="12">
 32 |               <el-input v-model="tags" placeholder="请输入文章标签 多个标签用分号分隔" clearable></el-input>
 33 |             </el-col>
 34 |           </el-row>
 35 |           <el-row>
 36 |             <el-upload
 37 |               class="upload-demo"
 38 |               action="string"
 39 |               accept="image/jpeg, image/png, image/jpg"
 40 |               :http-request="uploadSectionFile"
 41 |               :on-preview="handlePreview"
 42 |               :on-remove="handleRemove"
 43 |               :file-list="fileList"
 44 |               list-type="picture"
 45 |               :limit="1"
 46 |               style="width: 50%"
 47 |             >
 48 |               <el-button size="small" type="primary">上传文章封面图</el-button>
 49 |               <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 50 |             </el-upload>
 51 |           </el-row>
 52 |           <!-- <el-row :gutter="3">
 53 |             <el-col :span="12">
 54 |               <el-input
 55 |                 type="textarea"
 56 |                 :rows="4"
 57 |                 placeholder="请输入文章简介"
 58 |                 v-model="textarea"
 59 |                 :show-word-limit="true"
 60 |                 :maxlength="100"
 61 |               ></el-input>
 62 |             </el-col>
 63 |           </el-row>-->
 64 |           <el-row :gutter="3">
 65 |             <el-col>
 66 |               <div id="editor">
 67 |                 <mavon-editor
 68 |                   style="height: 100%"
 69 |                   v-model="md"
 70 |                   ref="md"
 71 |                   @imgAdd="$imgAdd"
 72 |                   @change="change"
 73 |                 ></mavon-editor>
 74 |               </div>
 75 |             </el-col>
 76 |           </el-row>
 77 |           <el-row :gutter="3">
 78 |             <el-col>
 79 |               <el-button type="success" @click="PublishButton">文章发布</el-button>
 80 |               <el-button type="primary" @click="PublishSave">保存草稿</el-button>
 81 |             </el-col>
 82 |           </el-row>
 83 |         </el-main>
 84 |       </el-col>
 85 |     </el-row>
 86 |   </el-container>
 87 | </template>
 88 | 
 89 | <script>
 90 | // Local Registration
 91 | import axios from "axios";
 92 | import qs from "qs"; // post请求传form-data要转换
 93 | import { mavonEditor } from "mavon-editor";
 94 | import "mavon-editor/dist/css/index.css";
 95 | 
 96 | axios.defaults.baseURL = "http://127.0.0.1:8081";
 97 | export default {
 98 |   name: "pulishNav",
 99 |   data() {
100 |     return {
101 |       md: "", // 文章内容
102 |       title: "", // 文章标题
103 |       // 文章分类
104 |       options: [],
105 |       category: "", // 文章分类
106 |       // textarea: "",     // 简介
107 |       OssUrl: "", // 图片上传aliyun返回的url
108 |       html: "", // markdown解析成html
109 |       tags: "", // 文章标签
110 |       fileList: [
111 |         {
112 |           name: "demo.jpeg",
113 |           url:
114 |             "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
115 |         }
116 |       ]
117 |     };
118 |   },
119 |   methods: {
120 |     // 发布文章
121 |     PublishButton() {
122 |       if (this.md && this.title && this.category) {
123 |         // 获取文章之后的处理逻辑
124 |         this.$axios
125 |           .post(
126 |             "/api/v1/article/create",
127 |             // 构造请求参数form-data
128 |             qs.stringify({
129 |               title: this.title,
130 |               category: this.category,
131 |               ossUrl: this.OssUrl,
132 |               html: this.html,
133 |               tags: this.tags,
134 |               status: true,
135 |               md: this.md
136 |             })
137 |           )
138 |           .then(function(response) {
139 |             console.log("res:", response);
140 |             if (response.data.code === 1000) {
141 |               alert("文章发布成功！");
142 |             }
143 |           })
144 |           .catch(function(error) {
145 |             console.log(error);
146 |           });
147 |       } else {
148 |         alert("文章内容不能不空！");
149 |       }
150 |     },
151 |     // 保存文章
152 |     PublishSave() {
153 |       if (this.md && this.title && this.category) {
154 |         // 获取文章之后的处理逻辑
155 |         this.$axios
156 |           .post(
157 |             "/api/v1/article/create",
158 |             // 构造请求参数form-data
159 |             qs.stringify({
160 |               title: this.title,
161 |               category: this.category,
162 |               ossUrl: this.OssUrl,
163 |               html: this.html,
164 |               tags: this.tags,
165 |               status: false,
166 |               md: this.md
167 |             })
168 |           )
169 |           .then(function(response) {
170 |             alert("文章保存为草稿！");
171 |           })
172 |           .catch(function(error) {
173 |             console.log(error);
174 |           });
175 |       } else {
176 |         alert("文章内容不能不空！");
177 |       }
178 |     },
179 |     // 删除封面图触发的函数
180 |     handleRemove(file, fileList) {
181 |       // console.log(file, fileList);
182 |     },
183 |     // 点击封面图触发的函数
184 |     handlePreview(file) {
185 |       // console.log(file);
186 |     },
187 | 
188 |     // 绑定@imgAdd event
189 |     $imgAdd(pos, $file) {
190 |       // 第一步.将图片上传到服务器.
191 |       var formdata = new FormData();
192 |       formdata.append("upload", $file);
193 |       this.$axios({
194 |         url: "http://127.0.0.1:8081/api/v1/upload",
195 |         method: "post",
196 |         data: formdata,
197 |         headers: { "Content-Type": "multipart/form-data" }
198 |       }).then(data => {
199 |         // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
200 |         /**
201 |          * $vm 指为mavonEditor实例，可以通过如下两种方式获取
202 |          * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
203 |          * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
204 |          */
205 |         // console.log(data)
206 |         // 将后端返回的url替换到文本原位置
207 |         this.$refs.md.$img2Url(pos, data.data.imgurl);
208 |         // $vm.$img2Url(pos, url);
209 |       });
210 |     },
211 |     // 所有操作都会被解析重新渲染
212 |     change(value, render) {
213 |       // render 为 markdown 解析后的结果[html]
214 |       this.html = render;
215 |     },
216 |     // 文件上传触发的函数   自定义请求:http-request="uploadSectionFile"
217 |     uploadSectionFile(param) {
218 |       var fileObj = param.file; // 要上传的文件对象
219 |       var formData = new FormData();
220 |       formData.append("upload", fileObj); // 传文件
221 |       // console.log(fileObj);
222 |       // form.append('id',this.srid)          // 传其它参数文件
223 |       this.$axios({
224 |         url: "http://127.0.0.1:8081/api/v1/upload",
225 |         method: "post",
226 |         data: formData,
227 |         headers: { "Content-Type": "multipart/form-data" }
228 |       })
229 |         .then(res => {
230 |           // 图片上传到阿里云oss  后端返回的图片地址
231 |           this.OssUrl = res.data.imgurl;
232 |           alert("上传成功");
233 |         })
234 |         .catch(err => {
235 |           console.log(err);
236 |           alert("上传失败");
237 |         });
238 |     }
239 |   },
240 |   comments: mavonEditor,
241 |   // 钩子 组件加载后运行 查询所有分类
242 |   created: function() {
243 |     // 组件创建之后
244 |     // 在created这个方法中可以操作后端的数据  数据驱动试图
245 |     // 应用：发起Ajax请求
246 | 
247 |     this.$axios
248 |       .get("/api/v1/category/all")
249 |       .then(res => {
250 |         // 校验后端返回的code
251 |         if (res.data.code === 1000) {
252 |           this.options = res.data.categoryList;
253 |           console.log(res.data.categoryList);
254 |         } else {
255 |           alert("数据获取失败");
256 |         }
257 |       })
258 |       .catch(err => {
259 |         console.log(err);
260 |       });
261 |   }
262 | };
263 | </script>
264 | 
265 | <style scoped>
266 | #editor {
267 |   margin: auto;
268 |   width: 100%;
269 |   height: 700px;
270 | }
271 | 
272 | .el-row {
273 |   margin-bottom: 20px;
274 | }
275 | </style>
276 | 


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