node.js--express学习之路

Posted 2020-11-26 超哥20

主要是想记录自己学习node.js Express框架的学习过程

学习目的：想要自己尝试做前后端

1、用vue-cli安装一个vue项目

vue create vue-node

2、安装Express

npm install express --save

看到w3school教程上面说到了：以上命令会将Express框架安装再当前目录的node_moduless目录中，mode_modules目录下会自动创建express目录。一下几个重要的模块是需要与express框架一起安装的：

①：body-prarser---node.js中间件，用于处理JSON，Rar，Text和URL编码的数据。

②：cookie-parser---这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。

③：multer---node.js中间件，用于处理enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。

3、安装上面说到的三个模块

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

4、在src目录中创建了modules文件，用来写后台代码，在modules文件中创建了app.js，内容：

var express = require("express");
var app = express();

//设置允许跨域访问该服务.
app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Methods", "*");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.get("/", function(req, res) {
    res.send("Hello World");
});

var server = app.listen(8089, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log("应用实例，访问地址为 http://%s:%s", host, port);
});

直接使用了案例的内容并且设置了可以跨域请求

5、运行app.js

npm src/modules/app.js

6、运行vue项目

npm run serve

7、然后就可以看到效果了

 

 第一步顺利完成，基本没什么卡壳的地方。

在看这个教程之中好像有看到要求node的版本是要7点几以上的，不过我的是10以上的，所以就不用去考虑了。

当然，这写顺利是建立在我本地本来就有运行环境的前提下。