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


Posted in Javascript onOctober 13, 2019

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

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

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

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构建服务器:
VUE+node(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)实现前后端分离
VUE+node(express)实现前后端分离

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

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 #Javascript
javaScript把其它类型转换为Number类型
Oct 13 #Javascript
js 实现watch监听数据变化的代码
Oct 13 #Javascript
15 分钟掌握vue-next响应式原理
Oct 13 #Javascript
Vue3.x源码调试的实现方法
Oct 13 #Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 #Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 #Javascript
You might like
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python 获取图片分辨率的方法
2019/01/08 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
客户接待方案
2014/02/26 职场文书
护理专业自荐书
2014/06/04 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
检讨书格式范文
2015/05/07 职场文书
拉贝日记观后感
2015/06/05 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers