vue前端+nodejs后端通信-简单demo

本文记录vue前端+nodejs后端通讯最简单的方法,供广大网友最快速进入全栈开发。
技术架构
前端 vue + axios
后端 nodejs + express

一、前端部分-搭建VUE 项目

vue create Vnode

npm run serve 启动;
具体操作步骤,请自行百度,这里没什么难度昂。

二、后端-node

1、 在vue项目,src同级目录下,创建app.js 文件

在这里插入图片描述

app.js

// 引入express模块
const express=require("express");// 引入bodyParser模块
const bodyParser=require("body-parser");// 创建web服务器
var server=express();
server.listen(3001);// 托管静态资源到public
server.use(express.static('public'));// 配置post请求第三方中间件
server.use(bodyParser.urlencoded({ extended:false })) //formData格式解析
server.use(bodyParser.json()) //json解析// 引入路由模块
const login=require("./src/router/login.routers");//用户登录
const user = require("./src/router/user.routers")
server.use('/login',login);//用户登录
server.use('/user',user);//用户信息server.listen(82, () => {console.log('服务器启动:'+'http://127.0.0.1')})

2、 在routers文件夹下新建login.routers.js,里面含有各路由信息

// 引入express模块
const express=require('express');
// 创建一个空的路由对象
const router=express.Router();
// 引入连接池模块
const pool=require('./pool');
//post请求是req.body,get请求是req.queryrouter.post('/',(req,res)=>{var name=req.body.name;// console.log(name);var pwd=req.body.pwd;// console.log(pwd);if(!name){res.send("您输入的用户名不存在");return;}if(!pwd){res.send("您输入的密码不存在");return;}pool.query('select * from user where  name=? and pwd=?',[name,pwd],(err,result)=>{if(err) throw err;console.log(result);console.log(result.length);if(result.length>0){res.send({status:1,rel:result,msg:'登录成功'});}else{res.send({status:0,msg:"用户名或密码不正确"});}})       })module.exports=router;

3、在routers文件夹下新建user.routers.js,获取用户信息

var express = require('express');
var router = express.Router();
router.get('/getInfo', function (req, res) {var user = {name: '李四',age: 30,sex: 'woman',};var response = { status: 1, data: user };res.send(JSON.stringify(response));
});module.exports = rouçter;

4、.同级目录下新建pool.js(文件名自定义)

//创建连接池
const mysql=require('mysql');
var pool=mysql.createPool({host:'127.0.0.1',port:'3306', // 数据库端口号user:'root', // 数据库用户名password:'root', // 数据库密码database:'mydatabase', // 数据库名称connectionLimit:20 // 最大连接活跃数
});
module.exports=pool;

5、 vue中使用接口

安装axios

npm install axios --save-dev  

main.js

//讲axios绑定到vue原型上
import axios from 'axios'
Vue.prototype.$axios = axios

App.vue文件(具体业务具体写,暂时放这里,测试数据通信)

created() {this.$axios.get('/api/users/getInfo').then((res) => {console.log(res, 'res-----');// });
},

请求地址后会出现跨域的问题可在前端或者node服务端处理

前端配置代理
在vue根目录下新建vue.config.js文件

module.exports = {devServer: {proxy: {'/api': {target: 'http://127.0.0.1:3001', //node.js服务器运行的地址ws: true,changeOrigin: true,pathRewrite: {'^/api': 'http://127.0.0.1:3001', //路径重写},},},},
};

在node服务端的app.js中设置域名可访问

// 采用设置所有均可访问的方法解决跨域问题
server.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.toLowerCase() === 'options') {res.send(200); // 让options尝试请求快速结束} else {next();}
});

到此vue中即可访问node写的接口了。
终端,启动服务:node app.js
终端,启动前端: npm run serve
如果过程报错,缺少什么依赖,依次安装即可;
遇到问题,一步步解决,别气馁。

源代码地址:github代码
初写node,一起学习!!

参考文章地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/251950.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS学习(三)数据可视化

ArcGIS学习(三)数据可视化 1.矢量数据可视化 需要提前说明的是,在ArcGIS中,所有的可视化选项设置都是在“图层属性”对话框里面的“符号系统”中实现的。 对于矢量数据的可视化,主要有四种可视化方式: 按“要素”可视化按“类别”可视化按“数量”可视化按“图表”可视…

25.云原生ArgoCD高级之app of apps模式

文章目录 app of apps 模式介绍app如何管理apphelm方式管理kustomize方式管理 app of apps 模式介绍 通过一个app来管理其他app,当有多个项目要发布创建多个app比较麻烦,此时可以创建一个管理app,管理app创建后会创建其他app。比较适合项目环…

Linux--- vim详解

📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 “学如逆水行舟&#xff0…

EF Core 的基本使用及常见的坑

EF Core 的基本使用及常见的坑 1. EF Core 是什么 简单来说,就是实现代码中的类到数据库中表的映射的一种方法。 宝啊,是不是觉得我才开篇就鬼话连篇。 举个例子,假设我们要创建一个名为employees的表,包含id、name、age和salar…

vue实现瀑布流

每个色块宽度一致&#xff0c;高度自适应 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"><meta name"renderer" content"we…

STM32F407移植OpenHarmony笔记7

继上一篇笔记&#xff0c;成功启动了liteos_m内核&#xff0c;可以创建线程了&#xff0c;也能看到shell控制台了。 今天研究文件系统&#xff0c;让控制台相关文件命令如mkdir和ls能工作。 liteos_m内核支持fatfs和littlefs两个文件系统&#xff0c; fatfs适用于SD卡&#xff…

【C++】C++入门 — 类和对象初步介绍

类和对象 1 类的作用域2 类的实例化3 类对象模型4 this指针介绍&#xff1a;特性&#xff1a; Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 1 类的作用域 类定义了一个新的作用域&#xff0c;类的…

指针的深入理解(四)

这节主要讨论sizeof和strlen的区别&#xff0c;以及一些理解题。 sizeof 求的是对象的大小&#xff0c;深入理解一点就是&#xff1a;这个对象&#xff0c;他一定有一块对应的内存空间。求的就是这一块内存空间。 strlen 只能用来求字符串&#xff0c; 求取的是字符串的长度。…

QT 范例阅读:系统托盘 The System Tray Icon example

main.cpp QApplication app(argc, argv);//判断系统是否支持 系统托盘功能if (!QSystemTrayIcon::isSystemTrayAvailable()) {QMessageBox::critical(0, QObject::tr("Systray"),QObject::tr("I couldnt detect any system tray ""on this system.&qu…

【C++】开源:Windows图形库EasyX配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Windows图形库EasyX配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#…

Linux进程信号(2)--信号的保存

目录 1.阻塞信号 1.1 信号其他相关常见概念 1.实际执行信号的处理动作称为信号递达(Delivery&#xff09; 2.信号从产生到递达之间的状态,称为信号未决(Pending)。 3.进程可以选择阻塞 (Block )某个信号。 1.2信号在内核中的表示 sigset_t 信号集操作函数 使用sigprocm…

nginx slice模块的使用和源码分析

文章目录 1. 为什么需要ngx_http_slice_module2. 配置指令3. 加载模块4. 源码分析4.1 指令分析4.2 模块初始化4.3 slice模块的上下文4.2 $slice_range字段值获取4.3 http header过滤处理4.4 http body过滤处理5 测试和验证 1. 为什么需要ngx_http_slice_module 顾名思义&#…

Vue中keep-alive的作用、原理及应用场景

在进行Vue开发的过程中&#xff0c;我们经常会遇到需要进行组件缓存的场景&#xff0c;这时候Vue提供的keep-alive组件就派上了用场。keep-alive组件是Vue内置的一个抽象组件&#xff0c;它可以将其包裹的组件进行缓存&#xff0c;提高组件的性能&#xff0c;同时也可以节省服务…

普渡机器人CEO预测2024年服务机器人市场将扩大

原创 | 文 BFT机器人 根据普渡科技有限公司的报告&#xff0c;商用服务机器人在东亚地区的应用比其他地方更为广泛。然而&#xff0c;预计到2024年&#xff0c;全球其他地区也将迎头赶上。这家总部位于中国深圳的公司自豪地宣称&#xff0c;它已经成为中国最大的此类机器人出口…

前端excel带样式导出 exceljs 插件的使用

本来用的xlsx和xlsx-style两个插件&#xff0c;过程一步一个坑&#xff0c;到完全能用要消灭好多bug。这时发现了exceljs&#xff0c;真香&#x1f600; 案例 <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"view…

详解WebRTC rtc::Thread实现

rtc::Thread介绍 rtc::Thread类不仅仅实现了线程这个执行器&#xff08;比如posix底层调用pthread相关接口创建线程&#xff0c;管理线程等&#xff09;&#xff0c;还包括消息队列&#xff08;message_queue)的实现&#xff0c;rtc::Thread启动后就作为一个永不停止的event l…

如何使用MCSM搭建我的世界Java版服务器并实现远程联机游戏

文章目录 1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 本教程主要介…

c语言实现greedy snake(贪吃蛇)

##第一个小项目 大一学生寒假项目 最终实现效果如图 一.以C语言实现个人小项目 在我们快速学完了一个高级编程语言&#xff0c;就应该写一个小项目来加以巩固自己的学习成果。 所以今天&#xff0c;我们来尝试写一写greedy snake&#xff0c;对于大学生来说也是可以加强能…

2,cdc放缩位图

类似地&#xff0c;用pDC->StretchBlt来缩放&#xff0c;只是加上了两个参数&#xff0c;原始位图的宽高。 void CMy1_showbitmapView::StretchBitMap(CDC * pDC) { //CBitmap对象 CBitmap bitmap; //CDC对象 CDC dcMemory; //加载资源 bitmap.LoadBitmapW(IDB_BITMAP1); /…

JUnit

前言&#xff1a;自动化就是selenium脚本来实现的&#xff0c;JUnit是java的单元测试工具&#xff0c;只不过我们在实现自动化的时候需要借助一下JUnit库里面提供的一些方法。 目录 1、Test 2、断言—Assertions类 3、用例的执行顺序 3.1 通过order注解来排序 3.2 参数化 …