934 lượt xem
2022-08-31 13:22:06
Bạn chưa đăng nhập
Hãy đăng nhập
Phần này các bạn tham khảo thêm ở document của nó nhé link tại đây
Các bạn tạo cho mình 2 folder
Hai folder này cùng cấp với src nhé.
Tiếp theo các bạn cài cho mình template engine là hbs
npm install --save hbs
Các bạn mở file main.ts lên và thay đổi nội dung như sau
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3001);
console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();
Ở folder view các bạn tiếp tục tạo cho mình 1 file là index.hbs với nội dung
<html>
<head>
<title>Xin Chào</title>
</head>
<body>
<h1>nội dung bài viết</h1>
</body>
</html>
Ở file app.controller.ts các bạn thêm cho mình nội dung sau
@Get('test')
@Render('index')
getViewIndex() {
return { message: 'Hello world!' };
}
Ở phía trên các bạn nhớ use các thư viện tương ứng nhé
import { Controller, Get, Render } from '@nestjs/common';
Mình giải thích chỗ này một chút nhé
Ở đây mình sẽ có 1 method là get ứng với endpoint là test (domain/test) sẽ gọi view là index ( nằm ở folder views mình vừa tạo ) và truyền data là message
Và bây giờ các bạn lên trình duyệt gõ cho mình http://localhost:3001/test xem kết quả nhé
Render view
Tiếp tục mình sẽ tạo tiếp 2 folder backend và frontend nằm trong views nhé và đồng thời tương ứng mình tạo luôn 2 file index.hbs với nội dung sau
views/backend/index.hbs và views/frontend/index.hbs
<html>
<head>
<title>Xin Chào</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>
Ở file app.controller.ts các bạn thêm cho mình 2 endpoint sau
@Get('test-backend')
@Render('backend/index')
getViewIndexBackend() {
return { message: 'Hello world Backend!' };
}
@Get('test-frontend')
@Render('frontend/index')
getViewIndexFrontend() {
return { message: 'Hello world Frontend!' };
}
Ở đây mình sẽ test thử xem nó có gọi và trả dữ liệu đúng view backend và frontend mình vừa tạo hay không.
À phần này các bạn lưu ý giúp mình mình ko run project bằng lệnh npm start nữa vì nó ko tự động render lại route khi mình thêm mới nên mình sẽ chuyển qua run project bằng lệnh
npm run start:dev
Các bạn lần lượt vào url
http://localhost:3001/test-backend
http://localhost:3001/test-frontend
để xem được kết quả các view tương ứng nhé
123code.net mang lại cảm giác an toàn nhất cho bạn, không làm bạn thất vọng, giúp bạn giải quyết được vấn đề đồ án tốt nghiệp ở thời điểm hiện tại và tương lai
- Đưa ra giải pháp, góp ý giúp bạn có được một đề tài đồ án tốt, phù hợp nhất
- Có nhiều tính năng mới, độc giúp thu hút, thuyết phục được giáo viên phản biện cũng như hội đồng bảo vệ đồ án
- Đúng ngày, đúng giờ, đầy đủ yêu cầu - tính năng
=> Nhanh tay đăng ký hoạc liên hệ với admin tại đây để có được một đồ án phù hợp với mình
Tổng hợp các đề tài đồ án tốt nghiệp khá là hay do AI gợi ý cho chúng ta
Tổng hợp các tính năng cần có trong đồ án mà công nghệ AI ChatGtp gợi ý cho chúng ta, cùng xem nhé
Cũng đú đỉnh một chút nay mình thử nhờ chatgtp làm một bài content giới thiệu code thuê đồ án xem như thế nào nhé?
Tổng hợp các bài hướng dẫn cài đặt các phần mềm, ứng dụng, biến môi trường và cách run project bằng mã nguồn php laravel mới nhất
Giới thiệu đến bạn 5+ các mẫu slide bài tập nhóm lập trình giúp bài báo cáo trở nên chuyên nghiệp tức thì. 123CODE hỗ trợ code bài tập nhóm chính xác, nhanh chóng
123code sẽ cùng bạn tham khảo địa chỉ lấy template slide báo cáo website bán hàng đầy đủ nhất
123code cung cấp kho slide để bạn tham khảo slide công nghệ thông tin cho đồ án tốt nghiệp
Tham khảo một số ý tưởng tại 123code để làm slide báo cáo đồ án đẹp và ấn tượng cho bài thuyết trình như sau.
Cùng 123code tham khảo các nguyên tắc cần tuân thủ khi thiết kế slide đồ án cho sinh viên
Cùng 123code tham khảo kho tài liệu đồ án miễn phí năm 2022 cho các sinh viên theo học ngành CNTT trong bài viết sau
