vue项目: 布局组件开发-获取分页数据

14_Vue项目/day-4/vue2-shop/src/api/users.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+
+/**
+ * [分页获取用户列表]
+ *
+ * @param   {[object]}  params  [所有查询参数--{pno: 1, psize: 10, username?: 'admin'}]
+ *
+ * @return  {[promise]}          [返回具有结果的promise对象]
+ */
+export function getUsersByPage(params) {
+  return Vue.$http.get('/user/list/page', {
+    params,
+  });
+}

14_Vue项目/day-4/vue2-shop/src/layout/components/AppMenu.vue

@@ -76,3 +76,9 @@ export default {
   },
 };
 </script>
+
+<style lang="css" scoped>
+.el-menu {
+  width: 100%;
+}
+</style>

14_Vue项目/day-4/vue2-shop/src/layout/index.vue

@@ -45,4 +45,8 @@ export default {
 .el-main {
   padding: 0;
 }
+
+.el-aside {
+  overflow: hidden;
+}
 </style>

14_Vue项目/day-4/vue2-shop/src/plugins/http.js

@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import axios from 'axios';
+import router from '@/router';
+
+import { Message } from 'element-ui';
 
 const httpPlugin = {
   install(Vue, options) {
@@ -8,6 +11,50 @@ const httpPlugin = {
     // 2 添加 实例方法 $http 用来实现 通过组件实例 发起网络请求；使用方式 在组件内部 this.$http()
     const axiosInstance = axios.create(options);
 
+    // 给Axios实例 拦截器
+    axiosInstance.interceptors.request.use(
+      function (config) {
+        // 在发送请求之前做些什么
+        // 给 所有请求 添加一个 名为 Authorization的请求头，值为 Bearer + 空格 + token
+        let token = sessionStorage.getItem('token');
+        if (token) {
+          config.headers['Authorization'] = `Bearer ${token}`;
+        }
+        return config;
+      },
+      function (error) {
+        // 对请求错误做些什么
+        return Promise.reject(error);
+      }
+    );
+
+    // 添加响应拦截器
+    axiosInstance.interceptors.response.use(
+      function (response) {
+        // 2xx 范围内的状态码都会触发该函数。
+        // 2 如果 token在请求过程中 已经过期了，页面需要重新登录 并且 告知用户
+        if (response.data.code === 401) {
+          Message({
+            message: '您未登录或登录已过期，请重新登录！',
+            type: 'warning',
+            showClose: true,
+            duration: 1500,
+          });
+          setTimeout(() => {
+            router.push({ name: 'login' });
+          }, 500);
+        }
+        // 1. 如果请求成功了，我们直接将后台服务器响应的数据返回，不再返回axios固定的结构数据
+        // 对响应数据做点什么
+        return response.data;
+      },
+      function (error) {
+        // 超出 2xx 范围的状态码都会触发该函数。
+        // 对响应错误做点什么
+        return Promise.reject(error);
+      }
+    );
+
     Vue.$http = Vue.prototype.$http = axiosInstance;
   },
 };

14_Vue项目/day-4/vue2-shop/src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import systemModule from './modules/system';
+import usersModule from './modules/users';
 
 Vue.use(Vuex);
 
@@ -44,6 +45,7 @@ export default new Vuex.Store({
   actions: {},
   modules: {
     system: systemModule,
+    users: usersModule,
   },
   plugins: [],
 });

14_Vue项目/day-4/vue2-shop/src/store/modules/users.js

@@ -0,0 +1,39 @@
+import { getUsersByPage } from '@/api/users';
+import { createLogger } from 'vuex';
+
+export default {
+  namespaced: true,
+  state: {
+    pageInfo: {
+      pno: 1, // 页码 默认值为 第一页
+      psize: 10, // 每页条目，默认 每页显示10条数据
+      totalElements: 0, // 数据总数 默认值为 0
+      pCount: 0, // 总页数，默认值为 0
+    },
+    users: [],
+  },
+  mutations: {
+    setUsers(state, users) {
+      state.users = users;
+    },
+    setPage(state, page) {
+      // page = {pno: 2}
+      state.pageInfo = { ...state.pageInfo, ...page };
+    },
+  },
+  actions: {
+    async fetchUsersByPage(ctx, username) {
+      let { pno, psize } = ctx.state.pageInfo;
+      let { code, data } = await getUsersByPage({
+        pno,
+        psize,
+        username,
+      }).catch((err) => console.log(`output->err`, err));
+
+      if (code === 200) {
+        ctx.commit('setUsers', data.list);
+        ctx.commit('setPage', data.page);
+      }
+    },
+  },
+};

14_Vue项目/day-4/vue2-shop/src/views/system/users/index.vue

@@ -33,9 +33,11 @@
       </el-row>
     </div>
     <el-table
-      :data="tableData"
+      :data="users"
       border
+      stripe
       :style="{ width: '100%', marginTop: '16px' }"
+      size="small"
     >
       <el-table-column prop="face" label="头像"> </el-table-column>
       <el-table-column prop="username" label="账号"> </el-table-column>
@@ -44,10 +46,20 @@
       <el-table-column prop="roleId" label="角色"> </el-table-column>
       <el-table-column prop="deptName" label="部门"> </el-table-column>
       <el-table-column prop="insertTime" label="创建时间"> </el-table-column>
-      <el-table-column fixed="right" label="操作" width="80">
+      <el-table-column fixed="right" label="操作" width="88">
         <template>
-          <el-button type="primary" icon="el-icon-edit" circle></el-button>
-          <el-button type="danger" icon="el-icon-delete" circle></el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            circle
+            size="mini"
+          ></el-button>
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            circle
+            size="mini"
+          ></el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -64,10 +76,30 @@
   </div>
 </template>
 
+<script>
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'Users',
+  computed: {
+    ...mapState('users', ['users', 'pageInfo']),
+  },
+  methods: {
+    ...mapActions('users', ['fetchUsersByPage']),
+  },
+  mounted() {
+    this.fetchUsersByPage('');
+  },
+};
+</script>
+
 <style scoped>
 .search {
   margin: 16px 0;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+.el-table {
+  border-radius: 4px;
+}
 </style>