目的
建立简单的node.js的demo项目，实现前后端分离的例子
-
有简单的页面跳转功能
-
有静态文件管理功能
-
密码登录一般都是放到后端服务器，通过ngnix做请求转发即可，页面通过ajax做异步请求。
-
jx打包项目，运行项目
-
springboot搭建简单的后台restful服务
源代码
git@gitee.com:kaiyang_taichi/nodejs.git
前提
已搭建好node.js、npm、cnpm环境
实现
[root@10 apps]# cd apps
[root@10 apps]# mkdir web
[root@10 apps]# cd web
[root@10 web]# mkdir public
//初始化ppackage.json管理依赖
[root@10 web]# cnpm --yes init
[root@10 web]# cnpm install express
[root@10 node_modules]# cnpm install http-proxy
- 将静态资源css、js、images放入public目录下
- 编写主服务js:server.js
var express = require('express');
var app = express();
//指定静态文件路径
app.use(express.static('public'));
var http = require('http'),
httpProxy = require('http-proxy');
// 新建一个代理 Proxy Server 对象
var proxy = httpProxy.createProxyServer({});
// 捕获异常
proxy.on('error', function (err, req, res) {
res.writeHead(500, {
'Content-Type': 'text/plain'
});
res.end('Something went wrong. And we are reporting acustom error message.');
});
app.all('/*.do', function(req, res) {
//对于.do的请求，直接去请求后台数据，此处可以通过一些框架实现mock和生产代理的配置，实现代理，
proxy.web(req, res, { target: 'http://localhost:1111' });
})
app.all('/*.html', function(req, res) {
console.log("请求"+req.path);
res.sendFile( __dirname + req.path);
})
app.all('/', function(req, res) {
console.log("请求"+req.path);
res.sendFile( __dirname + '/login.html');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
- 登录首页，表单提交请求.do
<!DOCTYPE HTML>
<html>
<head>
<title>Purple_loginform Website Template | Home :: w3layouts</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- -->
<script>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('data-t') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(c) {
var message=getQueryString('message')
if(message){
$('#message').html(message);
}else{
$('#message').html('');
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
}
$("#form").submit(function(e){
$.ajax({
type: 'POST',
//请求后台服务
url: '/demo/hello.do',
data:$("#form").serialize(),
dataType: 'json',
success: function(res) {
if(res.code=='1'){
window.location.replace('/index.html');
}else{
window.location.replace('/login.html?message='+res.message);
}
}
});
});
});
</script>
</head>
<body>
<!-- contact-form -->
<div class="message warning">
<div class="inset">
<div class="login-head">
<h1>用户管理系统</h1>
<div class="alert-close"> </div>
</div>
<form method="post" id="form">
<li>
<input type="text" class="text" placeholder="请输入登录名" name="loginName" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}"><a href="#" class=" icon user"></a>
</li>
<div class="clear"> </div>
<li>
<input type="password" value="" placeholder="请输入密码" name="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}"> <a href="#" class="icon lock"></a>
</li>
<span style="color: red" id="message"></span>
<div class="clear"> </div>
<div class="submit">
<input type="submit" name="submit" onclient style="float:right">
<div class="clear"> </div>
</div>
</form>
</div>
</div>
</div>
<div class="clear"> </div>
<!--- footer --->
<div class="footer">
</div>
</body>
</html>
- 启动springboot项目，作为后台服务
用idea编译springboot项目,生成jar包，将其复制到服务器上，启动服务
//后台启动web项目
[root@10 web1]# java -jar demo-0.0.1-SNAPSHOT.jar > log.log 2>&1 &
- 启动node.js项目
node server.js >log.log 2>&1 &
6.查看效果
效果展示
7.jx打包项目
[root@10 web]# jx package server.js demo
//杀掉原服务，重启
[root@10 web]# jx demo.jx >log.file 2>&1 &
网友评论