Vue学习(三)--vue+mock.js前后端分离初识
2021/11/7 6:10:19
本文主要是介绍Vue学习(三)--vue+mock.js前后端分离初识,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、mock简介
前后端分离是web应用开发的一种框架模式,前端向后台发送请求,后端接收请求后处理并返回数据,前端通过调用后端接口获取数据并在页面显示。大多数情况下前后端开发进度是不一致的,当后端开发未完成时,前端需要生成模拟数据协助开发。
mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。其可拦截发送给后端的 Ajax 请求,并通过模拟 Ajax 返回模拟数据,使前端不需要调用后端的接口,方便测试。
2、vue+mockjs
下面介绍在vue中使用mock.js实现前后端分离
step1、安装vue-cli全局脚手架
npm install --global vue-cli
step2、创建vue项目
vue init webpack mockjs
step3、安装mockjs和axios
npm install mockjs --save-dev
npm install axios --save
安装完成后可在package.json文件中查看是否安装成功及对应的版本
step4、在main.js中全局引入axios和mockjs
此时的mock.js是空文件,在step6编辑内容
点击查看代码
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false; import axios from "axios"; Vue.prototype.axios = axios; // 挂载到Vue原型链上 require('./mock.js'); // 引入mock /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
step5、编辑组件
src/conponents文件下创建mock.vue和mock2.vue,并分别编辑mock.vue、mock2.vue、APP.vue和index.js
(1)子组件:mock.vue
定义了init()方法,并用axios请求后台数据,在created()钩子函数创建后调用此方法
点击查看代码
<template> <div> <h1>Mock Test</h1> </div> </template> <script> // import axios from "axios" // 已在main.js中引入 import Mock from "mockjs" import mock from '../mock' // 引入外部mock.js 的情况 export default { name: "mock", methods:{ // 接口测试 init(){ // 请求后端数据,查询数据源 this.axios({ method: "get", // url:`${this.baseURL}/GetAll`, url:`/mock`, headers: { Account: "Root", Password:"12345678" } }) .then((response)=> { console.log(response.data.users); }) .catch((error)=> { console.log(error); }); } }, created(){ this.init(); } } </script> <style scoped> </style>
(2)子组件:mock2.vue
定义两个点击事件,点击按钮后用axios请求后台数据,弹出弹框显示数据,并在控制台打印数据
点击查看代码
<template> <div> <button @click="login">login</button> <button @click="list">list</button> </div> </template> <script> import mock from '../mock.js' import axios from 'axios' export default { name: 'mock2', methods: { login() { axios.post("/login").then(response => { if (response.data) { console.log(response.data) alert(response.data.name) } }) }, list() { axios.post("/list").then(response => { if (response.data) { console.log(response.data) alert(response.data.name + ',' + response.data.age) } }) } } } </script> <style> </style>
(3)子组件:APP.vue
添加mock.vue和mock2.vue页面导航
点击查看代码
<template> <div id="app"> <router-link to="/">Home</router-link> | <router-link to="/mock">mock</router-link> | <router-link to="/mock2">mock2</router-link> | <!-- <img src="./assets/logo.png">--> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
(4)子组件:src/router/index.js
添加mock.vue和mock2.vue页面导航路由
点击查看代码
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import mock from "../components/mock"; import mock2 from "../components/mock2"; Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/mock', name: 'Mock', component: mock },{ path: '/mock2', name: 'Mock2', component: mock2 } ] })
step6、编辑mock.js
使用mock.js拦截请求,并返回指定格式的模拟数据
点击查看代码
//引入mock模块 import Mock from 'mockjs'; // mock.vue的模拟数据 let data = { 'users|5': [ { 'name': '@cname', //中文名称 'age|1-100': 100, //100以内随机整数 'birthday': '@date("yyyy-MM-dd")', //日期 'city': '@city(true)' //中国城市 }] } Mock.mock('/mock', 'get', data) // mock2.vue的模拟数据 Mock.mock('/login', { //输出数据 'name': '@name', //随机生成姓名 //还可以自定义其他数据 }); Mock.mock('/list', { //输出数据 'name': '@name', //随机生成姓名 'age|10-20': 10 //还可以自定义其他数据 });
step7、结果显示
注意事项
(1)一个mock.js文件可以编辑多个mock数据模拟生成器;
(2)mock生成器的url地址和axios请求的地址相同,就会自动拦截请求;
(3)后端接口写好后,把main.js中的引入mock.js注释(删除)。
所有代码可以查看我的github:https://github.com/huangrongzhen88/vue_mockjs.git
用IDE打开后记得先输入命令npm install 后在输入 npm run dev 运行代码哦
这篇关于Vue学习(三)--vue+mock.js前后端分离初识的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set