Nodejs-express 设置学习笔记

Nodejs中express 设置学习

安装、初始化->Hello,world

首先安装nodejs；

创建项目文件夹：myapp；

在命令行中使用

npm init

来初始化文件夹，使用

npm install express --save

安装

express

（其中的默认文件可以设置为默认的index.js或者设置为“app.js”）;

在 myapp 文件夹下新建 app.js（如果在npm init 阶段修改默认js文件，则做出相应更改）：

//app.js
var express = require('express');
var app = express();
//设置路由
app.get('/', function(req, res) {
res.send('Hello.world');
});
//设置监听端口
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port)
})

在cmd中输入

node index.js

后，在浏览器中打开端口，可以看到输出内容“Hello.world”；

使用swig模板

在cmd 中安装 swig

npm install swig --save

;

在上文创建的app.js中导入swig模块：

var swig = require('swig');

，并设置模板引擎等：

//app.js

var swig = require('swig');
//设置模板引擎以及默认模板文件
app.set('views', __dirname + '/views/');
app.set('view engine', 'html');
app.engine('html', swig.renderFile);

在myapp文件夹下创建 views 文件夹，并创建index.html 文件。

将后台数据传入到前端页面：

在app.js中创建路由：

// 设置路由

app.get('/', function(req, res) {
res.render('index', {
title: "this is from app.js",
content: "input value"
})
})

在index.html文件中获取数据：

//index.html

<h1>{{title}}</h1>
<h2>{{content}}</h2>

在cmd中运行：

node app.js

。打开浏览器输入：

local host:3000

(端口号为自行设定端口号)，查看页面输出。

加载静态文件

在app.js中添加

//设置静态文件目录（需在myapp文件夹下创建public文件夹）
app.use(express.static('public'));

在myapp文件夹下创建public文件夹，在此文件夹下添加JS、CSS、图片等静态文件（此处创建index.js、index.css）

在index.html中引入创建的css、js文件：

//index.html
。。。。。。
<link rel="stylesheet" type="text/css" href="index.css">
。。。。。。
<script src="index.js"></script>

（可以为css、js文件添加测试样式，查看是否引入）

注意引入文件目录地址；

至此，一个基本的后端数据传输到前端就可以实现了。