express+vue-cli实现前后端分离交互小例
准备工作
1、Express 应用生成器
npm install express-generator -g
2、vue-cli手脚架
npm install -g vue-cli
3、项目结构
.
├── server //放置服务端代码
└── view //放置前端代码
express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的。
开始
在根目录下生成服务端项目 - server
//生成项目
express server
cd server
cnpm install
//运行项目
set DEBUG=server:* & npm start //Windows平台
简单配置
1、在express目录下,安装cors包
npm install cors --save
2、在app.js中配置:开启cors,就如下图
添加接口,新建或者卸载其他的同个文件中都行
在根目录下生成前端项目 - views
//生成项目
vue init webpack views
cd views
cnpm install
//运行项目
npm run dev
下载axios
cnpm i --save axios
//在main.js中配置
import axios from ‘axios’ //引入
Vue.prototype.$axios = axios;
axios.defaults.baseURL = ‘http://localhost:3000’;
请求数据
init(){
this.$axios.get(’/login’).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
}
- Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
- nginx+vue.js实现前后端分离
- 使用AngularJS实现的前后端分离的数据交互过程
- django集成vue,实现前后端分离开发
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- vue+mock.js实现前后端分离
- vue-cli打包过程及打包后与node交互实现
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- ajax + vue + springboot + Restful实现前后端分离项目
- 基于springboot+vue+element+ueditor实现前后端分离的富文本框实现
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- 基于vue实现网站前台的权限管理(前后端分离实践)
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
- Django +vue.js实现前后端分离(十三)
- 搭建spring-boot+vue前后端分离框架并实现登录功能