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 相关文章推荐
jquery购物车实时结算特效实现思路
Sep 23 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
js实现头像上传并且可预览提交
Dec 25 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中的正规表达式(一)
2006/10/09 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php给图片加文字水印
2015/07/31 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Django的信号机制详解
2017/05/05 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
运动会邀请函范文
2014/02/06 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
签订劳动合同通知书
2015/04/16 职场文书
初中团委工作总结
2015/08/13 职场文书
《失物招领》教学反思
2016/02/20 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers