Node.js实战项目(一)----首页渲染

xiaoxiao2021-02-28  3

我要用Node来做一个分享读后感的网站,这个Node实战系列就是一个记录。

1、项目初始化

把写好的前端代码拷进项目文件夹,然后初始化,以及安装各种包,这里我用的是yarn 和npm是一样的

yarn init yarn add express

这就是初始化好了的项目文件目录结构,入口文件是app.js

2、优化目录结构

项目初始化后,项目目录依旧很乱,这不符合我们的要求,所以我们要对项目的目录结构进行优化,

1、引入express框架。

2、新建views作为存放前端视图的文件夹。

3、新建public作为存放静态文件的文件夹。

var express = require('express'); var app = express(); //设置视图模板引擎 app.set('views', './views'); app.set('view engine','ejs'); //静态文件存放目录 app.use('/static',express.static('public'));整理后的文件目录结构为

这样就清爽多了

3、首页渲染

这里我选用的是ejs作为前端模板,所以index.html要改为.ejs后缀

(views文件夹)

顺便一提,在views中,我把前端页面分为两部分,一是纯粹的展示性的页面放进article文化夹中,另一个是涉及提交数据等的页面,我放进admin文件夹中。

改好文件后缀之后还需要改的就是代码中所链接文件的目录。

之前我把所有静态文件都放进了public文件夹中,又在代码中设置了public目录的路径为'/static'

所以index.ejs里的文件路径也要改了

<link rel="stylesheet"href="/css/index.css"> 改为 <link rel="stylesheet"href="static/css/index.css">

将文件中的链接路径都修改后,在app.js里增加首页渲染的代码

var express = require('express'); var app = express(); //设置视图模板引擎 app.set('views', './views'); app.set('view engine','ejs'); //静态文件存放 app.use('/static',express.static('public')); //'/'表根目录 app.get('/', function (req, res,next) { res.render('index'); }); app.listen(3000);

在命令窗启动app,'''node app.js',打开浏览器输入127.0.0.1:3000我们就能看到首页被成功渲染出来了

转载请注明原文地址: https://www.6miu.com/read-1750210.html

最新回复(0)