阿里云七天云开发校园合伙人创造营 Day 4

最新推荐文章于 2024-09-30 14:06:00 发布

MicroLOONG

最新推荐文章于 2024-09-30 14:06:00 发布

阅读量198

点赞数

分类专栏：阿里云七天云开发全记录文章标签：后端 typescript 经验分享

本文链接：https://blog.csdn.net/qq_43697852/article/details/107975781

版权

阿里云七天云开发全记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

云开发7天训练营学习计划

在这里插入图片描述

阿里云云开发平台校园合伙人招募主要提供了云开发平台进行 Web 开发的体验，包括以下内容：

完结撒花 🎉 ，点击上面的链接可以回顾这七天的内容哦~

Day 4: 创建 Koa 应用并使用 koa-ejs 渲染页面

关于 Koa

Koa 是一个基于 Node.js 的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API
开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa
并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

摘自 koa 中文文档

每日任务

今日任务为使用云开发平台创建 koa 应用，通过 koa-ejs 进行服务端渲染，返回 <h1>Hi Serverless + 名字</h1>

1. 准备开发环境

登入云开发平台，进入到应用列表，点击 创建新应用，新建一个 WEB 场景的 KOA应用迁移方案。

创建好后，进入 开发部署。

在这里插入图片描述

2. 开发调试

进入 IDE 后，先在终端执行：

npm i
#安装 npm 依赖

npm i koa-ejs
#安装 koa-ejs

Koa 主要内容都在 app.js 里面

这里使用 koa-ejs 渲染页面，有关详情可以查看 koa-ejs 的 GitHub

接下来修改代码：

const Koa = require('koa');
const render = require('koa-ejs');     //引入 koa-ejs
const path = require('path');          //定义 path
const Router = require('koa-router');
const app = new Koa();
const assert = require('assert');
const router = new Router();
const bodyParser = require('koa-bodyparser');

//初始化 ejs，设置模板文件后缀为 ejs，文件目录为 /view
render(app, {
  root: path.join(__dirname, 'view'),
  layout: false,
  viewExt: 'ejs',
  cache: false,
  debug: false
});

//渲染页面
router.get('/', async (ctx,next) => {
  //定义模板文件名为 index
  await ctx.render('index',{
    title: 'Hi Serverless MicroLOONG'
  });  
});

// 其他路由 ...

app.use(bodyParser()); //请求解析中间件
app.use(router.routes()).use(router.allowedMethods()); //启动路由

app.listen(3000); //设置端口为 3000

module.exports = app;

在项目根目录创建一个文件夹 view，在文件夹中新建 index.ejs 文件，内容为：

<h1><%- title %></h1>

现在就可以在终端执行 node app.js 访问页面了，关于 Web IDE 访问端口方法如下图

在这里插入图片描述

页面内容如下

在这里插入图片描述

渲染出的 HTML 代码为

<html>
  <head></head>
  <body>
    <h1>Hi Serverless MicroLOONG</h1>
  <body>
</html>

任务拓展

除了上述使用 koa-ejs 渲染页面，也可以使用 koa-views 代替。有关详情可以查看 koa-views 的 GitHub

在上文基础上，除了使用 npm i 安装依赖，还需要安装 koa-views，执行

npm i koa-views

接下来修改 app.js 的代码：

const Koa = require('koa');
const views = require('koa-views');    //引入 koa-views
const path = require('path');          //定义 path
const Router = require('koa-router');
const app = new Koa();
const assert = require('assert');
const router = new Router();
const bodyParser = require('koa-bodyparser');

app.use(views(path.join(__dirname,'/view'),{
  //初始化 ejs，文件目录为 /view
  extension:'ejs'
}))

router.get('/', async (ctx,next) => {
  let title = 'Hi Serverless MicroLOONG';
  //定义模板文件名为 index
  await ctx.render('index', {
     title,
  });
});

// 其他路由 ...

app.use(bodyParser()); //请求解析中间件
app.use(router.routes()).use(router.allowedMethods()); //启动路由

app.listen(3000); //设置端口为 3000

module.exports = app;