使用express

基本命令

npm install express --save

安装express

npm init

初始化

npm install -g nodemon

自动监控代码变化

nodemon

运行会找server.js文件

npm install--save body-parser

解析body

npm install --save multer

上传文件

npm install ejs --save

模板引擎

Get

var express = require('express');

var app = express();
app.get('/',function(req,res) {
    res.send("Hello World1");
});
app.listen(3000);

json

var express = require('express');

var app = express();
app.get('/',function(req,res) {
    var jsonObject = {
        name:'name',
        age:30,
        sex:'女'
    }
    res.send(JSON.stringify(jsonObject));
});
app.listen(3000);
console.log('listen 3000');

路由

var express = require('express');

var app = express();
app.get('/profile/:id',function(req,res) {    
    console.dir(req.params);
    res.end('Hello World');
});
app.listen(3000);
console.log('listen 3000');

获取参数

var express = require('express');

var app = express();
app.get('/',function(req,res) {    
    console.dir(req.query.find);
    res.send('Hello World');
});
app.listen(3000);
console.log('listen 3000');

Post

body-parser

var express = require('express');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.urlencoded({ extended: false }))  

app.post('/',function(req,res) {    
    console.dir(req.body);
    res.send('Hello World');
});
app.listen(3000);
console.log('listen 3000');

var express = require('express');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.urlencoded({ extended: false }))  

app.post('/',function(req,res) {    
    console.dir(req.body);
    res.send('Hello World');
});
app.listen(3000);
console.log('listen 3000');

body-parser的json处理

var express = require('express');
var bodyParser = require('body-parser');

var app = express();
// 中间件函数
var jsonParse = bodyParser.json();  
 
app.post('/test', jsonParse, function(req,res) {    
    console.dir(req.body);
    res.send(req.body.name);
});
app.listen(3000);
console.log('listen 3000');

上传文件

form.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <h2>单图上传</h2>
            <input type="file" name="logo"/>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

server.js

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var upload = multer({dest:'uploads'});

var app = express();

app.get('/form',function(req,res) {

    var form =  fs.readFileSync('./form.html',{encoding:'utf8'});
    res.send(form);
});

// 上传文件
app.post('/upload',upload.single('logo') ,function(req,res) {
    res.send({"res_code":0});
});
 
app.listen(3000);
console.log('listen 3000');

优化版本

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var multer = require('multer');

var createFolder = function(folder) {
    try {
        fs.accessSync(folder);
    } catch {
        fs.mkdirSync(folder);
    }
}
var uploadFolder = './upload/';
createFolder(uploadFolder);

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, uploadFolder)
    },
    filename: function (req, file, cb) {
     // cb(null, file.fieldname + '-' + Date.now())
     cb(null,file.originalname);
    }
  })
   
var upload = multer({ storage: storage })

var app = express();

app.get('/form',function(req,res) {

    var form =  fs.readFileSync('./form.html',{encoding:'utf8'});
    res.send(form);
});

// 上传文件
app.post('/upload',upload.single('logo') ,function(req,res) {
    res.send({"res_code":0});
});
 
app.listen(3000);
console.log('listen 3000');

查看form

app.get('/form',function(req,res) {
    res.sendfile(__dirname+'/form.html');
});

ejs模板引擎

views/form.ejs

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1> <%= person %> </h1>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <h2>单图上传</h2>
            <input type="file" name="logo"/>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

server.js

var express = require('express');
var app = express();

// 使用模板引擎
app.set('view engine','ejs');
 
app.get('/form/:name',function(req,res) {
    var person = req.params.name;
    res.render('form',{person:person});
});
app.listen(3000);
console.log('listen 3000');

form.ejs

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <ul>
        <% data.hobbies.forEach(function(item) { %>
        <li> <%= item %> </li>
        <% }) %>
        </li>
    </ul>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <h2>单图上传</h2>
        <input type="file" name="logo" />
        <input type="submit" value="提交" />
    </form>
</body>

</html>

server.js

var express = require('express');
var app = express();

// 使用模板引擎
app.set('view engine','ejs');
 
app.get('/form',function(req,res) {
    var data ={age:29,hobbies:['eating','fighting','fishing']};
    res.render('form',{data:data});
});
app.listen(3000);
console.log('listen 3000');

模板引擎2

header.ejs

<nav>
    <ul>
        <li>
            <a href="#">home</a>
        </li>
        <li>
            <a href="#">about</a>
        </li>
    </ul>
    
</nav>

about.ejs

<html>
    <head>

    </head>
    <body>
        <%- include('partials/header.ejs') -%>
    </body>
</html>

form.ejs

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <%- include('partials/header.ejs') -%>

    <form action="/upload" method="POST" enctype="multipart/form-data">
      
        <h2>单图上传</h2>
        <input type="file" name="logo" />
        <input type="submit" value="提交" />
    </form>
</body>

</html>

server.js

var express = require('express');
var app = express();

// 使用模板引擎
app.set('view engine','ejs');
 
app.get('/form',function(req,res) {  
    res.render('form');
});

app.get('/about',function(req,res) {
    
    res.render('about');
});
app.listen(3000);
console.log('listen 3000');

posted @ 2020-03-26 13:35 bradleydan 阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

bradleydan

使用express

基本命令

Get

json

路由

获取参数

Post

body-parser

body-parser的json处理

上传文件

form.html

server.js

优化版本

查看form

ejs模板引擎

views/form.ejs

server.js

form.ejs

server.js

模板引擎2

header.ejs

about.ejs

form.ejs

server.js

公告