Fork me on GitHub 盒子
盒子
文章目录
  1. 开发前准备
  2. 非webstorm开发
    1. 创建一个express项目
    2. 对package.json进行编辑,主要是依赖dependencies
    3. 安装依赖,完成之后执行node app.js
    4. 浏览器打开localhost:3000即可发现一个简单express页面建立完成了
    5. 配置入口文件及express参数
  3. webstorm开发
    1. 直接new一个新Node.js Express App 项目,直接搞定上面全部流程
    2. 安装mongodb,安装完成后在bin文件夹路径下执行:
    3. 新开一个cmd进入bin文件夹后,执行:
    4. 新建一个属于自己的数据库,并写入数据
    5. 把mongo连接到node
    6. 往数据库中写入数据,可以通过ajax,然后render数据库的数据。
  4. Do It!

Nodejs+Express+Mongodb搭建简单的应用(2)

开发前准备

  • 安装node.js
  • 安装Express(用webstorm的小伙伴们可省略此步,直接创建nodejs项目即可)
  • 安装Mongodb
  • 安装Mongovue(数据库可视化工具,中文,习惯用命令行的可不用)

非webstorm开发

创建一个express项目

1
express --sessions newProject

对package.json进行编辑,主要是依赖dependencies

1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "newProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
`"dependencies": {
"express": "3.4.8",
"jade": "*"
}
}

安装依赖,完成之后执行node app.js

1
npm install

浏览器打开localhost:3000即可发现一个简单express页面建立完成了

配置入口文件及express参数

在app.js最后面加上下面代码,实例化Express并赋值给app变量

1
var app = express();

接着对express的参数进行配置,这里设置了端口,寻找views的目录,用什么模板引擎来处理这些views,和一些其它的东西。还要注意最后一行,它告诉Express把public/目录下的静态文件作为顶层目录的文件来托管。

1
2
3
4
5
6
7
8
9
10
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__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')));

接下来把最后一行替换,保证引的路径为pubilc

1
2
3
4
// 替换前
app.use(express.bodyParser());
// 替换后
app.use(express.urlencoded());

继续增加插件检查和过期提醒

1
2
3
4
5
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

创建一个http server并且启动它

webstorm开发

直接new一个新Node.js Express App 项目,直接搞定上面全部流程

安装mongodb,安装完成后在bin文件夹路径下执行:

1
mongod --dbpath D:\database

表示把数据保存在D盘database文件夹下

新开一个cmd进入bin文件夹后,执行:

1
mongo

这时候表示已经连接上了数据库,接下来就可以进行操作了。

新建一个属于自己的数据库,并写入数据

1
2
use myDataBase
db.myCollection.insert({ “username” : “XXX″, “email” : “XXX” })

db表示刚才创建的myDataBase的数据库,myCollection表示在里面创建了一张表,后面是插入的字段

把mongo连接到node

在app.js中插入以下代码

1
2
3
4
5
6
7
8
9
10
11
app.get('/myDataBase', routes.myDataBase(db)); // 当用户访问myDataBase时,把db传递到路由
router.myDataBase= function(db) { // 创建对应的myDataBase路由
return function(req, res) {
var collection = db.get('myCollection');
collection.find({},{},function(e,docs){
res.render('myPage', {
"data" : docs
});
});
};
};

创建对应的模板,我这里采用的是jade,即myPage.jade(由于不习惯,后期我切换为artTemplate了)

1
2
3
4
5
6
7
8
9
10
11
12
doctype html
html
head
title= "McChen"
link(rel='icon', href='http://www.jd.com/favicon.ico')
link(rel='stylesheet', href='http://static.360buyimg.com/finance/mobile/base/cm/1.0.0/reset.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src="/javascripts/test.js")
body
h1 McChen
p.name.title Learning Node
p.name: #{data[0].username}

保存文件,重启node服务器,你会发现data[0]=XXX,已经从数据库中成功取出来了

往数据库中写入数据,可以通过ajax,然后render数据库的数据。

Do It!

OK,Do it now~ 让我们做一个简单的登录页面吧


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen