Vite+Vue3使用MockJS的實(shí)現(xiàn)示例

更新時(shí)間：2024年01月02日 11:21:51 作者：楓葉梨花

寫一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡單的數(shù)據(jù),來滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下

Mockjs配置使用

使用pnpm命令安裝Mockjs

pnpm install axios
pnpm install mockjs

mock模擬接口

在src目錄下新建文件夾mock，并新建文件index.ts，引入mockjs

import Mock from 'mockjs'

直接在上面引入，在vscode中會報(bào)錯(cuò)

找不到模塊“mockjs”或其相應(yīng)的類型聲明。ts(2307)

我是使用pnpm、vite新建的vue3項(xiàng)目，只需要在src目錄下的vite-env.d.ts文件下，加入以下配置即可

/// <reference types="vite/client" />

declare module 'mockjs'

main文件下引入mockjs

在main.ts文件下引入mockjs

import './mock/index'

編寫模擬接口

import Mock from 'mockjs'

Mock.mock("/mock/login","post", {code: 200, token:"login success token"});


Mock.mock("/mock/getGoodsList","get", {
    code: 200, 
    message:"請求成功",
    data:[
        {
            id:1,
            introduce:"旺仔牛奶很好喝?。?！",
            title:"旺仔牛奶",
            userId:1
        },
        {
            id:2,
            introduce:"旺旺碎碎冰很冰很好吃?。?！",
            title:"旺旺碎碎冰",
            userId:1
        },
        {
            id:3,
            introduce:"喜之郎品牌很好吃?。。?,
            title:"喜之郎",
            userId:1
        }
        ,
        {
            id:4,
            introduce:"衛(wèi)龍辣條很好吃?。?！",
            title:"衛(wèi)龍辣條",
            userId:1
        }
        ,
        {
            id:5,
            introduce:"德芙巧克力很好吃！?。?,
            title:"德芙巧克力",
            userId:1
        }
        ,
        {
            id:6,
            introduce:"伊利牛奶很好喝?。?！",
            title:"伊利牛奶",
            userId:1
        }
    ]
});

axios配置使用

配置axios

import axios from 'axios'

//創(chuàng)建axios實(shí)例
const service = axios.create({
    baseURL:"/mock",
    timeout:5000,
    headers:{
        "Content-Type":"application/json;charset=utf-8"
    }
})

//請求攔截
service.interceptors.request.use((config)=>{
    config.headers=config.headers || {}
    if(localStorage.getItem("token")){
        config.headers.token = localStorage.getItem("token") || ""
    }
    return config
})

// 響應(yīng)攔截
service.interceptors.response.use((res)=>{
    const code:number = res.data.code
    if(code != 200){
        return Promise.reject(res.data)
    }
    return res
},(err)=>{
    console.log(err)
})

export default service

編寫axios的請求接口

import service from ".";
import { LoginData } from "../type/login";

//登錄接口
export function login(data:LoginData) {
    return service({
        url:"/login",
        method:"post",
        data
    })
}

//獲取商品接口
export function getGoodsList(){
    return service({
        url:"/getGoodsList",
        method:"get",
    })
}

頁面中使用axios請求接口

<template>
    <div class="login-box">
        <div class="login-box">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px"
                class="login-ruleForm">
                <h2>后臺管理系統(tǒng)</h2>
                <el-form-item label="賬號：" prop="username">
                    <el-input v-model="ruleForm.username" autocomplete="off" />
                </el-form-item>

                <el-form-item label="密碼：" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)">登錄</el-button>
                    <el-button class="loginBtn" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
 
<script lang="ts" setup>
import { reactive,ref } from 'vue';
import { LoginData } from '../type/login';
import type { FormInstance } from "element-plus";
import { login } from "../request/api";
import { useRouter } from "vue-router";

const ruleForm = reactive<LoginData>({username:"",password:""});

const rules = {
      username: [
        {
          required: true,
          message: "請輸入你的賬號",
          trigger: "blur",
        },
        {
          min: 3,
          max: 10,
          message: "賬號的長度在3到10之間",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "請輸入你的密碼",
          trigger: "blur",
        },
        {
          min: 3,
          max: 10,
          message: "密碼的長度在3到10之間",
          trigger: "blur",
        },
      ],
    };


    const resetForm = () => {
        ruleForm.username = "";
        ruleForm.password = "";
    };

    const ruleFormRef = ref<FormInstance>();
    const router=useRouter()//-->$router
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      // 對表單的內(nèi)容進(jìn)行驗(yàn)證
      // valid布爾類型，為true表示驗(yàn)證成功，反之
      formEl.validate((valid) => {
        if (valid) {
          // console.log("submit!");
          login(ruleForm).then((res) => {
             console.log(res);
            // 將token進(jìn)行保存
            localStorage.setItem("token", res.data.token);
            // 跳轉(zhuǎn)頁面，首頁
            router.push('/')
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
      // console.log(formEl);
    };
</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
    height: 100%;
    background: url('../assets/bg.jpg');

    padding: 1px;
    .login-ruleForm{
        width: 500px;
        margin: 200px auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 20px;
    }
    .loginBtn {
        width: 48%;
    }
    h2 {
        margin-bottom: 10px;
    }
}
</style>

到此這篇關(guān)于Vite+Vue3使用MockJS的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vite Vue3使用MockJS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: