源代码如下: 首先是index的
var express = require('express') var app = express()
var on = '0'
app.get('/get',function(req,res){ var data = { 'on':on } console.log(data) res.json(data) })
app.get('/set',function(req,res){ if(req.query.mon =="0" || req.query.mon == "1") on = req.query.mon var data = { 'on':on } console.log(data) res.json(data) })
//利用ejs模版显示web浏览器界面 app.set('view engine','ejs') app.get('/',function(req,res){ var state = "开" if(on == "0") state = "关" res.render("default",{lightState:state}) })
var server = app.listen(8000,function(){ var host = server.address().address; var port = server.address().port; console.log("addres:%s, port:%s",host,port) })
default的源代码:
用一个json对象保存灯的状态就行了,方便扩展,然后html传递对应的id进行状态控制。帮助到你能点个采纳吗,谢谢~
index.js
var express = require('express');
var app = express();
//灯状态,更多给json对象添加不同的键
var lightState = { light1: '关', light2: '关' }
app.get('/get', function (req, res) {
var data = { 'on': lightState[req.query.attr] };
console.log(data)
res.json(data);
});
app.get('/set', function (req, res) {
lightState[req.query.attr] = req.query.mon;
var data = { on: lightState[req.query.attr] }
console.log(data)
res.json(data)
});
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('default', lightState)
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('addres:%s, port:%s',host,port)
})
default.ejs
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function changeState(state, id) {
$.get('/set?mon=' + state+'&attr='+id, function (data, status) {
$('#' + id).text(data.on);console.log(data)
});
}
</script>
<h2>当前等状态</h2>
<h1 style="color:#f00" id="light1"><%=light1%></h1>
<button onclick="changeState('开','light1')">开灯</button>
<button onclick="changeState('关','light1')">关灯</button>
<h1 style="color:#f00" id="light2"><%=light2%></h1>
<button onclick="changeState('开','light2')">开灯</button>
<button onclick="changeState('关','light2')">关灯</button>
<div style="height:300px"></div>