用node.js建自己个个人聊天网站（二）

alltolove · 发表于 2017-6-2 06:20:57

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

上个帖子我们没写一行代码就建了个网站，这就是现在编程界追求的简洁趋势。已经不要求你写大段的代码，复杂的逻辑，要用最简单的代码表达更多的事情，这样你写着也省事。别人维护起来也方便。

其实我们建的网站是由webstorm软件自动生成的代码，nodejs跟其他建站的语言（php,jsp,asp...）不同的是不需要额外的服务软件，比如阿帕奇，tomcat,IIS等，他是通过代码直接建站，方便又灵活。今天我们讲一下昨天的代码

网站的启动文件主要是www这个文件，你也可以电脑cmd或命令行里输入node www来启动服务器，nodejs不用浏览器也可以直接使用非常方便。

一般建网站都需要多页面，现在我说说怎么在服务器注册一个多页面的网站
app.js文件：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var game = require('./routes/game');//extend
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
app.use('/game',game);//extend
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;

复制代码

以上注释了extend的语句是我新添了
然后在routes目录里新建一个game.js文件，代码如下：

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('game', { title: 'Express' });
});
module.exports = router;

复制代码

在views文件夹里新建一个game.ejs文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>little ball move</title>
</head>
<body onkeydown="test(event)">
<h1>小球上下左右移动</h1>
<canvas id="test" width="400" height="400" style="border:1px solid red">
</canvas>
<script>
var canvas1=document.getElementById('test');
var cxt=canvas1.getContext('2d');
var ballX=30;
var ballY=30;
function drawBall(){
cxt.beginPath();
cxt.fillStyle='#FF0000';
cxt.arc(ballX,ballY,10,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
drawBall();
function test(e){
var code=e.keyCode;
switch(code){
case 37:ballX--;
break;
case 38:ballY--;
break;
case 39:ballX++;
break;
case 40:ballY++;
break;
}
cxt.clearRect(0,0,400,400);
drawBall();
};
</script>
</body>
</html>

复制代码

这个.ejs文件实际上就是网页模板，我们主要在这些文件上写代码。
public文件夹里是放图片等资源文件的地方
我们在index.ejs文件里写个超级链接测试一下连到新建的页面

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<a href="./game">to game</a>
</body>
</html>

复制代码

然后按照昨天的方法启动服务器，打开网站，点一下那个超级链接就会成功连到我们新建的网页了，这个是我写的一个用上下左右键移动小球的案列

不二如是 · 发表于 2017-6-2 07:13:07

XAMPP，强烈推荐介绍下～

alltolove · 发表于 2017-6-2 12:04:12

不二如是发表于 2017-6-2 07:13
XAMPP，强烈推荐介绍下～

M就是mysql的意思，不过现在nosql数据库比较流行

账号		自动登录	找回密码
密码			立即注册

[技术交流] 用node.js建自己个个人聊天网站（二）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: