手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Node+Express+Mongodb+Angular项目搭建与配置

时间:2024-10-13 07:12:08

Node+Express+Mongodb+Angular项目搭建与配置

工具/原料

后端:node、Mongodb、express

前端:angularjs

环境

1、确认已经安装Node、Mongodb、Express然后开始我们的项目MyBlog搭建与配置(express的版本查看为大写的V)

Node+Express+Mongodb+Angular项目搭建与配置

Express创建项目MyBlog并运行

1、命令行输入:express MyBlog 回车

Node+Express+Mongodb+Angular项目搭建与配置

2、修改package.json1:笔者没用过jade模板,暂时改为使用ejs(如果有用过的小伙伴可以不用改,后面项目基于ejs模板)2:添加mongoose

Node+Express+Mongodb+Angular项目搭建与配置

3、命令行输入:cd MyBlog && npm install

Node+Express+Mongodb+Angular项目搭建与配置

4、整理项目结构(也可以根据个人习惯整理)

Node+Express+Mongodb+Angular项目搭建与配置

5、修改app.js1:数据库2:服务端口3:页面、路由4:启动服务监听

Node+Express+Mongodb+Angular项目搭建与配置
Node+Express+Mongodb+Angular项目搭建与配置

引入Angular

1、引入angular文件

Node+Express+Mongodb+Angular项目搭建与配置

2、配置路由及Controllers

Node+Express+Mongodb+Angular项目搭建与配置
Node+Express+Mongodb+Angular项目搭建与配置

3、ng-app入口

Node+Express+Mongodb+Angular项目搭建与配置

成功启动

1、项目目录下命令行输入:node app.js出现listening on port [8080] in [development] modeMongoose conected to [mongodb://127.0.0.1/Blog]代表启动成功(别忘了启动Mongodb)

Node+Express+Mongodb+Angular项目搭建与配置

2、浏览器地址栏输入:http://localhost:8080/index

Node+Express+Mongodb+Angular项目搭建与配置

3、F12可以看到angular的controller有访问到,访问成功!!!

Node+Express+Mongodb+Angular项目搭建与配置
© 手抄报圈