天天看點

Vue2+Koa2+Typescript前後端架構教程--04班級管理示例(路由調用控制器)

上篇文章分享了簡單的三層模式和基礎檔案夾的建立,本篇将以示例的形式詳細具體的展示Router、Controller、Service、Model之間業務處理和資料傳輸。

1. 班級管理資料模型建立。資料模型是通過Sequelize的ORM技術實作,關于Sequelize技術,将在後續文章中分享。

在上篇文章中的models檔案夾中建立班級模型class.ts,資料結構為:ID,班級名稱,班級編碼,班主任ID。代碼如下:

注:由于尚未講解Sequelize相關技術,是以這裡隻需要明白班級結構即可。

2.班級管理服務建立。在services檔案夾中建立class.ts,實作最基礎的增删改查的服務方法。代碼如下:

注:由于尚未講解Sequelize相關技術,是以這裡隻需要明白班級服務中基礎的操作就是簡單的增删改查即可,有關分頁,複雜查詢也将在後篇中分享。

3.班級管理控制器建立。在controllers檔案夾中建立class.ts,實作最基礎的增删改查的業務方法。代碼如下:

import ClassService from '../services/class';

const clsService = new ClassService();

//班級管理控制器

export default class ClassController {

    //查找所有班級

    static async findClassList(ctx: any) {

        try {

            //調用查詢清單服務,擷取結果

            let res = await clsService.findClassList();

            ctx.body = {

                status: 1,//傳回碼:1操作成功,0操作錯誤

                data: {

                    classList: res

                }

            }

        }

        catch (err) {

            ctx.throw(err.message);

    }

    //根據班級id擷取班級詳細資訊

    static async findClassById(ctx: any) {

            let id = ctx.request.query.id;

            if (!id) {

                ctx.body = {

                    status: 0

                return;

            //調用查詢詳情服務,擷取結果

            let res = await clsService.findClassById(id);

                status: 1,

                    class: res

    //删除班級

    static async deleteClass(ctx: any) {

            let id: string = ctx.request.body.id;

            //調用删除服務,擷取結果

            let res: any = await clsService.deleteClass(id);

            if (res[0] === 1 && res[1][0].delFlag === 1) {

                    status: 1,

                    data: {

                        classId: res[1][0].id

                    }

            else {

    //修改班級

    static async editClass(ctx: any) {

            let obj: any = ctx.request.body;

            //調用修改服務,擷取結果

            let res = await clsService.editClass(obj);

            if (res[0] !== 1) {

    //添加班級

    static async addClass(ctx: any) {

            //調用添加服務,擷取結果

            let res = await clsService.addClass(obj);

            if (!res) {

                        classId: res.id

}

注:此處的班級管理控制器,僅僅實作對增删改查服務的調用,後篇慢慢會添加班級對班主任資訊的擷取等相關業務邏輯的操作。

 4. 設定路由

  4.1 添加路由中間件

  4.2 在router.ts中,添加如下代碼:

import KoaRouter from 'koa-router';

//引入班級管理控制器

import ClassController from './controllers/class';

const router = new KoaRouter();

router.post('/api/class/addClass', ClassController.addClass);

router.post('/api/class/editClass', ClassController.editClass);

router.post('/api/class/deleteClass', ClassController.deleteClass);

router.get('/api/class/findClassById', ClassController.findClassById);

router.get('/api/class/findClassList', ClassController.findClassList);

export default router;

  4.3 在app.ts中,添加路由中間件

這樣,整個router--controller--service--model之間的資料調用基本完成,但是由于sequlize沒有安裝,大家如果直接複制代碼會報錯,是以,以上代碼僅僅是一個熟悉了解整個過程。

下面,大家可以把model,service中的代碼都注釋掉,修改controller和router,簡單運作一個路由作為舉例。

controllers-->class.ts

router.ts:

這樣,代碼就不會報錯了,然後F5,我們運作一下:

1. 控制台輸出成功

Vue2+Koa2+Typescript前後端架構教程--04班級管理示例(路由調用控制器)

 2. 浏覽器顯示成功

Vue2+Koa2+Typescript前後端架構教程--04班級管理示例(路由調用控制器)

 3. 浏覽器輸入  /api/class/findClassList,看看結果

Vue2+Koa2+Typescript前後端架構教程--04班級管理示例(路由調用控制器)

 以上三條,證明路由調用成功:調用controller中相關方法。後面再細緻分享router,sequelize相關技術知識點。

附:代碼結構如下

Vue2+Koa2+Typescript前後端架構教程--04班級管理示例(路由調用控制器)

(文章為老呂原創,轉載請注明出處)