vue配合axios连接express搭建的node服务器接口_简单案例

简介: 文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。

首先,我们先搭建node服务器

我们需要使用express这个node搭建服务的框架,当然也可以使用其他的
下载全局express和express-generator这两个模块依赖包

npm i -g  express  express-generator

在文件夹在我们创建自己的express文件夹,并打开cmd
执行命令

express --view=ejs mynodeExpress

mynodeExpress 是我们的node项目文件名
在这里插入图片描述
按照提示进入mynodeExpress文件夹下载依赖包 npm i
文件目录为
在这里插入图片描述
bin下面的www是我们的执行node服务入口文件
node|_modules是依赖包 比如fs板块 cookice-parser body-parser模块包
public是存放静态文件的 还可以存放我们前端打包好的文件 利用宝塔面板 pm2 直接就可以运行项目
routes是路由文件夹
views存放页面
app.js 入口文件
package.json 依赖目录
在这里插入图片描述
运行项目 npm start 会执行bin文件夹下的www文件 里面是服务的配置
在这里插入图片描述
我们可以看到创建了一个http服务,他的端口号默认是3000,如果process.env.PORT有值的话就是它的值,端口号就是它了。
运行服务,我们打开

localhost:3000

在这里插入图片描述
是一个初始页面,我们可以看一下app.js文件,因为这个文件里面我们找到我们的路由来自哪里
在这里插入图片描述
显而易见是routes下面的index文件,我们再查看一下它
在这里插入图片描述

在这里它引入了路由模块,添加了一个get方式的路由 ‘/’,我们刚刚匹配的页面就是来自这个路由

localhost:3000/

下面我们在自己写一个试试:

router.get('/zjq', (req, res) => {
   
  console.log(req.query, 'req')
  res.send({
   
    nameList: [
      {
    name: 'zjq', age: "23" },
      {
    name: 'zrb', age: "22" },
      {
    name: 'zry', age: "18" },
      {
    name: 'fyy', age: "24" }]
  });
})

让它返回一个数组,我们在页面看一下有没有返回:
在这里插入图片描述
nice,成功了,我们的node服务器搭建成功,喝一袋可口的酸酸乳奖励自己一下,开心。
还有一个我们再看app.js中我们发现了这样几行代码:

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
app.use('/', indexRouter);
app.use('/users', usersRouter);

显而易见,3000端口号后面第一个为 ‘/'的自动匹配 ‘./routes/index’ 这个文件,
如果我们写’/users‘呢,我们测试一下
在./routes/users文件中我们再写两个路由

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function (req, res, next) {
   
  res.send('respond with a resource');
});
//新加的get请求
router.get('/zjq', (req, res) => {
   
  let {
    zjq, zrh } = req.query
  if (zjq == 'zjq' || zrh == 'zrh') {
   
    res.send({
    status: true })
  } else {
   
    res.send({
    status: false })
  }
})
//新加的post请求
router.post('/postDome', (req, res) => {
   
  let {
    id } = req.body
  console.log(id, 'id')
  let arr = [{
    id: 1, name: "zjqAndId=1" }, {
    id: 2, name: "zjqAndId=2" }, {
    id: 3, name: "zjqAndId=3" },]
  if (id) {
   
    let brr = arr.filter((item) => {
   
      return item.id == id
    })
    res.send({
   
      res: brr
    })
  } else {
   
    res.send({
    res: false })
  }
})
module.exports = router;

当然我们在浏览器url上只能测试get请求
在这里插入图片描述
我们没有传递参数,给我们返回了 { status: false }这个对象

在get请求中我们在node端接收参数使用req.query接受,在post中使用req.body接受 ,可以使用ES6的解构赋值来接受,书写也是很方便,太nice了。

下一步我们简单搭建一个vue项目,测试post请求。
当然肯定是可以的,不一定非要用搭建vue这种方式测试 我们可以用vscode xxx.http后缀为http的文件测试也是很方便的。我的目的是为了给大家展示一个坑。
npm create 我的项目名称

npm create my_project

流程很简单 我们选择自动安装路由的(选不选都可以,我这里习惯性的选上了),我这里忘了截图。

再下载一个我们vue全家桶中的axios

在这里插入图片描述

运行运行命令我们可以在package.json中的scripts自己配置

npm run serve


运行在了8080端口,这个时候会产生跨域的问题,因为同源策略的限制,我们必须在同协议域名端口号下才不算跨域。我们的解决方法是proxy代理
新建vue.config.js文件

module.exports = {
   
    lintOnSave: false,//取消严格模式
    devServer: {
   
        // 设置主机地址
        host: 'localhost',
        // 设置默认端口
        port: 8080,
        // 设置代理
        proxy: {
   
            '/api': {
   
                // 目标 API 地址
                target: 'http://127.0.0.1:3000/',
                // 如果要代理 websockets
                ws: false,
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                pathRewrite: {
   
                    // 路径重写
                    "/api": "" // 这个意思就是以api开头的,定向到哪里, 如果你的后边还有路径的话, 会自动拼接上
                }
            }
        }
    }
}

我们就在这个路由下,首先看我们的src下的router文件
在这里插入图片描述

匹配的是我们src下views/Home.vue文件
我们让它在挂载的时候请求,挂载的时候页面已经渲染完成。el、ref、data我们都可以获取到了
在这里插入图片描述
看到了打印
在这里插入图片描述
成功的将我们对应的node接口信息返回~

我说一个我遇到的坑,我在代理的时候我使用了

target:process.env.VUE_APP_URL

我在.env.development中配置的是:这是一个很低级的错误

NODE_ENV = development  
VUE_APP_URL='http://127.0.0.1:3000/'
NODE_ENV = development  
VUE_APP_URL=127.0.0.1:3000/

这里面的url不能加引号否则会按字符串处理,也不能不写协议
下面的才是对的

NODE_ENV = development  
VUE_APP_URL=http://127.0.0.1:3000/

好了,今天就分享到这了,加油。

目录
相关文章
|
20天前
|
存储 数据挖掘 Windows
服务器数据恢复—V7000存储raid5故障导致LUN无法访问的数据恢复案例
服务器数据恢复环境: 三台V7000存储,共有64块SAS硬盘(其中有三块热备盘,其中一块已启用)组建了数组raid5阵列。分配若干LUN,上层安装Windows server操作系统,数据分区格式化为NTFS文件系统。 服务器故障: V7000存储中有多块硬盘出现故障离线,阵列失效,LUN无法访问。需要恢复卷中所有数据(主要为dcm文件)。
|
19天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
21天前
|
Oracle 关系型数据库 数据挖掘
服务器数据恢复—服务器RAID5磁盘阵列数据恢复案例
服务器数据恢复环境: 一台服务器上有一组由5块硬盘(4块数据盘+1块热备盘)组建的raid5阵列。服务器安装Linux Redhat操作系统,运行一套基于oracle数据库的OA系统。 服务器故障: 这组raid5阵列中一块磁盘离线,但是热备盘并没有自动激活rebuild,当另外一块数据盘发生故障离线后,raid崩溃。 用户方要求恢复raid数据,同时要求还原操作系统。经过初步观察,raid中的这些硬盘没有表现出存在明显的物理故障的特征,也没有明显的同步表现,数据恢复的可能性很大。
|
14天前
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
1天前
|
存储 数据挖掘
服务器数据恢复—EqualLogic存储raid5阵列多块硬盘掉线的数据恢复案例
服务器存储数据恢复环境: 一台EqualLogic存储中有一组由16块SAS硬盘组建的RAID5阵列。上层划分了4个卷,采用VMFS文件系统,存放虚拟机文件。 服务器存储故障: 存储RAID5阵列中磁盘出现故障,有2块硬盘对应的指示灯亮黄灯,存储不可用,且存储设备已经过保。
|
5天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
23 1
|
9天前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
13天前
|
算法 数据挖掘 Linux
服务器数据恢复—EXT3文件系统下邮件数据恢复案例
服务器数据恢复环境: 邮件服务器中有一组由8块盘组成的RAID5阵列, 上层是Linux操作系统+EXT3文件系统。 服务器故障: 由于误删除导致文件系统中的邮件数据丢失。
|
18天前
|
运维 Oracle 关系型数据库
服务器数据恢复—浪潮服务器硬盘出现坏道的数据恢复案例
服务器数据恢复环境: 一台浪潮服务器中有一组由6块SAS硬盘组建的RAID。服务器上划分了1个卷,存放Oracle数据库文件。 服务器故障&检测: 服务器上有两个硬盘指示灯亮黄灯,RAID崩溃,服务器不可用。 将故障服务器中所有磁盘标记后取出。由硬件工程师检测故障服务器上的取出的6块硬盘是否存在硬件故障,经过检测发现变黄的指示灯所对应的2块硬盘存在坏道且SMART的错误冗余级别已经超过阈值。
|
19天前
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
19 2