前后端分离————VUE+node(express)

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


搞定

原文地址:https://www.cnblogs.com/cth0/p/11666214.html

时间: 2024-10-09 12:32:25

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

前后端分离-Vue

安装nodejs和npm 默认使用国外镜像,下载速度慢,手动改为国内淘宝的(直接在CMD终端执行) npm config set registry https://registry.npm.taobao.org 创建SPA(单页面)应用 原文地址:https://www.cnblogs.com/qifengle1412/p/12081742.html

基于Vue的前后端分离项目实践

一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互的逻辑,然后通过网络请求与后端进行数据的交互:后端则着重关注业务逻辑的处理,直接操控数据库. 1.2前后端未分离前(1)jsp + servlet 开发模式: JSP页面:负责视图层的渲染及交互,内部可以嵌入java 代码,在某些场景下开发起来比

nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程

好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致  西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185453.html 没图片的教程都是耍流氓 准备工作: 安装nodejs ---还用我教了? 安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器

基于node的前后端分离初识

久闻node的大名,先后也看过node的文档,但是,总是碍于没有挑起我的G点,所以实际codeing的例子都没有.最近,突然很有兴致,想把原有用页面ajax渲染的页面采用服务端node来渲染,研究了两天终于有点眉目了. 先来按我的理解来解释一遍node,node是服务端语言,只是用的JavaScript,所以非常适合前端的工程师去研究这个后端语言,node本身就能够实现整个站点或者服务的全部.从页面渲染到数据存储,如同php和javaweb等其他web开发一样,而且node很适合并发量大的访问服

从壹开始前后端分离【 .NET Core2.0 Api + Vue 3.0 + AOP + 分布式】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

代码已上传Github,文末有地址 说接上文,上回说到了<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之八 || API项目整体搭建 6.3 异步泛型+依赖注入初探>,后来的标题中,我把仓储两个字给去掉了,因为好像大家对这个模式很有不同的看法,嗯~可能还是我学艺不精,没有说到其中的好处,现在在学DDD领域驱动设计相关资料,有了好的灵感再给大家分享吧. 到目前为止我们的项目已经有了基本的雏形,后端其实已经可以搭建自己的接口列表了,框架已

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 &amp; 模块化

缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

java结合node.js非对称加密,实现密文登录传参——让前后端分离的项目更安全

前言   在参考互联网大厂的登录.订单.提现这类对安全性操作要求较高的场景操作时发现,传输的都是密文.而为了目前项目安全,我自己负责的项目也需要这方面的技术.由于,我当前的项目是使用了前后端分离技术,即node.js做前端,spring boot做后端.于是,我开始搜索有关node.js与java实现非对称加密的资料,然而,我却没有得到一个满意的答案.因此,我有了写本篇博客的想法,并希望给用到这类技术的朋友提供帮助. 一.明文密码传输对比 首先. 构建spring boot 2.0项目 引入we

ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

 一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自己的职业发展还是很有帮助的.毕竟,现在都快到9102年了,如果你还是只会 Web Form,或许还是能找到很多的工作机会,可是,这真的不再适应未来的发展了.如果你准备继续在 .NET 平台下进行开发,适时开始拥抱开源,拥抱 ASP.NET Core,即使,现在工作中可能用不到. 雪崩发生时,没有一