不完全node实践教程-第一发

最新推荐文章于 2024-04-24 09:27:42 发布

liadbiz

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量3k

点赞数 2

分类专栏： nodejs 文章标签： node html css express mongodb

本文链接：https://blog.csdn.net/u013013021/article/details/51226875

版权

nodejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

是的我要开始写博客了。将来这个博客搭起来已经这么久了，但是一直没开始写东西，也是对不起我花钱买的域名啊= =。所以，虽然我现在还是很菜，但是呢，技术在于分享，我还是可以分享一些我踩过的坑给正在踩那些坑的人。

假设

这篇文章是写给和我一样没有计算机背景的童鞋看的~大神请自动略过.如果发现有什么错误的地方, 请联系我, 妹子就不要联系我了.我是专一的男人.
然后,这个系列一共有七篇, 恰好是一周的时间. 所有代码都能在我的github找到, 第一天的代码在day01分支, 第二天的代码在day02, 以此类推.
- 假设你知道有html, css, js的基本知识.
- 假设你知道怎么知道怎么使用搜索引擎
- 假设你知道linux的基本使用,如果是ubunutu就更好了.
- 假设你有耐心看完这篇博客…

怎么做

我们要用node, express, ejs, mongodb.搭建一个多人博客. 如果你从来没听过这些东西, 或者知道这些东西但是不知道怎么把他们凑在一起, 那么亲爱的非常好! 你很适合看这篇文章.
首先简单解释一下这几个东西.

node 服务器端的javascript环境.
express nodejs 环境下的web开发框架
ejs 配合express使用的前端模板.
mongodb 非关系性数据库.

为什么要用这些东西呢? 我们可以想象一下这些东西凑在一起工作的过程, 就很清楚了.假设你某天下午没事干. 你掏出手机拨了1001011想查一下话费.
你说: 请问我的话费和流量还剩多少啊.
然后某个萌萌大的接线员说: 先生, 您的消费信息已经发送到你的手机上了.

你给1001011打电话就相当于你访问某个网站, 你要查话费呢就相当于你点了某个链接, 接线员(express)收到你的需求, 从电脑(mongodb)查了你的信息然后组织成信息(ejs模板)发给你. 情况就是这么个情况. 下面我们就开始动手了.

最后实现的版本是这个样子滴.
main-page
blog-info
comment
post-blog

搞定环境

本机环境:

node: v5.6.0
express: v4.13.1
mongodb: v3.2.3

你可以在网上找到安装方法.
比如: mongodb
express
在这之前你可能要安装npm. node package manager. 看名字就知道是node依赖包管理器. 后面会讲到用法.

开始干活

假设到目前位置你都没什么问题, 如果有问题请google解决之.

找一个合适的目录, 运行以下命令:

$ express -e share
$ cd share && npm install

然后会出现:
blog-init

根据提示敲下:

$ cd share && npm install
$ DEBUG=share:* npm start

然后打开浏览器:
express-init

发生了什么?

我们先来看一下项目的目录
blog-dir

bin 可执行文件. 可以通过在项目目录里运行./bin/www 来启动项目.
node_modules 项目的依赖包. 可以通过npm install一步全部下载. 不带参数时检查该目录的package.json文件, 并下载到node_modules 文件夹. 如果带参数就是下载对应的包
routes 路由文件
views 模板文件
app.js 主入口文件, 记载中间件.

瞅一瞅入门文件app.js

var routes = require('./routes/index');
var users = require('./routes/users');
//do other thing
app.use('/', routes);
app.use('/users', users);

当你访问localhost的时候, 相当于访问根目录, express就捕捉这个请求, 把它就给index.js处理
然后indexjs里面是这样滴

router.get('/', function(req, res, next) {
  res.render('index', { title: 'express' });
});

rrender这个词有点微妙, 我们可以理解为丢. (自行想象联通客服每天接了很多电话的不耐烦的小眼神). 这一句的意思就是把index.ejs返回给你, 而且注意到还返回了一个数据是title=express.
然后, indes.ejs是这样滴:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

这样看来就很清楚了. index.js传来的title替换了字符串(暂时叫做字符串,讲道理应该又逼格更高的名字的.)里面的<%= title %>.接下来,我们要做的是就是著名的hello world! 于是indes.js 和index.ejs就变成了下面的样子.

router.get('/', function(req, res, next) {
  res.render('index', { title: 'world' });
});
```html
<!DOCTYPE html>
<html>
  <head>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
      <p>hello <%= title %>!</p>
  </body>
</html>

然后我们保存之后运行app, 打开浏览器访问localhost.如果没错的话应该是下面的样子
hello-world

总结

经过大约一个小时的折腾.我们完成了hello world.这可能不是那么激动人心, 但是对于跟我一样还很菜的同学来说还是一个小小的惊喜….
回顾一下流程:

客户端请求, express捕捉请求, 交给对应的路由处理.
进行逻辑处理, 就爱那个组装成一定的格式渲染模板返回

情况就是这么个情况. 今天的代码在这里day01

(今天的逼就装到这里.)

liadbiz

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
不完全node实践教程-第一发

是的我要开始写博客了。将来这个博客搭起来已经这么久了，但是一直没开始写东西，也是对不起我花钱买的域名啊= =。所以，虽然我现在还是很菜，但是呢，技术在于分享，我还是可以分享一些我踩过的坑给正在踩那些坑的人。假设这篇文章是写给和我一样没有计算机背景的童鞋看的~大神请自动略过.如果发现有什么错误的地方, 请联系我, 妹子就不要联系我了.我是专一的男人.假设你知道有html, css, js的基本知
复制链接

扫一扫