正文

node.js利用express自动搭建项目的全过程

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0711

这篇文章主要给大家介绍了关于node.js利用express自动搭建项目的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、安装express库和生成器

打开cmd输入命令:  yarn global add express express-generator

解释：
上面里两个模块分别表示库和生成器，在express3时，安装express会自动的给你安装生成器express-generator ，但是在express4时，他们就被分开了，所以需要分别安装。

安装好后可以通过命令：express --version 检查是否安装成功。

出现版本号即为安装成功（如下图所示）。

node.js利用express自动搭建项目的全过程

二、express生成器自动创建express项目

输入命令：express nodejs（如下图所示即为成功）

node.js利用express自动搭建项目的全过程

成功之后的目录：

node.js利用express自动搭建项目的全过程

三、跳转到package.json目录下安装相关的包

输入命令： yarn 或者 cnpm i  或者 npm i

四、启动项目

输入命令：npm run start

打开浏览器，访问127.0.0.1:3000就能获取访问我们的项目了

五、项目目录解释

bin：存放可执行文件
public：存放js、css、img等文件
router：存放路由文件
views：存放视图文件或者说模版文件
app.js：启动文件（入口文件）
package.json：存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时，运行 npm install，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块
node_modules：存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下

参考链接：http://www.zzvips.com/article/209247.htm

六、在此项目中如何开发

首先在routes中新建一个test.js文件



    
	
  1. 
		var express = require('express');
    2. 
	
  2. 
		var router = express.Router();
    3. 
	
  3. 
		 
    4. 
	
  4. 
		router.get('/', function (req, res, next) {
    5. 
	
  5. 
		res.send('我是接口返回值');
    6. 
	
  6. 
		});
    7. 
	
  7. 
		 
    8. 
	
  8. 
		module.exports = router;
    9. 




	然后在app.js中加入下面代码




    
	
  1. 
		var testRouter = require('./routes/test');
    2. 
	
  2. 
		app.use('/test', testRouter);
    3. 




	node.js利用express自动搭建项目的全过程



	然后打开浏览器控制台用fetch请求我们刚才写的接口




    
	
  1. 
		fetch('http:localhost:3000/test')
    2. 
	
  2. 
		.then(res=>{
    3. 
	
  3. 
		return res.text()
    4. 
	
  4. 
		}).then(res=>{
    5. 
	
  5. 
		console.log(res)
    6. 
	
  6. 
		})
    7. 




	我们发现出现了跨域问题，这是因为我们在nodejs中没有添加跨域所导致的。



	node.js利用express自动搭建项目的全过程



	将下面的跨域的代码添加到app.js中




    
	
  1. 
		//设置跨域访问（设置在所有的请求前面即可）
    2. 
	
  2. 
		app.all("*", function (req, res, next) {
    3. 
	
  3. 
		//设置允许跨域的域名，*代表允许任意域名跨域
    4. 
	
  4. 
		res.header("Access-Control-Allow-Origin", "*");
    5. 
	
  5. 
		//允许的header类型
    6. 
	
  6. 
		res.header("Access-Control-Allow-Headers", "content-type");
    7. 
	
  7. 
		//跨域允许的请求方式
    8. 
	
  8. 
		res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    9. 
	
  9. 
		if (req.method == 'OPTIONS')
    10. 
	
  10. 
		res.sendStatus(200); //让options尝试请求快速结束
    11. 
	
  11. 
		else
    12. 
	
  12. 
		next();
    13. 
	
  13. 
		});
    14. 




	然后重启一下项目，这样就可以正常访问了



	node.js利用express自动搭建项目的全过程



	在项目中修改了内容就需要我们手动重启项目，有点麻烦，我们再安装一个插件即可解决这个烦恼。



	七、使用nodemon自动重启服务



	安装nodemon模块



	输入命令：npm i nodemon -S



	创建nodemon.json文件



	在项目的根目录下创建：nodemon.json文件




    
	
  1. 
		{
    2. 
	
  2. 
		"restartable": "rs",
    3. 
	
  3. 
		"ignore": [".git", ".svn", "node_modules/**/node_modules"],
    4. 
	
  4. 
		"verbose": true,
    5. 
	
  5. 
		"execMap": {
    6. 
	
  6. 
		"js": "node --harmony"
    7. 
	
  7. 
		},
    8. 
	
  8. 
		"watch": [],
    9. 
	
  9. 
		"env": {
    10. 
	
  10. 
		"NODE_ENV": "development"
    11. 
	
  11. 
		},
    12. 
	
  12. 
		"ext": "js json njk css js "
    13. 
	
  13. 
		}
    14. 




	使用nodemon模块



	在你的package.json文件中，添加一行脚本代码



	

		"dev": "nodemon ./bin/www"





	node.js利用express自动搭建项目的全过程



	代码已经放到我的github仓库，附上链接：https://github.com/wuguanfei/nodejs…



	总结



	到此这篇关于node.js利用express自动搭建项目的文章就介绍到这了,更多相关node.js express自动搭建项目内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！



	原文链接：https://juejin.cn/post/6948689967468003364