Vue2+Koa2+Typescript先後端框架教程--04班級管理示例（路由調用控制器）

時間 2020-12-28

標籤 typescript npm api 瀏覽器數據結構 app koa async post 測試欄目系統網絡简体版

原文原文鏈接

上篇文章分享了簡單的三層模式和基礎文件夾的建立，本篇將以示例的形式詳細具體的展現Router、Controller、Service、Model之間業務處理和數據傳輸。typescript

1. 班級管理數據模型建立。數據模型是經過Sequelize的ORM技術實現，關於Sequelize技術，將在後續文章中分享。npm

在上篇文章中的models文件夾中建立班級模型class.ts，數據結構爲：ID，班級名稱，班級編碼，班主任ID。代碼以下：api

import { Table, Model, Column, DataType, PrimaryKey } from "sequelize-typescript";
import DbSequelize from "../db_config";

@Table({
    tableName: 't_class'
})
export default class Class extends Model<Class> {
    //惟一標識
    @Column({ type: DataType.STRING, primaryKey: true })
    id: string;

    //班級名稱
    @Column({ type: DataType.STRING, field: 'class_name' })
    className: string;

    //班級編碼
    @Column({ type: DataType.STRING, field: 'class_code' })
    classCode: string;

    //班主任Id
    @Column({ type: DataType.STRING, field: 'head_teacher_id' })
    headTeacherId: string;
}

DbSequelize.addModels([Class]);

注：因爲還沒有講解Sequelize相關技術，因此這裏只須要明白班級結構便可。瀏覽器

2.班級管理服務建立。在services文件夾中建立class.ts，實現最基礎的增刪改查的服務方法。代碼以下：數據結構

import Class from '../models/class';
var Op = sequelize.Op;

//班級管理服務
export default class ClassService {
    //獲取全部班級
    async findClassList() {
        try {
            return Class.findAll({
                attributes: ['id', 'calssName', 'calssCode', 'headTeacherId']
            });
        }
        catch (err) {
            throw (err);
        }
    }

    //獲取單個班級
    async findClassById(classId: string) {
        try {
            return Class.findOne({
                attributes: ['id', 'calssName', 'calssCode', 'headTeacherId'],
                where: { id: classId }
            });
        }
        catch (err) {
            throw (err);
        }
    }

    //刪除班級
    async deleteClass(classId: string) {
        try {
            return await Class.destroy({ where: { id: classId } });
        }
        catch (err) {
            throw (err);
        }
    }

    //修改班級
    async editClass(class: any) {
        try {
            return await Class.update(class, { where: { id: class.id }, individualHooks: true });
        }
        catch (err) {
            throw (err);
        }
    }

    //添加班級
    async addClass(class: any) {
        try {
            return await Class.create(class);
        }
        catch (err) {
            throw (err);
        }
    }
}

注：因爲還沒有講解Sequelize相關技術，因此這裏只須要明白班級服務中基礎的操做就是簡單的增刪改查便可，有關分頁，複雜查詢也將在後篇中分享。app

3.班級管理控制器建立。在controllers文件夾中建立class.ts，實現最基礎的增刪改查的業務方法。代碼以下：koa

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) {

try {

let id = ctx.request.query.id;

if (!id) {

ctx.body = {

status: 0

}

return;

}

//調用查詢詳情服務，獲取結果

let res = await clsService.findClassById(id);

ctx.body = {

status: 1,

data: {

class: res

}

catch (err) {

ctx.throw(err.message);

}

//刪除班級

static async deleteClass(ctx: any) {

try {

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

//調用刪除服務，獲取結果

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

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

ctx.body = {

status: 1,

data: {

classId: res[1][0].id

}

else {

ctx.body = {

status: 0

}

catch (err) {

ctx.throw(err.message);

}

//修改班級

static async editClass(ctx: any) {

try {

let obj: any = ctx.request.body;

//調用修改服務，獲取結果

let res = await clsService.editClass(obj);

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

ctx.body = {

status: 0

}

else {

ctx.body = {

status: 1,

data: {

classId: res[1][0].id

}

catch (err) {

ctx.throw(err.message);

}

//添加班級

static async addClass(ctx: any) {

try {

let obj: any = ctx.request.body;

//調用添加服務，獲取結果

let res = await clsService.addClass(obj);

if (!res) {

ctx.body = {

status: 0

}

else {

ctx.body = {

status: 1,

data: {

classId: res.id

}

catch (err) {

ctx.throw(err.message);

}

注：此處的班級管理控制器，僅僅實現對增刪改查服務的調用，後篇慢慢會添加班級對班主任信息的獲取等相關業務邏輯的操做。async

4. 設置路由post

4.1 添加路由中間件測試

npm i koa-router
npm i @types/koa-router

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中，添加路由中間件

const Koa = require('koa');
const app = new Koa();

//引入路由
import router from './router';
//添加路由中間件
app.use(router.routes());
app.use(router.allowedMethods());

app.use(async (ctx: any) => {
  ctx.body = 'Hello World...Hello LaoLv';
});

console.log('app server start on port 3000...')
app.listen(3000);

這樣，整個router--controller--service--model之間的數據調用基本完成，可是因爲sequlize沒有安裝，你們若是直接複製代碼會報錯，因此，以上代碼僅僅是一個熟悉瞭解整個過程。

下面，你們能夠把model，service中的代碼都註釋掉，修改controller和router，簡單運行一個路由做爲舉例。

controllers-->class.ts

//班級管理控制器
export default class ClassController {
    //查找全部班級
    static async findClassList(ctx: any) {
        try {
            ctx.body = {
                status: 1,//返回碼：1操做成功，0操做錯誤
                data: {
                    classList: '這是測試數據'
                }
            }
        }
        catch (err) {
            ctx.throw(err.message);
        }
    }
}

router.ts:

import KoaRouter from 'koa-router';
//引入班級管理控制器
import ClassController from './controllers/class';

const router = new KoaRouter();
router.get('/api/class/findClassList', ClassController.findClassList);

export default router;