网站首页 > 开源技术 正文
一、安装express库和生成器
打开cmd输入命令: yarn global add express express-generator
解释: 上面里两个模块分别表示库和生成器,在express3时,安装express会自动的给你安装生成器express-generator ,但是在express4时,他们就被分开了,所以需要分别安装。
安装好后可以通过命令:express --version 检查是否安装成功。
出现版本号即为安装成功(如下图所示)。
二、express生成器自动创建express项目
输入命令:express nodejs(如下图所示即为成功)
成功之后的目录:
三、跳转到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 添加依赖的模块并安装后,存放在这个文件夹下
参考链接:www.cnblogs.com/shimily/art…
六、在此项目中如何开发
首先在routes中新建一个test.js文件
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.send('我是接口返回值');
});
module.exports = router;
复制代码
然后在app.js中加入下面代码
var testRouter = require('./routes/test');
app.use('/test', testRouter);
然后打开浏览器控制台用fetch请求我们刚才写的接口
fetch('http:localhost:3000/test')
.then(res=>{
return res.text()
}).then(res=>{
console.log(res)
})
复制代码
我们发现出现了跨域问题,这是因为我们在nodejs中没有添加跨域所导致的。
将下面的跨域的代码添加到app.js中
//设置跨域访问(设置在所有的请求前面即可)
app.all("*", function (req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method == 'OPTIONS')
res.sendStatus(200); //让options尝试请求快速结束
else
next();
});
复制代码
然后重启一下项目,这样就可以正常访问了
在项目中修改了内容就需要我们手动重启项目,有点麻烦,我们再安装一个插件即可解决这个烦恼。
七、使用nodemon自动重启服务
- 安装nodemon模块
输入命令:npm i nodemon -S
- 创建nodemon.json文件
在项目的根目录下创建:nodemon.json文件
{
"restartable": "rs",
"ignore": [".git", ".svn", "node_modules/**/node_modules"],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
"watch": [],
"env": {
"NODE_ENV": "development"
},
"ext": "js json njk css js "
}
复制代码
- 使用nodemon模块
在你的package.json文件中,添加一行脚本代码
"dev": "nodemon ./bin/www"
代码已经放到我的github仓库,附上链接:https://github.com/wuguanfei/nodejs
这几天刚写了一个vite2+vue3+TypeScript4+elementPlus做成的一个简易后台管理系统,后续功能还在开发中,欢迎XDM使用,提意见,附上链接:https://github.com/wuguanfei/vite2-vue3-TypeScript4
猜你喜欢
- 2024-10-22 调用 Express API时出现奇怪的CORS错误怎么办?
- 2024-10-22 详解如何从零开始搭建Express+Vue开发环境
- 2024-10-22 从零开始学习nodejs+express--交互环境
- 2024-10-22 express开发(一)简介与搭建(express创建项目)
- 2024-10-22 express中间件原理connect(express和koa中间件原理的区别)
- 2024-10-22 蓝易云 - centos系统直接部署express教程。
- 2024-10-22 Node + Express + Mysql: Todo List项目让你成全栈
- 2024-10-22 我为 Express 开了外挂(cad中的express怎么显示为中文)
- 2024-10-22 七爪源码:让我们 Dockerize 一个 Node.js Express 应用程序
- 2024-10-22 Node实战篇:Express--jade模板引擎(七)
你 发表评论:
欢迎- 03-19基于layui+springcloud的企业级微服务框架
- 03-19开箱即用的前端开发模板,扩展Layui原生UI样式,集成第三方组件
- 03-19SpringMVC +Spring +Mybatis + Layui通用后台管理系统OneManageV2.1
- 03-19SpringBoot+LayUI后台管理系统开发脚手架
- 03-19layui下拉菜单form.render局部刷新方法亲测有效
- 03-19Layui 遇到的坑(记录贴)(layui chm)
- 03-19基于ASP.NET MVC + Layui的通用后台开发框架
- 03-19LayUi自定义模块的定义与使用(layui自定义表格)
- 最近发表
-
- 基于layui+springcloud的企业级微服务框架
- 开箱即用的前端开发模板,扩展Layui原生UI样式,集成第三方组件
- SpringMVC +Spring +Mybatis + Layui通用后台管理系统OneManageV2.1
- SpringBoot+LayUI后台管理系统开发脚手架
- layui下拉菜单form.render局部刷新方法亲测有效
- Layui 遇到的坑(记录贴)(layui chm)
- 基于ASP.NET MVC + Layui的通用后台开发框架
- LayUi自定义模块的定义与使用(layui自定义表格)
- Layui 2.9.11正式发布(layui2.6)
- Layui 2.9.13正式发布(layui2.6)
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)