Start Express Frameworks

来源：互联网发布：linux sed命令编辑：程序博客网时间：2024/06/16 19:35

说起来我也觉得很羞愧，一把年纪还写这种入门的文章，还是权当做个记录吧。前段时间都在写RTMP的东西（用NIO实现RTMP协议，在手机推流和收流），后面写完再补文章出来。前天同事问我要不要弄一个Kotlin China的社区，感觉应该会挺有趣的，所以这段时间会抽一半的时间来写WEB端的东西。项目地址在：

https://github.com/Kotlin-lang-CN/Kotlin-CN

https://github.com/Kotlin-lang-CN/Kotlin-CN/tree/dev/web

之前写手机网页是用ASP.NET MVC（C# HTML JS CSS），没用过其他的框架，一开始是徒手写静态网站的，写完一个之后发现头部和尾部都是复用的，粘贴HTML好笨拙。

下面是STEP BY STEP：
（建议：不要用任何IDE，直接找官网express ）

1，安装：

npm install express –save

2，快速生成

npm install express-generator -g –hbs

3，构建输出

npm install && DEBUG=kotlin-cn-app-web:* npm start

然后访问本地3000端口，就可以用了。
遇到几个问题：
1，怎么插入复用头部和尾部的东西
进入到根目录下，找到

app.js

var hbs = require('hbs');hbs.registerPartials(__dirname + '/views/partials');

layout.hbs

<!DOCTYPE html><html>  <head>    <title>{{title}}</title>    <link rel='stylesheet' href='/stylesheets/style.css' />  </head>  <body>    {{{body}}}    {{> footer }}  </body></html>

mkdir views/partials
vim views/partials/footer.hbs

<div id="foot">    FOOTER</div>

重新打开一下就有尾部，头部也是一样的道理。

npm install && DEBUG=kotlin-cn-app-web:* npm start

2，如何进行页面路由（或者说有多个页面怎么跳转）

vim app.js

app.set('views', [path.join(__dirname, 'views'),path.join(__dirname, 'views/layouts')]);var account = require('./routes/account');app.use('/account',account);

vim rountes/account.js

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

mkdir views/layouts
vim views/layouts/account.hbs

<p>HELLO ACCOUNT</p>

重新打开一下

npm install && DEBUG=kotlin-cn-app-web:* npm start

访问：

http://localhost:3000/account

3，如何解决本地服务器和远端服务器分离导致的跨域导致的本地无法调试

用nginx反向代理远端的服务器就可以了，设置如下（mac）：

sudo vim /usr/local/etc/nginx/nginx.conf

http{...server{        listen          9080;        server_name     localhost;        location /api {                proxy_pass http://182.92.83.183;                proxy_redirect off;                proxy_set_header X-Real-IP $remote_addr;                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        }        location / {                proxy_pass http://127.0.0.1:3000;                proxy_redirect off;                proxy_set_header X-Real-IP $remote_addr;                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        }}}

sudo nginx -s reload

上面的意思就是
1，把远端的”http://182.92.83.183:80/api“开头的东西代理到本地”http://localhost:9080/api”
2，把本地“http://127.0.0.1:3000“代理到“http://localhost:9080“

完

阅读全文

0 0