基础准备：

1、npm安装vue-cli脚手架后，通过命令“ vue init webpack 项目名 ”来创建项目；
2、了解mockjs，能拦截ajax请求，返回模拟的响应数据，实现前后端分离；
（详细学习网址：https://blog.csdn.net/zhanglir333/article/details/78721585 或官网）
3、了解 axios，基于http客户端的promise，面向浏览器和nodejs。
（详细学习网址：https://www.jianshu.com/p/df464b26ae58 或官网）
第一步：安装 mockjs 和 axios 插件
• cnpm install mockjs --save-dev
• cnpm install axios  --save-dev
• 安装完毕后，使用命令 npm run dev 运行项目
第二步：创建mock.js文件（包括引用mockjs插件，设定mock规则、拦截ajax请求）

第三步：在main.js中全局引入axios插件（并设定为Vue的原型属性$http）和mock.js文件
第四步：在组件中使用axios发送请求并将响应数据渲染到html

注意：网上一些mockjs+axios的文章实际敲代码会报错，原因是没有如上图用that保存vue实例。还有要注意res.data.data才是mock出来并返回的数据数组
最后成功的效果：


Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）相关推荐

  1. 数据库与身份认证（数据库的基本概念，安装并配置 MySQL，MySQL 的基本使用，在项目中操作 MySQL，前后端的身份认证）

    theme: channing-cyan 数据库与身份认证 1. 数据库的基本概念 1.1 什么是数据库 数据库(database)是用来组织.存储和管理数据的仓库. 当今世界是一个充满着数据的互联网 ...

  2. 适合新手拿来练习的springboot+vue前后端分离小Demo

    前言: 作者:神的孩子在歌唱 大家好,我叫智 练习springboot+vue前后端分离的Demo 一. 设计数据库 二 . springboot项目创建 2.1 基本配置 2.2 创建dao层 三. ...

  3. java计算机毕业设计基于springboot+vue+elementUI的口腔管理平台管理系统(前后端分离）

    项目介绍 口腔卫生是关系民生的一个重要问题.口腔健康会直接影响全身的健康,口腔基本常见的有龋齿,牙周炎等问题,而且人类的牙齿只有2次更换周期,一旦牙齿彻底完成更换终生将不再更换,所以越来越多的人开始关 ...

  4. 基于nodejs+vue+elementUI的电影交流网站（前后端分离）电影网站

    该系统基于nodejs+vue+elementUI整合,mysql数据库,前后端分离,具有完整的业务逻辑. 电影交流网站,在网站首页可以查看首页.电影信息.交流论坛.电影资讯.个人中心.后台管理等内容 ...

  5. 【JAVA程序设计】基于SpringBoot+VUE的高校疫情打卡系统-前后端分离

    基于SpringBoot+VUE的高校疫情打卡系统 零.项目获取 一.项目简介 二.开发环境 三.项目技术 四.系统架构 五.运行截图 六.数据库设计 零.项目获取 获取方式(点击下载):是云猿实战 ...

  6. 轻量项目架构 ljm-simple-base平台（前后端分离）

    ljm-simple-base 项目wiki地址: https://gitee.com/MingAndTao/ljm-simple-base/wikis/%E9%A1%B9%E7%9B%AE%E7%A ...

  7. Springboot+vue在线考试系统源码，前后端分离

    Springboot+vue在线考试系统源码 开发语言:Java 数据库:Mysql 开发工具:Eclipse 使用技术: 后端:SpringBoot 前端:VUE 和 Element-UI 源码免费 ...

  8. vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口？

    对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题. 现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181, ...

  9. vue+element模仿电商商城，前后端分离实现，下单微信扫码支付

    1.前言 接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...

最新文章

  1. lucene索引文件大小优化小结
  2. 适用于Java开发人员的Groovy吗？ 认识Gradle，Grails和Spock
  3. [渝粤教育] 中国传媒大学 政治传播学 参考 资料
  4. kafka 集群_Kafka集群监控系统Kafka Eagle部署与体验
  5. Android JNI 本地开发接口
  6. 1063 Set Similarity (25 分) set注意查询从1到q所以输入的时候也要从1到n
  7. win11系统完全使用ie浏览器的方法
  8. 关于MybatisPlus
  9. 每日一诗词 —— 行路难
  10. 华为认证的含金量高吗？
  11. linux如何设置串口参数,串口通信的参数如何设置
  12. win7拔掉耳机后电脑没声音了
  13. 数据结构（C语言严版）总结
  14. VsCode插件安装及推荐
  15. Ubuntu 22.04操作系统下常用软件备忘
  16. 关于PYTHON里SUPER使用时报的typeerror错误 - dongua的日志 - 网易博客
  17. 青椒炒黄瓜+伏特加+Bon jovi+编程
  18. CAN转光纤以太网设备实现CAN网络之间超远距离光纤连通
  19. 安卓巴士诚邀巴友参加2012移动开发者大会
  20. 机器学习【西瓜书/南瓜书】--- 第1章绪论（学习笔记+公式推导）

热门文章

  1. python ide如何运行_ide - 如何运行Python程序？
  2. python中把输出结果写到一个文件中_Python3.6笔记之将程序运行结果输出到文件的方法...
  3. sqldeveloper创建账号_用oralce 自带工具sql developer 创建表空间，用户，权限
  4. java 数据保存内存_java中的各种数据类型在内存中存储的方式 一
  5. vb mysql 表格显示,在VB中编辑数据库和电子表格
  6. linux反序列化漏洞,思科多个产品Java反序列化漏洞(CVE-2015-6420)
  7. java invoke 泛型_利用Java反射机制和泛型,全自动解析json
  8. python随机抽签列表中的同学值日_神奇的大抽签--Python中的列表_章节测验,期末考试,慕课答案查询公众号...
  9. 论文公式编号右对齐_论文不会写？最详细的论文排版技巧
  10. python饼形图_Python | 饼形图