前端上手

WARNING
阅读本小节前，请确保你已经完成了后端快速上手，根据已经完成的 API 来完成前端页面。
本小节主要目的：让刚接触 lin-cms 的同学，通过这样一个简单的例子，初步了解 lin-cms 的运行机制，比较熟悉的同学可跳过。

想要完成这样一个图书管理 demo，需要以下流程：

  • 新建承载内容的页面文件
  • 配置访问页面需要的路由
  • 通过 API 将数据渲染到页面
  • 通过 API 完成添加、删除等用户行为
  • 遇到 API 异常及时进行处理
    urldescriptionmethod
    /v1/book/:id查询指定 id 的书籍GET
    /v1/book/:id更新指定 id 的书籍PUT
    /v1/book/:id删除指定 id 的书籍DELETE
    /v1/book/:id创建图书POST
    /v1/book/:id获取所有图书GET

建立页面

从业务逻辑分析，图书管理需要有图书列表与添加图书两个页面，先新建BookAdd.vue和BookList.vue两个文件。

位置：src/views/book/

PS: 如果对Lin的目录结构不是非常清楚，可以先进行大致浏览。

GitHub

页面路由

页面想要被访问需要有对应路由，接下来完成图书管理的路由配置：

位置： src/config/stage/book.js

  1. const bookRouter = {
  2.   route: null,
  3.   name: null,
  4.   title: '图书管理',
  5.   type: 'folder', // 类型: folder, tab, view
  6.   icon: 'iconfont icon-demo',
  7.   filePath: 'views/book/', // 文件路径
  8.   order: null,
  9.   inNav: true,
  10.   children: [
  11.     {
  12.       title: '添加图书',
  13.       type: 'view',
  14.       name: 'bookAdd',
  15.       route: '/book/add',
  16.       filePath: 'views/book/BookAdd.vue',
  17.       inNav: true,
  18.       icon: 'iconfont icon-demo',
  19.     },
  20.     {
  21.       title: '图书列表',
  22.       type: 'view',
  23.       name: 'bookAdd',
  24.       route: '/book/list',
  25.       filePath: 'views/book/BookList.vue',
  26.       inNav: true,
  27.     },
  28.   ],
  29. }
  31. export default bookRouter

此时，我们只是把图书管理的路由文件建立，接下来需要将数据插入到整个路由树中：

位置： src/config/stage/index.js

GitHub

到这里，已经可以看到图书管理的菜单和页面了。

GitHub

获取数据

图书列表页面，需要先从 API 获取到数据，并将其渲染到视图中。首选调用查询 API 接口：

位置：src/views/book/BookList.vue

  1. <script>
  2. import book from '@/lin/models/book'
  4. export default {
  5.   data() {
  6.     return {
  7.       tableColumn: [{ prop: 'title', label: '书名' }, { prop: 'author', label: '作者' }],
  8.       tableData: [],
  9.       operate: [],
  10.     }
  11.   },
  12.    async created() {
  13.     this.loading = true
  14.     this.getBooks()
  15.     this.loading = false
  16.   },
  17.   methods: {
  18.     async getBooks() {
  19.       const books = await book.getBooks()
  20.       this.tableData = books
  21.     },
  22.   }
  23. }
  24. </script>

那么根据在模型层中的介绍，将所有与 API 相关的处理，封装到models下面的一个book.js文件中。

位置：src/lin/models/book.js

  1. import { get } from '../utils/http'
  3. // 我们通过 class 这样的语法糖使模型这个概念更加具象化，其优点：耦合性低、可维护性。
  4. class Book {
  5.   async getBooks() {
  6.     const res = await get('v1/book/')
  7.     return res
  8.   }
  9. }
  10. export default new Book()

这样通过数据的变更来改变视图，图书列表就可以渲染出来了：

GitHub

异常处理

如果在数据获取过程中，遇到异常情况，根据在异常机制的介绍，通过 API 返回的不同 error_code 将异常拦截在 src/lin/utils/exception.js 这个文件中进行处理，这里就不详细说明了。

权限控制

权限的控制有两种：

  • 视图层的访问权限，也就是菜单根据权限来显示
  • API 的操作权限 具体权限控制请参考专门的章节介绍