Express4搭建Restfull服务
MongoDB作为数据库
mongoose组件连接MongoDB
AngularJSBootstrapFoundationUI界面
IntelliJ开发工具
1、准备工作
安装好NodejsNPMMongoDBExpress
2、项目搭建
Step 1选择一个可以在里面创建项目的文件夹在文件夹上利用Git Bash打开命令窗口输入
express MyTodo
此时项目文件夹以及其中的基本文件已经创建再输入
cd MyTodo 项目相关的依赖包已经安装。
利用Git Bash输入npm start即会出现
在浏览器中输入http://localhost:3000/
就会出现Welcome to Express
--------------------------------------------------------------------------------------------------------------
step 2如果不习惯使用ejs可以将ejs换为html方法如下
找到app.js将其中的
app.set(view engine, jade);
换为
app.engine(.html, require(ejs).renderFile);app.set(view engine, html); 然后将views文件夹下的ejs文件改为html文件。
再次输入npm start在浏览器查看。
因为每次修改文件都要重新启动web 服务可以采用 nodemon 让它帮我们自动更新输入
npm install nodemon -g
然后输入nodemon即可不再需要每次改动都npm start了。
--------------------------------------------------------------------------------------------------------------
step 3安装MongoDB驱动mongoose输入
npm install mongoose --save
然后将mongoose加入到MyTodo/app.js中
[nodemon] 1.11.0 [nodemon] to restart at any time, enter rs [nodemon] watching: *.* [nodemon] starting node ./bin/www connection succesful
--------------------------------------------------------------------------------------------------------------
step 4创建models文件夹在其中新建Todo.js
mkdir models
touch models/Todo.js
在Todo.js中写入
step 5利用AngularJS的$http或者$resource与RESTful APIs进行交互
在routes文件夹下新建todos.js
在app.js中加入todos路由
var todos require(./routes/todos);
app.use(/todos, todos);
在todos.js中写入
var express require(express);var router express.Router();var mongoose require(mongoose);var Todo require(../models/Todo.js);/* GET todos listing. */router.get(/, function (req, res, next) {Todo.find(function (err, todos) {if (err) return next(err); res.json(todos); });});module.exports router; 然后在浏览器中查看http://localhost:3000/todos
即可看到[ ]
--------------------------------------------------------------------------------------------------------------
step 6继续在routes/todos.js中加入其它数据库操作方法
--------------------------------------------------------------------------------------------------------------
step 7搭建前端
将routes/index.js中的title值改为myTodo App
在views/index.html中添加如下代码
在浏览器中即可看到如下视图
如果需要换端口可以采用如下方式
PORT4000 nodemon
OK基本项目建设完毕接下来将进行框架的文件整理后面将继续更新~~~~