您的位置：首页 > Web前端 > Node.js

NODE.JS+EXPRESS.JS+百度BAE服务构建学术个人主页

2016-03-21 00:24 666 查看

NODE.JS+EXPRESS.JS+百度BAE服务构建学术个人主页

本文章适合初学NODE.JS服务端和前端技术的读者，或是有兴趣搭建自己的个人主页的朋友。

最终效果：Liuyuan@SCUT

工具安装与本地代码调试

NODE.JS

请在官网上NODE.JS下载最新的版本。（笔者使用的是v5.9.0 Stable）

下载好后执行node-v5.9.0-x64.msi文件，完成安装。

NODE.JS是运行在服务端的 JavaScript平台。它提供的是一套运行环境，它并不是一个类似于集成了很多编译器的IDE visual studio。要检查是否安装成功，请打开命令提示符CMD。*（WIN+R后键入CMD）输入

node -v

。若返回如

v5.9.0

则安装成功。

EXPRESS.JS

当你成功安装了NODE.JS时，实际上已经将NPM (Node Package Manager) 安装完毕，这是一个Node.JS包管理和下载工具。简单的说就是下载一些框架和你所需要的别人写好的模块。Express就是一个很流行的服务器框架。

再次打开CMD （我猜你一定注意到了每次键入新的命令时光标前总有一串路径，那就是你当前命令所在的工作路径。windows系统下在任一文件夹下shift+右键你会找到在此处打开命令行就可以快捷地将路径设置成那个文件夹）。

在任意路径下键入

npm install express@3.2.2 -g

。特别指出，-g的含义是将你即将安装的包安装在全局目录下。这有个好处就是在任何路径下都可以找寻到你安装的东西。

等待安装结束。在你希望建立工程的文件夹下打开CMD键入

express home -ejs

。一个崭新的工程文件就建好了！

webstorm

webstorm号称最懂web的IDE (集成开发环境，就是在里面敲代码的，就像Visual Studio)。

在官网上下载webstorm。并完成后续安装。

具体操作不多描述，用一用就会了。

外部依赖

工程生成后需要一些外部包，在已经生成的工程根目录下打开CMD，键入

npm install

。这一步操作会将json文件下列举的所有依赖包都下载在node_modules文件夹下。

TortoiseSVN

TortoiseSVN是一款svn窗口化客户端软件。

官网下载TortoiseSVN。

安装成功后会发现在任一文件夹下右键多出了SVN checkout和TortoiseSVN选项。

工程文件构架

Express.js是一个流行的node.js框架，是一个基于MVC的web框架。将MVC三者剥离开分别进行设计。M是model涉及核心组件、数据的流动，V是view涉及页面的前端显示，C是controller设计页面间逻辑和数据调用等。

自动生成的public文件夹是存放所有静态资源的文件夹，routes文件夹是存放所有路由文件的地方,是MVC中的C。views文件夹是存放页面前端文件的地方，也就是MVC中的V。本例中是不需要任何数据模型的，如果需要使用建议在根目录下新建models文件夹存放js数据模型文件。node_modules文件夹下是所有依赖包和模块。

app.js文件是启动文件。里面用javascript写了服务器的启动脚本。

package.json是工程信息文件。里面记载了工程的基本信息和依赖表（工程中使用的包和模块）

本例关键代码解释(本地可调式版)

//app.js

//Module dependencies.外部依赖从此处引入工程。
var express = require('express')
, routes = require('./routes/index')
, user = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();

// all environments.服务器环境的建立脚本，就像是开机。
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//routes 路由设计，语句的意思就是如果收到‘/’的get请求就执行routes.home函数。
app.get('/', routes.home);
app.get('/research', routes.research);
app.get('/publication', routes.publication);
app.get('/service', routes.service);
app.get('/students', routes.students);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

//  /routes/index.js

//请求的具体响应。当app.js触发了routes.home时，就会响应地执行res.render函数，调度home.ejs文件在模版引擎ejs处理后发送html文件到客户端。
exports.home = function(req, res){
res.render('home', { title: 'Express' });
};

exports.research =function(req,res){
res.render('research',{
})
};

exports.publication =function(req,res){
res.render('publication',{
})
};
exports.service =function(req,res){
res.render('service',{
})
};

exports.students =function(req,res){
res.render('students',{
})
};

<!-- /views/head.ejs 网页的头部 -->
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yuan Liu @ SCUT</title>
<link href="./stylesheets/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<header>
<p>
<h1><span id="header_name">Yuan Liu (刘元)</span></h1></p>
</header>
<nav>
<ul id="navbar">
<li><a href="/" alt="home">Home</a></li>
<li><a href="/research" alt="research">Research</a></li>
<li><a href="/publication" alt="publication">Publication</a></li>
<li><a href="/service" alt="service">Service</a></li>
<li><a href="/students" alt="students">Students</a></li>
</ul>
</nav>

<!-- /views/foot.ejs 网页的尾部-->
<footer>
<p>
Copyright © 2016 Yuan Liu. All rights reserved.
</p>
</footer>
</div>
</body>
</html>

<!-- /views/home.ejs 网站首页的主体部分 -->
<%include head.ejs%>
<div id="content">
<section id="descrip">
<div id="s1_photo">
<img src="./images/myphoto.jpg" alt="myphoto"/>
</div>
<div id="s1_txt">
<h1><span class="title">About me</span></h1>
<br>
<p class="para">
I received PhD degree in the Department of Electronic and Engineering in Shanghai Jiao Tong
University, 2013. From Fall 2013, I join in the School of Electronic and Information
Engineering in South China University of Technology as an Assistant Professor. I
am broadly interested in wireless communications, including theoretical analysis, signal
processing and optimization.
</p>
<br>
<h1><span class="title">Contact me</span></h1>
<br/>
<p class="para">
School of Electronic and Information Engineering<br>
South China University of Technology<br>
Shaw Science Building 316, Wushan Road 381, Guangzhou 510641, China<br>
E-mail: eeyliu@scut.edu.cn, eeyuanliu@ieee.org<br>
</p>
</div>
</section>

</div>
<div id="content2">
<section id="updated">

<div id="news">
<h1><span class="title2">
News
</span></h1>
<br>
<p class="para2" id="news_txt">
<ul hidden>
<li>NEW1</li>
<li>NEW2</li>
<li>NEW3</li>
</ul>
</p>
<br>
</div>
<div id="awards">
<h1><span class="title2">Awards
</span></h1>
<br>
<ul>
<li>IEEE Student Travel Grant for IEEE ICC (2012)</li>
<li>Exemplary Reviewer of IEEE Communications Letters (2010)</li>
<li>Guangdong Province Excellent Master Theses Award (2010)</li>
</ul>
</div>
</section>
</div>
<div id="content3">
<div id="visitors">
<h1><span class="title">
Visitors
</span></h1>
<br>
<p class="para" id="visitors_txt">
<ul>
<li>Dr. Jie Xu at Singapore University of Technology and Design, talk on "Green Cellular Networks with
Energy and Communication Cooperation", Oct. 27, 2015.
</li>
<li>Dr. Yong Zeng at National University of Singapore, talk on "Millimeter Wave MIMO with Lens Antenna
Array", Oct. 27, 2015.
</li>
<li>Prof. Kaibin Huang at University of Hong Kong, talk on "Cutting the last wireless for mobile
communications by microwave power transfer", Sep. 28, 2015.
</li>
<li>Prof. Jia Liu at Ohio State University, talk on "Fast-converging distributed optimization for
networked systems: A second-order approach", May 6, 2015.
</li>
<li>Prof. Ming Li at University of Nevada, talk on "Transmission auction: A novel auction paradigm for
untrustworthy dynamic secondary spectrum markets", May 5, 2015.
</li>
<li>Prof. Lingyang Song at Peking University, talk on "Full-duplex wireless communications and
networks", Jan. 18, 2015.
</li>
<li>Prof. Kaibin Huang at University of Hong Kong, talk on "Communications using ubiquitous antennas",
Dec. 30, 2014.
</li>
<li>Prof. Feifei Gao at Tsinghua University, talk on " Sensing and recognition when primary user has
multiple transmit powers", Dec. 29, 2014.
</li>
<li>Prof. Lingjie Duan at Singapore University of Technology and Design, talk on "Green and cooperative
design for future wireless networks", Dec. 19, 2014.
</li>
<li>Prof. Li Chen at Sun Yat-sen University, talk on "Iterative soft decoding of Reed-Solomon
convolutional concatenated codes", Dec. 12, 2014.
</li>
<li>Dr. Shahriar E. Tajbakhsh at University of New South Wales, talk on "Challenges and solutions of
future heterogeneous networks", Nov. 27, 2014.
</li>
<li>Prof. Rui Wang at Tongji University， talk on "MIMO multiway relaying: A degrees of freedom
perspective", Oct. 17, 2014.
</li>

</ul>
</p>
<br>
</div>
</div>
<%include foot.ejs%>

// /public/stylesheets/style.css 整个站点的统一样式表
@font-face {
font-family: Oswald-Bold;
src: url('../stylesheets/Oswald-Bold.otf');
}

@font-face {
font-family: Oswald;
src: url('../stylesheets/Oswald-Light.ttf')
}

* {
margin: 0px;
padding: 0px;
color: rgba(43, 81, 179, 1);
}

span.title {
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 2vw;
}
span.subtitle {
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 1.5vw;
}

span.title2 {
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 2vw;
color: #ffffff;
}

p.para {
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-size: 1vw;
}

p.para2 {
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-size: 1vw;
color: #ffffff;
}

body {
display: block;
width: 70%;
margin: 0 auto;
padding: 0;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background: transparent url(../images/x.jpg) top left fixed repeat-x;
background-size: 100% 100%;
}

#container {
background-color: transparent;
padding: 0;
margin: 0 auto;

}

header {
background: rgba(255, 255, 255, 0.9);
margin: 0 auto;
padding: 2em;
height: 5vw;
}

header #header_name {
font-family: 'Times New Roman', Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 6vw;
}

nav ul {
width: 100%;
height: 50px;
background: rgba(43, 81, 179, 0.9);
margin: 0 auto;
padding: 0px;
overflow: hidden;
}

nav ul li {
display: inline;
height: 4px;
margin: 0;
padding: 24px 0px;
border-right: 2px solid rgba(0, 81, 179, 0.9);
border-left: 2px solid rgba(0, 81, 179, 0.9);
transition: background-color 0.7s;

}

nav ul li a {
display: inline-block;
padding: 0 20px;
height: 50px;
line-height: 60px;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
}

nav ul li:hover {
background: rgba(255, 255, 255, 0.6);
}

nav a :link {
color: #086BAF;
}

nav a :visited {
color: #086BAF;
}

#content {
background-color: rgba(255, 255, 255, 0.95);
padding: 30px 20px;
overflow: auto;
}
#content ul{
padding:1px 100px 1px 20px;
font-size:1vw;
}
#content2 {
background-color: rgba(43, 81, 179, 0.9);
padding: 30px 20px;
}

#content3 {
background-color: rgba(255, 255, 255, 0.95);
padding: 30px 20px;
overflow: auto;
}

#descrip img {
width: 90%;
height: auto;
}

section #s1_photo {
width: 55%;
float: left;

}

section #s1_txt {
width: 40%;
float: left;
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 1vw;

}

#descrip {
height: 26vw;
}

#news {
padding: 0 1vw;
}

#news li {
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-size: 1vw;
color: #ffffff;
}

#awards {
padding: 0 1vw;
}

#awards li {
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-size: 1vw;
color: #ffffff;
}

#updated {
clear: both;
}

#visitors {
padding: 0 1vw;
}

#visitors li {
font-family:Helvetica, Helvetica, Arial, sans-serif;
font-size: 1vw;
}

footer {
background-color: rgba(43, 81, 179, 0.9);
padding: 1vw 1vw;
text-align: center;
border-radius: 0px 0px 20px 20px;
color: #ffffff;
}

footer p {
color: #ffffff;
}

.students_p{
width:18%;
overflow: hidden;
float: left;
}
.students_p img{
width:90%;
border: 5px solid #ddd;
padding: 0px;
background: #fff;
}
.students_t{
width:24%;
overflow: hidden;
float: left;
text-align:left;
position: relative;
top: 40%;
transform: translateY(40%);
font-size:1vw;
padding:2% 2%;
}
.student_info{
display: block;
float:left;
clear:both;
}

上传前的准备

修改app.js：端口号更改为18080

app.set('port', process.env.PORT || 18080);

删除node_modules文件夹。

修改package.json文件，将启动文件改成server.js

"start": "node server.js"

修改app.js重命名为

server.js

。

BAE的使用

百度开放云登录,注册帐号并登录。

在右上角导航栏点击你的用户名-安全认证-实名认证-个人。

产品服务-应用引擎BAE-添加部署-类型选择NODE.JS 0.10.21-web，代码管理工具选择svn，其他按需分配。

等待引擎开启好后，复制svn地址。

在任一文件夹下右击鼠标，点击SVN checkout。URL of repository栏目下粘贴svn地址，确定。弹出帐号密码窗口填写你的百度帐号密码。成功checkout。

复制上线版本到新生成的文件夹，覆盖。在这个新的工程下右击鼠标，SVN commit。等待commit完成。

打开BAE网页，发现你的部署显示有新版，点击预览。等待服务器启动。成功启动后，点击部署的链接，就可以看到你的网页已经呈现在网上了。

工程下载

本地工程分享请点击： GITHUB HOME_LOCAL

上线工程分享请点击： GITHUB HOME_BAE

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： node.js bae express html css

相关文章推荐

新的分享

章节导航

NODE.JS+EXPRESS.JS+百度BAE服务 构建学术个人主页