NestJS博客实战07-导入页面

1,163 阅读2分钟
by 雪隐 from https://juejin.cn/user/1433418895994094
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可联系授权

大家好,今天内容不多主要把一些前端的静态页面导入进来完成基本的前端页面。我会举几个例子。后面重复的劳动大家可以自己完成。由于模版页面的导入和NestJS使用上,关系并不是很大,所以这章基本上就是大致讲讲。主要还是想更多写写NestJS用法。如果对本章没兴趣的朋友可以直接跳过。

模版页面导入

直接拿我以前做的博客页面,放在Github上了,直接用做好的页面把他们复制过来就可以了。

模版页面地址复制到本项目的views目录下。

public文件复制到本项目的public文件夹下。这其中用到的css文件夹中scss后缀的文件,全部改成css后缀。

目录介绍

然后对目录构成做一个简单的介绍。 info.jpg

  • public文件夹
    • css - 存放各种css样式
    • icoFonts - 字体以及字体图标等
    • images - 各种图片
    • js - javaScript文件
    • lib - 第三方的库。比如bootStrap等等
  • views 文件夹
    • layout - 共通画面,或者一部分画面。比如 菜单,页眉,页脚等等
    • 404.art - 路由找不到时候显示的画面

让画面跑起来

然后构建几个模块,由于没有数据情况下。页面会异常,所以给点假数据(现在还没有写后端)。 请看例子:

import { Controller, Get, Req, Res } from '@nestjs/common';

@Controller()
export class ArticleController {
  @Get('article')
  getArticle(@Req() req, @Res() res) {
    res.view('article.art', {
      common: {
        banner: false, // 显示轮播图
      },
      portrait: {},
    });
  }
}

模块介绍:

  • article - 文章模块
  • timeline - 归纳模块
  • gather - 点滴模块
  • gossip - 慢生活模块
  • home - 主页模块

把代码都写好,运行页面。 homePage.jpg

本章代码

代码