npm install --global vue-cli
vue init webpack my-project
  cd my-project
  npm install
  npm run dev

这样就构建了一个本地vue项目

结下来,如何调用后端接口呢?

安装 vue-resource

npm i vue-resource --save
在main.js里面加入以下代码
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.emulateJSON = true; //http请求设置
Vue.http.options.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //http请求头设置form表单提交
};

找到src\components\Hello.vue 把下面代码替换原来的,加入了表单,点击登录,调用后端的接口

<template>
<div>
<div>
<input
type="text"
placeholder="Enter your username"
v-model="info.username"
>
</div>
<div>
<input
type="password"
placeholder="Enter your password"
v-model="info.password"
>
</div>
<button @click="submit()">登录</button>
</div>
</template> <script>
export default {
data () {
return {
info: {
username: '',
password: ''
}
}
},
methods: {
submit () {
var info = {
data:JSON.stringify(
{
username: this.info.username,
password: this.info.password
}
)
}
this.$http.post('/api/user/login', info).then(function (data) {
console.log(data.data)
}, function (err) {
console.log(err)
})
}
}
}
</script>

由于后端的接口域名是是www.bobomusic.com/api/,post请求里面的接口域名其实是localhost:8080/api/, 这样是调用不到的,怎么办呢?

vue的config\index.js里面可以设置反向代理到后端的接口域名,打开index.js,加入如下图里面红色框的一段代码

'/api': {
target: 'http://www.bobomusic.com/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}

然后在页面点击登录按钮,调用成功,返回的数据如下图:

前后端分离之前端vue的更多相关文章

  1. 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...

  2. 前后端分离框架前端react,后端springboot跨域问题分析

    前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...

  3. .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

    框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...

  4. Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...

  5. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  6. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  7. 前后端分离, 前端如何防止直接输入URL进入页面?

    转自:https://blog.csdn.net/weixin_41829196/article/details/80444870 前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用 ...

  8. 前后端分离--构建前端Mock Server--windows部署rap

    mock:模拟的,虚假的 mock server:模拟服务,模拟请求,模拟虚假数据 为了前后端更好的分工,接口文档是必须的,前后端都根据接口文档写代码,然后对接接口就行了. 但是,后端跟不上前端节奏, ...

  9. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. 使用WxPusher给自己的个人微信发送提醒消息(WxPusher微信推送服务)

    1.背景 我们很多时候,我们在服务器上运行软件,发生一些业务异常,需要给我们发送一个及时的提醒,或者是使用一些耗时软件,比如抢车票,抢课,刷优惠券当任务运行成功以后,也需要及时的发送消息给自己 ,告诉 ...

  2. 分布式雪花算法获取id

    实现全局唯一ID 一.采用主键自增 最常见的方式.利用数据库,全数据库唯一. 优点: 1)简单,代码方便,性能可以接受. 2)数字ID天然排序,对分页或者需要排序的结果很有帮助. 缺点: 1)不同数据 ...

  3. 关于oracle监听程序的相关问题及解决方法

    1.查看监听程序是否启动 打开cmd窗口,cmd用管理员运行,否则无法执行启动与停止监听命令 lsnrctl status查看运行状态 lsnrctl stop停止监听 lsnrctl start启动 ...

  4. 【ELK】Centos7 安装 ELK 7.6.2 和 UI 管理界面以及测试例子

    1. 初始化环境 1.0 初始化环境官网参考 https://www.elastic.co/guide/en/elasticsearch/reference/current/system-config ...

  5. Luogu P3757 [CQOI2017]老C的键盘

    题目描述 老C的键盘 题解 显然对于每个数 x 都有唯一对应的 \(x/2\) , 然而对于每个数 x 却可以成为 \(x*2\) 和 \(x*2+1\) 的对应数 根据这一特性想到了啥??? 感谢l ...

  6. Spring 5的最后一个特性版本5.3发布,4.3将于12月终止维护

    10月27日,Spring Framework团队宣布了5.3版本正式GA,Spring用户可以在repo.spring.io和Maven Central上获取到最新版本的依赖包. JDK的版本支持 ...

  7. Kubernetes Pod驱逐策略

    Kubelet 能够主动监测和防止计算资源的全面短缺. 在资源短缺的情况下,kubelet 可以主动地结束一个或多个 Pod 以回收短缺的资源. 当 kubelet 结束一个 Pod 时,它将终止 P ...

  8. Flask简介与启动服务器

    Flask 一.简介 官方文档:http://flask.pocoo.org/ http://www.pythondoc.com/flask/index.html(中文) 1.概述 flask是一个非 ...

  9. react中iconfont字体图标不显示问题

    如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...

  10. 6 MVVM进阶

    1. 背景 MVVM是一种常用的设计模式,它的最主要功能是将数据与代码隔离,实现viewmodel的可测试.架构图如下: 2. 命令-Command 2.1 WPF 路由命令 WPF提供一种内置的命令 ...