├── .DS_Store
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── .DS_Store
    ├── App.vue
    ├── assets
    │   ├── .DS_Store
    │   └── img
    │   │   ├── .DS_Store
    │   │   ├── admin1.jpeg
    │   │   ├── admin2.png
    │   │   ├── admin3.png
    │   │   ├── admin4.png
    │   │   ├── admin5.png
    │   │   ├── loginImg.jpg
    │   │   └── verterLogo.png
    ├── components
    │   ├── FixHeader.vue
    │   ├── NavLeft.vue
    │   ├── QuillEdit.vue
    │   └── config.js
    ├── main.js
    ├── router.js
    ├── style
    │   └── varStyle.scss
    └── view
    │   ├── ArticalList.vue
    │   ├── Index.vue
    │   ├── Label.vue
    │   └── Login.vue
└── vue.config.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | ### 基于vue和element的个人博客后台管理系统
18 | 
19 | 
20 | ![图片名称](https://github.com/zhjing1019/blogVueAdmin/blob/master/src/assets/img/admin1.jpeg)  
21 | 
22 | ![图片名称](https://github.com/zhjing1019/blogVueAdmin/blob/master/src/assets/img/admin2.png)  
23 | 
24 | ![图片名称](https://github.com/zhjing1019/blogVueAdmin/blob/master/src/assets/img/admin3.png)  
25 | 
26 | ![图片名称](https://github.com/zhjing1019/blogVueAdmin/blob/master/src/assets/img/admin4.png)  
27 | 
28 | ![图片名称](https://github.com/zhjing1019/blogVueAdmin/blob/master/src/assets/img/admin5.png)  
29 | 
30 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.0",
12 |     "core-js": "^2.6.5",
13 |     "element-ui": "^2.12.0",
14 |     "node-sass": "^4.12.0",
15 |     "sass-loader": "^8.0.0",
16 |     "vue": "^2.6.10",
17 |     "vue-quill-editor": "^3.0.6",
18 |     "vue-router": "^3.1.3"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^3.10.0",
22 |     "@vue/cli-plugin-eslint": "^3.10.0",
23 |     "@vue/cli-service": "^3.10.0",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.16.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "vue-template-compiler": "^2.6.10"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "rules": {},
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     }
42 |   },
43 |   "postcss": {
44 |     "plugins": {
45 |       "autoprefixer": {}
46 |     }
47 |   },
48 |   "browserslist": [
49 |     "> 1%",
50 |     "last 2 versions"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/public/favicon.ico


--------------------------------------------------------------------------------
/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 |     <title>guoliao&zhangjing后台管理系统</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/.DS_Store


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app',
10 | }
11 | </script>
12 | 
13 | <style lang="scss">
14 | *{
15 |   padding: 0;
16 |   margin: 0;
17 |   list-style: none;
18 | }
19 | #app {
20 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
21 |   -webkit-font-smoothing: antialiased;
22 |   -moz-osx-font-smoothing: grayscale;
23 |   color: #2c3e50;
24 |   width: 100vw;
25 |   height: 100vh;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/.DS_Store


--------------------------------------------------------------------------------
/src/assets/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/.DS_Store


--------------------------------------------------------------------------------
/src/assets/img/admin1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/admin1.jpeg


--------------------------------------------------------------------------------
/src/assets/img/admin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/admin2.png


--------------------------------------------------------------------------------
/src/assets/img/admin3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/admin3.png


--------------------------------------------------------------------------------
/src/assets/img/admin4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/admin4.png


--------------------------------------------------------------------------------
/src/assets/img/admin5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/admin5.png


--------------------------------------------------------------------------------
/src/assets/img/loginImg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/loginImg.jpg


--------------------------------------------------------------------------------
/src/assets/img/verterLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/blogVueAdmin/c9af470cf6696cd273a405582276a2663f46b60f/src/assets/img/verterLogo.png


--------------------------------------------------------------------------------
/src/components/FixHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="header-fix">
 3 |         <div class="header-main">
 4 |             <img class="logo-img" src="@/assets/img/verterLogo.png" alt="">
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | <script>
 9 | 
10 | export default {
11 |     data() {
12 |         return {
13 |  
14 |         };
15 |     },
16 |     props: {
17 |     },
18 |     methods: {
19 |     }
20 | }
21 | </script>
22 | 
23 | <style lang="scss">
24 | @import "@/style/varStyle.scss";
25 |     .header-fix{
26 |         z-index: 100;
27 |         width: 100%;
28 |         height: 60px;
29 |         background-color: #fff;
30 |         position: fixed;
31 |         line-height: 60px;
32 |         border-bottom: 1px solid #f1f1f1;
33 |         box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
34 |         padding: 0 20px;
35 |         
36 |         .header-main {
37 |             margin: 0 auto;
38 |             
39 |             .header-search{
40 |                 width: 150px;
41 |                 float: right;
42 |             }
43 |         }
44 |         
45 |         .logo-img{
46 |             // width: 50px;
47 |             height: 50px;
48 |             vertical-align: middle;
49 |             margin-right: 10px;
50 |             margin-top: -3px;
51 |         }
52 |         .logo-text{
53 |             font-size: 20px;
54 |             color: #007fff;
55 |         }
56 |         
57 | 
58 |     }
59 |   
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/NavLeft.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="nav-left">
 3 |     <el-menu
 4 |       default-active="label"
 5 |       class="left-menu-vertical"
 6 |       :router="true">
 7 |       <el-menu-item :index="item.path" v-for="(item, index) in label" :key="index">
 8 |         <i :class="item.icon"></i>
 9 |         <span slot="title">{{item.label}}</span>
10 |       </el-menu-item>
11 |     </el-menu>
12 |  
13 |     </div>
14 | </template>
15 | <script>
16 | import {label} from "@/components/config.js"
17 | export default {
18 |     data() {
19 |         return {
20 |             label: label
21 |         };
22 |     },
23 |     props: {
24 |     },
25 |     methods: {
26 | 
27 |  
28 |     }
29 | }
30 | </script>
31 | 
32 | <style lang="scss">
33 | @import "@/style/varStyle.scss";
34 |   .nav-left{
35 |       width: 100%;
36 |       height: calc(100vh - 60px);
37 |       .left-menu-vertical{
38 |           height: 100%;
39 |       }
40 |   }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/QuillEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="partyjx-release-form scroll-div">
  3 |     <el-row class="party-building-form-main">
  4 |       <el-form :model="form" ref="ruleForm"  label-width="80px">
  5 |         <template v-for="(item, index) in partyFormData">
  6 |           <el-col :span="item.colSpan" :key="index">
  7 |             <el-form-item :label="item.label">
  8 |               <el-input v-if="item.type == 'input'" v-model="form[item.id]"></el-input>
  9 |               <el-input v-if="item.type == 'textarea'" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form[item.id]"></el-input>
 10 |               <el-select @change="typeChange(form[item.id])" v-if="item.type == 'select'" v-model="form[item.id]" placeholder="请选择" :multiple="item.multiple ? item.multiple : false">
 11 |                 <el-option
 12 |                   v-for="y in item.list"
 13 |                   :key="y.name"
 14 |                   :label="y.name"
 15 |                   :value="y.name">
 16 |                 </el-option>
 17 |               </el-select>
 18 |             </el-form-item>
 19 |           </el-col>
 20 |         </template>
 21 |         <el-col :span="24">
 22 |           <div class="partyjx-editor">
 23 |             <quill-editor
 24 |               v-model="content"
 25 |               ref="myQuillEditor"
 26 |               :options="editorOption"
 27 |               @blur="onEditorBlur($event)"
 28 |               @focus="onEditorFocus($event)"
 29 |               @ready="onEditorReady($event)"
 30 |               @change="onEditorChange($event)"
 31 |             >
 32 |             </quill-editor>
 33 |           </div>
 34 |         </el-col>
 35 |       </el-form>
 36 |     </el-row>
 37 |     <el-row class="text-align-right el-form-footer">
 38 |       <el-button class="red-default-btn" @click="cancel">取消</el-button>
 39 |       <!-- <el-button class="red-default-btn" @click="saveDraft">保存到草稿箱</el-button> -->
 40 |       <!-- <el-button class="red-default-btn" @click="seeModel">预览</el-button> -->
 41 |       <el-button type="primary" class="red-btn" @click="creatAdd">立即创建</el-button>
 42 |     </el-row>
 43 |   </div>
 44 | </template>
 45 | <script>
 46 | 
 47 | import "quill/dist/quill.core.css";
 48 | import "quill/dist/quill.snow.css";
 49 | import "quill/dist/quill.bubble.css";
 50 | import { quillEditor } from "vue-quill-editor";
 51 | 
 52 | export default {
 53 |   data() {
 54 |     return {
 55 |       fileListArr: [],
 56 |       content: "",
 57 |       nowHtml: "",
 58 |       summary: "",
 59 |       fileList: [],
 60 |       form: this.partyFormModel,
 61 |       editorOption: {
 62 |         modules: {
 63 |           toolbar: [
 64 |             [{ header: [1, 2, 3, 4, 5, 6, false] }],
 65 |             [{ font: [] }],
 66 |             [{ size: ["small", false, "large", "huge"] }],
 67 |             [{ color: [] }, { background: [] }],
 68 |             ["bold", "italic", "underline"],
 69 |             [{ header: 1 }, { header: 2 }],
 70 |             [{ list: "ordered" }, { list: "bullet" }],
 71 |             [{ align: [] }],
 72 |             ["link", "image"]
 73 |           ]
 74 |         },
 75 |         placeholder: "请输入..."
 76 |       }
 77 |     };
 78 |   },
 79 |   props: {
 80 |     partyFormData: Array,
 81 |     isCarouselShow: Boolean,
 82 |     partyFormModel: Object,
 83 |     uploadFile: Boolean,
 84 |     partyDialogVisible: Boolean,
 85 |     partydetails: Object,
 86 |     dialogVis: Boolean
 87 |   },
 88 |   components: {
 89 |     // UploadImg,
 90 |     // UploadFile,
 91 |     quillEditor
 92 |   },
 93 |   computed: {
 94 |     upDataForm() {
 95 |       let ids = [];
 96 |       this.fileList.forEach(x => {
 97 |         let idDetail = { attach: x.id };
 98 |         ids.push(idDetail);
 99 |       });
100 |       let data = {
101 |         title: this.form.title,
102 |         brief: this.form.brief,
103 |         type: this.form.type,
104 |         tags: this.form.tags,
105 |         content: this.nowHtml,
106 |       };
107 |       return data;
108 |     },
109 |     upDataContent() {
110 |       let data = {
111 |         title: this.form.title,
112 |         brief: this.form.brief,
113 |         type: this.form.type,
114 |         tags: this.form.tags,
115 |         content: this.nowHtml,
116 |       };
117 |       if (this.partyFormModel.id) data.id = this.partyFormModel.id;
118 |       return data;
119 |     },
120 |     formData() {
121 |       let data = this.form;
122 |       this.$emit("updata:partyFormModel", this.form);
123 |       return data;
124 |     }
125 |   },
126 | 
127 |   watch: {
128 |     partyDialogVisible: function(val) {
129 |       this.partyDialogVisible = val;
130 |     },
131 |     dialogVis: function(val) {
132 |       this.dialogVis = val;
133 |     },
134 | 
135 |     partyFormModel: {
136 |       handler(val) {
137 |         this.partyFormModel = val;
138 |       },
139 |       deep: true
140 |     },
141 | 
142 |   },
143 |   methods: {
144 |     typeChange(value) {
145 |       this.$emit("typeChange", value)
146 |     },
147 |     downloadList(list) {
148 |       this.fileList = list;
149 |     },
150 |     resetEditContent() {
151 |       this.content = "";
152 |       this.form = this.partyFormModel;
153 |     },
154 |     giveEditContent(content) {
155 |       this.content = content;
156 |       this.form = this.partyFormModel;
157 |     },
158 |     cancel() {
159 |       this.$emit("update:dialogVis", false);
160 |     },
161 |     // 立即创建
162 |     creatAdd() {
163 |       this.$emit("creatAdd", this.upDataForm);
164 |     },
165 |     // 保存到草稿箱
166 |     saveDraft() {
167 |       if (this.partyFormModel.id) this.upDataForm.id = this.partyFormModel.id;
168 |       this.$emit("saveDraft", this.upDataForm);
169 |     },
170 |     seeModel() {
171 |       this.$emit("update:partydetails", this.upDataContent);
172 |       this.$emit("update:partyDialogVisible", true);
173 |     },
174 |     onEditorBlur(quill) {
175 |       console.log("editor blur!", quill);
176 |     },
177 |     onEditorFocus(quill) {
178 |       console.log("editor focus!", quill);
179 |     },
180 |     onEditorReady(quill) {
181 |       console.log("editor ready!", quill);
182 |     },
183 |     onEditorChange({ quill, html, text }) {
184 |       console.log("editor change!", quill, html, text);
185 |       this.nowHtml = html;
186 |       // let summary = text.length > 300 ? text.slice(0, 300) : text;
187 |       // this.summary = summary;
188 |     },
189 |     getNowFormatDate() {
190 |       let date = new Date();
191 |       let seperator1 = "-";
192 |       let year = date.getFullYear();
193 |       let month = date.getMonth() + 1;
194 |       let strDate = date.getDate();
195 |       if (month >= 1 && month <= 9) {
196 |         month = "0" + month;
197 |       }
198 |       if (strDate >= 0 && strDate <= 9) {
199 |         strDate = "0" + strDate;
200 |       }
201 |       let currentdate = year + seperator1 + month + seperator1 + strDate;
202 |       return currentdate;
203 |     }
204 |   }
205 | };
206 | </script>
207 | <style lang="scss">
208 | .partyjx-release-form {
209 |   height: 100%;
210 |   overflow: auto;
211 |   padding: 0 20px;
212 |   .party-building-form-main {
213 |     margin-bottom: 70px;
214 |   }
215 |   .el-input {
216 |     width: 500px;
217 |   }
218 |   .partyjx-editor {
219 |     width: 100%;
220 |     height: 420px;
221 |     margin: 20px 0 0 0;
222 |     .quill-editor {
223 |       height: 380px;
224 |       width: 100%;
225 |       .ql-toolbar {
226 |         background: #f8f8f8;
227 |         border: 1px solid #d9d9d9;
228 |         border-bottom: 0;
229 |         border-radius: 4px 4px 0 0;
230 |       }
231 |       .ql-container.ql-snow {
232 |         border: 1px solid #d9d9d9;
233 |         border-radius: 0px 0px 4px 4px;
234 |       }
235 |     }
236 |   }
237 |   .party-building-upload-file-content {
238 |     width: 100%;
239 |     min-height: 72px;
240 |     height: auto;
241 |     background: #f8f8f8;
242 |     border-radius: 0px 0px 4px 4px;
243 |     border: 1px solid #d9d9d9;
244 |     border-top: 0;
245 |     padding: 20px;
246 |     box-sizing: border-box;
247 |   }
248 |   .el-form-footer {
249 |     margin-top: 20px;
250 |     .el-form-item {
251 |       margin-bottom: 0;
252 |     }
253 |   }
254 |   .red-btn {
255 |     background-color: #e52f32;
256 |     border-color: #e52f32;
257 |   }
258 |   .red-btn:hover {
259 |     background-color: rgba(229, 47, 50, 0.8);
260 |     border-color: rgba(229, 47, 50, 0.8);
261 |   }
262 |   .red-default-btn:hover {
263 |     background: rgba(229, 47, 50, 0.1);
264 |     border: 1px solid #e52f32;
265 |     color: #e52f32;
266 |   }
267 |   .el-radio-button__inner:hover {
268 |     color: #e32b30;
269 |   }
270 |   .is-active .el-radio-button__inner:hover {
271 |     color: #fff;
272 |   }
273 |   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
274 |     background-color: #e32b30;
275 |     border-color: #e32b30;
276 |     -webkit-box-shadow: -1px 0 0 0 #e32b30;
277 |     box-shadow: -1px 0 0 0 #e32b30;
278 |   }
279 | }
280 | .text-align-right {
281 |   text-align: right;
282 |   box-shadow: 0px 12px 8px -12px #dddddd;
283 |   position: absolute;
284 |   padding: 10px 25px;
285 |   bottom: 0px;
286 |   right: 0;
287 |   background: #fff;
288 |   width: 100%;
289 |   border-top: 1px solid #ddd;
290 | }
291 | </style>
292 | 


--------------------------------------------------------------------------------
/src/components/config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export const label =[
 3 |     {
 4 |         index: "1",
 5 |         label: "分类管理",
 6 |         path: "label",
 7 |         icon: "el-icon-collection-tag"
 8 |     },
 9 |     {
10 |         index: "2",
11 |         label: "文章列表",
12 |         path: "articalList",
13 |         icon: "el-icon-document"
14 |     }
15 | ]


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui';
 4 | import 'element-ui/lib/theme-chalk/index.css';
 5 | import router from "./router.js";
 6 | import axios from "axios";
 7 | 
 8 | Vue.use(ElementUI);
 9 | Vue.use(axios);
10 | 
11 | // // 添加请求拦截器，在请求头中加token
12 | // axios.interceptors.request.use(
13 | //   config => {
14 | //     if (localStorage.getItem('Authorization')) {
15 | //       config.headers.Authorization = localStorage.getItem('Authorization');
16 | //     }
17 |  
18 | //     return config;
19 | //   },
20 | //   error => {
21 | //     return Promise.reject(error);
22 | //   });
23 | 
24 | 
25 |   //异步请求前在header里加入token
26 | axios.interceptors.request.use(
27 |   config => {
28 |     // if (config.url === "") {
29 |     //如果是登录操作，则不需要携带header里面的token
30 |     // } else {
31 |     if (localStorage.getItem("Authorization")) {
32 |       config.headers["x-cms-token"] = localStorage.getItem("Authorization");
33 |     }
34 |     // }
35 |     return config;
36 |   },
37 |   error => {
38 |     return Promise.reject(error);
39 |   }
40 | );
41 | //异步请求后，判断token是否过期
42 | axios.interceptors.response.use(
43 |   response => {
44 |     return response;
45 |   },
46 |   error => {
47 |     if (error.response) {
48 |       switch (error.response.status) {
49 |         case 401:
50 |           localStorage.removeItem("Authorization");
51 |           this.$router.push("/");
52 |       }
53 |     }
54 |   }
55 | );
56 | 
57 | 
58 | Vue.config.productionTip = false
59 | 
60 | new Vue({
61 |   router,
62 |   render: h => h(App),
63 | }).$mount('#app')
64 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import Label from "@/view/Label.vue";
 4 | import ArticalList from "@/view/ArticalList.vue";
 5 | import Index from "@/view/Index.vue";
 6 | import Login from "@/view/Login.vue";
 7 | 
 8 | 
 9 | Vue.use(Router);
10 | 
11 | const router =  new Router({
12 |   routes: [
13 |     {
14 |       path: "/",
15 |       name: "Login",
16 |       component: Login
17 |     },
18 |     {
19 |       path: "/index",
20 |       name: "Index",
21 |       component: Index,
22 |       children: [
23 |         {
24 |           path: "/label",
25 |           name: "Label",
26 |           component: Label
27 |         },
28 |         {
29 |           path: "/label",
30 |           name: "Label",
31 |           component: Label
32 |         },
33 |         {
34 |           path: "/articalList",
35 |           name: "ArticalList",
36 |           component: ArticalList
37 |         }
38 |       ],
39 |       redirect: "/label"
40 |     },
41 | 
42 |   ]
43 | });
44 | 
45 | // 导航守卫
46 | // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
47 | router.beforeEach((to, from, next) => {
48 |   if (to.path === '/') {
49 |     next();
50 |   } else {
51 |     let token = localStorage.getItem('Authorization');
52 |  
53 |     if (token === 'null' || token === '') {
54 |       next('/');
55 |     } else {
56 |       next();
57 |     }
58 |   }
59 | });
60 | 
61 | export default router;
62 | 
63 | 


--------------------------------------------------------------------------------
/src/style/varStyle.scss:
--------------------------------------------------------------------------------
1 | $theme-color: #606266;
2 | $font-color: #303133;
3 | $bg-color: #f4f5f5;
4 | $max-width: 960px;
5 | $border-el: 1px solid #EBEEF5


--------------------------------------------------------------------------------
/src/view/ArticalList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="artical-list">
  3 |     <el-button type="primary" plain class="add-artical-btn" @click="articalAdd">新建文章</el-button>
  4 |     <el-select class="artical-type-select" v-model="type" placeholder="请选择文章分类">
  5 |       <el-option
  6 |         v-for="item in typeData"
  7 |         :key="item.name"
  8 |         :label="item.name"
  9 |         :value="item.name">
 10 |       </el-option>
 11 |     </el-select>
 12 |  
 13 |     <el-tabs v-model="activeName" @tab-click="handleClick" class="artical-tab">
 14 |       <el-tab-pane label="已发布文章" name="first">
 15 |         <el-table
 16 |         :data="tableData"
 17 |         style="width: 100%">
 18 |             <el-table-column v-for="(item, index) in labelField" :key="index"
 19 |                 :prop="item.prop"
 20 |                 :label="item.label">
 21 |                 <template slot-scope="scope">
 22 |                     <div v-if="item.prop == 'oper'">
 23 |                         <!-- <el-button
 24 |                         size="mini"
 25 |                         @click="handleEdit(scope.$index, scope.row)">预览</el-button> -->
 26 |                         <el-button
 27 |                         size="mini"
 28 |                         type="danger"
 29 |                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 30 |                     </div>
 31 |                     <div v-else-if="item.prop == 'lastModifyTime'">
 32 |                         {{new Date(scope.row[item.prop])}}
 33 |                     </div>
 34 |                     
 35 |                     <span v-else> {{ scope.row[item.prop] }} </span>
 36 |                 </template>
 37 |  
 38 |             </el-table-column>
 39 |         </el-table>        
 40 |       </el-tab-pane>
 41 |       <el-tab-pane label="草稿箱" name="second">
 42 |         <el-table
 43 |         :data="tableData"
 44 |         style="width: 100%">
 45 |             <el-table-column v-for="(item, index) in labelField" :key="index"
 46 |                 :prop="item.prop"
 47 |                 :label="item.label">
 48 |                 <template slot-scope="scope">
 49 |                     <div v-if="item.prop == 'oper'">
 50 |                         <el-button
 51 |                         size="mini"
 52 |                         @click="handleEdit(scope.$index, scope.row)">预览</el-button>
 53 |                         <el-button
 54 |                         size="mini"
 55 |                         type="danger"
 56 |                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 57 |                     </div>
 58 |                     
 59 |                     <span v-else> {{ scope.row[item.prop] }} </span>
 60 |                 </template>
 61 |  
 62 |             </el-table-column>
 63 |         </el-table> 
 64 |       </el-tab-pane>
 65 |     </el-tabs>
 66 |     <div class="party-jx-dialog">
 67 |       <el-dialog top="20px" :title="formTitle" :visible.sync="partyJxDialog" :before-close="jxDialogBeforeClose" width="100%">
 68 |         <quill-edit
 69 |           ref="editJx"
 70 |           :partyFormData="partyFormData"
 71 |           :isCarouselShow="isCarouselShow"
 72 |           :partyFormModel.sync="partyFormModel"
 73 |           :partyDialogVisible.sync="partyDialogVisible"
 74 |           :partydetails.sync="jxdetails"
 75 |           :dialogVis.sync="partyJxDialog"
 76 |           @creatAdd="creatAdd"
 77 |           @saveDraft="saveDraft"
 78 |           @typeChange="typeChange"
 79 | 
 80 |         ></quill-edit>
 81 |       </el-dialog>
 82 |     </div>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | import axios from "axios";
 88 | import QuillEdit from "@/components/QuillEdit.vue"
 89 | export default {
 90 |   components: {QuillEdit},
 91 |   data() {
 92 |     return {
 93 |       type: "",
 94 |       typeData: [],
 95 |       activeName: 'first',
 96 |       formTitle: "新建文章",
 97 |       partyJxDialog: false,
 98 |       labelField: [
 99 |         {
100 |           prop: "title",
101 |           label: "标题",
102 |         },
103 |         {
104 |           prop: "lastModifyTime",
105 |           label: "发布日期",
106 |         },
107 |         // {
108 |         //   prop: "oper",
109 |         //   label: "操作",
110 |         // },
111 | 
112 |       ],
113 |       tableData: [],
114 |       jxdetails: {},
115 |       partyDialogVisible: false,
116 |       partyFormData: [
117 |         { id: "title", label: "文章标题", colSpan: 24, type: "input" },
118 |         { id: "brief", label: "文章简介", colSpan: 24, type: "textarea"},
119 |         { id: "type", label: "文章分类", colSpan: 12, type: "select", list: []},
120 |         { id: "tags", label: "文章标签", colSpan: 12, multiple: true, type: "select", list:[]},
121 | 
122 |       ],
123 |       isCarouselShow: false,
124 |       partyFormModel: {
125 |         title: "",
126 |         brief: "",
127 |         type: "",
128 |         tags: [],
129 |       },  
130 |   
131 |     }
132 |   },
133 |   mounted() {
134 |     this.getType()
135 |   },
136 |   watch: {
137 |     type() {
138 |       this.getArtical();
139 |     }
140 |   },
141 |   methods: {
142 |     //获取所有分类
143 |     getType() {
144 |       let _this = this;
145 |       axios.get('cms/type')
146 |         .then(function (res) {
147 |           console.log(res.data.data)
148 |             _this.typeData = res.data.data;
149 |             _this.type = _this.typeData[0].name;
150 |             _this.partyFormData[2].list = res.data.data
151 |         })
152 |         .catch(function (error) {
153 |           _this.$message.error(error.msg);
154 |         })
155 |     },
156 |     //根据分类获取文章
157 |     getArtical() {
158 |       let _this = this;
159 |       axios.get('/cms/article/' + _this.type)
160 |         .then(function (res) {
161 |             _this.tableData = res.data.data;
162 |         })
163 |         .catch(function (error) {
164 |           _this.$message.error(error.msg);
165 |         })
166 |     },
167 |     typeChange(value) {
168 |       this.typeData.forEach(x => {
169 |         if(x.name === value) this.partyFormData[3].list = x.tags
170 |       })
171 | 
172 |     },
173 |     articalAdd() {
174 |       this.partyJxDialog = true;
175 |     },
176 |     handleClick(tab, event) {
177 |       console.log(tab, event);
178 |     },
179 |     jxDialogBeforeClose() {
180 |       this.partyJxDialog = false;
181 |     },
182 |     isCarouselChange(val) {
183 |       if (val == "1") {
184 |         this.isCarouselShow = true;
185 |       } else {
186 |         this.isCarouselShow = false;
187 |       }
188 |     },
189 |     creatAdd(data) {
190 |       let _this = this;
191 |       axios({
192 |         method: 'post',
193 |         url: '/cms/article/edit',
194 |         data: data
195 |       }).then(() => {
196 |         _this.getArtical();
197 |         _this.partyJxDialog = false;
198 |       }).catch(error => {
199 |         _this.$message.error(error.msg);
200 |       });
201 |       
202 |     },
203 |     saveDraft(data) {
204 |       console.log(data);
205 |     },    
206 |   }
207 | 
208 | }
209 | </script>
210 | 
211 | <style lang="scss">
212 | .artical-list{
213 |   padding: 20px;
214 |   padding-top: 0;
215 |   .add-artical-btn{
216 |     position: absolute;
217 |     right: 20px;
218 |     margin-top: -10px;
219 |     z-index: 100;
220 |   }
221 |   .artical-tab{
222 |     margin-top: 20px;
223 |   }
224 |   .artical-type-select{
225 |     position: absolute;
226 |     right: 130px;
227 |     margin-top: -10px;
228 |     z-index: 100;
229 |   }
230 | }
231 | </style>
232 | 


--------------------------------------------------------------------------------
/src/view/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index-main">
 3 |     <fix-header></fix-header>
 4 |     <el-row class="admin-main">
 5 |         <el-col :span="4" class="">
 6 |           <nav-left></nav-left>
 7 |         </el-col>
 8 |         <el-col :span="20">
 9 |           <router-view></router-view>
10 |         </el-col>
11 |       </el-row>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import FixHeader from "@/components/FixHeader.vue";
17 | import NavLeft from "@/components/NavLeft.vue"
18 | export default {
19 |   components: {FixHeader, NavLeft}
20 | }
21 | </script>
22 | 
23 | <style lang="scss">
24 | .index-main {
25 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
26 |   -webkit-font-smoothing: antialiased;
27 |   -moz-osx-font-smoothing: grayscale;
28 |   color: #2c3e50;
29 |   width: 100vw;
30 |   height: 100vh;
31 |   .admin-main{
32 |     height: calc(100vh - 60px);
33 |     padding-top: 60px;
34 |   }
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/view/Label.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <dir class="label-main">
  3 |         <div class="label-add">
  4 |             <el-button type="primary" plain  @click="addLabel">新建分类</el-button>
  5 |         </div>
  6 |         <el-table
  7 |         :data="tableData"
  8 |         style="width: 100%">
  9 |             <el-table-column v-for="(item, index) in labelField" :key="index"
 10 |                 :prop="item.prop"
 11 |                 :label="item.label">
 12 |                 <template slot-scope="scope">
 13 |                     <div v-if="item.prop == 'oper'">
 14 |                         <el-button
 15 |                         size="mini"
 16 |                         @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
 17 |                         <!-- <el-button
 18 |                         size="mini"
 19 |                         type="danger"
 20 |                         @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
 21 |                     </div>
 22 |                     <div v-if="item.prop == 'tags'">
 23 |                         <span v-for="(tag, indexY) in scope.row[item.prop]" :key="indexY">
 24 |                             {{tag.name}}
 25 |                             <span v-if="indexY !== scope.row[item.prop].length - 1">、</span>
 26 |                         </span>
 27 |                     </div>
 28 |                     
 29 |                     <span v-else> {{ scope.row[item.prop] }} </span>
 30 |                 </template>
 31 |  
 32 |             </el-table-column>
 33 |         </el-table>
 34 |         <el-drawer
 35 |             :title="drawerTitle"
 36 |             :before-close="handleClose"
 37 |             :visible.sync="dialog"
 38 |             direction="rtl"
 39 |             custom-class="demo-drawer"
 40 |             ref="drawer"
 41 |             >
 42 |             <div class="demo-drawer__content">
 43 |                 <el-form :model="form" ref="ruleForm">
 44 |                     <el-form-item label="分类名称" :label-width="formLabelWidth">
 45 |                         <el-input v-model="form.name" autocomplete="off"></el-input>
 46 |                     </el-form-item>
 47 |                     <el-form-item label="访问路径" :label-width="formLabelWidth">
 48 |                         <el-input v-model="form.dir" autocomplete="off"></el-input>
 49 |                     </el-form-item>
 50 |                     
 51 |                     <el-form-item
 52 |                         :label-width="formLabelWidth"
 53 |                         v-for="(domain, index) in form.tags"
 54 |                         :label="'标签' + index"
 55 |                         :key="domain.key"
 56 |                         :prop="'tags.' + index + '.name'"
 57 |                         :rules="[
 58 |                             { required: true, message: '请输入标签名称', trigger: 'blur' },
 59 |                             { required: true,message: '请输入标签路径', trigger: 'blur' }
 60 |                         ]"
 61 |                     >
 62 |                         <el-input v-model="domain.name" style="width:230px" placeholder="请输入标签名称"></el-input>
 63 |                         <el-input class="tag-dir" v-model="domain.dir" style="width:230px" placeholder="请输入标签路径"></el-input>
 64 |                         <el-button @click.prevent="removeDomain(domain)" style="margin-left: 10px">删除</el-button>
 65 |                     </el-form-item>
 66 |                     <div>
 67 |                         <el-button @click.prevent="addDomain()">新增标签</el-button>
 68 |                         
 69 |                     </div>
 70 |                 </el-form>
 71 |                 <div class="demo-drawer__footer">
 72 |                     <el-button @click="dialog = false">取 消</el-button>
 73 |                     <el-button type="primary" @click="query" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
 74 |                 </div>
 75 |             </div>
 76 |             </el-drawer>
 77 |     </dir>
 78 |     
 79 |   </template>
 80 | 
 81 |   <script>
 82 |     import axios from "axios";
 83 |     export default {
 84 |       data() {
 85 |         return {
 86 |             drawerTitle: "新建分类",
 87 |             dialog: false,
 88 |             formLabelWidth: '80px',
 89 |             loading: false,
 90 |             labelField: [
 91 |                 {
 92 |                     prop: "name",
 93 |                     label: "名称",
 94 |                 },
 95 |                 {
 96 |                     prop: "dir",
 97 |                     label: "访问路径",
 98 |                 },
 99 |                 {
100 |                     prop: "tags",
101 |                     label: "技术标签",
102 |                 },
103 |                 // {
104 |                 //     prop: "oper",
105 |                 //     label: "操作",
106 |                 // },
107 |             ],
108 |             form: {
109 |                 name: '',
110 |                 dir: '',
111 |                 tags: [{
112 |                     dir: '',
113 |                     name: ''
114 |                 }],
115 |  
116 |             },
117 |             tableData: [],
118 |         }
119 |       },
120 |       mounted() {
121 |           this.getLabel()
122 |       },
123 |       methods: {
124 |             //获得分类列表
125 |             getLabel() {
126 |                 let _this = this;
127 |                 axios.get('cms/type')
128 |                     .then(function (res) {
129 |                         _this.tableData = res.data.data
130 |                         
131 |                     })
132 |                     .catch(function (error) {
133 |                         _this.$message.error(error.msg);
134 |                     })
135 | 
136 |             },
137 |             //新增分类标签
138 |             query() {
139 |                 let _this = this;
140 |                 this.$refs.ruleForm.validate((valid) => {
141 |                     if (valid) {
142 |                         axios({
143 |                             method: 'post',
144 |                             url: 'cms/type',
145 |                             data: _this.form
146 |                         }).then(() => {
147 |                             _this.getLabel();
148 |                             _this.$refs.drawer.closeDrawer();
149 |                             _this.$refs.ruleForm.resetFields();
150 |                         }).catch(error => {
151 |                             _this.$message.error(error.msg);
152 |                         });
153 |                     } else {
154 |                         return false;
155 |                     }
156 |                 });
157 |             },
158 |             handleEdit(index, data) {
159 |                 this.drawerTitle = "编辑分类";
160 |                 this.dialog = true;
161 |                 console.log(index);
162 |                 console.log(data);
163 | 
164 |             },
165 |             handleDelete() {
166 |                 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
167 |                     confirmButtonText: '确定',
168 |                     cancelButtonText: '取消',
169 |                     type: 'warning'
170 |                 }).then(() => {
171 |                     this.$message({
172 |                         type: 'success',
173 |                         message: '删除成功!'
174 |                     });
175 |                 }).catch(() => {
176 |                     this.$message({
177 |                         type: 'info',
178 |                         message: '已取消删除'
179 |                     });          
180 |                 });
181 |             },
182 |             handleClose() {
183 |                 this.dialog = false;
184 |             },
185 |             addLabel() {
186 |                 this.labelTitle = "新建分类";
187 |                 this.dialog = true;
188 |             },
189 |             removeDomain(item) {
190 |                 var index = this.form.tags.indexOf(item)
191 |                 if (index !== -1) {
192 |                 this.form.tags.splice(index, 1)
193 |                 }
194 |             },
195 |             addDomain() {
196 |                 this.form.tags.push({
197 |                     name: '',
198 |                     dir: '',
199 |                 });
200 |             }
201 |  
202 |       }
203 |     }
204 |   </script>
205 | 
206 |   <style lang="scss">
207 | @import "@/style/varStyle.scss";
208 | .label-main{
209 |     padding: 20px;
210 |     .label-add{
211 |         padding-bottom: 10px;
212 |         border-bottom: $border-el;
213 |     }
214 |     
215 | }
216 | .demo-drawer__content{
217 |         position: relative;
218 |         height: 100%;
219 |         padding: 20px;
220 |         padding-top: 0;
221 |         .tag-dir{
222 |             margin-top: 10px;
223 |         }
224 |         .demo-drawer__footer{
225 |             text-align: center;
226 |             position: absolute;
227 |             bottom: 20px;
228 |             left: 0;
229 |             width: 100%;
230 |             
231 |         }
232 |     }
233 | 
234 |   
235 | </style>


--------------------------------------------------------------------------------
/src/view/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-div">
  3 |     <img class="login-bg-img" src="./../assets/img/loginImg.jpg" alt="">
  4 |     <div class="login-main">
  5 |         <el-form label-position="left" :model="loginForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  6 |             <el-form-item label="用户名" prop="userName">
  7 |                 <el-input v-on:keyup.enter.native="btnClick" v-model="loginForm.userName"  autofocus></el-input>
  8 |             </el-form-item>
  9 |             <el-form-item label="密码" prop="password">
 10 |                 <el-input v-on:keyup.enter.native="btnClick" v-model="loginForm.password"  show-password></el-input>
 11 |             </el-form-item>
 12 |         </el-form>
 13 |         <div class="login-btn">
 14 |             <el-button type="primary" plain @click="btnClick" @keyup.enter.native="btnClick">Login</el-button>
 15 |         </div>
 16 |     </div>
 17 |     
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import axios from "axios";
 23 | 
 24 | export default {
 25 |     data() {
 26 |         return {
 27 |             loginForm: {
 28 |                 userName: "",
 29 |                 password: "",
 30 |             },
 31 |             rules: {
 32 |                 userName: [
 33 |                     { required: true, message: '请输入用户名', trigger: 'blur' },
 34 |                 ],
 35 |                 password: [
 36 |                     { required: true, message: '请输入密码', trigger: 'blur' },
 37 |                 ],
 38 |             }
 39 |         }
 40 |     },
 41 |     methods: {
 42 |         // 登陆
 43 |         btnClick() {
 44 |             // 
 45 |             let _this = this;
 46 |             this.$refs.ruleForm.validate((valid) => {
 47 |                 if (valid) {
 48 |                     axios({
 49 |                         method: 'post',
 50 |                         url: 'account/login',
 51 |                         data: _this.loginForm
 52 |                     }).then(res => {
 53 |                         if(res.data) {
 54 |                             let token = res.data.token;
 55 |                             localStorage.setItem('Authorization', token);
 56 |                             _this.$router.push({ path: `/index` });
 57 |                         }
 58 |                     }).catch(error => {
 59 |                         _this.$message.error(error.msg);
 60 |                     });
 61 |                 } else {
 62 |                     return false;
 63 |                 }
 64 |             });
 65 |         },
 66 | 
 67 |     }
 68 | 
 69 | }
 70 | </script>
 71 | 
 72 | <style lang="scss">
 73 | .login-div {
 74 |     width: 100vw;
 75 |     height: 100vh;
 76 |     position: relative;
 77 |     .login-bg-img{
 78 |         width: 100%;
 79 |         height: 100%;
 80 |         position: absolute;
 81 |         left: 0;
 82 |         top: 0;
 83 |     }
 84 |     .login-main{
 85 |         width: 400px;
 86 |         height: 260px;
 87 |         border-radius: 5px;
 88 |         background: rgba(255, 255, 255, 0.5);
 89 |         position: absolute;
 90 |         left: 50%;
 91 |         top: 50%;
 92 |         margin-top: -150px;
 93 |         margin-left: -200px;
 94 |         padding: 40px;
 95 |         box-sizing: border-box;
 96 |         overflow: hidden;
 97 |     }
 98 |     .login-btn{
 99 |         margin-top: 30px;
100 |         text-align: center;
101 |         .el-button{
102 |             width: 100%;
103 |         }
104 |     }
105 | }
106 | 
107 | </style>
108 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     proxy: 'http://192.168.0.107:8081/'
4 |   }
5 | }


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