文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在Vue项目中使用mock.js

2023-06-27 10:01

关注

这篇文章主要讲解了“怎么在Vue项目中使用mock.js”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在Vue项目中使用mock.js”吧!

在Vue项目中使用mock.js

1. 使用命令行创建 vue 项目(手动选择 Babel,Router,Vuex)

2. 导入 element-ui(为了显示效果好一点),命令行输入

npm i element-ui -S

3.在 main。js 中进行引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入

Vue.use(ElementUI)

4.新建 src/views/main/List.vue 使用 elememnt-ui 中的自定义列模板

<template>
<div>
  <el-table
   :data="tableData"
   >
   <el-table-column
     label="日期"
     width="180">
     <template slot-scope="scope">
       <i class="el-icon-time"></i>
       <span >{{ scope.row.date }}</span>
     </template>
   </el-table-column>
   <el-table-column
     label="姓名"
     width="180">
     <template slot-scope="scope">
       <el-popover trigger="hover" placement="top">
         <p>姓名: {{ scope.row.name }}</p>
         <p>住址: {{ scope.row.address }}</p>
         <div slot="reference" class="name-wrapper">
           <el-tag size="medium">{{ scope.row.name }}</el-tag>
         </div>
       </el-popover>
     </template>
   </el-table-column>
   <el-table-column label="操作">
     <template slot-scope="scope">
       <el-button
         size="mini"
         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
       <el-button
         size="mini"
         type="danger"
         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
     </template>
   </el-table-column>
 </el-table>
</div>
</template>

<script>
 export default {
   data() {
     return {
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1517 弄'
       }, {
         date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1519 弄'
       }, {
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
       }]
     }
   },
   methods: {
     handleEdit(index, row) {
       console.log(index, row);
     },
     handleDelete(index, row) {
       console.log(index, row);
     }
   }
 }
</script>

5.router/index.js配置如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import List from '../views/main/List.vue'

Vue.use(VueRouter)

const routes = [
 {
   path: '/',
   name: 'List',
   component: List
 },

]

const router = new VueRouter({
 routes
})

export default router

现在的网页显示效果如下

怎么在Vue项目中使用mock.js

5. 安装 mockjs 和 axios

npm install --save-dev mockjs
npm install --save axios
12

6.新建 api/getData.js 和 request.js

import axios from 'axios'
const service = axios.create({
   baseURL : "http://localhost:8080",
})
export default service
12345
import axios from '../request'
//数据列表接口
export const getList = () => axios.get("/list")
123

7.在src下新建 mock/mockServer.js

import Mock from 'mockjs'
//import data from './data.json'

Mock.mock('http://localhost:8080/list', {
   code: 0, data:
   {
       'data|1000': [
           {  
               id: '@id',//随机id
               name: '@name',//随机名称
               nickName: '@last',//随机昵称
               phone: /^1[34578]\d{9}$/,//随机电话号码
               'age|11-99': 1,//年龄
               address: '@county(true)',//随机地址
               email: '@email',//随机邮箱
               isMale: '@boolean',//随机性别
               createTime: '@datetime',//创建时间
               avatar() {
                   //用户头像
                   return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
               }
           }
       ]
   }

})

8.在 main.js 中导入 mockServer

import './mock/mockServer'

9.修改 src/views/main/List.vue(数据获取与绑定,设置表格居中)

<template>
 <div>
   <el-table :data="tableData" >
     <el-table-column label="随机ID" width="200">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
         <span >{{ scope.row.id }}</span>
       </template>
     </el-table-column>
     <el-table-column label="姓名" width="180">
       <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>姓名: {{ scope.row.name }}</p>
           <p>住址: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
           <p>邮箱: {{ scope.row.email }}</p>
           <p>性别: {{ scope.row.isMale }}</p>
           <p>昵称: {{ scope.row.nickName }}</p>
           <p>手机号: {{ scope.row.phone }}</p>
           <p>头像:</p>
         </el-popover>
       </template>
     </el-table-column>
     <el-table-column label="操作">
       <template slot-scope="scope">
         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
           >编辑</el-button
         >
         <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)"
           >删除</el-button
         >
       </template>
     </el-table-column>
   </el-table>
 </div>
</template>

<script>
import { getList } from "../../api/getData";
export default {
 data() {
   return {
     tableData: [
       //   {
       //     date: "2016-05-02",
       //     name: "王小虎",
       //     address: "上海市普陀区金沙江路 1518 弄",
       //   },
       //   {
       //     date: "2016-05-04",
       //     name: "王小虎",
       //     address: "上海市普陀区金沙江路 1517 弄",
       //   },
       //   {
       //     date: "2016-05-01",
       //     name: "王小虎",
       //     address: "上海市普陀区金沙江路 1519 弄",
       //   },
       //   {
       //     date: "2016-05-03",
       //     name: "王小虎",
       //     address: "上海市普陀区金沙江路 1516 弄",
       //   },
     ],
   };
 },
 methods: {
   handleEdit(index, row) {
     console.log(index, row);
   },
   handleDelete(index, row) {
     console.log(index, row);
   },

   async getMockList() {
     try {
       const result = await getList();
       //console.log(result);
       if (result.data.code == 0) {
         this.tableData = result.data.data.data;
       }
       //console.log(result.data.data.data);
     } catch (error) {
       console.log(error);
     }
   },
 },

 mounted() {
   this.getMockList();
 },

};
</script>

感谢各位的阅读,以上就是“怎么在Vue项目中使用mock.js”的内容了,经过本文的学习后,相信大家对怎么在Vue项目中使用mock.js这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯