二、VUE3项目实战二

---

一、登陆函数

在src下的request目录下建一个api.ts

import service from '.'

// 定义一个接口，用来约束
interface loginData{
   
    username: string,
    password: string
}

export function login(data:loginData){
   
    return service({
   
        url: '/login',
        method: 'post',
        data
    })
}

二、mock如何使用?

模拟后端接口。
mockjs

安装依赖

# 使用mockjs产生随机数据
npm install mockjs --save-dev
# 使用json5解决json文件，无法添加注释问题
npm install json5 --save-dev

在vue项目中建一个文件夹mock存放mock代码
在mock文件夹下建一个testMock.js文件

const Mock = require('mockjs')
let id = Mock.mock('@id')

let obj = Mock.mock({
   
    id: '@id'
})

console.log(obj)

使用Node来执行这个js文件，执行如下：

PS C:\source\demo\demo004\vue3-ts-demo> node .\mock\testMock.js
{
    id: '130000201204237326' }

vscode安装json5插件。

在mock文件下建一个userinfo.json5的文件，用来存放json对象。

{
   
    id: '@id', //得到随机的id,对象
    username: "@cname()", //随机生成中文名字
    date: '@date()', //随机生成日期
    avatar: "@image('200x200', 'red', '#fff', 'hello,mockjs')", //生成图片
    description: '@paragraph()', // 描述
    ip: '@ip()', //ip地址
    email: '@email()', //email地址
}

在mock文件夹下建一个testJSON5.js文件，用来读取userinfo.json5文件

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')

var json = fs.readFileSync(path.join(__dirname, './userinfo.json5'), 'utf-8')

var obj = JSON5.parse(json)
console.log(obj)

执行这个js文件

PS C:\source\demo\demo004\vue3-ts-demo\mock> node testJSON5.js
{
   
  id: '@id',
  username: '@cname()',
  date: '@date()',
  avatar: "@image('200x200', 'red', '#fff', 'hello,mockjs')",
  description: '@paragraph()',
  ip: '@ip()',
  email: '@email()'
}

三、vue3 + TS + mockjs

mock\index.js

var Mock = require("mockjs")

Mock.mock("/api/users", "post", {
   
    "users|2-5":[
        {
   
            "id|+1" : 1,
            name: "@cname",
        }
    ]
})

Mock.mock("/haha", "get", {
   
    username: "张三",
    password: "李四"
})

main.ts

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 引入mock
require("./mock")


createApp(App).use(router).mount('#app')

测试接口

<template>
    <h2>hello,world!</h2>
</template>

<script setup lang="ts">
import {
    onMounted } from 'vue';
import axios from 'axios'

onMounted(()=>{
   
    axios.get('/haha').then((res)=>{
   
      console.