App下載

在Vue項(xiàng)目中使用mock.js

猿友 2021-01-13 17:34:14 瀏覽數(shù) (4435)
反饋

在Vue項(xiàng)目中使用mock.js

  • 開發(fā)工具選擇:Vscode

1. 使用命令行創(chuàng)建 vue 項(xiàng)目(手動(dòng)選擇 Babel,Router,Vuex)

2. 導(dǎo)入 element-ui(為了顯示效果好一點(diǎn)),命令行輸入

npm i element-ui -S

3.在 main。js 中進(jìn)行引用

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"
   style="width: 100%">
   <el-table-column
     label="日期"
     width="180">
     <template slot-scope="scope">
       <i class="el-icon-time"></i>
       <span style="margin-left: 10px">{{ 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: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
         date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀區(qū)金沙江路 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'
//導(dǎo)入組件
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

現(xiàn)在的網(wǎng)頁(yè)顯示效果如下

無(wú)標(biāo)題6

5. 安裝 mockjs 和 axios

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

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

  • request.js
import axios from 'axios'
const service = axios.create({
   baseURL : "http://localhost:8080",
})
export default service
12345
  • getData.js
import axios from '../request'
//數(shù)據(jù)列表接口
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',//隨機(jī)id
               name: '@name',//隨機(jī)名稱
               nickName: '@last',//隨機(jī)昵稱
               phone: /^1[34578]\d{9}$/,//隨機(jī)電話號(hào)碼
               'age|11-99': 1,//年齡
               address: '@county(true)',//隨機(jī)地址
               email: '@email',//隨機(jī)郵箱
               isMale: '@boolean',//隨機(jī)性別
               createTime: '@datetime',//創(chuàng)建時(shí)間
               avatar() {
                   //用戶頭像
                   return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
              }
          }
      ]
  }
?
})

8.在 main.js 中導(dǎo)入 mockServer

import './mock/mockServer'

9.修改 src/views/main/List.vue(數(shù)據(jù)獲取與綁定,設(shè)置表格居中)

<template>
 <div>
   <el-table :data="tableData" style="width: 600px;margin: 0 auto">
     <el-table-column label="隨機(jī)ID" width="200">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ 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>手機(jī)號(hào): {{ 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: "上海市普陀區(qū)金沙江路 1518 弄",
       //   },
       //   {
       //     date: "2016-05-04",
       //     name: "王小虎",
       //     address: "上海市普陀區(qū)金沙江路 1517 弄",
       //   },
       //   {
       //     date: "2016-05-01",
       //     name: "王小虎",
       //     address: "上海市普陀區(qū)金沙江路 1519 弄",
       //   },
       //   {
       //     date: "2016-05-03",
       //     name: "王小虎",
       //     address: "上海市普陀區(qū)金沙江路 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>

10.再次運(yùn)行

無(wú)標(biāo)題

  • 鼠標(biāo)放在姓名上,會(huì)有更多信息顯示
    無(wú)標(biāo)題1 
  • 顯示測(cè)試的數(shù)據(jù)1000條 
    無(wú)標(biāo)題2


0 人點(diǎn)贊