如何一步步将已完成的vue-cli的项目,添加node中间件

ゞ浴缸里的玫瑰 2022-02-14 09:37 151阅读 0赞

Node 服务做中间件

优点:

前后端解耦  
可在node内自行组织想要的数据结构  
解决跨域问题  
后台可用其他语言去写只返回原始数据, 在node层利用js可以很方便的组装数据,在页面不用去写处理数据的操作, 直接渲染即可.  
实现微服务, 可以做一些公用的服务供该服务调用  
即使node服务出现异常或者挂了,对其他服务业务没有任何影响.

我们是将已经用vue-cli写好的一个项目添加node中间件

第一步

首先要搭一个node服务

基于 express 来快速构建node服务

npm install express 安装express

express myapp 新建一个项目 myapp

cd myapp 进入 新建的项目

npm install 安装新新建项目依赖

npm start 启动项目

浏览器打开 http://localhost:3000

看到如图字样说明你的node 服务已经搭建成功;

第二步

我们一起来看下目录结构

bin 配置文件  打开可以看到 配置的端口号

var port = normalizePort(process.env.PORT || '3000');

app.set('port', port);

node\_modules 文件夹里主要放一些 项目的依赖包npm install 安装的东西都会在该文件夹内

public 文件夹 只要是放置一些静态资源 待会会用到

routes 文件夹 里面放的是请求路由以及接口

views 当然放的是页面了

app.js 项目启动文件

下面两个 package 文件主要方式的是项目依赖表 每npm install 安装一个依赖 就回对应生成一条记录 依赖包的名字加上 包的版本号;

第三步

修改一些东西

打开views 文件夹看到 都是jade 模版文件

我们肯定希望看到的是html 文件

新建一个 index.html 文件 里面随便添加点字表示该文件

然后打开app.js 文件

修改 jade 为html

打开routes 下面的index 文件夹

将原有的代码注释加上新代码即可;

然后在命令行 ctry+c  y 结束项目 npm start 重新打开项目

刷新浏览器

说明html已经改好

第四步

npm install request 安装request

在index.js 头部引入request

const request = require('request');

然后新添加一个接口

router.get('/getuser', function(req, res) \{

let data = \{

'userName': '王思聪'

\}

res.json(data);

\});

然后重启项目

浏览器打开http://localhost:3000/getuser 发送请求

然后修改之前做的项目的一个接口 将请求头修改 http://localhost:3000

会发现报错 类似如下

该报错的意思是设计到了跨域问题

这里 npm install cors 安装

打开 app.js

添加如上代码 然后重启项目 打开前端项目 发现请求成功了;

第五步

将请求转发到真实要请求的地址

利用request请求,然后 res.json(data) 返回数据到页面;

如果之前的请求有url拼接参数 可修改如下,req.url就是原来请求的url

router.get('/user/getUserInfo', function (req, res, next) \{

let url = root + req.url;

request(\{

method: 'GET',

url: url,

headers: req.headers

\}, function (error, response, body) \{

if (!error && response.statusCode == 200) \{

console.log(response.body);

let data = JSON.parse(response.body);

res.json(data);

\}

\});

\});

这样请求转发就实现了

然后将之前打包好的项目放到 这个node服务下;

将打包好的 dist 文件下的 index.html 放到 views 下;

将static文件夹放到 public静态文件夹下 这一步非常重要;

然后重启项目就好的

转载：https://blog.csdn.net/weixin\_42674359/article/details/82887032

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 Git ｜将已有的项目添加到github

　　把本地已经存在的项目，推送到github服务端，实现共享。　　先从github创建一个空的仓库，并复制链接地址　　创建仓库　　![156b2cb3968cf19

女爷i/ 2023年09月24日 09:13/ 0 赞/ 178 阅读

相关 node - koa中间件

koa中的中间件分析：输出的顺序模拟了koa的洋葱模型，借着输出结果，分析下输出下边结果的原因：使用async和await，说明中间件参数函数是异步函数，因为里边的

﹏ヽ暗。殇╰゛Y/ 2023年07月04日 11:05/ 0 赞/ 133 阅读

相关如何阅读大型中间件项目的源码

这是个非常好的问题。从这个问题我们可以感受到，题主强烈的学习愿望，以及想快速提高技能水平的决心。但是反过来，我们需要思考一个问题，为什么我们要阅读大型项目源码？我们的目的

柔情只为你懂/ 2023年01月09日 01:11/ 0 赞/ 154 阅读

相关面试官：说说对中间件概念的理解，如何封装 node 中间件？

![a03abd0d37fbf28cebfc27ad737fc55f.png][] 一、是什么中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它

╰+攻爆jí腚メ/ 2022年10月07日 04:41/ 0 赞/ 180 阅读

相关教你如何一步步将项目部署到Github

原文转载至：http://www.cnblogs.com/fengxiongZz/p/6477456.html 经本人小白跟着教程做了一遍，成功将测

偏执的太偏执、/ 2022年06月12日 14:27/ 0 赞/ 288 阅读

相关 Node.js 中间件 Node.js connect

Node.js connect 详细介绍 connect 是 Node.js 的中间件，捆绑了超过 18 个中间件，同时还提供丰富的第三方中间件。示例代码： v

àì夳堔傛蜴生んèń/ 2022年05月17日 08:30/ 0 赞/ 197 阅读

相关 node作为中间件

1、会使用中间层作为数据的中转站（解决跨域）好处：1，没有跨域 2、可以对接收的数据进行二次处理。（过滤）小程序，公众号，工作项目 ajax 1

怼烎@/ 2022年03月25日 17:00/ 0 赞/ 217 阅读

相关如何一步步将已完成的vue-cli的项目,添加node中间件

Node 服务做中间件优点: 前后端解耦可在node内自行组织想要的数据结构解决跨域问题后台可用其他语言去写只返回原始数据, 在node层利用js可以很

ゞ浴缸里的玫瑰/ 2022年02月14日 09:37/ 0 赞/ 152 阅读

相关如何为已有的项目添加Maven

最近导入一个新的项目，却没有Maven的支持，导致很多事情都没法完成，所以在这里简单的描述一下，如何为已有的项目添加Maven支持： 1.鼠标右键单击项目，选择Configu

不念不忘少年蓝@/ 2022年01月27日 16:51/ 1 赞/ 2474 阅读

相关【zend studio】如何添加已存在的git项目

1、在zend里面新增项目crm2 2、win下进入crm2目录，右键选择 Git Bash Here，进项git clone操作 3、进入下载下来的GIT项目目录，选择复

柔光的暖阳◎/ 2021年09月30日 13:32/ 0 赞/ 295 阅读