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项目搭建与配置
  • 如何使用gitlab创建NodeJS Express项目
  • nodejs+npm+bower+git+bootstrap组件环境配置
  • eclipse搭建SpringMvc web项目
  • Maven+Spirng+Mybatis+ORACLE后台项目搭建
  • 玩转服务器之web服务搭建nginx+node.js环境建设
  • 热门搜索
    走进名著手抄报 民族风俗手抄报 手抄报装饰 关于青春的手抄报 手抄报图片素材 关于清明的手抄报内容 获奖手抄报 手抄报的版面设计图 关于病毒的手抄报简单又漂亮 生态文明手抄报