Vue2+Koa2+Typescript前後端框架教程--04班級管理示例（路由呼叫控制器）
阿新 • • 發佈：2020-12-28
上篇文章分享了簡單的三層模式和基礎資料夾的建立，本篇將以示例的形式詳細具體的展示Router、Controller、Service、Model之間業務處理和資料傳輸。
1. 班級管理資料模型建立。資料模型是通過Sequelize的ORM技術實現，關於Sequelize技術，將在後續文章中分享。
在上篇文章中的models資料夾中建立班級模型class.ts，資料結構為：ID，班級名稱，班級編碼，班主任ID。程式碼如下：
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相關技術，所以這裡只需要明白班級服務中基礎的操作就是簡單的增刪改查即可，有關分頁，複雜查詢也將在後篇中分享。
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) { 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); } } }
注：此處的班級管理控制器，僅僅實現對增刪改查服務的呼叫，後篇慢慢會新增班級對班主任資訊的獲取等相關業務邏輯的操作。
4. 設定路由
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;
這樣，程式碼就不會報錯了，然後F5，我們執行一下：
1. 控制檯輸出成功
2. 瀏覽器顯示成功
3. 瀏覽器輸入 /api/class/findClassList，看看結果
以上三條，證明路由呼叫成功：呼叫controller中相關方法。後面再細緻分享router，sequelize相關技術知識點。
附：程式碼結構如下
&n