如何使用MongoDB、Express、AngularJS和NodeJS搭建待办任务管理系统的全栈应用？

本文共计407个文字，预计阅读时间需要2分钟。

NodeJS搭建Web服务器Express4搭建Restfull服务MongoDB作为数据库mongoose组件连接MongoDBAngularJSBootstrapFoundationUI界面IntelliJ开发工具

NodeJS搭建Web服务器Express4搭建Restfull服务MongoDB作为数据库mongoose组件搭建Web服务器

Express4搭建Restfull服务

MongoDB作为数据库

mongoose组件连接MongoDB

AngularJSBootstrapFoundationUI界面

IntelliJ开发工具

1、准备工作

安装好NodejsNPMMongoDBExpress

2、项目搭建

Step 1选择一个可以在里面创建项目的文件夹在文件夹上利用Git Bash打开命令窗口输入

express MyTodo

此时项目文件夹以及其中的基本文件已经创建再输入

cd MyTodo 项目相关的依赖包已经安装。

利用Git Bash输入npm start即会出现

在浏览器中输入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的$localhost:3000/todos

即可看到[ ]

--------------------------------------------------------------------------------------------------------------

step 6继续在routes/todos.js中加入其它数据库操作方法

可以使用Google插件postman进行测试至此后端搭建已经完成。

--------------------------------------------------------------------------------------------------------------

step 7搭建前端

将routes/index.js中的title值改为myTodo App

在views/index.html中添加如下代码

在浏览器中即可看到如下视图

如果需要换端口可以采用如下方式

PORT4000 nodemon

OK基本项目建设完毕接下来将进行框架的文件整理后面将继续更新~~~~