实现基于Vue 3组合式API的登录系统——experiment3

CanDi_Y

已于 2023-04-16 09:23:38 修改

阅读量420

点赞数

分类专栏： Web开发技术文章标签： vue.js javascript 前端

于 2023-04-07 16:51:01 首次发布

本文链接：https://blog.csdn.net/m0_59744429/article/details/129892372

版权

Web开发技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、了解Vue 3项目结构

在这里插入图片描述

node_modules：这个目录下存放的是通过npm install下载下来的项目的所有依赖包。
public：存放静态公共资源，不会被压缩、合并。
src：项目开发的主要文件夹，源文件目录
① assets：静态资源，存放图片，build之后，该目录中的文件会被合并到一个文件中并进行压缩。
② components：存放组件
③ App.vue：项目根组件
④ main.ts：是整个项目的入口文件，.ts就是TypeScript文件
⑤ style.css：全局样式文件，定义被所有组件共享的样式，在main.ts中导入
⑥ vite-env.d.ts：为Vue文件创建的TS类型定义文件，以便TypeScript能够识别.vue文件
⑦ .gitignore：用来配置那些文件不归git管理
⑧ index.html：项目的首页、入口页，也是整个项目唯一的HTML页面
⑨ package.json：项目配置和包管理文件（项目依赖和技术）
⑩ package-lock.json：npm install时候，自动生成的文件，记录了项目的一些信息和所依赖的模块
⑪ README.md：说明文档，主要看项目运行的命令
⑫ tsconfig.json：TypeScript配置文件
⑬ vite.config.ts：vite配置文件

二、相关概念

组合式API

Vue3提供两种组织代码逻辑的写法：

通过data、methods、watch 等配置选项组织代码逻辑是选项式API 写法。所谓选项式就是你只能在vue 提供的组件封装对象的对应属性中书写代码。

<script>
export default {
  // data 属性中定义组件状态
  data() {
  },
  // methods 属性中定义组件的事件处理函数
  methods: {
  },
  // mounted 生命周期函数中获取 DOM
  mounted(){
  }
};
</script>

组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件
所有逻辑写在 setup 函数中，使用 ref、watch 等函数组织代码是组合式API 写法。

<script>
export default {
  setup () {
      // 用什么调用函数即可。
    // vue2 用什么去对应的属性中书写。
  }
};
</script>

Axios异步请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js 中。axios用来在前端页面发布异步请求到后端服务，请求之后页面不动，响应回来刷新页面布局，简单的讲就是可以发送get、post请求。

创建axios的默认实例发送请求

//创建axios的默认配置对象
    var instance = axios.create({
        baseURL: "https://autumnfish.cn/api/joke/", //将自动加载到URL前面，除非URL是一个绝对的URL
        timeout: 5000,           //默认加载5秒，若未加载成功，终止请求
    })
 
//发送 get 方式请求
    instance.get("/list?num=3")
        .then(function(response) {
            console.log(response.data)
        }).catch(function(err) {
            console.log(err)

Mock.js

mock.js是基于node平台的一款生成随机数据的资源包，使用 npm install mockjs 即可下载到本地node环境中，通过操纵mock指令完成对随机数据的增删改查（crud）。
在后端接口（API）尚未完工之前，为了不影响前端开发效率，我们可以手动模拟后端数据，使用mock.js制作“假数据”（或者说模拟数据请求场景，交互），并在接口API文档拟定之后切换成真实数据组，完成页面的相关交互效果以及对程序性能的相关测试。mock.js是前后端分离（mvvm）过程中前端比较优秀的模拟接口API的工具。

三、基于Vue 3组合式API登陆系统的实现

实现步骤：

1. 界面设计

在这里插入图片描述

系统展示如图所示的界面，当密码与用户名正确时，提示登陆成功；当用户名或密码不正确时，提示登录失败。
① 在components目录在创建login.vue文件。components目录我们上面介绍了是用来存放组件的。
② 构成vue组件的三个元素

<template>
界面的展示代码，可以写HTML标记和Vue的组件标记；
</template>

<script setup lang="ts">
业务实现代码，可以使用JavaScript或TypeScript调用Vue的API来实现业务逻辑；
</script>

<style scoped>
界面布局代码，可以通过CSS等样式定义语言来定义界面的样式。
</style>

界面设计部分要求我们填充template以及style部分内容，代码如下：

<template>
  <div class="center">   <!-- div标签：分割区块的“盒子” -->
    <form method="post">  <!-- form标签：HTML表单，用于用户输入，这里的表单规定发送表单数据的HTTP方法为post -->
      <p style="margin-bottom: 50px">用户登录</p>   <!-- p标签： 定义段落 -> 用户登录 -->
      <p>
        <!-- lable标签：是一个表单元素，为 input 元素定义标注（标记），for属性规定 label 与哪个表单元素绑定，把 "for" 属性的值设置为相关元素的 id 属性的值 -->
        <label for="username">请输入账号：</label>   
        
        <!-- input：规定了用户可以在其中输入数据的输入字段。-->
        <!-- v-model是一个语法糖，在这里实现value属性和input事件双向数据绑定 -->
        <!-- type 属性规定要显示的 <input> 元素的类型 -->
        <input id="username" v-model="username" type="text"/> 
      </p>
      <p>
        <label for="password">请输入密码：</label>
        <input id="password" v-model="password" type="password"/>
      </p>
      <!-- button标签：定义一个按钮-->
      <!-- @click：Vue 3中，我们使用v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码，v-on 指令可以缩写为 @ 符号 -->
      <!-- .prevent ：事件修饰符，阻止默认事件 -->
      <button @click.prevent="handleLogin">提交</button>
      <!-- {{ }} 用于输出对象属性和函数返回值,{{result}}对应应用中 result的值 -->
      <h2>{{result}}</h2>
    </form>
  </div>
</template>

<style scoped>

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 300px;
  background-color: #f0f0f0;
}

div {
  box-shadow: 0px 0px 10px #888888;
}

</style>

2. 创建实现后端模拟

① 设置mock模拟数据的路径和服务器端口号

修改vite.config.ts配置文件。
原始的vite.config.ts配置文件如下：

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

我们要做的是在plugins中添加mock模拟数据的路径，以及设置服务器的端口号，代码如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from "vite-plugin-mock";  //导入了模拟后端接口服务的插件
export default defineConfig({
  plugins: [vue(), viteMockServe({ mockPath: './mock' })], //设置mock模拟数据的路径
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {  //设置服务器端口号
    port: 8080, //启动端口  
  },

})

② 构建后端数据的模拟

在项目目录下新建mock目录，在mock目录下新建index.ts文件，在该文件中实现后端数据的模拟，代码如下：

import type { MockMethod } from 'vite-plugin-mock'
const userData = [
    {
        username: 'admin',
        password: '12345'
    },
    {
        username: 'test',
        password: 'test'
    }
]

export default [
    {
        url: '/api/login',  //请求地址
        method: 'post',   //请求方式
        response: (data:any) => {  //响应数据
            const info = data.body
            const result= userData.some(item=>{
                return item.username===info.username&&item.password===info.password
            })
            const msg=result?`登录成功，欢迎${info.username}!`:'登录失败，用户名或密码不正确！'
            return {msg};
        },

    },
] as MockMethod[];

更多配置可以看一下：vite-plugin-mock

3. Axios异步请求的实现

① service

创建利用向后端发送异步请求的service并导出。
在src目录下新建utils目录，在该目录下新建request.ts文件，在该文件中创建利用axios向后端发送异步请求的service并导出，如下列代码所示：

import axios from 'axios'
const baseURL = '/'
const service = axios.create({
    baseURL,
    timeout: 5000, // 请求的最长响应时间
});

export default service

② API

使用service创建向后端发送访问用户数据请求的API。
在src下新建api目录，在该目录下新建user.ts文件，在该文件中使用service创建向后端发送访问用户数据请求的API，发送的请求会被Mock拦截从而返回模拟数据，如下列代码所示：

import service from "@/utils/request";
export interface User{
    username:string,
    password:string
}
export function login(data:User) {
    return service({
        url: "/api/login",
        method: "post",
        data: data,
    });

}

4. 业务逻辑的实现

我们上面提到了，我们需要在< script>元素中使用JavaScript或TypeScript调用Vue的API来实现业务逻辑，具体的这一部分完成的是登录按钮的事件处理，代码如下：

<script lang="ts" setup>
import {ref} from 'vue';
import {login} from '@/api/user'

const username = ref('')
const password = ref('')
const result = ref('')

const handleLogin = async () => {  //按钮事件处理函数
  if (username.value === '' || password.value === '') {
    alert('用户名或密码不能为空！')
  } else {
    try {
      const res = await login({username: username.value, password: password.value})
      result.value = res.data.msg
    }
    catch (e) {
      alert(e)
    }
  }
}
</script>

参考资料

Vue 3官方网站：https://cn.vuejs.org
Axios：https://www.axios-http.cn
Mock.js：http://mockjs.com
Vue全家桶之axios(发送异步请求 && 拦截器)：https://blog.csdn.net/m0_57002951/article/details/123717677
vite配置：https://vitejs.dev/config/
HTML菜鸟教程：https://www.runoob.com/html/html-tutorial.html
Vue菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html
多说一句：菜鸟教程的内容简单易懂，就是说确实适合新手使用。

szweb.zip

CanDi_Y

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现基于Vue 3组合式API的登录系统——experiment3

在后端接口（API）尚未完工之前，为了不影响前端开发效率，我们可以手动模拟后端数据，使用mock.js制作“假数据”（或者说模拟数据请求场景，交互），并在接口API文档拟定之后切换成真实数据组，完成页面的相关交互效果以及对程序性能的相关测试。mock.js是基于node平台的一款生成随机数据的资源包，使用 npm install mockjs 即可下载到本地node环境中，通过操纵mock指令完成对随机数据的增删改查（crud）。系统展示如图所示的界面，当密码与用户名正确时，提示登陆成功；
复制链接

扫一扫