vue3中快速制造数据

246 阅读1分钟

首先全局安装 express-generator

npm install express-generator -g

进入我们的vite搭建的项目

在跟目录上执行

express --view=ejs server

此时 我们会发现在跟节点目录上出现一个server的文件夹

image.png

cd 进去,install 一下然后


npm start

一下 访问我们的localhost:3000 就可以看到了

比如我们快速生成一个list接口

image.png

此时 访问

http://localhost:3000/users/list

就可以看到了

image.png

在vite.config.js中配置一下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
      host:"0.0.0.0",
      proxy:{
        '/api':{
          target:'http://localhost:3000/',
          changeOrigin:true,
          rewrite:(path) => path.replace(/^\/api/,'')
        }
      }
    },
  plugins: [vue()]
})

然后在我们项目中快速请求一下

<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {Button, Tabs, Switch, Dialog} from "qdleader-ui"
import {reactive} from 'vue'
import axios from 'axios'
export default {
    name:'Login',
    setup(){
        let account = reactive({
            username:"",
            password:""
        })
        function Submit(){ 
            axios.get('/api/users/list').then(
                res=>{
                    console.log("返回的数据是:",res.data)
                },
                e=>{
                    console.log("axios返回错误信息:",e.message)
                }
            )
        }
        Submit()
        return{
            account,
            Submit
        }
    }    
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />

 <Button type="danger">危险按钮</Button>
  <div><Button>按钮</Button></div>
</template>

<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>

然后就可以访问啦

image.png

对于线上的假数据不稳定,这样也是个不错的选择。