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.mzph.cn/news/668297.shtml

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

相关文章

minitouch王者荣耀按键百分比

minitouch王者荣耀按键百分比 3 技能英雄 原图 2376 x 1104 xy说明x百分比y百分比23761104总分辨率160444金币0.0673400673400670.402173913043478296440物品10.1245791245791250.398550724637681296566物品20.1245791245791250.51268115942029470864摇杆0.1978114478114480…

51单片机之LED灯模块篇

御风以翔 破浪以飏 🎥个人主页 🔥个人专栏 目录 点亮一盏LED灯 LED的组成原理 LED的硬件模型 点亮一盏LED灯的程序设计 LED灯闪烁 LED流水灯 独立按键控制LED灯亮灭 独立按键的组成原理 独立按键的硬件模型 独立按键控制LED灯状态 按键的抖动 独立按键…

当服务器发布代码与本地代码不一致无法发布时(java)

现象:服务器代码与本地代码不一致,本地代码发布上去有错误,替换配置文件,替换修改的文件也无效,原使用者已离职 我的思路: 1.下载服务器上发布包 2.反编译服务器上代码和本地代码,反编译工具…

机器学习本科课程 实验3 决策树处理分类任务

实验3.1 决策树处理分类任务 使用sklearn.tree.DecisionTreeClassifier完成肿瘤分类(breast-cancer)计算最大深度为10时,十折交叉验证的精度(accuracy),查准率(precision),查全率(recall),F1值绘制最大深度…

Haas 开发板连接阿里云上传温湿度和电池电压

目录 一、在阿里云上创建一个产品 二、开发环境的介绍 三、创建wifi示例 四、编写SI7006和ADC驱动 五、wifi配网 六、主要源码 七、查看实现结果 一、在阿里云上创建一个产品 登录自己的阿里云账号, 应该支付宝,淘宝账号都是可以的。 接着根据需求…

【Redis】理论基础 - 分区策略

[toc]、 在 Redis 的学习中,我们将重点介绍分区策略,这是一种通过水平扩展来提高 Redis 性能和处理大量数据的方法。通过分区,我们可以将数据分散存储在多个 Redis 实例中,充分利用集群的计算和存储资源。本篇博客将介绍 Redis 的…

设置 相关

记录使用过程中做的设置相关事宜。方便后续查询 vscode如何自动生成html格式: vscode快速生成html模板 --两种方法,亲测有用_vscode自动生成html模板-CSDN博客 使用第二个方式。存储html格式后缀。输入!,vscode自动补全。 安装…

ywtool login guard命令

一.登录防护功能介绍 登录防护功能主要检查系统日志/var/log/secure,查看系统有没有被暴力登录。登录防护默认是检测3分钟内登录系统失败15次(次数可修改)后,视其为有攻击性,拉黑此IP(centos7通过系统文件阻止IP,centos8/9通过防火墙阻止IP)。此脚本只针对SSH访问,…

platform tree架构下i2c应用实例(HS3003)

目录 概述 1 探究platform tree下的i2c 1.1 platform tree下的i2c驱动 1.2 查看i2c总线下的设备 1.3 使用命令读写设备寄存器 2 认识HS3003 2.1 HS3003特性 2.2 HS3003寄存器 2.2.1 温湿度数据寄存器 2.2.2 参数寄存器 2.2.3 一个参数配置Demo 2.3 温湿度值转换 2.…

在工业制造方面,如何更好地实现数字化转型?

实现工业制造的数字化转型涉及利用数字技术来增强流程、提高效率并推动创新。以下是工业制造领域更好实现数字化转型的几个关键步骤: 1.定义明确的目标: 清楚地概述您的数字化转型目标。确定需要改进的领域,例如运营效率、产品质量或供应链…

Camunda流程引擎数据库架构

💖专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据,完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧😘 💖数据库架构…

编程笔记 html5cssjs 081 JavaScript 异常处理语句

编程笔记 html5&css&js 081 JavaScript 异常处理语句 一、结构和语法:二、示例:总结 在JavaScript中,异常处理主要通过 try...catch...finally 语句实现。这个结构允许你捕获并处理程序运行时可能出现的错误(即异常&…

回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制)

回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制) 目录 回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制&…

C#通过文件头判断flv文件

目录 效果 代码 效果 代码 private void button1_Click(object sender, EventArgs e) { string path Application.StartupPath "\\test.flv"; //3byte 总是FLV(0x46 0x4C 0x56) byte[] Type new byte[3]; using (FileStre…

探索微服务治理:从发展到实践构建高效稳定的系统| 微服务的度量

随着软件行业的不断发展,微服务架构凭借其高度的灵活性、可扩展性和可维护性,逐渐成为企业应用的主流架构风格。然后微服务架构的复杂性也带来了一系列的挑战,其中之一就是如何有效地管理和治理微服务。本文灸哥给你详细介绍和服务治理相关的…

SQL 表信息 | 统计 | 脚本

介绍 统计多个 SQL Server 实例上多个数据库的表大小、最后修改时间和行数,可以使用以下的 SQL 查询来获取这些信息。 脚本 示例脚本: DECLARE Query NVARCHAR(MAX)-- 创建一个临时表用于存储结果 CREATE TABLE #TableSizes (DatabaseName NVARCHAR…

Java学习笔记2024/2/3

1. 方法 1.1 什么是方法 package com.angus.method.whatIsTheMethod_1;public class note {public static void main(String[] args) {//什么是方法//方法是程序当中最小的执行单元//调用方法和使用数组很类似//方法->方法名//数组->数组名->地址值//什么时候用到方…

2024 AI 前端:回首展望,光芒未至,破晓之前!

前言 回望 2023 年,ChatGPT 的突然爆火,让 AI 无疑成为最为值得注目的新兴领域之一,我们也一起见证了生成式 AI 的寒武纪大爆发。这一年来,国内外的生成式 AI 、大模型和相关产品以令人眼花缭乱的速度更新迭代,新的创业…

服务器性能监控管理方法及工具

服务器是组织数据中心的主干,无论是优化的用户体验,还是管理良好的资源,服务器都能为您完成所有工作,保持服务器随时可用和可访问对于面向业务的应用程序和服务以最佳水平运行至关重要。 理想的服务器性能需要主动监控物理和虚拟…

JavaScript内嵌函数是传值还是传址

在一般编程语言中, 参数都是"传值", 假设一个C函数的原型是int Fun(int value); 当你调用这个函数时, Fun函数首先会在自己的函数栈上copy一份参数, 就是这个函数的副本, 当你在Fun外部修改value值, 并不会影响Fun内部的value. 而Javascript的内嵌函数很特殊, 如果传…