Nodejs-express 设置学习笔记

Nodejs中express 设置学习

安装、初始化->Hello,world

1. 首先安装nodejs；
2. 创建项目文件夹：myapp；
3. 在命令行中使用 npm init 来初始化文件夹，使用npm install express --save安装 express （其中的默认文件可以设置为默认的index.js或者设置为“app.js”）;
4. 在 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)
})

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

使用swig模板

1. 在cmd 中安装 swig npm install swig --save;
2. 在上文创建的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);

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

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

1. 在app.js中创建路由：

// 设置路由

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

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

//index.html

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

1. 在cmd中运行：node app.js。打开浏览器输入：local host:3000(端口号为自行设定端口号)，查看页面输出。

加载静态文件

1. 在app.js中添加

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

1. 在myapp文件夹下创建public文件夹，在此文件夹下添加JS、CSS、图片等静态文件（此处创建index.js、index.css）
2. 在index.html中引入创建的css、js文件：

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

（可以为css、js文件添加测试样式，查看是否引入）
注意引入文件目录地址；

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