前后端分离————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. Spring MVC 配置类 WebMvcConfigurerAdapter

    WebMvcConfigurerAdapter配置类是spring提供的一种配置方式,采用JavaBean的方式替代传统的基于xml的配置来对spring框架进行自定义的配置.因此,在spring b ...

  2. 【Offer】[28] 【对称的二叉树】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现一个函数,用来判断一-棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的.  牛客网刷题地址 思路分析 利用前序 ...

  3. Springboot中RedisTemplate的操作

    Springboot中RedisTemplate的操作 @Autowired private RedisTemplate redisTemplate; @Autowired private Strin ...

  4. FreeSql (二十一)查询返回数据

    FreeSql 采用 ExpressionTree 优化读取速读,如果懂技术的你一定知道 .NETCore 技术下除了原生代码,最快就是 Emit 和 ExpressionTree. 项目在初期使用的 ...

  5. java 手机号码+邮箱的验证

    import java.util.regex.Pattern; //导入的包 1:String REGEX_MOBILE = "^((17[0-9])|(14[0-9])|(13[0-9]) ...

  6. 增删改查——DBUtils

    利用QueryRunner类实现对数据库的增删改查操作,需要先导入jar包:commons-dbutils-1.6.利用QueryRunner类可以实现对数据步骤的简化. 1.添加 运用JDBC工具类 ...

  7. Linux 笔记 - 第二十章 配置 Nginx 反向代理和负载均衡

    一.简介 由于 Nginx 的反向代理和负载均衡功能经常被提及,所以将这两个功能单独提出来进行讲解. Nginx 其实仅仅是作为 Nginx Proxy 反向代理使用的,因为这个反向代理功能表现的效果 ...

  8. 在.NET Core中使用DispatchProxy“实现”非公开的接口

    原文地址:"Implementing" a non-public interface in .NET Core with DispatchProxy 原文作者:Filip W. 译 ...

  9. 提交任务到spark(以wordcount为例)

    1.首先需要搭建好hadoop+spark环境,并保证服务正常.本文以wordcount为例. 2.创建源文件,即输入源.hello.txt文件,内容如下: tom jerry henry jim s ...

  10. APP功能测试要点

    1.功能性测试 根据产品需求文档编写测试用例而进行测试,包括客户端的单个功能模块以及功能业务逻辑(功能交互)如:涉及输入的地方需要考虑等价类,边界值,异常或非法等 1.1 安装与卸载测试 >软件 ...