VUE 简单实现登录功能（使用mock模拟后端接口）

在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。

安装mockjs和axios：

npm install mockjs -S
npm install axios -S （用于页面调用接口数据）

在src路径下创建mock文件夹，在里边创建MockServer.js

import Mock from 'mockjs'

Mock.mock('/login',"post",(req)=>{

    console.log(JSON.parse(req.body));

    if(JSON.parse(req.body).username == "admin"){

        console.log("登录用户名正确");

    }

    return{

        isLogin:true

    }

})

main.js中引用mock.js

import { createApp } from 'vue'

// import './style.css'

import App from './components/Login.vue'

import axios from 'axios'

import './mock/mockServer.js'

const app=createApp(App)

app.config.globalProperties.$axios=axios

app.mount('#app')

在src/components路径下创建Login.vue文件

<template>

    <div>

        用户名:<input type="text" v-model="username">

        密码:<input type="text" v-model="password">

        <button @click="login">登录</button>

    </div>

</template>

<script>

import request from '../axios/request.js'

    export default {

        data(){

            return{

                username:'admin',

                password:123

            }

        },

        methods:{

            login(){

                request({url:"/login",method:"post",data:{username:this.username,password:this.password}})

                .then((resp)=>{

                    console.log(resp.data.isLogin);

                })

            }

        }

    }

</script>

<style lang="scss" scoped>

</style>

使用新建终端运行 npm run dev

实现效果图：