VUE+node(express)实现前后端分离

 更新时间:2019年10月13日 15:47:47   作者:陈嗯嗯前端基地  
在本篇文章里小编给大家分享的是关于VUE+node(express)前后端分离实例内容,有需要的朋友们参考下。

vue作为前端的框架,node(express)作为后端的框架。无数据库,使用端口保存数据。 VUE:

使用vue-cli构建vue项目(vueapp)。

npm install -g vue-cli(安装,安装过的就不用了)
vue init webpack vueapp

axios:(与ajax相似)

import axios from 'axios'
var url="http://localhost:3000"            //express服务器的地址
axios.get(url+'/product')               //放数据的接口
 .then(function (response) {             //收到的数据
  console.log(response);
  console.log(response.data);            //展示数据(看看是否拿到,和数据长啥样) 
  var nodeData=response.data;      
 })
 .catch(function (error) {
  console.log(error);![在这里插入图片描述](https://img-blog.csdnimg.cn/20191013132943460.jpg)
 });

axios没安装的记得装一下。(安装不细说)

node(express): 启动>>>npm start

使用express构建服务器:

新建个myapp放express
npm install express

在(routes文件夹中)建一个product,js接口

var express = require('express');      //使用express
var router = express.Router();        //放数据
/* GET home page. */
router.get('/', function (req, res, next) {
  var data = {
    code: 0,
    data: {
      name: 'aaa',
      pwd: '123'
    },
    isSuccess: true,
    msg: "请求成功"
  }
  res.json(data);
});
module.exports = router;

app.js(建立接口存放数据)

var productRouter = require('./routes/product');
app.use('/product', productRouter);

最后服务器数据有了!!!!VUE前端接收数据的链接也有了!!!但还是没办法链接!!!!这就是跨域的问题!!!

跨域:

1.端口不同 http://localhost:3000和http://localhost:8080

2.网址不同 www.baidu.com和www.aiqiyi.com

3.ip和网址不同 http://localhost:3000和http://127.0.0.1

反正除非同个网址里面,只有目录不同,才不用跨域。

开始解决!!

express>>>app.js

//跨域问题解决方面
const cors = require('cors'); 
app.use(cors({ 
  origin:['http://localhost:8080'],
  methods:['GET','POST'],
}));
//跨域问题解决方面
app.all('*',function (req, res, next) {
 res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 next(); 
});

cors需要安装,是一个依赖。

结果:
服务器(express):3000接口数据


搞定了,以上就是本次介绍的全部知识点,感谢大家的学习和对脚本之家的支持。

相关文章

  • 前端大文件上传与下载(分片上传)的详细过程

    前端大文件上传与下载(分片上传)的详细过程

    最近遇见一个需要上传超大大文件的需求,所以下面这篇文章主要给大家介绍了关于前端大文件上传与下载(分片上传)的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • element-ui upload组件多文件上传的示例代码

    element-ui upload组件多文件上传的示例代码

    这篇文章主要介绍了element-ui upload组件多文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Vue.js 中 axios 跨域访问错误问题及解决方法

    Vue.js 中 axios 跨域访问错误问题及解决方法

    这篇文章主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11
  • Vue 中使用 WebWorker的示例代码

    Vue 中使用 WebWorker的示例代码

    这篇文章主要介绍了Vue中使用WebWorker的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 解决vuex刷新数据消失问题

    解决vuex刷新数据消失问题

    这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue中使用微信公众号js-sdk踩坑记录

    vue中使用微信公众号js-sdk踩坑记录

    这篇文章主要介绍了vue中使用微信公众号js-sdk踩坑记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue如何解决循环引用组件报错的问题

    vue如何解决循环引用组件报错的问题

    这篇文章主要介绍了vue如何解决循环引用组件报错的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • VSCode搭建vue项目的实现步骤

    VSCode搭建vue项目的实现步骤

    本文主要介绍了VSCode搭建vue项目的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue中如何删除字符串中的空格符

    vue中如何删除字符串中的空格符

    这篇文章主要介绍了vue中如何删除字符串中的空格符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论