参考vue-element-admin完成核心框架的重构

Author: =

docs/layout.md

@@ -1,4 +1,4 @@
-## 系统布局方式与实现的简单记录
+## 系统整体布局的方式与实现
 
 ### 1. 系统整体布局方式
 

package-lock.json

@@ -20,7 +20,8 @@
  "vuex-persistedstate": "^2.5.0",
  "qs": "^6.5.1",
  "squel": "5.12.1",
- "echarts": "4.1.0"
+ "echarts": "4.1.0",
+ "js-cookie": "2.2.0"
  },
  "devDependencies": {
  "autoprefixer": "^7.1.2",

package.json

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+export function loginByUsername(username, password) {
+ const data = {
+ username,
+ password
+ }
+ return request({
+ url: '/user/login',
+ method: 'post',
+ data
+ })
+}
+
+export function logout() {
+ return request({
+ url: '/user/logout',
+ method: 'post'
+ })
+}
+
+export function getUserInfo(token) {
+ return request({
+ url: '/user/info',
+ method: 'get',
+ params: { token }
+ })
+}
+

src/api/login.js

@@ -99,14 +99,12 @@ export default {
  }
  },
  close() {
- this.isShow = false;
- this.showIndex = 0;
  this.$emit("close");
+ this.showIndex = 0;
  },
  download() {},
  del() {
  this.$emit("delete", this.showIndex);
- this.isShow = false;
  this.showIndex = 0;
  },
  getThumbnailIconUrl(relativePath) {

src/axios/axios.js

@@ -5,7 +5,7 @@
  </div>
  <div class="close-index">
  <a @click.prevent="deleteRow">
- <i class="el-icon-close" style="color:red;font-weight:bold;"></i>
+ <i class="el-icon-close"></i>
  </a>
  </div>
  </div>
@@ -50,4 +50,9 @@ export default {
 .index-div:hover .span-index {
  display: none;
 }
+.close-index i {
+ cursor: pointer;
+ color: red;
+ font-weight: bold;
+}
 </style>

src/components/business/files-preview.vue

@@ -2,12 +2,12 @@
  * @Author: calebman 
  * @Date: 2018-03-13 17:29:31 
  * @Last Modified by: calebman
- * @Last Modified time: 2018-04-18 10:35:20
+ * @Last Modified time: 2018-05-09 10:24:57
  */
 
 import dev from './config.dev';
 import prod from './config.prod';
 
-const conf = dev;
+const conf = process.env.NODE_ENV === 'production' ? prod : dev;
 
 export default conf;

src/components/business/index-column.vue

@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
-import { appRouter } from './router/router';
 import store from './store';
 
 //引入系统工具类
@@ -14,6 +13,7 @@ import moment from 'moment';
 //加载中文
 // moment.lang('zh_cn');
 Vue.prototype.$moment = moment;
+
 //引入本项目基础样式
 import "@/assets/themes-base/index.css";
 //引入字体图标
@@ -24,26 +24,9 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI, { size: 'small' });
 
+import './mock' // 模拟数据
+import './permission' // 路由权限控制
 
-router.beforeEach((to, from, next) => {
- //如果你需要认证、未登录且跳转路由不为登录页面则 跳转登录页面重新登录
- if (!to.meta.notAuth && !store.getters.isLogin && to.path != "/") {
- to.query.routePath = to.path;
- router.replace({ path: "/login", query: to.query });
- } else {
- store.commit('UPDATE_ROUTER_LOADING', true);
- next();
- }
-});
-
-router.afterEach(function (to) {
- window.document.title = to.meta.title ? `${to.meta.title}` : `Database Manager`;
- store.commit('UPDATE_ROUTER_LOADING', false);
-});
-
-router.onError(function (err) {
- store.commit('UPDATE_ROUTER_LOADING', false);
-});
 
 
 /* eslint-disable no-new */
@@ -52,9 +35,5 @@ new Vue({
  router,
  store,
  components: { App },
- created() {
- // 根据路由构建菜单栏
- store.commit("UPDATE_APP_MENU", appRouter);
- },
  template: '<App/>'
 })