|
上一篇我们讲解了官网的首页搭建，本篇我们讲解一下二级栏目课程中心的搭建
页面总体上是按照课程类别显示课程信息，最后一部分相当于是对课程的一个介绍，底部还是我们的一个快捷链接的入口
1 创建页面
点击创建页面的图标创建我们的课程中心页面
2 创建读取课程信息的API
我们在页面上相当于要分类展示课程信息，取的是前三个类别，每个类别取三条数据，我们需要写一个API来返回前端需要的数据结构
打开资源链接，点击+号创建API
选择自定义代码
输入API的名称和标识
输入方法的名称和标识
输入如下代码：
const ErrorCode ={
SUCCESS: 0,
PARAM_ERROR: 1001,
NOT_FOUND: 1002,
SYSTEM_ERROR: 1003,
};
module.exports = async function(params, context){
console.log("Received params:", params);
try {
const courseResult = await context.callModel({
dataSourceName: 'Courses', // 您的课程数据模型标识
methodName: 'wedaGetRecordsV2',
params: {
filter: {
where: {
$and:[
{
is_active: {$eq:true},
},
],
},
},
select: {
"$master": true,
"category_id":{ // 确保选中 category_id
"category_name": true, // 仍然需要这个字段用于前端显示或映射
"_id":true // **关键：选中 category ID**
}
},
getCount: true,
pageSize: 200,
pageNumber: 1
},
});
const records = courseResult.records;
if(!records || records.length ===0){
return{
code: ErrorCode.NOT_FOUND,
message: "未找到任何课程数据"
};
}
 const groupedCourses ={};
for(const record of records){
// 使用 category_id._id 作为键
const categoryIdentifier = record.category_id._id; // 使用可选链操作符确保安全访问
if(categoryIdentifier){ // 仅当类别标识符有效时才处理
if(!groupedCourses[categoryIdentifier]){
groupedCourses[categoryIdentifier]={
// 将中文类别名存储在 displayName 属性中，方便前端显示
displayName: record.category_id.category_name,
courses: []
};
}
groupedCourses[categoryIdentifier].courses.push(record);
}
}
const finalResult ={};
for(const categoryId in groupedCourses){
const categoryData = groupedCourses[categoryId];
finalResult[categoryId]={
displayName: categoryData.displayName,
courses: categoryData.courses.slice(0, 3)
};
}
return{
code: ErrorCode.SUCCESS,
message: "课程数据按类别获取成功",
data: finalResult, // 这里的 data 会包含非中文的键
};
} catch (error){
console.error("Error fetching or processing courses:", error);
return{
code: ErrorCode.SYSTEM_ERROR,
message: "系统异常，请稍后再试",
error: error.message // 调试时可以保留错误信息
};
}
};
3 创建变量
API创建好之后，在页面里需要创建一个变量来读取API的结果，选择外部API
选择我们的API
4 搭建页面
数据准备好了之后就可以搭建布局了，在第一行搭建我们的标题
第二行先搭建第一个分组课程的课程分类名称
$w.query1.data.data[Object.keys($w.query1.data.data)[0]].displayName
第二行显示课程信息，可以从首页复制我们已经搭建的布局过来，循环展示从表达式里绑定课程信息
$w.query1.data.data[Object.keys($w.query1.data.data)[0]].courses
然后将搭建好的内容克隆一份作为我们的第二行
从首页复制一样的效果修改内容作为第三部分课程特色
从首页复制底部的内容作为最后一部分内容
最终效果
布局搭建好之后就可以点击实时预览查看最终的效果
总结
这一篇我们搭建了课程中心的功能，难点是如何通过API将数据分好组在前端绑定，这个涉及后端代码的编写和前端表达式的编写。虽然说有一定的难度，好在微搭已经提供了丰富的API，只需要我们写一定的处理逻辑将数据组装好即可。
|