网页版餐厅点餐系统（二）

alltolove · 发表于 2017-7-2 11:09:41

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

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

x

本帖最后由 alltolove 于 2017-7-2 15:28 编辑

以前我做了个聊天网站，那次用的是ide直接生成的启动代码，这回我从空文件开始写（主要那个新版webstorm过期了，只能自己写了

），我又从网上找了个破解版的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 就会显示我们的主页。今天我们先把大致的框架建好了，有看不明白的鱼油可以回帖提问。明天继续

alltolove · 发表于 2017-8-16 09:07:23

源码可以在我的github下载https://alltolove.github.io/mycode/上边有介绍

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

[学习笔记] 网页版餐厅点餐系统（二）

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

评分

本帖被以下淘专辑推荐: