初始化项目

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules

.eslintrc.js

+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module' // Allows for the use of imports
+  },
+
+  env: {
+    browser: true
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
+    'standard'
+
+  ],
+
+  plugins: [
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
+    // required to lint *.vue files
+    'vue',
+
+  ],
+
+  globals: {
+    ga: true, // Google Analytics
+    cordova: true,
+    __statics: true,
+    process: true,
+    Capacitor: true,
+    chrome: true
+  },
+
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+
+    'import/first': 'off',
+    'import/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'prefer-promise-reject-errors': 'off',
+
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+yarn.lock

.postcssrc.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  plugins: [
+    // to edit target browsers: use "browserslist" field in package.json
+    require('autoprefixer')
+  ]
+}

.vscode/extensions.json

+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    
+    "octref.vetur"
+  ],
+  "unwantedRecommendations": [
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

.vscode/settings.json

+{
+  "vetur.validation.template": false,
+  "vetur.format.enable": false,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  
+  "vetur.experimental.templateInterpolationService": true
+}

babel.config.js

+
+module.exports = {
+  presets: [
+    '@quasar/babel-preset-app'
+  ]
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": [
+        "src/*"
+      ],
+      "app/*": [
+        "*"
+      ],
+      "components/*": [
+        "src/components/*"
+      ],
+      "layouts/*": [
+        "src/layouts/*"
+      ],
+      "pages/*": [
+        "src/pages/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ],
+      "boot/*": [
+        "src/boot/*"
+      ],
+      "vue$": [
+        "node_modules/vue/dist/vue.esm.js"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    ".quasar",
+    "node_modules"
+  ]
+}
\ No newline at end of file

package.json

+{
+    "name": "confucius",
+    "version": "0.0.1",
+    "description": "jiahe japen school system",
+    "productName": "羚羊教育系统",
+    "author": "alex",
+    "private": true,
+    "scripts": {
+        "lint": "eslint --ext .js,.vue ./",
+        "test": "echo \"No test specified\" && exit 0"
+    },
+    "dependencies": {
+        "@quasar/extras": "^1.0.0",
+        "axios": "^0.18.1",
+        "core-js": "^3.6.5",
+        "quasar": "^1.0.0",
+        "vue-i18n": "^8.0.0"
+    },
+    "devDependencies": {
+        "@quasar/app": "^2.0.0",
+        "babel-eslint": "^10.0.1",
+        "eslint": "^6.8.0",
+        "eslint-config-standard": "^14.1.0",
+        "eslint-loader": "^3.0.3",
+        "eslint-plugin-import": "^2.14.0",
+        "eslint-plugin-node": "^11.0.0",
+        "eslint-plugin-promise": "^4.0.1",
+        "eslint-plugin-standard": "^4.0.0",
+        "eslint-plugin-vue": "^6.1.2"
+    },
+    "browserslist": [
+        "ie >= 11",
+        "last 10 Chrome versions",
+        "last 10 Firefox versions",
+        "last 4 Edge versions",
+        "last 7 Safari versions",
+        "last 8 Android versions",
+        "last 8 ChromeAndroid versions",
+        "last 8 FirefoxAndroid versions",
+        "last 10 iOS versions",
+        "last 5 Opera versions"
+    ],
+    "engines": {
+        "node": ">= 10.18.1",
+        "npm": ">= 6.13.4",
+        "yarn": ">= 1.21.1"
+    }
+}
\ No newline at end of file

quasar.conf.js

+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ */
+
+// Configuration for your app
+// https://quasar.dev/quasar-cli/quasar-conf-js
+/* eslint-env node */
+
+module.exports = function(ctx) {
+    return {
+        // https://quasar.dev/quasar-cli/supporting-ts
+        supportTS: false,
+
+        // https://quasar.dev/quasar-cli/prefetch-feature
+        // preFetch: true,
+
+        // app boot file (/src/boot)
+        // --> boot files are part of "main.js"
+        // https://quasar.dev/quasar-cli/boot-files
+        boot: [
+
+            'i18n',
+            'axios',
+            'permission'
+        ],
+
+        // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+        css: [
+            'app.sass'
+        ],
+
+        // https://github.com/quasarframework/quasar/tree/dev/extras
+        extras: [
+            // 'ionicons-v4',
+            // 'mdi-v5',
+            // 'fontawesome-v5',
+            // 'eva-icons',
+            // 'themify',
+            // 'line-awesome',
+            // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+            'roboto-font', // optional, you are not bound to it
+            'material-icons' // optional, you are not bound to it
+        ],
+
+        // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+        build: {
+            vueRouterMode: 'hash', // available values: 'hash', 'history'
+            env: ctx.dev ? {
+                API: 'https://dev.api.com'
+            } : {
+                API: 'https://prod.api.com'
+            },
+            // transpile: false,
+
+            // Add dependencies for transpiling with Babel (Array of string/regex)
+            // (from node_modules, which are by default not transpiled).
+            // Applies only if "transpile" is set to true.
+            // transpileDependencies: [],
+
+            // rtl: false, // https://quasar.dev/options/rtl-support
+            // preloadChunks: true,
+            // showProgress: false,
+            // gzip: true,
+            // analyze: true,
+
+            // Options below are automatically set depending on the env, set them if you want to override
+            // extractCSS: false,
+
+            // https://quasar.dev/quasar-cli/handling-webpack
+            extendWebpack(cfg) {
+                // cfg.module.rules.push({
+                //     enforce: 'pre',
+                //     test: /\.(js|vue)$/,
+                //     loader: 'eslint-loader',
+                //     exclude: /node_modules/
+                // })
+            }
+        },
+
+        // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+        devServer: {
+            https: false,
+            port: 8080,
+            open: true // opens browser window automatically
+        },
+
+        // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+        framework: {
+            iconSet: 'material-icons', // Quasar icon set
+            lang: 'en-us', // Quasar language pack
+            config: {},
+
+            // Possible values for "importStrategy":
+            // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
+            // * 'all'  - Manually specify what to import
+            importStrategy: 'auto',
+
+            // For special cases outside of where "auto" importStrategy can have an impact
+            // (like functional components as one of the examples),
+            // you can manually specify Quasar components/directives to be available everywhere:
+            //
+            components: [
+                'QLayout',
+                'QHeader',
+                'QDrawer',
+                'QPageContainer',
+                'QPage',
+                'QToolbar',
+                'QToolbarTitle',
+                'QBtn',
+                'QIcon',
+                'QList',
+                'QItem',
+                'QItemSection',
+                'QItemLabel',
+                'QTabs',
+                'QRouteTab',
+                'QAvatar',
+                'QBtnDropdown',
+                'QFooter',
+                'QMenu',
+                'QCarousel',
+                'QCarouselControl',
+                'QCarouselSlide',
+                'QInput',
+                'QDate',
+                'QPopupProxy',
+                'QBanner',
+                'QScrollArea',
+                'QSeparator',
+                'QChip',
+                'QTab',
+                'QSelect',
+                'QVideo',
+                'QImg',
+                'QResizeObserver',
+                'QMarkupTable',
+                'QForm',
+                'QTable',
+                'QTh',
+                'QTr',
+                'QTd',
+                'QCard',
+                'QCheckbox'
+            ],
+            // directives: [],
+
+            // Quasar plugins
+            plugins: [
+                'Meta',
+                'Notify',
+                'Dialog',
+                'LoadingBar'
+            ]
+        },
+
+        // animations: 'all', // --- includes all animations
+        // https://quasar.dev/options/animations
+        animations: [],
+
+        // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+        ssr: {
+            pwa: false
+        },
+
+        // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+        pwa: {
+            workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+            workboxOptions: {}, // only for GenerateSW
+            manifest: {
+                name: 'com.viitto.confuius',
+                short_name: 'com.viitto.confuius',
+                description: 'jiahe japen school system',
+                display: 'standalone',
+                orientation: 'portrait',
+                background_color: '#ffffff',
+                theme_color: '#027be3',
+                icons: [{
+                        src: 'icons/icon-128x128.png',
+                        sizes: '128x128',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'icons/icon-192x192.png',
+                        sizes: '192x192',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'icons/icon-256x256.png',
+                        sizes: '256x256',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'icons/icon-384x384.png',
+                        sizes: '384x384',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'icons/icon-512x512.png',
+                        sizes: '512x512',
+                        type: 'image/png'
+                    }
+                ]
+            }
+        },
+
+        // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+        cordova: {
+            // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+        },
+
+        // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+        capacitor: {
+            hideSplashscreen: true
+        },
+
+        // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+        electron: {
+            bundler: 'packager', // 'packager' or 'builder'
+
+            packager: {
+                // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
+                // OS X / Mac App Store
+                // appBundleId: '',
+                // appCategoryType: '',
+                // osxSign: '',
+                // protocol: 'myapp://path',
+
+                // Windows only
+                // win32metadata: { ... }
+            },
+
+            builder: {
+                // https://www.electron.build/configuration/configuration
+
+                appId: 'confucius'
+            },
+
+            // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
+            nodeIntegration: true,
+
+            extendWebpack( /* cfg */ ) {
+                // do something with Electron main process Webpack cfg
+                // chainWebpack also available besides this extendWebpack
+            }
+        }
+    }
+}
\ No newline at end of file

src/App.vue

+<template>
+<div id="q-app">
+    <router-view />
+</div>
+</template>
+
+<script>
+export default {
+    name: 'App'
+}
+</script>
+
+<style>
+@import url('~assets/css/font.css');
+@import url('//at.alicdn.com/t/font_2077629_9oybkwrr9es.css');
+
+html,
+body,
+#q-app {
+    min-height: 100vh;
+    min-width: 100%;
+    /* font-family:'微软雅黑',' Microsoft YaHei','PingFang','PingFangR';
+  -webkit-font-smoothing: antialiased; */
+}
+</style>

src/api/login.js

+/**
+登录数据访问层，用户接口不能通过页面直接调用，先注入Store全局管理
+*/
+import request from '../utils/request'
+
+export function login({ account, pwd }) {
+    return request({
+        url: '/login',
+        method: "post",
+        // headers: {
+        //     'Content-Type': 'application/json;charset=UTF-8'
+        // }, 申明Headers信息，不包含token ,token通过注入添加
+        data: {
+            account,
+            pwd
+        }
+    });
+}
+
+export function getInfo(token) {
+    return request({
+        url: '/user/info',
+        method: 'get',
+        data: {}
+    })
+}
+
+export function logout() {
+    return request({
+        url: '/logout',
+        method: 'post',
+        data: {}
+    })
+}
\ No newline at end of file

src/api/personCenter/personCenter.js

+import request from '../../utils/request'
+
+/**
+ * 查询个人详情
+ * 
+ */
+export function adminUsersRead(data) {
+    return request({
+        url: 'system/user/queryLoginUser',
+        method: 'post',
+        data: data
+    })
+}
\ No newline at end of file

src/assets/css/font.css

+@font-face {
+    font-family: 'perfectFont';
+    src: url('../font/MicrosoftYaHeiLight.woff') format('woff');
+}
\ No newline at end of file

src/boot/axios.js

+import Vue from 'vue'
+import axios from 'axios'
+
+Vue.prototype.$axios = axios

src/boot/i18n.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from 'src/i18n'
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'en-us',
+  fallbackLocale: 'en-us',
+  messages
+})
+
+export default ({ app }) => {
+  // Set i18n instance on app
+  app.i18n = i18n
+}
+
+export { i18n }

src/boot/permission.js

+import router from "../router/index";
+import store from "../store";
+import { LoadingBar, Notify } from "quasar";
+import { getAuth } from "../utils/auth"; // 验权
+LoadingBar.setDefaults({
+    color: "primary",
+    size: "10px",
+    position: "bottom"
+});
+
+let loadAsyncRouter = false;
+const whiteList = ["/login", "/"]; // 不重定向白名单
+console.log(router)
+router.beforeEach((to, from, next) => {
+    localStorage.setItem("routerBefore", from.path);
+    LoadingBar.start();
+    /** 请求头包含授权信息 并且 页面必须授权 直接进入 */
+    if (getAuth()) {
+        if (to.path === "/login") {
+            next({
+                path: "/"
+            });
+            LoadingBar.stop();
+        } else {
+            if (!loadAsyncRouter) {
+                // 判断当前用户是否获取权限
+                loadAsyncRouter = true;
+                if (store.getters.allAuth) {
+                    store.dispatch("GenerateRoutes", store.getters.allAuth).then(() => {
+                        // 根据auths权限生成可访问的路由表
+                        router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
+                        if (to.path === "/404") {
+                            next({
+                                path: to.redirectedFrom || "/",
+                                replace: true
+                            });
+                        } else {
+                            next({
+                                ...to,
+                                replace: true
+                            });
+                        }
+                    });
+                } else {
+                    store
+                        .dispatch("getAuth")
+                        .then(auths => {
+                            // 拉取user_info
+                            store.dispatch("GenerateRoutes", auths).then(() => {
+                                // 根据auths权限生成可访问的路由表
+                                router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
+                                if (to.path === "/404") {
+                                    next({
+                                        path: to.redirectedFrom || "/",
+                                        replace: true
+                                    });
+                                } else {
+                                    next({
+                                        ...to,
+                                        replace: true
+                                    });
+                                }
+                            });
+                        })
+                        .catch(err => {
+                            loadAsyncRouter = false;
+                            store.dispatch("LogOut").then(() => {
+                                Notify.create({
+                                    icon: "error",
+                                    color: "negative",
+                                    message: err.msg || "获取用户信息失败",
+                                    position: "top"
+                                });
+                                next({
+                                    path: "/"
+                                });
+                            });
+                        });
+                }
+            } else {
+                next();
+            }
+        }
+    } else {
+        console.log(to.path)
+        if (whiteList.indexOf(to.path) !== -1) {
+            next();
+        } else {
+            next(`/login?redirect=${to.path}`); // 否则全部重定向到登录页
+            LoadingBar.stop();
+        }
+    }
+});
+
+router.afterEach(() => {
+    LoadingBar.stop(); // 结束Progress
+});
+
+router.onError(error => {
+    const pattern = /Loading chunk (\d)+ failed/g;
+    const isChunkLoadFailed = error.message.match(pattern);
+    const targetPath = router.history.pending.fullPath;
+    if (isChunkLoadFailed) {
+        router.replace(targetPath);
+    }
+});
\ No newline at end of file

src/components/EssentialLink.vue

+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>
+        {{ caption }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+export default {
+  name: 'EssentialLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    caption: {
+      type: String,
+      default: ''
+    },
+
+    link: {
+      type: String,
+      default: '#'
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

src/css/app.sass

+// app global css in Sass form

src/css/quasar.variables.sass

+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #1AAD19
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1d1d1d
+
+$positive  : #43e97b
+$negative  : #f5576c
+$info      : #31CCEC
+$warning   : #F2C037

src/i18n/en-us/index.js

+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful'
+}

src/i18n/index.js

+import enUS from './en-us'
+
+export default {
+  'en-us': enUS
+}

src/index.template.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>

src/layouts/MainLayout.vue

+<template>
+<q-layout view="lHh Lpr lFf">
+    <q-header bordered reveal height-hint="98">
+        <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
+            <q-avatar>
+                <img src="~assets/images/logo.png">
+            </q-avatar>
+            <q-toolbar-title style="font-family:perfectFont">
+                甲鹤日语学院
+            </q-toolbar-title>
+            <q-tabs inline-label style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch>
+                <q-route-tab name="navs_1" to="/home" label="首页" icon="iconfont icon-shangdian-copy" />
+                <q-route-tab name="navs_2" to="" label="校园" icon="iconfont icon-xiaoyuan" />
+                <q-route-tab name="navs_3" to="" label="课程" icon="iconfont icon-kecheng" />
+                <q-route-tab name="navs_4" to="" label="教务" icon="iconfont icon-jiaowuguanli" />
+                <q-route-tab name="navs_5" to="" label="网课" icon="iconfont icon-yunying" />
+                <q-route-tab name="navs_6" to="" label="设置" icon="iconfont icon-shezhi" />
+            </q-tabs>
+            <div class="q-pl-lg">
+                <q-btn-dropdown flat color="primary">
+                    <template v-slot:label>
+                        <q-icon left name="iconfont icon-message" class="text-white" style="font-size:20px;">
+                            <q-badge color="negative" floating>4</q-badge>
+                        </q-icon>
+                    </template>
+                    <q-list bordered padding class="rounded-borders" style="max-width: 350px">
+                        <q-item-label header>Folders</q-item-label>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="folder" color="primary" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">Photos</q-item-label>
+                                <q-item-label caption>February 22nd, 2019</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" color="green" />
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="folder" color="orange" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">Movies</q-item-label>
+                                <q-item-label caption>March 1st, 2019</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" />
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="folder" color="teal" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">Photos</q-item-label>
+                                <q-item-label caption>January 15th, 2019</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" />
+                            </q-item-section>
+                        </q-item>
+
+                        <q-separator spaced />
+                        <q-item-label header>Files</q-item-label>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="assignment" color="grey" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">Expenses spreadsheet</q-item-label>
+                                <q-item-label caption>March 2nd, 2019</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" />
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="place" color="grey" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">Places to visit</q-item-label>
+                                <q-item-label caption>February 22, 2019</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" color="amber" />
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar top>
+                                <q-avatar icon="library_music" color="grey" text-color="white" />
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">My favorite song</q-item-label>
+                                <q-item-label caption>Singing it all day</q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side>
+                                <q-icon name="info" />
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-btn-dropdown>
+                <q-btn-dropdown flat color="primary" @click="onMainClick">
+                    <template v-slot:label>
+                        <q-avatar size="28px">
+                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600423326738&di=ec1433b0230f5e4d56273271e8bcaa0b&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0907%2F1507748D95DA5B2BE480B783227F8A153CEF1BF3_size38_w867_h533.jpeg">
+                        </q-avatar>
+                    </template>
+                    <div class="row no-wrap q-pa-md">
+                        <div class="column">
+                            <div class="text-h6 q-mb-md">Settings</div>
+                            <q-toggle v-model="mobileData" label="Use Mobile Data" />
+                            <q-toggle v-model="bluetooth" label="Bluetooth" />
+                        </div>
+
+                        <q-separator vertical inset class="q-mx-lg" />
+
+                        <div class="column items-center">
+                            <q-avatar size="72px">
+                                <img src="https://cdn.quasar.dev/img/boy-avatar.png">
+                            </q-avatar>
+
+                            <div class="text-subtitle1 q-mt-md q-mb-xs">John Doe</div>
+
+                            <q-btn color="primary" label="Logout" push size="sm" v-close-popup />
+                        </div>
+                    </div>
+                </q-btn-dropdown>
+            </div>
+        </q-toolbar>
+    </q-header>
+
+    <!-- <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+      content-class="bg-grey-1"
+    >
+      <q-list>
+        <q-item-label
+          header
+          class="text-grey-8"
+        >
+          Essential Links
+        </q-item-label>
+        <EssentialLink
+          v-for="link in essentialLinks"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer> -->
+
+    <q-page-container>
+        <router-view />
+    </q-page-container>
+</q-layout>
+</template>
+
+<script>
+import EssentialLink from 'components/EssentialLink.vue'
+
+// const linksData = [{
+//         title: 'Docs',
+//         caption: 'quasar.dev',
+//         icon: 'school',
+//         link: 'https://quasar.dev'
+//     },
+//     {
+//         title: 'Github',
+//         caption: 'github.com/quasarframework',
+//         icon: 'code',
+//         link: 'https://github.com/quasarframework'
+//     },
+//     {
+//         title: 'Discord Chat Channel',
+//         caption: 'chat.quasar.dev',
+//         icon: 'chat',
+//         link: 'https://chat.quasar.dev'
+//     },
+//     {
+//         title: 'Forum',
+//         caption: 'forum.quasar.dev',
+//         icon: 'record_voice_over',
+//         link: 'https://forum.quasar.dev'
+//     },
+//     {
+//         title: 'Twitter',
+//         caption: '@quasarframework',
+//         icon: 'rss_feed',
+//         link: 'https://twitter.quasar.dev'
+//     },
+//     {
+//         title: 'Facebook',
+//         caption: '@QuasarFramework',
+//         icon: 'public',
+//         link: 'https://facebook.quasar.dev'
+//     },
+//     {
+//         title: 'Quasar Awesome',
+//         caption: 'Community Quasar projects',
+//         icon: 'favorite',
+//         link: 'https://awesome.quasar.dev'
+//     }
+// ]
+
+export default {
+    name: 'MainLayout',
+    components: {
+        EssentialLink
+    },
+    data() {
+        return {
+            leftDrawerOpen: false,
+            //essentialLinks: linksData
+            tab: "navs_1"
+        }
+    }
+}
+</script>

src/pages/Error404.vue

+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error404'
+}
+</script>

src/pages/Index.vue

+<template>
+  <q-page class="flex flex-center">
+    <img
+      alt="Quasar logo"
+      src="~assets/quasar-logo-full.svg"
+    >
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageIndex'
+}
+</script>

src/router/index.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import routes from './routes'
+
+Vue.use(VueRouter)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+// export default function (/* { store, ssrContext } */) {
+//   const Router = new VueRouter({
+//     scrollBehavior: () => ({ x: 0, y: 0 }),
+//     routes,
+
+//     // Leave these as they are and change in quasar.conf.js instead!
+//     // quasar.conf.js -> build -> vueRouterMode
+//     // quasar.conf.js -> build -> publicPath
+//     mode: process.env.VUE_ROUTER_MODE,
+//     base: process.env.VUE_ROUTER_BASE
+//   })
+
+//   return Router
+// }
+
+export default new VueRouter({
+    scrollBehavior: () => ({ x: 0, y: 0 }),
+    routes,
+
+    // Leave these as they are and change in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    mode: process.env.VUE_ROUTER_MODE,
+    base: process.env.VUE_ROUTER_BASE
+})
\ No newline at end of file

src/router/routes.js

+const routes = [{
+        path: '/',
+        component: () =>
+            import ('pages/user/login.vue')
+    },
+    {
+        path: '/login',
+        component: () =>
+            import ('pages/user/login.vue')
+    },
+    {
+        path: '/home',
+        component: () =>
+            import ('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            component: () =>
+                import ('pages/Index.vue')
+        }]
+    },
+
+    // Always leave this as last one,
+    // but you can also remove it
+    {
+        path: '*',
+        component: () =>
+            import ('pages/Error404.vue')
+    }
+]
+
+export default routes
\ No newline at end of file

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import user from './modules/user'
+// import example from './module-example'
+
+Vue.use(Vuex)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default function( /* { ssrContext } */ ) {
+    const Store = new Vuex.Store({
+        modules: {
+            // example
+            user
+        },
+
+        // enable strict mode (adds overhead!)
+        // for dev mode only
+        strict: process.env.DEV
+    })
+
+    return Store
+}
\ No newline at end of file

src/store/module-example/actions.js

+export function someAction (/* context */) {
+}

src/store/module-example/getters.js

+export function someGetter (/* state */) {
+}

src/store/module-example/index.js

+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state
+}

src/store/module-example/mutations.js

+export function someMutation (/* state */) {
+}

src/store/module-example/state.js

+export default function () {
+  return {
+    //
+  }
+}

src/store/modules/user.js

+import { login, logout } from "../../api/login";
+import { adminUsersRead } from "../../api/personCenter/personCenter";
+import { addAuth, removeAuth } from "../../utils/auth";
+import Lockr from "lockr";
+
+const user = {
+    state: {
+        userInfo: null, // 用户信息
+        //TODO 用户权限
+        allAuth: null,
+    },
+
+    mutations: {
+        SET_USERINFO: (state, userInfo) => {
+            state.userInfo = userInfo;
+        },
+        SET_ALLAUTH: (state, allAuth) => {
+            state.allAuth = allAuth
+        },
+        //TODO 用户权限
+    },
+
+    actions: {
+        // 登录
+        Login({ commit }, userInfo) {
+            const username = userInfo.account.trim();
+            return new Promise((resolve, reject) => {
+                login(username, userInfo.password)
+                    .then(data => {
+                        Lockr.set("Token", data["Token"]);
+                        Lockr.set("loginUserInfo", data.user);
+
+                        Lockr.set("authList", data.auth);
+
+                        addAuth(data["Token"]);
+                        commit("SET_USERINFO", data.user);
+                        commit('SET_ALLAUTH', data.auth)
+                            // TODO  完成登录 读取权限
+                        resolve(data);
+                    })
+                    .catch(error => {
+                        reject(error);
+                    });
+            });
+        },
+
+        // 获取权限
+        getAuth({ commit }) {
+            return new Promise((resolve, reject) => {
+                //TODO 处理权限方法
+            });
+        },
+
+        // 获取用户信息
+        GetUserInfo({ commit, state }) {
+            return new Promise((resolve, reject) => {
+                adminUsersRead()
+                    .then(response => {
+                        commit("SET_USERINFO", response.data);
+                        resolve(response);
+                    })
+                    .catch(error => {
+                        reject(error);
+                    });
+            });
+        },
+
+        // 登出
+        LogOut({ commit }) {
+            return new Promise((resolve, reject) => {
+                logout()
+                    .then(() => {
+                        /** flush 清空localStorage .rm('authKey') 按照key清除 */
+                        removeAuth();
+                        resolve();
+                    })
+                    .catch(error => {
+                        reject(error);
+                    });
+            });
+        }
+    }
+};
+
+export default user;
\ No newline at end of file

src/store/store-flag.d.ts

+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}

src/utils/auth.js

+import axios from 'axios'
+import cache from './cache'
+import Lockr from 'lockr'
+import store from '../store'
+
+/** 移除授权信息 */
+export function removeAuth() {
+    return new Promise((resolve, reject) => {
+        cache.rmAxiosCache()
+        store.commit('SET_ALLAUTH', null)
+        delete axios.defaults.headers['Token']
+        resolve(true)
+    })
+}
+
+/** 注入授权信息 */
+export function addAuth(adminToken) {
+    return new Promise((resolve, reject) => {
+        axios.defaults.headers['Token'] = adminToken
+        resolve(true)
+    })
+}
+
+/** 获取授权信息 */
+export function getAuth() {
+    if (Lockr.get('Token') && !axios.defaults.headers['Token']) {
+        cache.updateAxiosCache()
+    }
+
+    if (axios.defaults.headers['Token']) {
+        return true
+    }
+    return false
+}
\ No newline at end of file

src/utils/cache.js

+import store from '../store'
+import Lockr from 'lockr'
+import axios from 'axios'
+
+const cache = {
+    /**
+     * 载入全部登陆信息
+     */
+    loadingCache: function() {
+        if (Lockr.get('Token') && !axios.defaults.headers['Token']) {
+            /** 将用户信息放入缓存 */
+            const userInfo = Lockr.get('loginUserInfo')
+            if (userInfo) {
+                store.commit('SET_USERINFO', userInfo)
+            }
+        }
+        store.commit('SET_APPNAME', Lockr.get('systemName'))
+        store.commit('SET_APPLOGO', Lockr.get('systemLogo'))
+        store.dispatch('SystemLogoAndName')
+    },
+    /**
+     * 请求和更新登录缓存
+     */
+    updateAxiosCache: function() {
+        axios.defaults.headers['Token'] = Lockr.get('Token')
+        store.dispatch('GetUserInfo')
+    },
+    /**
+     * 移除登录信息
+     * @param {*}
+     */
+    rmAxiosCache: function() {
+        Lockr.rm('Token')
+    }
+}
+
+export default cache
\ No newline at end of file

src/utils/request.js

+import axios from "axios";
+import { removeAuth } from "../utils/auth";
+import qs from "qs";
+import { Dialog, Notify } from 'quasar'
+
+var showLoginMessageBox = false;
+axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"; //application/x-www-form-urlencoded;charset=UTF-8
+
+const service = axios.create({
+    baseURL: process.env.API,
+    timeout: 15000
+});
+
+// request拦截器
+service.interceptors.request.use(
+    config => {
+        const flag =
+            config.headers["Content-Type"] &&
+            config.headers["Content-Type"].indexOf("application/json") !== -1;
+        if (!flag) {
+            const mult =
+                config.headers["Content-Type"] &&
+                config.headers["Content-Type"].indexOf("multipart/form-data") !== -1;
+            if (mult) {
+                config.data = config.data;
+            } else {
+                config.data = qs.stringify(config.data);
+            }
+        }
+        return config;
+    },
+    error => {
+        //TODO  新增网络请求异常处理业务
+        return Promise.reject(error);
+    }
+);
+
+// response 拦截器
+service.interceptors.response.use(
+    response => {
+        const res = response.data;
+        // TODO 确定后台的CODE码
+        if (response.status === 200 && response.config.responseType === "blob") {
+            // 文件类型特殊处理
+            return response;
+        } else if (res.code !== 0) {
+            // TODO 确定后台的CODE码
+            if (res.code === 302) {
+                if (!showLoginMessageBox) {
+                    showLoginMessageBox = true;
+                    Dialog.create({
+                        title: "登出",
+                        message: "抱歉，你的账户信息已失效，你需要重新登录使用",
+                        persistent: true
+                    }).onOk(() => {
+                        removeAuth()
+                            .then(() => {
+                                location.reload(); // 为了重新实例化vue-router对象 避免bug
+                            })
+                            .catch(() => {
+                                location.reload();
+                            });
+                    });
+                }
+            } else {
+                if (res.msg) {
+                    Notify.create({
+                        icon: "error",
+                        color: "negative",
+                        message: res.msg,
+                        position: "top"
+                    });
+                }
+            }
+            return Promise.reject(res);
+        } else {
+            return res;
+        }
+    },
+    error => {
+        Notify.create({
+            icon: "error",
+            color: "negative",
+            message: "网络请求失败，请稍候再试",
+            position: "top"
+        });
+        return Promise.reject(error);
+    }
+);
+
+export default service;
\ No newline at end of file

src/utils/types.js

+/**
+ * 类型判断工具
+ */
+
+export function isString(obj) {
+    return Object.prototype.toString.call(obj) === '[object String]'
+}
+
+export function isObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+export function isArray(obj) {
+    return Object.prototype.toString.call(obj) === '[object Array]'
+}
\ No newline at end of file

src/utils/validate.js

+/**
+ * 验证工具类
+ */
+
+/* 合法uri*/
+export function validateURL(textval) {
+    const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+    return urlregex.test(textval)
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+    const reg = /^[a-z]+$/
+    return reg.test(str)
+}
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+    const reg = /^[A-Z]+$/
+    return reg.test(str)
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str) {
+    const reg = /^[A-Za-z]+$/
+    return reg.test(str)
+}
\ No newline at end of file