1.安装Node.js环境
可以官网下载后安装
2.安装Express
node安装完成之后,打开命令行工具,执行下面的命令安装Express
npm install express-generator -g
Express安装完成后,输入"express --version"命令,如果安装没问题就可以打印出Express的版本号
image.png
3.创建项目
安装完成后,我们进入到想要创建项目的目录,执行下面的命令使用ejs模板引擎创建一个Express项目
express --view=ejs Freedom.Client
image.png
3.1 安装依赖
使用"npm install"安装项目依赖的基础模块
image.png
最终项目结构如下图
image.png
3.2 启动项目
进入到项目目录下,使用下面的命令启动该项目
set DEBUG=freedom.client:* & npm start
image.png
浏览器中输入http://localhost:3000就可以看到创建的Client项目了
image.png
4.使用ejs渲染html文件
在命令行工具中使用ctrl + c停止项目,然后使用vscode编辑器打开Client项目,编辑app.js中的代码,设置html为模板引擎
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');
app.set('views',path.join(__dirname , 'views') );// 设置静态文件目录
app.engine('.html', require('ejs').__express); //设置ejs渲染html
app.set('view engine', 'html');//设置html为模板引擎 注意这里是html
我们在views文件夹下新增一个index.html文件,这个html文件可以通过文章最后面的git仓库获取到
最后编辑routes\index.js文件,让首页路由到刚才创建的index.html文件
/* GET home page. */
router.get('/', function(req, res, next) {
// res.render('index', { title: 'Express' });
res.render('index.html');
});
运行项目,刷新浏览器,可以看到输出的就是index.html文件了
image.png