頁面文件中使用API注意事項： 請求插件`/plugins/request.js`中已經進行了錯誤處理，因此接口返回的數據只包含業務數據`data`域，不包含`errno`和`errmsg`域。 ``` errno:0, errmsg:'', data: {} ``` 寫作規范： 頁面返回的數據命名為`pageData` 分頁數據命名為`pagedData`。 查詢過濾條件命名為`map` > 大塊的展示內容盡可能組織稱一個組件，提高代碼的可讀性，組件的入口文件統一命名為`index.vue`，每個組件建立一個文件夾，放在主控頁面的components目錄下，全局組件放在`/components`目錄下。 ``` <template> <Row> <Col span="16" offset="4"> <LayoutHeader> </LayoutHeader> <Banner :image="banner"></Banner> <ChannelHeader> <Breadcrumb> <BreadcrumbItem>有職道</BreadcrumbItem> <BreadcrumbItem>首頁</BreadcrumbItem> </Breadcrumb> </ChannelHeader> <Row :gutter="5" type="flex"> <Col :key="index" v-for="(item, index) in dataset" span="8"> <ListItem :value="item" :to="{ path: '/ujob/headhunter/detail', query: { id: item.id, menu: 'headhunter' }, }" ></ListItem> </Col> </Row> <Row justify="end" type="flex"> <Page :current="page" :page-size="pageSize" :total="total" @on-change="handlePageChange" show-total /> </Row> </Col> </Row> </template> <script> import Banner from "../components/banner"; import ChannelHeader from "@/components/channel-header"; import LayoutHeader from "../components/layout-header"; import * as headhunter from "@/api/ujob/headhunter"; import ListItem from "./components/ListItem"; export default { components: { Banner, ChannelHeader, LayoutHeader, ListItem, }, provide: { // name: "Aresn", }, data() { return { banner: "/static/images/ujob_banner.jpg", breadcrumbList: [ { title: "一級菜單", to: "/", }, { title: "二級菜單", to: "/", }, { title: "三級菜單", }, ], page: 1, total: 0, pageSize: 12, keywords: "", map: { city: "", }, dataset: [], }; }, methods: { handlePageChange(page) { this.page = page; this.loadPagedData(); }, loadPagedData() { let map = Object.assign({}, this.map, { pageSize: this.pageSize, page: this.page, key: this.keywords, }); // map = helper.removeEmptyNullOrUndefinedAttributes(map); headhunter.getList(map).then((res) => { this.total = res.count; this.dataset = res.data; }); }, }, async created() { this.loadPagedData(); }, }; </script> <style scoped lang="scss"> a { text-decoration: inherit; color: inherit; } a:hover { color: inherit; } </style> ```