页面文件中使用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> ```