//访问地址:http://localhost:8080/
//貌似其实可以全部写成一行的...  -_-||
var http=require('http');
var url=require('url');
var express=require('express');
var session=require('express-session');
var bodyParser=require("body-parser");  
var app = express();
var server = app.listen(8080, function () {});
app.use(bodyParser.urlencoded({ extended: false }));  
app.use(session({secret: '123456',name: 'session',cookie: {maxAge: 3600000},resave: false,saveUninitialized: true}));
app.get('/', function (req, res) {
         res.writeHead(200, {'Content-Type': 'text/html'});	
         res.write('<html><meta charset="UTF-8"><body><form action="/sub" method="post"><input name="t" type="text"> <input type="submit"></form></body></html>');		
         res.end();
});
app.post('/sub',function(req,res){
	req.session.text=req.body.t;
	res.writeHead(200, {'Content-Type': 'text/html'});	
        res.write('<html><meta charset="UTF-8"><body>请点这里</body></html>');		
        res.end();
});
app.get('/text',function(req,res){
	res.writeHead(200, {'Content-Type': 'text/html'});	
	if(req.session.text!=null)
		res.write('<html><meta charset="UTF-8"><body>'+req.session.text+'</body></html>');
	else
		res.write('<html><meta charset="UTF-8"><body>....</body></html>');
	res.end();	
});

因为我本人是JS hacker, 就用JS做一次吧。

首先，我复制了radio的代码，并作了一些细微的重构。功能完全一致。

var http=require('http');
var express=require('express');
var session=require('express-session');
var bodyParser=require("body-parser");
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({secret: '123456',name:'session',cookie: {maxAge: 3600000},resave: false,saveUninitialized: true}));

//tag generator
var tg = (name,content,props)=>`<${name} ${props||''}${content?'':' '}>${content||''}${content?'':''}`

var htmlWrap = (content)=>tg('html',tg('body',content))

var textInput = (name)=>tg('input',null,'name="'+name+'" type="text"')
var submit = tg('input',null,'type="submit"')

//form generator
var fg = (content)=>tg('form',content,'action="sub" method="post"')

var formHTML = htmlWrap(fg(textInput('t')+submit))
var clickHTML = htmlWrap(tg('a','请点这里','href="/text"'))

app.get('/', function(req, res) {
  res.send(formHTML);
});

app.post('/sub',function(req,res){
  req.session.text=req.body.t;
  res.send(clickHTML)
});

var textToHTML = (text)=>htmlWrap(text)

app.get('/text',function(req,res){
  res.send(textToHTML(req.session.text||'....'))
});

app.listen(9001,()=>{console.log('listening on 9001');});

</${name}>

但是我觉得：这不清真。表达仍然太冗长、太不自然了。我准备写个清真的版本。

采用了异步Promise写法：

//tag generator
var tg = (name,content,props)=>`<${name} ${props||''}${content?'':' '}>${content||''}${content?'':''}`

var htmlWrap = (content)=>tg('html',tg('body',content))

var textInput = (name)=>tg('input',null,'name="'+name+'" type="text"')
var submit = tg('input',null,'type="submit"')

//form generator
var fg = (content)=>tg('form',content,'action="" method="post"')

var formHTML = (content)=>htmlWrap(fg(content))
var linkHTML = (address)=>htmlWrap(tg('a','请点这里','href="'+address+'"'))
var textHTML = (text)=>htmlWrap(text)

var ee = (require('events').EventEmitter);

var nextVisitPromise = function(){
  var nvp = {}
  var e = new ee;
  nvp.trig = (req,res)=>{
    e.emit('trig',{req,res,waitForNextVisit:nvp.waitForNextVisit})
  }

  nvp.waitForNextVisit = ()=>{
    return new Promise((resolve,reject)=>{
      e.on('trig',resolve)
    })
  }
  return nvp
}

var nvprecords = {}

var bindOp = (path,op)=>{
  app.all(path,(req,res)=>{
    var s = req.session
    var key = 'p'+path

    if(s[key]){
      console.log(s[key]);
      var nvp = nvprecords[s.id]
      nvp.trig(req,res)
    }else{
      s[key] = true
      var nvp = nextVisitPromise()
      nvprecords[s.id]=nvp

      nvp.waitForNextVisit()
      .then((ctx)=>{
        return op(ctx)
      })
      .then(()=>{
        console.log('clearing session...');
        req.session.destroy()
        nvprecords[s.id]=undefined
      })

      nvp.trig(req,res)
    }
  })
}

app.listen(9001,()=>{console.log('listening on 9001');});

bindOp('/abc',(ctx)=>{
  var userinput
  ctx.res.send(formHTML(textInput('cde')+submit))
  return ctx.waitForNextVisit()
  .then(ctx=>{
    userinput = ctx.req.body.cde
    ctx.res.send(linkHTML('/abc'))
    return ctx.waitForNextVisit()
  })
  .then(ctx=>{
    ctx.res.send(textHTML(userinput||'....'))
  })
})

</${name}>

上面这段代码，访问/abc路径后，效果符合题目要求。 每次向用户返回HTML之后，直接Promise等待用户下一次访问，并通过闭包使用userinput变量。使用这种设计，就可以很短的代码，设计任意复杂的跳转流程，而不需要使用大量的路径以及状态机。

坏处：相当于把HTTP硬生生地变成了有状态协议，宕机的时候状态会丢失

好处：写起来无负担

稍作修改，现在可以接受两个输入，并且在最后一页显示。

bindOp('/abc',(ctx)=>{
  var userinput
  ctx.res.send(formHTML(textInput('user')+textInput('pass')+submit))
  return ctx.waitForNextVisit()
  .then(ctx=>{
    userinput = ctx.req.body
    ctx.res.send(linkHTML('/abc'))
    return ctx.waitForNextVisit()
  })
  .then(ctx=>{
    ctx.res.send(textHTML(userinput.user+'\'s password is '+ userinput.pass||'....'))
  })
})