@vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同。这里对@vue/cli 4.0+express实现前后端分离的经验进行总结。
一、准备:
- @vue/cli 4.0搭建的vue前端项目
- Express 应用生成器
npm install express-generator -g
二、这里首先对express搭建后端项目进行介绍
express 项目名
cd 项目名
cnpm install
cmd下启动:
set DEBUG=项目名:* & npm start
使用该express项目向前端返回数据,需要进行简单配置:
1. 安装cors
npm install cors --save
2. 在app.js中配置
在routes文件夹下添加接口文件,如product.js,内容仿照index.js改写。如果需要多个接口,则在routes下添加多个文件。
var express = require('express');
var router = express.Router(); /* GET home page. */
router.get('/', function(req, res, next) {
var data = {
result: 1,
data: [
{
"name":"bottle",
"id":"100102",
"size":"5",
"color":"red",
"price":"49"
}
],
totalNum:1
}
res.json(data); // 注意:返回json
}); module.exports = router;
然后将该路由添加至app.js中:
三、前端配置
前端除了在vue.config.js中进行配置,还要使用axios.
在main.js中,
然后便可以在store/index.js中向后端发送action请求了。
四、总结
express提供后端接口,axios起到ajax请求的作用。
前端axios使用的方法与后端express router使用的方法要保持一致,本文中使用的都是get,也可以都换成post.
参考: https://www.cnblogs.com/adoctors/p/8911151.html
@vue/cli 4.0+express 前后端分离实践的更多相关文章
- 基于 koajs 的前后端分离实践
一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)
好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致 西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185 ...
- vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录
最近想弄一下vue 所以就自己给自己找坑入 结果弄的满身是伤 哈哈哈 首先我说下 前后端分离 跨域请求 我在网上找了一些 可是都是针对于 spring boot 的 我自己还有 securi ...
- Yii框架和Vue的完美结合完成前后端分离项目
背景说明 本文假设你对Yii和Vue都比较熟悉,至少都在项目里用过,另外笔者新人,以后不定时放一些干货,欢迎程序媛关注 Yii是一个PHP全端框架,典型的mvc的项目结构,后端接口都是一个控制器里放了 ...
- 鲜衣怒马散尽千金,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask钱包区块链虚拟货币三方支付功能
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_219 不得不承认,大多数人并不拥有或者曾经拥有加密货币.是的,Web3.0.加密货币.区块链,对于大多数的互联网用户来说,其实是一 ...
- 区块相隔虽一线,俱在支付同冶熔,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask区块链虚拟三方支付功能
最近几年区块链技术的使用外延持续扩展,去中心化的节点认证机制可以大幅度改进传统的支付结算模式的经营效率,降低交易者的成本并提高收益.但不能否认的是,区块链技术也存在着极大的风险,所谓身怀利器,杀心自起 ...
- Kitty基于Spring Boot、Spring Cloud、Vue.js、Element实现前后端分离的权限管理系统
源码地址:https://gitee.com/liuge1988/kitty 软件架构 后端架构 开发环境 IDE : eclipse 4.x JDK : JDK1.8.x Maven : Maven ...
- vue+egg.js+mysql一个前后端分离留言板项目
一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...
- TP5.1+Vue前后端分离实践
配置: 主域名 www.demo.xyz 二级子域名 api.demo.xyz 列表项目其中api.demo.xyz加入了版本控制,使用的是URL路由传入方式 在route.php路由文件中配置,如下 ...
随机推荐
- js 一维数组,转成嵌套数组
// 情况一: // 数据源var egs = [ {name_1: 'name_1...'}, {name_2: 'name_4...'}, {name_3: 'name_3...'}, {name ...
- nginx history路由模式时,页面返回404重定向index.html
1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prod ...
- Spring Cloud 系列之 Sleuth 链路追踪(三)
本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Sleuth 链路追踪(一) Spring Cloud 系列之 Sleuth 链路追踪(二) 本篇文章讲解 Sleu ...
- Java代码生成器加入postgresql数据库、HikariCP连接池、swagger2支持!
目录 前言 PostgreSql VS MySql HikariCP VS Druid Swagger2 自定义参数配置一览 结语 前言 最近几天又抽时间给代码生成器增加了几个新功能(预计今晚发布 ...
- js判断一个元素是否在数组内
1.indexOf()返回给定元素在数组内的索引值,如果不存在则返回-1 var arr=[0,1,2,3,4,5] console.log(arr.indexOf(1)) console.log(a ...
- Spring5参考指南:基于注解的容器配置
文章目录 @Required @Autowired @primary @Qualifier 泛型 @Resource @PostConstruct和@PreDestroy Spring的容器配置可以有 ...
- 【linux题目】第三关
1. 解释下什么是GPL,GNU,自由软件? 2. 如何选择Linux操作系统版本? 3. 安装系统时如何给Linux操作系统分区? 4. 描述Linux系统的启动过程? 5. 简要说出20个Linu ...
- 从零搭建Prometheus监控报警系统
什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统 ...
- C语言编程入门题目--No.13
题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数 本身.例如:153是一个"水仙花数",因为153= ...
- Centos7.x 装机优化
Linux 服务器装机后优化 参考 https://blog.csdn.net/u010133338/article/details/81055475 优化初始化脚本 vim init_optimiz ...