简单的静态展示页面

作者: 王伯卿 | 来源:发表于2018-04-27 22:32 被阅读0次

简单的静态展示页面
angular部署服务器
UIWebview与OC交互以及加载失败
app分享页面，唤醒app方法总结
爬虫初窥
听欢哥讲PHP页面静态化
web模拟淘宝评价效果
virtual-dom
hexo + github 搭建个人博客
github部署可展示的静态页面

假设现在有一个简单的展示页面，不包含任何实际功能。可能是一个公司的展示页面。因此，我们需要完成的需求就是当用户点击a标签的时候，页面会展示正确的内容。因此我们可以这么做。（这里只做一个导航栏，也许其他的也是同样的道理）
我们先写一个index页面，当用户访问根目录“/”的时候，会跳转到这里。

<!DOCTYPE html>
<html>
<head>
    <title>nav</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <ul>
        <li><a href="/home">主页</a></li>
        <li><a href="/news">新闻</a></li>
        <li><a href="/contact">联系</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</body>
</html>

这里有4个a标签，点击不同的标签会链接到不同的地址。
然后下面是一个简单的css样式，呈现的是一个水平方式的导航栏。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
} 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
} 
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: green;
}

然后是我们的server文件。
我们需要将css文件等分开放置，比如放置在同目录下public文件夹下。
然后利用Express托管静态文件:
server.use(express.static(__dirname +'/public'))
html中相应访问的链接为：href="test.css"。（前面public已经指明好了，所以这里不用再加）

const express = require('express');
const consolidate = require('consolidate');

let server = express();

server.set('view engine' , 'ejs');
server.set('views' , './');
server.engine('html' , consolidate.ejs);
 
server.use(express.static(__dirname +'/public'));

server.get('/' , (req , res) => {
  res.render('index.ejs' , {username:'eric'});
});
server.get('/about' , (req , res) => {
  res.render('about.ejs' , {username:'eric'});
});
server.get('/news' , (req , res) => {
  res.render('news.ejs' , {username:'eric'});
});
server.get('/home' , (req , res) => {
  res.render('home.ejs' , {username:'eric'});
});
server.get('/contact' , (req , res) => {
  res.render('contact.ejs' , {username:'eric'});
});

server.listen(3000);

这样，一个简单的展示页面就完成了。只要把html和css写好就可以了。

后记：
今天陪着父母去看了下房子，45平米的双层loft酒店公寓，附近有两条地铁，而且上下两层非常精致漂亮，好希望在大城市有一个小小的家，回去之后可以唱唱歌，弹弹琴，学学自己想学的，但是问了价格后，确实感受到一种无能为力的难过。