前后端分离————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接口数据





搞定

前后端分离————VUE+node(express)的更多相关文章

  1. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础:框架初探

    缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...

  2. 前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue   ip地址:192.168.1.205 后端 springboot2.0  ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session ...

  3. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战:动态路由+同构

    上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...

  4. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染

    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...

  5. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  6. 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇:基于Vuex的权限验证探究

    缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...

  7. 前后端分离 vue的nginx配置

    nginx配置vue 有全静态化  与 vue自己的应用端口 两种方式 以下是nginx跳转到vue自己的端口 https://www.jianshu.com/p/b7bd0d352db7 以下是全静 ...

  8. vue+node+mongodb前后端分离博客系统

    感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...

  9. Vue+Express实现前后端分离

    先说明一下缘由,因为自己前段时间在实习,实习期间为了参与项目开发,粗略学习了下Vue.Vuex.Vue-Router,大致会一些基础的.这里也快要做毕业设计了,趁着放假回来的这两天,学习下Node的相 ...

随机推荐

  1. CF993A Two Squares 几何 第二道 暴力或判断条件(*)

    Two Squares time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  2. 数论---GCD(最大公约数)+LCM(最小公倍数)

    #include<bits/stdc++.h> #define ll long long using namespace std; /* ll gcd(ll a, ll b) {//非递归 ...

  3. 大型公司java架构师面试实战讲解高清视频教程 15课

    目录: 01.面试必考之HashMap源码分析与实现02.探索JVM底层奥秘ClassLoader源码分析与案例讲解03.大型网站数据库瓶颈之数据库分库分表方案实践04.资料为图灵学院所有05.大型公 ...

  4. Python编译器及Sublime Text3安装及开发环境配置

    1.初学Python,你需要一个好的开发编辑器 在选择Python编辑器时,可能纠结于那个Python的版本更好一些,在Python2.x和Python3.x版本中, Python3.x版本更好一些, ...

  5. 024 实例5-身体质量指数BMI

    目录 一."身体质量指数BMI"问题分析 1.1 身体质量指数BMI 1.2 问题需求 二."身体质量指数BMI"实例讲解 2.1 身体质量指标BMI 2.1. ...

  6. 1512: [POI2006]Pro-Professor Szu

    首先把边反向, 问题转化成求从主建筑楼走向各个点的方案数. 然后缩点,块中的方案数可以直接算. 设f[i]表示走到第i个点的方案数.显然f[i]=∑f[j](存在newedge(j,i))初始时,f[ ...

  7. Spotlight on Oracle注册码破解(亲测可用)

    了解到该工具监控十分强大,该工具优点: 我就是为了监控一个Oracle数据库,查阅各种资料,真是费了十牛二虎之力,才破解完成.#_# 在客户端安装好了,连接监控的服务器,提示得要注册码,这外国的软件基 ...

  8. Net基础篇_学习笔记_第十一天_面向对象(类)

    类语法:[public] class 类名{ 字段; 属性; 方法;}写好了一个类之后,我们需要创建这个类的对象,那么,我们管创建这个类的对象过程称之为类的实例化.使用关键字 new. this:表示 ...

  9. NOIP2008复赛 提高组 第一题

    描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设maxn是单词中出现次数最多的 ...

  10. PythonI/O进阶学习笔记_6.对象引用,可变性和垃圾回收

    前言: 没有前言了- -......这系列是整理的以前的笔记上传的,有些我自己都忘记我当时记笔记的关联关系了. 记住以后 笔记记了就是用来复习的!!!不看不就啥用没了吗!!! content: 1.p ...