网页版餐厅点餐系统（二）
本帖最后由 alltolove 于 2017-7-2 15:28 编辑以前我做了个聊天网站，那次用的是ide直接生成的启动代码，这回我从空文件开始写（主要那个新版webstorm过期了，只能自己写了{:5_100:} ），我又从网上找了个破解版的webstorm，以后就用这个了。我是先建个空项目，然后看图片：
我标注的地方是关键。先打上图片上的代码测试一下，安装express模块然后运行程序，打开网页地址栏输入http://127.0.0.1:3000网页会显示‘你好’证明成功。然后直接在终端npm install ejs模块，新建一个js文件修改成如下代码：var express = require('express');
var app = express();
app.set('view engine','ejs');
app.use(express.static('./public'));
app.listen(3000);
再在根目录手动新建个public目录，在public目录下新建个a.html文件<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>
运行程序在地址栏输入http://127.0.0.1:3000/a.html浏览器上就会显示‘aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa’，以后这个目录就是我们放静态文件的地方（比如图片资源，网页用的一些第三方模块）。然后再把上次新建的js文件修改为var express = require('express');
var app = express();
app.set('view engine','ejs');
app.use(express.static('./public'));
app.get('/',function(req,res,next){
res.render('./home.ejs');
});
app.listen(3000);
这样我们就建了一个路由，还需要再建一个views目录，在views目录下新建home.ejs文件，这就是路由读取的文件，home.ejs文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>FISHC RESTAURANT</title>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
<script src="bootstrap3/js/jquery.min.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h1 class="page-header text-center">Welcome to my homepage</h1>
<p class="text-success">本餐厅采用优质甲鱼，个头硕大，适于红烧，清炖各种做法。口感较好。品味独特。</p>
<img src="http://img.sucai.redocn.com/attachments/images/200909/20090918/20090918_8de29be1060bf3373acebLRHrYy3fFES.jpg" alt="甲鱼图" class="img-thumbnail">
</body>
</html>
这就是主页。下面还需要把前端模块都从网上下载到我们的public文件夹里，如下图：
然后再运行文件，查看网址http://127.0.0.1:3000 就会显示我们的主页。今天我们先把大致的框架建好了，有看不明白的鱼油可以回帖提问。明天继续{:10_304:}
源码可以在我的github下载https://alltolove.github.io/mycode/上边有介绍
页:
[1]