├── static
    └── .gitkeep
├── .gitattributes
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── large.png
    │   ├── logo.png
    │   ├── small.png
    │   ├── eventBus.js
    │   ├── normal.png
    │   ├── logo_small.png
    │   ├── logo_normal.png
    │   └── logo_w_small.png
    ├── components
    │   ├── Trash.vue
    │   ├── Note.vue
    │   ├── NewNote.vue
    │   ├── Editor.vue
    │   ├── NoteList.vue
    │   ├── ToolBar.vue
    │   ├── SideBar.vue
    │   └── Login.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── api
    │   └── index.js
    └── App.vue
├── .editorconfig
├── .gitignore
├── .babelrc
├── index.html
├── .postcssrc.js
├── LICENSE
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.js linguist-language=vue


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


--------------------------------------------------------------------------------
/src/assets/large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/large.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/small.png


--------------------------------------------------------------------------------
/src/assets/eventBus.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | import Vue from 'Vue';
3 | 
4 | export default new Vue();
5 | 


--------------------------------------------------------------------------------
/src/assets/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/normal.png


--------------------------------------------------------------------------------
/src/assets/logo_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/logo_small.png


--------------------------------------------------------------------------------
/src/assets/logo_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/logo_normal.png


--------------------------------------------------------------------------------
/src/assets/logo_w_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/yunshu-notes/master/src/assets/logo_w_small.png


--------------------------------------------------------------------------------
/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/Trash.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         name: "Trash"
 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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 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 |     <section id="app"></section>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/.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/Note.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container>
 3 |     <note-list @selectNote="onSelectNote" :noteId="noteId"/>
 4 |     <editor :selectNote="selectNote"/>
 5 |   </el-container>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import NoteList from './NoteList'
10 |   import Editor from './Editor'
11 | 
12 |   export default {
13 |     name: "Note",
14 |     props: ['noteId'],
15 |     data() {
16 |       return {
17 |         selectNote: ''
18 |       }
19 |     },
20 |     components: {NoteList, Editor},
21 |     methods: {
22 |       onSelectNote(id) {
23 |         this.selectNote = id;
24 |       }
25 |     }
26 |   }
27 | 
28 | </script>
29 | 
30 | <style scoped>
31 | 
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import ElementUI from 'element-ui'
 7 | import VueQuillEditor from 'vue-quill-editor'
 8 | import VueResource from 'vue-resource'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | import 'quill/dist/quill.core.css'
11 | import 'quill/dist/quill.snow.css'
12 | import 'quill/dist/quill.bubble.css'
13 | 
14 | Vue.config.productionTip = false;
15 | 
16 | Vue.use(ElementUI);
17 | Vue.use(VueQuillEditor);
18 | Vue.use(VueResource);
19 | 
20 | /* eslint-disable no-new */
21 | new Vue({
22 |   el: '#app',
23 |   router,
24 |   components: {App},
25 |   template: '<App/>'
26 | });
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Note from '../components/Note'
 4 | import NewNote from '../components/NewNote'
 5 | import Login from '../components/Login'
 6 | import Trash from '../components/Trash'
 7 | 
 8 | Vue.use(Router);
 9 | 
10 | export default new Router({
11 |   mode: 'history',
12 |   routes: [
13 |     {
14 |       path: '/note',
15 |       name: 'Note',
16 |       component: Note,
17 |     },
18 |     {
19 |       path: '/new_note',
20 |       name: 'NewNote',
21 |       component: NewNote
22 |     },
23 |     {
24 |       path: '/trash',
25 |       name: 'Trash',
26 |       component: Trash
27 |     },
28 |     {
29 |       path: '/login',
30 |       name: 'Login',
31 |       component: Login,
32 |       props: true
33 |     },
34 |     {
35 |       path: '/*',
36 |       redirect: '/note'
37 |     }
38 |   ]
39 | })
40 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const BASE_URL = "http://localhost:8080";
 3 | 
 4 | export function NOTE_BOOK() {
 5 |   return {
 6 |     "getNoteBook": BASE_URL + '/note_books',
 7 |     "delNoteBook": BASE_URL + '/note_book/',
 8 |     "upNoteBook": BASE_URL + '/note_book/',
 9 |     "newNoteBook": BASE_URL + '/note_book'
10 |   }
11 | }
12 | 
13 | export function NOTE() {
14 |   return {
15 |     "getNotes": BASE_URL + '/notes/',
16 |     "getNote": BASE_URL + '/note/',
17 |     "delNote": BASE_URL + '/note/',
18 |     "upNote": BASE_URL + '/note/',
19 |     "newNote": BASE_URL + '/note'
20 |   }
21 | }
22 | 
23 | export function USER() {
24 |   return {
25 |     "login": BASE_URL + '/login',
26 |     "logout": BASE_URL + '/logout',
27 |     "registered": BASE_URL + '/registered',
28 |     "getLoginUser": BASE_URL + '/getLoginUser',
29 |     "getCode": BASE_URL + '/get_code?email=',
30 |     "getVCode": BASE_URL + '/forget_get_code?email=',
31 |     "forgetPassword": BASE_URL + '/forget_password',
32 |     "changeUserProfile": BASE_URL + '/change_user_profile'
33 |   }
34 | }
35 | 
36 | 


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <el-container :style="{ height: clientHeight, border: '1px solid #eee' }">
 4 |       <el-header>
 5 |         <tool-bar/>
 6 |       </el-header>
 7 |       <el-container>
 8 |         <side-bar @noteId="setNoteId"/>
 9 |         <router-view :clientHeight="clientHeight" :noteId="noteId"/>
10 |       </el-container>
11 |     </el-container>
12 |   </section>
13 | </template>
14 | 
15 | <script>
16 |   import ToolBar from './components/ToolBar'
17 |   import SideBar from './components/SideBar'
18 | 
19 |   export default {
20 |     name: 'App',
21 |     components: {ToolBar, SideBar},
22 |     data() {
23 |       return {
24 |         clientHeight: '600px',
25 |         noteId: ''
26 |       }
27 |     },
28 |     methods: {
29 |       setNoteId(id) {
30 |         this.noteId = id;
31 |       }
32 |     },
33 |     mounted() {
34 |       //设置文档可视区域高度
35 |       this.clientHeight = `${document.documentElement.clientHeight - 20}px`;
36 |       const that = this;
37 |       window.onresize = function temp() {
38 |         that.clientHeight = `${document.documentElement.clientHeight - 20}px`;
39 |       };
40 |     }
41 |   }
42 | </script>
43 | 
44 | <style>
45 |   a {
46 |     text-decoration: none;
47 |     color: inherit;
48 |   }
49 | 
50 |   .el-header {
51 |     background-color: #398dee;
52 |     text-align: left;
53 |     font-size: 12px
54 |   }
55 | </style>
56 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 云舒云笔记
 2 | 
 3 | > 基于HBASE的大数据存储分布式云计算笔记
 4 | >
 5 | > 云笔记使用大数据成熟的分布式存储解决方案，解决了传统笔记数据日益膨胀，数据丢失等问题。云笔记通过数据分析、用户画像等技术实现，能够通过精准推送其他人公开分享的云笔记来达到扩充用户知识行囊的目的，并且通过独立的账户安全体系来达到笔记安全私有化,保证用户独立的空间。且分布式存储可以达到用户笔记空间无限大,笔记平台响应式，满足用户不同平台办公的需求。
 6 | 
 7 | [后端项目地址:https://github.com/itning/yunshu-notes-r](https://github.com/itning/yunshu-notes-r)
 8 | 
 9 | [![GitHub stars](https://img.shields.io/github/stars/itning/yunshu-notes.svg?style=social&label=Stars)](https://github.com/itning/yunshu-notes/stargazers)
10 | [![GitHub forks](https://img.shields.io/github/forks/itning/yunshu-notes.svg?style=social&label=Fork)](https://github.com/itning/yunshu-notes/network/members)
11 | [![GitHub watchers](https://img.shields.io/github/watchers/itning/yunshu-notes.svg?style=social&label=Watch)](https://github.com/itning/yunshu-notes/watchers)
12 | [![GitHub followers](https://img.shields.io/github/followers/itning.svg?style=social&label=Follow)](https://github.com/itning?tab=followers)
13 | 
14 | [![GitHub issues](https://img.shields.io/github/issues/itning/yunshu-notes.svg)](https://github.com/itning/yunshu-notes/issues)
15 | [![GitHub license](https://img.shields.io/github/license/itning/yunshu-notes.svg)](https://github.com/itning/yunshu-notes/blob/master/LICENSE)
16 | [![GitHub last commit](https://img.shields.io/github/last-commit/itning/yunshu-notes.svg)](https://github.com/itning/yunshu-notes/commits)
17 | [![GitHub release](https://img.shields.io/github/release/itning/yunshu-notes.svg)](https://github.com/itning/yunshu-notes/releases)
18 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/itning/yunshu-notes.svg)](https://github.com/itning/yunshu-notes)
19 | [![HitCount](http://hits.dwyl.io/itning/yunshu-notes.svg)](http://hits.dwyl.io/itning/yunshu-notes)
20 | [![language](https://img.shields.io/badge/language-Vue-green.svg)](https://github.com/itning/yunshu-notes)
21 | 
22 | ## 构建步骤
23 | 
24 | ``` js
25 | # 安装依赖
26 | npm install
27 | 
28 | # 开发模式部署项目
29 | npm run dev
30 | 
31 | # 构建项目
32 | npm run build
33 | ```
34 | 
35 | ## 项目技术栈
36 | 
37 | 
38 | [vue-resource](https://github.com/pagekit/vue-resource) HTTP客户端
39 | 
40 | [dayjs](https://github.com/iamkun/dayjs) 一个轻量的处理时间和日期的 JavaScript 库
41 | 
42 | [element](https://github.com/ElemeFE/element) 一个Vue2.0 的UI 界面库
43 | 
44 | [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
45 | 
46 | [vue-router](https://github.com/vuejs/vue-router) Vue 路由
47 | 
48 | ## 开源协议
49 | 
50 | MIT
51 | 


--------------------------------------------------------------------------------
/src/components/NewNote.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container>
 3 |     <el-header>
 4 |       <div style="text-align: center;">
 5 |         <el-input placeholder="在这里输入笔记的标题..." v-model="title" style="margin-top: 8px;width: 68%;">
 6 |           <template slot="prepend">标题:</template>
 7 |         </el-input>
 8 |         <el-select v-model="noteBookId" placeholder="选择笔记本" style="width: 20%">
 9 |           <el-option v-for="noteBook in noteBookList" :key="noteBook.id" :label="noteBook.name"
10 |                      :value="noteBook.id"></el-option>
11 |         </el-select>
12 |         <el-button @click="saveNote" type="primary" plain style="width: 10%">保存</el-button>
13 |       </div>
14 |     </el-header>
15 |     <el-main>
16 |       <quill-editor v-model="content" :options="editorOption"></quill-editor>
17 |     </el-main>
18 |   </el-container>
19 | </template>
20 | 
21 | <script>
22 |   import {NOTE, NOTE_BOOK} from "../api";
23 | 
24 |   export default {
25 |     name: "NewNote",
26 |     data() {
27 |       return {
28 |         title: '',
29 |         noteBookList: [],
30 |         noteBookId: '',
31 |         content: '',
32 |         editorOption: {
33 |           // some quill options
34 |         }
35 |       }
36 |     },
37 |     methods: {
38 |       getNoteBookList() {
39 |         this.$http.get(NOTE_BOOK().getNoteBook, {credentials: true}).then(response => {
40 |           this.noteBookList = response.body.dataList;
41 |         }, response => {
42 |           if (response.status === 401) {
43 |             window.location.href = "/login"
44 |           } else {
45 |             this.$message.error("获取笔记本列表失败!");
46 |           }
47 |         });
48 |       },
49 |       saveNote() {
50 |         if (this.title !== '' && this.noteBookId !== '' && this.content !== '') {
51 |           this.$http.post(NOTE().newNote, {
52 |             title: this.title,
53 |             noteBookId: this.noteBookId,
54 |             content: this.content
55 |           }, {emulateJSON: true, credentials: true}).then(response => {
56 |             this.$message.success("笔记已经成功保存!");
57 |             window.location.href = "/";
58 |           }, response => {
59 |             if (response.status === 401) {
60 |               window.location.href = "/login"
61 |             } else {
62 |               this.getNoteBookList();
63 |               this.$message.error("保存失败!");
64 |             }
65 |           });
66 |         } else {
67 |           this.$message.warning("笔记标题,笔记本,内容都不能空着哦!");
68 |         }
69 |       }
70 |     },
71 |     mounted() {
72 |       this.getNoteBookList();
73 |     }
74 |   }
75 | </script>
76 | 
77 | <style scoped>
78 | 
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-main v-loading="loading" v-if="noteNotNull">
 3 |     <el-input @change="onTitleChange($event)" style="margin-bottom: 8px" v-model="title" placeholder="标题">
 4 |       <template slot="prepend">标题:</template>
 5 |     </el-input>
 6 |     <quill-editor
 7 |       v-model="content"
 8 |       ref="myQuillEditor"
 9 |       :options="editorOption"
10 |       @blur="onEditorBlur($event)"
11 |       @change="onEditorChange($event)"></quill-editor>
12 |   </el-main>
13 | </template>
14 | 
15 | <script>
16 |   import {NOTE} from "../api";
17 | 
18 |   export default {
19 |     name: "Editor",
20 |     props: ['selectNote'],
21 |     data() {
22 |       return {
23 |         noteNotNull: true,
24 |         contentChange: false,
25 |         title: '',
26 |         note_id: '',
27 |         loading: true,
28 |         content: '加载中....',
29 |         editorOption: {
30 |           // some quill options
31 |         }
32 |       }
33 |     },
34 |     methods: {
35 |       onEditorBlur(quill) {
36 |         if (this.contentChange) {
37 |           this.contentChange = false;
38 |           this.upNote();
39 |         }
40 |       },
41 |       onEditorChange({quill, html, text}) {
42 |         this.contentChange = true;
43 |         this.content = html
44 |       },
45 |       onTitleChange(value) {
46 |         this.upNote();
47 |       },
48 |       getNote() {
49 |         this.loading = true;
50 |         this.$http.get(NOTE().getNote + this.note_id, {credentials: true}).then(resp => {
51 |           this.title = resp.body.data.title;
52 |           this.content = resp.body.data.content;
53 |           this.loading = false;
54 |         }, response => {
55 |           if (response.status === 401) {
56 |             window.location.href = "/login"
57 |           } else {
58 |             this.$message.error("获取笔记信息失败!");
59 |           }
60 |         });
61 |       },
62 |       upNote() {
63 |         this.loading = true;
64 |         this.$http.patch(NOTE().upNote + this.note_id, {
65 |           content: this.content,
66 |           title: this.title
67 |         }, {credentials: true}).then(resp => {
68 |           this.getNote();
69 |           this.loading = false;
70 |         }, response => {
71 |           if (response.status === 401) {
72 |             window.location.href = "/login"
73 |           } else {
74 |             this.$message.error("修改笔记信息失败!");
75 |           }
76 |         });
77 |       }
78 |     },
79 |     watch: {
80 |       selectNote(now, old) {
81 |         if (now === 0) {
82 |           this.loading = false;
83 |           this.noteNotNull = false;
84 |         } else {
85 |           this.loading = true;
86 |           this.noteNotNull = true;
87 |           this.note_id = now;
88 |           this.getNote();
89 |         }
90 |       }
91 |     }
92 |   }
93 | </script>
94 | 
95 | <style scoped>
96 | 
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/NoteList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-aside width="300px" v-loading="loading" style="min-height: 100px">
  3 |     <el-card v-for="note in notes" :key="note.id" shadow="hover">
  4 |       <div>
  5 |         <a style="cursor: pointer" @click="getNote(note.id)">
  6 |           <h1>{{note.title}}</h1>
  7 |           <h5>创建时间:{{note.gmtCreate}}</h5>
  8 |           <h5>修改时间:{{note.gmtModified}}</h5>
  9 |         </a>
 10 |         <el-button size="mini" type="warning" icon="el-icon-share" circle></el-button>
 11 |         <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteNote(note.id)"></el-button>
 12 |       </div>
 13 |     </el-card>
 14 |   </el-aside>
 15 | </template>
 16 | 
 17 | <script>
 18 |   import dayjs from 'dayjs'
 19 |   import {NOTE} from "../api";
 20 | 
 21 |   export default {
 22 |     name: "NoteList",
 23 |     props: ['noteId'],
 24 |     data() {
 25 |       return {
 26 |         notes: [],
 27 |         loading: true,
 28 |       }
 29 |     },
 30 |     methods: {
 31 |       getNoteList(id) {
 32 |         this.loading = true;
 33 |         this.$http.get(NOTE().getNotes + id, {credentials: true}).then(resp => {
 34 |           //如果该笔记本下有笔记
 35 |           if (resp.body.dataList.length !== 0) {
 36 |             resp.body.dataList.map(note => {
 37 |               note.gmtCreate = dayjs(note.gmtCreate).format("YYYY年MM月DD日 HH:mm:ss");
 38 |               note.gmtModified = dayjs(note.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
 39 |               return note;
 40 |             });
 41 |             this.notes = resp.body.dataList;
 42 |             this.getNote(resp.body.dataList[0].id);
 43 |           } else {
 44 |             this.notes = [];
 45 |             this.getNote(0);
 46 |           }
 47 |           this.loading = false;
 48 |         }, response => {
 49 |           if (response.status === 401) {
 50 |             window.location.href = "/login"
 51 |           } else {
 52 |             this.$message.error("获取笔记信息失败!");
 53 |           }
 54 |         });
 55 |       },
 56 |       deleteNote(id) {
 57 |         this.$confirm('此操作将永久删除该笔记, 是否继续?', '提示', {
 58 |           confirmButtonText: '确定',
 59 |           cancelButtonText: '取消',
 60 |           type: 'warning'
 61 |         }).then(() => {
 62 |           this.$http.delete(NOTE().delNote + id, {credentials: true}).then(response => {
 63 |             this.$message.success("笔记已经成功删除!");
 64 |             this.getNoteList(this.noteId);
 65 |           }, response => {
 66 |             if (response.status === 401) {
 67 |               window.location.href = "/login"
 68 |             } else {
 69 |               this.$message.error("删除笔记失败!");
 70 |             }
 71 |           });
 72 |         }).catch(() => {
 73 |           this.$message.info("已取消删除!");
 74 |         });
 75 |       },
 76 |       getNote(id) {
 77 |         this.$emit('selectNote', id);
 78 |       }
 79 |     },
 80 |     watch: {
 81 |       noteId(now, old) {
 82 |         if (now === 0) {
 83 |           this.getNote(0);
 84 |           this.loading = false;
 85 |         } else {
 86 |           this.getNoteList(now);
 87 |         }
 88 |       }
 89 |     },
 90 |     mounted() {
 91 |       if (this.noteId !== '') {
 92 |         if (this.noteId === 0) {
 93 |           this.loading = false;
 94 |         } else {
 95 |           this.getNoteList(this.noteId);
 96 |         }
 97 |       }
 98 |     }
 99 |   }
100 | </script>
101 | 
102 | <style scoped>
103 |   h1 {
104 |     font-size: 18px;
105 |     margin: 5px 0 15px 0;
106 |   }
107 | 
108 |   h5 {
109 |     font-size: 12px;
110 |     margin: 5px 0 0 0;
111 |   }
112 | 
113 |   .el-button {
114 |     margin-top: 10px;
115 |   }
116 | 
117 |   .el-card {
118 |     margin-bottom: 5px;
119 |   }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/src/components/ToolBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section>
  3 |     <router-link to="/">
  4 |       <img src="../assets/logo_w_small.png" alt="logo" class="logo_img">
  5 |     </router-link>
  6 |     <!--下拉菜单-->
  7 |     <el-dropdown v-if="show" @command="setFormVisible">
  8 |       <span class="logo_info">{{login_info}}</span>
  9 |       <el-dropdown-menu slot="dropdown">
 10 |         <el-dropdown-item command>修改信息</el-dropdown-item>
 11 |         <el-dropdown-item command="logout">注销登陆</el-dropdown-item>
 12 |       </el-dropdown-menu>
 13 |     </el-dropdown>
 14 |     <el-input v-if="show" class="search_input" placeholder="搜索笔记..." prefix-icon="el-icon-search" v-model="search_key"
 15 |               clearable>
 16 |     </el-input>
 17 |     <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
 18 |       <el-form>
 19 |         <el-form-item label="昵称">
 20 |           <el-input v-model="name" auto-complete="off"></el-input>
 21 |         </el-form-item>
 22 |         <el-form-item label="密码">
 23 |           <el-input v-model="password" type="password" auto-complete="off"></el-input>
 24 |         </el-form-item>
 25 |       </el-form>
 26 |       <div slot="footer" class="dialog-footer">
 27 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 28 |         <el-button type="primary" @click="changeUserProfile">确 定</el-button>
 29 |       </div>
 30 |     </el-dialog>
 31 |   </section>
 32 | </template>
 33 | 
 34 | <script>
 35 |   import {USER} from "../api";
 36 | 
 37 |   export default {
 38 |     name: "ToolBar",
 39 |     data() {
 40 |       return {
 41 |         search_key: '',
 42 |         login_info: '',
 43 |         show: true,
 44 |         dialogFormVisible: false,
 45 |         name: '',
 46 |         password: ''
 47 |       }
 48 |     },
 49 |     methods: {
 50 |       setFormVisible(status) {
 51 |         if (status === "logout") {
 52 |           this.logout();
 53 |         } else {
 54 |           this.dialogFormVisible = status;
 55 |         }
 56 |       },
 57 |       getLoginUserInfo() {
 58 |         if (localStorage.getItem("login_name") !== null) {
 59 |           this.name = localStorage.getItem("login_name");
 60 |           this.login_info = localStorage.getItem("login_name") + " 已登陆";
 61 |         }
 62 |       },
 63 |       logout() {
 64 |         this.$http.get(USER().logout, {credentials: true}).then(response => {
 65 |           localStorage.removeItem("login_name");
 66 |           window.location.href = "/login";
 67 |         }, response => {
 68 |           if (response.status === 401) {
 69 |             window.location.href = "/login"
 70 |           } else {
 71 |             //server error
 72 |             this.$notify.error({
 73 |               title: 'Sorry',
 74 |               message: '服务器开小差了,请稍后再试'
 75 |             });
 76 |           }
 77 |         });
 78 |       },
 79 |       changeUserProfile() {
 80 |         if (this.name === '') {
 81 |           this.$message.error('昵称不能为空');
 82 |         } else {
 83 |           this.$http.post(USER().changeUserProfile, {
 84 |             id: localStorage.getItem("login_id"),
 85 |             name: this.name,
 86 |             password: this.password
 87 |           }, {emulateJSON: true, credentials: true}).then(response => {
 88 |             if (response.body.status === 200) {
 89 |               this.$message.success('修改成功');
 90 |               localStorage.setItem("login_name", response.body.data.name);
 91 |               this.getLoginUserInfo();
 92 |               this.dialogFormVisible = false;
 93 |             } else {
 94 |               this.$message.error('修改失败');
 95 |             }
 96 |           }, response => {
 97 |             this.$message.error('修改失败');
 98 |           });
 99 |         }
100 |       }
101 |     },
102 |     mounted() {
103 |       if (this.$route.path === '/login') {
104 |         this.show = false;
105 |       } else {
106 |         this.getLoginUserInfo();
107 |         this.show = true;
108 |       }
109 |     }
110 |   }
111 | </script>
112 | 
113 | <style scoped>
114 |   .logo_img {
115 |     margin-top: 5px;
116 |   }
117 | 
118 |   .logo_info {
119 |     color: white;
120 |   }
121 | 
122 |   .search_input {
123 |     float: right;
124 |     width: auto;
125 |     line-height: 60px;
126 |   }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/SideBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-aside width="200px" v-if="show" v-loading="loading">
  3 |     <el-menu :default-openeds="['1']" :default-active="active">
  4 |       <el-submenu index="1" v-if="noteBookListNotNull">
  5 |         <template slot="title"><i class="el-icon-document"></i>&nbsp;笔记本</template>
  6 |         <el-menu-item-group>
  7 |           <template slot="title"></template>
  8 |           <router-link to="/note" v-for="(n,index) in note_books" :key="n.id">
  9 |             <el-menu-item @click="setNote(n.id)" :index="index.toString()">
 10 |               {{n.name}}
 11 |               <a @click.stop.prevent="delNoteBook(n.id)" style="float: right;"><i class="el-icon-delete"></i></a>
 12 |               <a @click.stop.prevent="upNoteBook(n.id)" style="float: right;"><i class="el-icon-edit"></i></a>
 13 |             </el-menu-item>
 14 |           </router-link>
 15 |         </el-menu-item-group>
 16 |       </el-submenu>
 17 |       <router-link to="/new_note" v-if="noteBookListNotNull">
 18 |         <el-menu-item index="/new_note">
 19 |           <i class="el-icon-edit"></i>
 20 |           <span slot="title">新建笔记</span>
 21 |         </el-menu-item>
 22 |       </router-link>
 23 |       <el-menu-item @click="newNoteBook" index="/new_note_book">
 24 |         <i class="el-icon-plus"></i>
 25 |         <span slot="title">新建笔记本</span>
 26 |       </el-menu-item>
 27 |       <router-link to="/trash" v-if="noteBookListNotNull">
 28 |         <el-menu-item index="/trash">
 29 |           <i class="el-icon-delete"></i>
 30 |           <span slot="title">废纸篓</span>
 31 |         </el-menu-item>
 32 |       </router-link>
 33 |     </el-menu>
 34 |   </el-aside>
 35 | </template>
 36 | 
 37 | <script>
 38 |   import {NOTE_BOOK} from "../api";
 39 | 
 40 |   export default {
 41 |     name: "SideBar",
 42 |     data() {
 43 |       return {
 44 |         noteBookListNotNull: true,
 45 |         loading: true,
 46 |         active: '',
 47 |         show: true,
 48 |         note_books: []
 49 |       }
 50 |     },
 51 |     methods: {
 52 |       getNoteBookList(first = false) {
 53 |         this.loading = true;
 54 |         this.$http.get(NOTE_BOOK().getNoteBook, {credentials: true}).then(response => {
 55 |           this.note_books = response.body.dataList;
 56 |           this.noteBookListNotNull = true;
 57 |           //空数组(没有笔记本数据)
 58 |           if (response.body.dataList.length === 0) {
 59 |             this.noteBookListNotNull = false;
 60 |             this.setNote(0);
 61 |           }
 62 |           //组件第一次被初始化并且有数据
 63 |           if (first && response.body.dataList.length !== 0) {
 64 |             this.setNote(response.body.dataList[0].id);
 65 |           }
 66 |           this.loading = false;
 67 |         }, response => {
 68 |           if (response.status === 401) {
 69 |             window.location.href = "/login"
 70 |           } else {
 71 |             //server error
 72 |             this.$notify.error({
 73 |               title: 'Sorry',
 74 |               message: '服务器开小差了,请稍后再试'
 75 |             });
 76 |           }
 77 |         });
 78 |       },
 79 |       delNoteBook(id) {
 80 |         this.$confirm('此操作将永久删除该笔记本, 是否继续?', '提示', {
 81 |           confirmButtonText: '确定',
 82 |           cancelButtonText: '取消',
 83 |           type: 'warning'
 84 |         }).then(() => {
 85 |           this.$http.delete(NOTE_BOOK().delNoteBook + id, {credentials: true}).then(resp => {
 86 |             this.$message.success("删除成功!");
 87 |             this.getNoteBookList();
 88 |           }, response => {
 89 |             if (response.status === 401) {
 90 |               window.location.href = "/login"
 91 |             } else {
 92 |               this.getNoteBookList();
 93 |               this.$message.error("删除失败!");
 94 |             }
 95 |           });
 96 |         }).catch(() => {
 97 |           this.$message.info("已取消删除!");
 98 |         });
 99 |       },
100 |       upNoteBook(id) {
101 |         this.$prompt('请输入新的笔记本名称', '修改笔记本', {
102 |           confirmButtonText: '确定',
103 |           cancelButtonText: '取消',
104 |           inputValue: this.note_books.filter(n => {
105 |             return n.id === id
106 |           })[0].name
107 |         }).then(({value}) => {
108 |           if (value !== '' && value != null) {
109 |             this.$http.patch(NOTE_BOOK().upNoteBook + id + '/' + value, {}, {credentials: true}).then(resp => {
110 |               this.$message.success("更新成功!");
111 |               this.getNoteBookList();
112 |             }, response => {
113 |               if (response.status === 401) {
114 |                 window.location.href = "/login"
115 |               } else {
116 |                 this.getNoteBookList();
117 |                 this.$message.error("更新失败!");
118 |               }
119 |             });
120 |           }
121 |         }).catch(() => {
122 |           this.$message.info("取消修改!");
123 |         });
124 |       },
125 |       newNoteBook() {
126 |         this.$prompt('请输入新的笔记本名称', '新增笔记本', {
127 |           confirmButtonText: '确定',
128 |           cancelButtonText: '取消'
129 |         }).then(({value}) => {
130 |           if (value !== '' && value != null) {
131 |             this.$http.post(NOTE_BOOK().newNoteBook, {name: value}, {
132 |               emulateJSON: true,
133 |               credentials: true
134 |             }).then(resp => {
135 |               this.$message.success("添加成功!");
136 |               this.getNoteBookList();
137 |             }, response => {
138 |               if (response.status === 401) {
139 |                 window.location.href = "/login"
140 |               } else {
141 |                 this.$message.error("添加失败!");
142 |               }
143 |             });
144 |           }
145 |         }).catch(() => {
146 |           this.$message.info("取消添加!");
147 |         });
148 |       },
149 |       setNote(id) {
150 |         this.$emit('noteId', id);
151 |       }
152 |     },
153 |     mounted() {
154 |       if (this.$route.path !== '/login') {
155 |         this.getNoteBookList(true);
156 |         this.active = this.$route.path === '/note' ? "0" : this.$route.path;
157 |         this.$route.path === '/login' ? this.show = false : this.show = true;
158 |       } else {
159 |         this.loading = false;
160 |         this.show = false;
161 |       }
162 |     },
163 |     beforeUpdate() {
164 |       this.active = this.$route.path === '/note' ? "0" : this.$route.path;
165 |     }
166 |   }
167 | </script>
168 | 
169 | <style scoped>
170 | 
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-tabs type="border-card" :style="{margin: cardHeight}" stretch>
  3 |     <el-tab-pane label="登陆">
  4 |       <el-form :model="login" ref="login" label-position="left" :rules="rules" status-icon label-width="55px">
  5 |         <el-form-item label="邮箱" prop="username">
  6 |           <el-input v-model="login.username"></el-input>
  7 |         </el-form-item>
  8 |         <el-form-item label="密码" prop="password">
  9 |           <el-input type="password" v-model="login.password"></el-input>
 10 |         </el-form-item>
 11 |         <el-form-item>
 12 |           <el-button type="primary" @click="form_login">立即登陆</el-button>
 13 |           <el-button type="text" @click="dialogFormVisible = true">忘记密码?</el-button>
 14 |         </el-form-item>
 15 |         <el-form-item>
 16 |           <span>第三方平台登录 : </span>
 17 |           <el-button type="text">QQ登陆</el-button>
 18 |           <el-button type="text">微信登陆</el-button>
 19 |         </el-form-item>
 20 |       </el-form>
 21 |     </el-tab-pane>
 22 |     <el-tab-pane label="注册">
 23 |       <el-form :model="reg" ref="reg" label-position="left" status-icon :rules="rules" label-width="80px">
 24 |         <el-form-item label="邮箱" prop="username">
 25 |           <el-input v-model="reg.username">
 26 |             <el-button slot="suffix" type="text" :disabled="!getCode" @click="getVCode">{{code_msg}}</el-button>
 27 |           </el-input>
 28 |         </el-form-item>
 29 |         <el-form-item label="验证码" prop="code">
 30 |           <el-input v-model="reg.code" :disabled="!inputCode"></el-input>
 31 |         </el-form-item>
 32 |         <el-form-item label="昵称" prop="name">
 33 |           <el-input v-model="reg.name" maxlength="8"></el-input>
 34 |         </el-form-item>
 35 |         <el-form-item label="密码" prop="password">
 36 |           <el-input type="password" v-model="reg.password"></el-input>
 37 |         </el-form-item>
 38 |         <el-form-item label="确认密码" prop="password2">
 39 |           <el-input type="password" v-model="reg.password2"></el-input>
 40 |         </el-form-item>
 41 |         <el-form-item>
 42 |           <el-button type="primary" @click="form_reg">立即注册</el-button>
 43 |         </el-form-item>
 44 |       </el-form>
 45 |     </el-tab-pane>
 46 | 
 47 |     <el-dialog title="忘记密码" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal">
 48 |       <el-form label-position="left" label-width="80px" :model="forgetPassword" ref="forget" status-icon :rules="rules">
 49 |         <el-form-item label="邮箱" prop="username">
 50 |           <el-input v-model="forgetPassword.username">
 51 |             <el-button slot="suffix" type="text" :disabled="!getFCode" @click="getForgetVCode">获取验证码</el-button>
 52 |           </el-input>
 53 |         </el-form-item>
 54 |         <el-form-item label="验证码" prop="code">
 55 |           <el-input v-model="forgetPassword.code"></el-input>
 56 |         </el-form-item>
 57 |         <el-form-item label="新密码" prop="password">
 58 |           <el-input type="password" v-model="forgetPassword.password"></el-input>
 59 |         </el-form-item>
 60 |       </el-form>
 61 |       <div slot="footer" class="dialog-footer">
 62 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 63 |         <el-button type="primary" @click="doForgetPassword">确 定</el-button>
 64 |       </div>
 65 |     </el-dialog>
 66 |   </el-tabs>
 67 | </template>
 68 | 
 69 | <script>
 70 |   import {USER} from "../api";
 71 | 
 72 |   export default {
 73 |     name: "Login",
 74 |     props: ['clientHeight'],
 75 |     data() {
 76 |       let validatePass = (rule, value, callback) => {
 77 |         if (this.reg.password2 !== this.reg.password) {
 78 |           callback(new Error('两次输入密码不一致!'));
 79 |         } else {
 80 |           callback();
 81 |         }
 82 |       };
 83 |       return {
 84 |         getFCode: false,
 85 |         getCode: false,
 86 |         inputCode: false,
 87 |         code_msg: '获取验证码',
 88 |         dialogFormVisible: false,
 89 |         closeOnClickModal: false,
 90 |         login: {
 91 |           username: '',
 92 |           password: ''
 93 |         },
 94 |         reg: {
 95 |           name: '',
 96 |           username: '',
 97 |           password: '',
 98 |           password2: '',
 99 |           code: ''
100 |         },
101 |         forgetPassword: {
102 |           username: '',
103 |           code: '',
104 |           password: '',
105 |           password2: '',
106 |           key: ''
107 |         },
108 |         rules: {
109 |           username: [
110 |             {required: true, message: '请输入邮箱账号'},
111 |             {type: "email", message: '邮箱格式不正确'}
112 |           ],
113 |           password: [
114 |             {required: true, message: '请输入密码'},
115 |           ],
116 |           password2: [
117 |             {required: true, message: '请再次输入密码'},
118 |             {validator: validatePass, trigger: 'blur'}
119 |           ],
120 |           name: [
121 |             {required: true, message: '请输入昵称'}
122 |           ],
123 |           code: [
124 |             {required: true, message: '请输入验证码'}
125 |           ]
126 |         }
127 |       }
128 |     },
129 |     methods: {
130 |       form_login() {
131 |         this.$refs['login'].validate((valid) => {
132 |           //判断验证是否全部通过
133 |           if (valid) {
134 |             //POST REQUEST
135 |             this.$http.post(USER().login, {
136 |               "username": this.login.username,
137 |               "password": this.login.password
138 |             }, {emulateJSON: true, credentials: true})
139 |               .then(response => {
140 |                 //status is 200 login success
141 |                 if (response.body.status === 200) {
142 |                   localStorage.setItem("login_name", response.body.data.name);
143 |                   localStorage.setItem("login_id", response.body.data.id);
144 |                   window.location = "/"
145 |                 } else {
146 |                   //密码错误,用户不存在
147 |                   this.$message.warning(response.body.msg);
148 |                 }
149 |               }, response => {
150 |                 //server error
151 |                 this.$notify.error({
152 |                   title: 'Sorry',
153 |                   message: '服务器开小差了,请稍后再试'
154 |                 });
155 |               });
156 |           }
157 |         });
158 |       },
159 |       form_reg() {
160 |         this.$refs['reg'].validate((valid) => {
161 |           if (valid) {
162 |             this.$http.post(USER().registered, {
163 |               name: this.reg.name,
164 |               username: this.reg.username,
165 |               password: this.reg.password,
166 |               code: this.reg.code
167 |             }, {emulateJSON: true, credentials: true}).then(response => {
168 |               this.$notify({
169 |                 title: '成功',
170 |                 message: '注册成功!',
171 |                 type: 'success'
172 |               });
173 |             }, response => {
174 |               this.$message.error("验证码不正确!");
175 |             });
176 |           }
177 |         });
178 |       },
179 |       getVCode() {
180 |         this.getCode = false;
181 |         this.code_msg = "重新获取";
182 |         this.$http.get(USER().getCode + this.reg.username, {credentials: true}).then(response => {
183 |           this.$message.success("验证码已经成功发送!");
184 |           this.inputCode = true;
185 |           this.getCode = true;
186 |         }, response => {
187 |           if (response.status === 406) {
188 |             this.$message.error("该邮箱已经被注册!");
189 |           } else {
190 |             this.$message.error("邮件发送失败!");
191 |           }
192 |           this.getCode = true;
193 |         });
194 |       },
195 |       getForgetVCode() {
196 |         this.getFCode = false;
197 |         this.$http.get(USER().getVCode + this.forgetPassword.username, {credentials: true}).then(response => {
198 |           this.forgetPassword.key = response.body;
199 |           this.getFCode = true;
200 |           this.$message.success("验证码发送成功!");
201 |         }, response => {
202 |           if (response.status === 404) {
203 |             this.$message.error("用户不存在!");
204 |             this.getFCode = true;
205 |           } else {
206 |             this.$message.error("邮件发送失败!");
207 |             this.getFCode = true;
208 |           }
209 |         });
210 |       },
211 |       doForgetPassword() {
212 |         this.$refs['forget'].validate((valid) => {
213 |           if (valid) {
214 |             this.$http.post(USER().forgetPassword, {
215 |               password: this.forgetPassword.password,
216 |               code: this.forgetPassword.code,
217 |               vCode: this.forgetPassword.key
218 |             }, {emulateJSON: true, credentials: true}).then(response => {
219 |               if (response.body.status === 200) {
220 |                 this.$notify.success({
221 |                   title: '成功',
222 |                   message: '密码重置成功'
223 |                 });
224 |                 this.dialogFormVisible = false;
225 |               } else {
226 |                 this.$notify.error({
227 |                   title: '失败',
228 |                   message: '密码重置失败'
229 |                 });
230 |               }
231 |             }, response => {
232 |             });
233 | 
234 |           }
235 |         });
236 |       }
237 |     },
238 |     watch: {
239 |       'reg.username'() {
240 |         const that = this;
241 |         this.$refs['reg'].$on('validate', function (prop, status) {
242 |           status ? that.getCode = true : that.getCode = false;
243 |         })
244 |       },
245 |       'forgetPassword.username'() {
246 |         const that = this;
247 |         this.$refs['forget'].$on('validate', function (prop, status) {
248 |           status ? that.getFCode = true : that.getFCode = false;
249 |         })
250 |       }
251 |     },
252 |     computed: {
253 |       cardHeight: function () {
254 |         return Number.parseInt(this.clientHeight.substring(0, this.clientHeight.indexOf('px'))) / 2 - 300 + 'px auto';
255 |       }
256 |     }
257 |   }
258 | </script>
259 | 
260 | <style scoped>
261 |   .el-form {
262 |     padding: 40px;
263 |     width: 500px;
264 |   }
265 | </style>
266 | 


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