提交代码

backend-router-demo/app/crud/users.py

@@ -9,7 +9,9 @@ def get_user_by_email(db: Session, email: str):
     return db.query(models.users.User).filter(models.users.User.email == email).first()
 
 def get_users(db: Session, skip: int = 0, limit: int = 100):
-    return db.query(models.users.User).offset(skip).limit(limit).all()
+    total = db.query(models.users.User).count()
+    items = db.query(models.users.User).offset(skip).limit(limit).all()
+    return {"total": total, "items": items}
 
 def create_user(db: Session, user: schemas.users.UserCreate):
     md5 = hashlib.md5()

backend-router-demo/app/routers/users.py

@@ -23,10 +23,10 @@ async def get_user(user_id: int, db: Session = Depends(get_db)):
     return user
 
 # 查询用户列表
-@router.get("/users", tags=["users"], response_model=schemas.users.User)
+@router.get("/users", tags=["users"], response_model=schemas.users.UserList)
 async def get_users(skip: int = 0, limit: int = 100, db: Session= Depends(get_db)):
-    users = users.get_users(db, skip=skip, limit=limit)
-    return users
+    userLst = users.get_users(db, skip=skip, limit=limit)
+    return userLst
 
 # 新建用户
 @router.post("/users", tags=["users"], response_model=schemas.users.User)

backend-router-demo/app/schemas/users.py

@@ -15,3 +15,7 @@ class User(UserBase):
 
     class Config:
         orm_mode = True
+
+class UserList(BaseModel):
+  total: int
+  items: List[User]

backend-router-demo/readme.md

+### 运行命令
+uvicorn app.main:app --reload
\ No newline at end of file

vue-antd-demo/src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
+import system from "./system";
 
 Vue.use(VueRouter);
 
@@ -18,6 +19,12 @@ const routes = [
     path: "/map",
     name: "Map",
     component: () => import("../views/map/Map.vue")
+  },
+  {
+    path: "/index",
+    name: "Index",
+    component: () => import("../views/layouts/AppLayout.vue"),
+    children: [system]
   }
 ];
 

vue-antd-demo/src/router/system.js

+const RouteView = {
+  name: "RouteView",
+  render: h => h("router-view")
+};
+const routes = {
+  path: "/system",
+  name: "System",
+  component: RouteView,
+  meta: {},
+  children: [
+    {
+      path: "user",
+      name: "User",
+      component: () => import("../views/sys-user/SysUser.vue"),
+      meta: {
+        icon: ""
+      }
+    }
+  ]
+};
+
+export default routes;

vue-antd-demo/src/views/auth/Login.vue

@@ -94,7 +94,7 @@ export default {
             params: { email: values["username"], password: values["password"] },
             method: "post"
           }).then(() => {
-            this.$router.push({ path: "/map" });
+            this.$router.push({ path: "/system/user" });
           });
         }
       });

vue-antd-demo/src/views/layouts/AppLayout.vue

+<template>
+  <a-layout
+    id="components-layout-demo-custom-trigger"
+    style="min-height: 100vh"
+  >
+    <a-layout-sider v-model="collapsed" collapsible>
+      <div class="logo" />
+      <a-menu theme="dark" :default-selected-keys="['1']" mode="inline">
+        <a-menu-item key="1">
+          <a-icon type="pie-chart" />
+          <span>User</span>
+        </a-menu-item>
+        <a-menu-item key="2">
+          <a-icon type="desktop" />
+          <span>Role</span>
+        </a-menu-item>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-content
+        :style="{
+          margin: '24px 16px',
+          padding: '24px',
+          background: '#fff',
+          minHeight: '280px'
+        }"
+      >
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      collapsed: false
+    };
+  }
+};
+</script>
+<style>
+#components-layout-demo-custom-trigger .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+  color: #1890ff;
+}
+
+#components-layout-demo-custom-trigger .logo {
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
+}
+</style>

vue-antd-demo/src/views/sys-user/SysUser.vue

+<template>
+  <a-table
+    :columns="columns"
+    :row-key="data.id"
+    :data-source="data"
+    :pagination="pagination"
+    :loading="loading"
+    @change="handleTableChange"
+  >
+    <template slot="name" slot-scope="name">
+      {{ name.first }} {{ name.last }}
+    </template>
+  </a-table>
+</template>
+
+<script>
+import request from "@/utils/request";
+const columns = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    sorter: true,
+    width: "20%",
+    scopedSlots: { custonRender: "name" }
+  },
+  {
+    title: "Gender",
+    dataIndex: "gender",
+    filters: [
+      { text: "Male", value: "male" },
+      { text: "Female", value: "female" }
+    ]
+  },
+  {
+    title: "Email",
+    dataIndex: "email"
+  }
+];
+export default {
+  data() {
+    return {
+      data: [],
+      pagination: {},
+      loading: false,
+      columns
+    };
+  },
+  mounted() {
+    this.fetch();
+  },
+  methods: {
+    handleTableChange(pagination, filters, sorter) {
+      console.log(pagination);
+      const pager = { ...this.pagination };
+      pager.current = pagination.current;
+      this.pagination = pager;
+      this.fetch({
+        results: pagination.pageSize,
+        page: pagination.current,
+        sortField: sorter.field,
+        sortOrder: sorter.order,
+        ...filters
+      });
+    },
+    fetch(params = {}) {
+      this.loading = true;
+      request({
+        url: "/users",
+        params: params,
+        method: "get"
+      }).then(res => {
+        const pagination = { ...this.pagination };
+        pagination.total = res.total;
+        this.loading = false;
+        this.data = res.items;
+        this.pagination = pagination;
+      });
+    }
+  }
+};
+</script>