vue前端+nodejs后端通讯最简单demo

vue

vue前端+nodejs后端通讯最简单demo

  • 前言
  • 效果演示
  • 技术架构
  • 前端部分
    • 安装部署
    • 前端代码
    • 运行前端终端

  • 后端部分
    • 安装部署
    • 后端代码:
    • 运行后端终端

  • 结语
  • 项目源码

前言

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

效果演示

本示例效果如下:前端是一个登陆表单,信息提交给后端,后端收到后给前端反馈信息。

技术架构

前端 vue + axios + wepack
后端 nodejs + express

前端部分

安装部署

前端安装vue,方式多种,本文使用vue-cli3 + vue ui图形化安装,具体请百度,命令如下:
安装 vue-cli3:npm i @vue/cli -g
vue图形化安装:vue ui
安装 axios 用于和后端通讯:npm i axios -s

前端代码

然后我们打开“App.vue”,把代码改成如下:
建立了一个登陆表单,提交按钮点击后向“http://127.0.0.1:3000/login”这个后端地址post表单数据。

<template>

<div>

<form method="post">

账号 :

<input type="text" id="name" />

<br /><br />

密码 :

<input type="text" id="pwd" />

<br /><br />

<input type="button" value="提交" @click="submit">

</form>

</div>

</template>

<script>

import axios from \'axios\'

export default {

methods: {

submit() {

var name = document.getElementById("name").value;

var pwd = document.getElementById("pwd").value;

if (name == "" || pwd == "") {

alert("帐号和密码不能为空")

} else {

//向服务器提交数据

axios.post(\'http://127.0.0.1:3000/login\', {

name: name,

pwd: pwd

})

.then(function(response) {

//成功时服务器返回 response 数据

alert(response.data)

})

.catch(function(error) {

console.log(error);

});

}

}

},

}

</script>

运行前端终端

此时我们运行终端,在终端输入npm run serve,运行后打开http://localhost:8080/ 能看到我们的前端页面效果。

后端部分

安装部署

后端需要安装 express 和 body-parser(用于解析前端post过来的数据),顺便安装 nodemon(用于后端热更新)
安装 express:npm i express -s
安装 body-parser: npm i body-parser -s
安装 nodemon npm i nodemon -d

后端代码:

安装完后,在src目录下建立serve.js,然后输入如下代码,代码功能请看注释,注意跨域部分

var express             = require(\'express\');

var app = express();

var bodyParse = require(\'body-parser\')

//增加头部信息解决跨域问题

app.all(\'*\', function (req, res, next){

res.header("Access-Control-Allow-Origin", "http://localhost:8080");//允许源访问,本利前端访问路径为“http://localhost:8080”

res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("Access-Control-Allow-Credentials", true);

res.header("X-Powered-By", \' 3.2.1\');

next();

});

//使用bodyParse解释前端提交数据

app.use(bodyParse.urlencoded({extended:true})) ;

app.use(bodyParse.json());

// 处理根目录的get请求

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

}) ;

// 处理/login请求

app.post(\'/login\',function(req,res){

//获取登录名称和密码

name=req.body.name ;

pwd=req.body.pwd;

//向前台反馈信息

res.status(200).send(

"后台反馈信息:登录帐号:"+name+" | 登录密码:"+pwd

) ;

});

// 监听3000端口

var server=app.listen(3000);

console.log("服务器已运行");

console.log("监听网址为:http://127.0.0.1:3000/");

运行后端终端

此时我们新建一个终端,运行如下代码:
进入src目录 cd src
运行serve.js nodemon serve.js

运行效果如下,本文以vscode为例:

此时后端服务已经建立起来,然后我们访问前端入口 http://localhost:8080/,就可以看到“演示效果”了。

结语

至此整个过程结束,可以以此为基础开发更多功能。

项目源码

GitHub: https://github.com/lujingtao/Vue-and-nodejs-communication

以上是 vue前端+nodejs后端通讯最简单demo 的全部内容, 来源链接: utcz.com/z/377971.html

回到顶部