node.js--express学习之路(一)

主要是想记录自己学习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以上的,所以就不用去考虑了。

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

原文地址:https://www.cnblogs.com/chao202426/p/11969596.html