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

于 2024-07-26 23:30:00 发布
阅读量935 收藏 29
点赞数 25
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67229679/article/details/140702271
版权

一、 实验名称

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

二、参考资料

《Vue 3官方网站：https://cn.vuejs.org》、《Axios：https://www.axios-http.cn》、《Mock.js：http://mockjs.com 》和第二章课件。

三、实验目的

1.      练习使用组合式API编写Vue组件显示后端数据。

2.  练习使用Axios向后端发送异步请求。

3.  练习使用Mock.js模拟后端数据。

四、实验内容

1. 用VS Code或WebStorm（后面的步骤以VS Code为例）打开实验二创建的szweb项目文件夹。

2. 在VS Code中鼠标右键单击项目的components目录，在弹出的菜单中选择“新建文件”，在输入框中输入新建文件的文件名为UserLogin.vue。

3. 在打开的UserLogin.vue文件中输入构成Vue组件的三个元素，代码如下：

<template>



</template>

<script setup lang="ts">



</script>

<style scoped>



</style>

        template部分是界面的展示代码，可以写HTML标记和Vue的组件标记；script部分是业务实现代码，可以使用JavaScript或TypeScript调用Vue的API来实现业务逻辑；style界面布局代码，可以通过CSS等样式定义语言来定义界面的样式。

4．把实验一webdemo项目中login.html文件中body元素内div元素的内容复制szweb项目Login.vue文件的template元素内，把webdemo项目中login.css文件中.center和div的样式定义复制到szweb项目UserLogin.vue文件的style元素内。复制完成以后，UserLogin.vue文件的内容如下所示：

<script setup lang="ts">



</script>

<template>

    <div class="center">

        <form action="/webdemo/login" method="post">

            <p style="margin-bottom: 50px">用户登录</p>

            <p>

                <label for="username">请输入账号：</label>

                <input id="username" name="username" type="text" />

            </p>

            <p>

                <label for="password">请输入密码：</label>

                <input id="password" name="password" type="text" />

            </p>

            <input type="submit" value="提交" onclick="valid()" />

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

5. 在VS Code中打开App.vue文件，修改App.vue文件的内容如下列代码所示：

<script setup lang="ts">

import UserLogin from './components/UserLogin.vue'

</script>



<template>

  <user-login />

</template>

6．按下Ctrl+Shift+`组合键打开VS Code的终端窗口，在窗口中输入：

pnpm dev

运行项目以后，按住Ctrl键点击http://localhost:5174/链接在浏览器中会看到登录页面。

7. 修改vite.config.ts配置文件，设置mock模拟数据的路径和服务器端口号，修改后vite.config.ts文件的内容如下列代码所示：

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



import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(), viteMockServe({ mockPath: './mock' })],



  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

  server: {

    port: 8080, //启动端口  

  },

})

8. 在szweb项目目录下新建mock目录，用来存放模拟后端数据的文件。

9. 在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[];

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

import axios from 'axios'

const baseURL = '/'

const service = axios.create({

    baseURL,

    timeout: 5000, // 请求的最长响应时间

});

export default service

11. 在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,

    });

}

12. 修改Login.vue文件的script和template元素，实现基于Vue 3的登录页面，修改后代码如下所示：

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

<template>

  <div class="center">

    <form method="post">

      <p style="margin-bottom: 50px">用户登录</p>

      <p>

        <label for="username">请输入账号：</label>

        <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.prevent="handleLogin">提交</button>

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

13. 运行项目，测试登录页面。

按照实验任务书的要求完成以下实验报告：

一、程序代码

1.代码1：创建用户登录页面

(1)在VS Code中鼠标右键单击项目的components目录，在弹出的菜单中选择“新建文件”，在输入框中输入新建文件的文件名为UserLogin.vue。
<script setup>

</script>

<template>

    <div>

        <form action="/webdemo/login" method="post">

            <p style="margin-bottom: 50px">用户登录</p>

            <p>

                <label for="username">请输入账号：</label>

                <input id="username" name="username" type="text" />

            </p>

            <p>

                <label for="password">请输入密码：</label>

                <input id="password" name="password" type="text" />

            </p>

            <input type="submit" value="提交" onclick="valid()" />

        </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）在VS Code中打开App.vue文件，修改App.vue文件的内容如下列代码所示：
<script setup>

import UserLogin from './components/UserLogin.vue'

</script>

<template>

  <user-login />

</template>

2.代码2：修改Login.vue文件实现基于Vue 3的登录页面、设置mock模拟数据的路径和服务器端口号并存放模拟后端数据的文件

（1）修改vite.config.ts配置文件，设置mock模拟数据的路径和服务器端口号，修改后vite.config.ts文件的内容如下列代码所示：
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(), viteMockServe({ mockPath: './mock' })],

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

  server: {

    port: 8080, //启动端口  

  },

})
（2）在szweb项目目录下新建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?登录成功，欢迎${∈f⊙username}!:'登录失败，用户名或密码不正确！'

            return {msg};

        },

    },

] as MockMethod[];
（3）在src目录下新建utils目录，在该目录下新建request.ts文件，在该文件中创建利用axios向后端发送异步请求的service并导出，如下列代码所示：
import axios from 'axios'

const baseURL = '/'

const service = axios.create({

    baseURL,

    timeout: 5000, // 请求的最长响应时间

});

export default service
（4）在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,

    });

}
（5） 修改UserLogin.vue文件的script和template元素，实现基于Vue 3的登录页面，修改后代码如下所示：
<script 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>

<template>

  <div>

    <form method="post">

      <p style="margin-bottom: 50px">用户登录</p>

      <p>

        <label for="username">请输入账号：</label>

        <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.prevent="handleLogin">提交</button>

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

二、  实验结果（含程序运行截图）

1. 代码1.按下Ctrl+Shift+`组合键打开VS Code的终端窗口，在窗口中输入：

pnpm dev

运行项目以后，按住Ctrl键点击http://localhost:5174/链接在浏览器中会看到登录页面。

新的图片

2.代码2.按下Ctrl+Shift+`组合键打开VS Code的终端窗口，在窗口中输入：

pnpm dev

运行项目以后，按住Ctrl键点击http://localhost:8080/，测试登录页面。

新的图片

（1）登陆成功

新的图片

输入账户admin密码12345后提交信息即可登陆

新的图片

（2）登陆失败，用户名或密码错误

新的图片

三、 出现问题及解决方法

 问题1： 代码输入无误，但在终端运行项目以后，出现以下问题:
（1）显示错误：无法启动浏览器

新的图片

（2）

新的图片

（3）按住Ctrl键点击http://localhost:8080/进入页面，只显示APP.vue主页面

新的图片

  解决方法：可能是因为输入代码后，没有进行保存，将软件关闭后重新进入，进行测试即可成功

四、  实验心得

  1. 练习使用组合式API编写Vue组件显示后端数据。

components目录下新建文件为UserLogin.vue，输入构成Vue组件的三个元素script、template模板、style样式；修改Login.vue文件的script和template元素，实现基于Vue 3的登录页面

2.  练习使用Axios向后端发送异步请求。

新建utils目录下新建request.ts文件，在该文件中创建利用axios向后端发送异步请求的service并导出；

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

3.  练习使用Mock.js模拟后端数据。

新建mock目录，用来存放模拟后端数据的文件。在mock目录下新建index.ts文件，在该文件中实现后端数据的模拟；修改vite.config.ts配置文件，设置mock模拟数据的路径和服务器端口号。

m0_67229679
关注
  • 25
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 组合式API
weixin_52910435的博客
05-12 1100
1. 开发环境搭建 1.1 用vue-cli搭建一个基于vue3.0的开发环境 1.1.1 选择自定义配置 1.1.2 选中自定义安装版本 1.1.3 选择3.x版本 1.2 不同文件 package.json文件，在dependencies配置项中显示，我们当前使用的版本为3.0.0 main.js 入口文件，发现Vue的实例化发生了一些变化，由先前的new关键词实例化，转变为createApp方法的调用形式 打开一个单文件组件发现，vue3.0的单文件组件中不再强制要求必须有唯一根元素 1.3
Vue3入门笔记----登录功能
panzhixiang
11-15 1万+
通过axios、jwt和vuex实现登录功能
vue3项目（七）----Login
m0_61368323的博客
05-13 7489
1.表单校验主要是使用ElementPlus组件来完成。其中：1）用户名和密码：只需要通过简单的配置（看文档的方式，复杂的功能通过多个不同的组件来拆解）2）同意协议：自定义规则，validator:(rule,value,callback)=>{}3）统一校验：通过调用form实例的方法 validate->true2.登录的业务流程。使用Elmessage来提示用户是否跳转成功。使用useRouter进行路由跳转。3.统一错误提示。使用响应式拦截器。
Vue3封装登录功能的两种实现
飞翔的小白
03-15 7857
方法一： 使用用户名和密码进行登录 封装代码： <template> <el-form ref="ruleFormRef" status-icon :model="ruleForms" :rules="rules" label-width="120px" class="demo-ruleForm" > <el-form-item label="用户名：" prop="username"
vue3实现单点登录
左直拳的马桶_日用桶
10-13 5051
严格来说，所谓利用vue3实现单点登录，是指实现单点登录的前端。身份验证，只能是服务器端干的活。
Vue3实战一：搭建项目和登录
最新发布
shieryue_2016的博客
12-06 993
定义变量未使用报错处理：vue.config.js 添加以下设置。创建项目：vue create hotel_manager。3、config/conster.js常量。4、config/msg.js消息工具类。5、api/admin.js 用户接口。二、绘制登录页面和执行登录功能。2、request.js工具类。安装element-plus。路由守卫和路由跳转顶部加载。安装NProgress。6、绘制登录和执行登录。创建路由router。7、md5引入和加密。
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。...
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观、响应式的后台管理系统。 Vue3的核心改进包括： 1. **...
实现的基于vue在线排课系统（vue3）.zip
04-29
本项目"实现的基于vue在线排课系统（vue3）"是作者在大二时完成的课程设计，利用了现代前端技术栈，特别是Vue.js框架的最新版本Vue 3。Vue.js是一个轻量级、高性能的JavaScript库，专注于视图层，易于学习且便于集成...
前端开发最新Vue3.0组合式api使用总结
08-04
Vue2代码可能存在冗余和结构混乱，而Vue3引入组合式API，使得相关功能可以更好地组织在一起，提高了代码的可读性和复用性。此外，Vue3的响应式系统更加高效，支持更复杂的场景，如深度监听和代理对象。通过理解和...
Vue3后台通用管理系统（三）：用户登录与跳转、全局路由守卫
DogEgg_001的博客
11-19 4121
退出登录即删除token、删除本地存储的menulist、删除tagsList（存储在menuStore中，需要引入再操作）这个项目功能感觉好少。后面想把后端部分重新用node和mysql实现一下 加油。获取对应的menulist后存储到store中，通过本地存储。点击commonHeader里的退出退出登录，返回到登录页。需要使用到cookie，若cookie存在即为登录状态。点击发送登录请求，将账号密码传给mock。未登录时不能跳转到除登录页以外的页面；登录后不能再跳转到登录页；
vue 3 项目实战二（实现登录、注册）
qq_41045128的博客
07-08 1万+
1、完成登录、注册的功能2、实现表单的验证 主要是实现过程及一些问题记录。1、安装 axios 用于向服务器发送接受请求。 npm i axios 2、启动api服务（没有，就用node简单搭一个）3、对接口进行测试，看是否可用，用postman或者浏览器插件都可以4、接口测试没问题后，进行sign_in组件 axios部分的编写和测试，先写死数据看能不能成功 对表单数据用 v-mode进行双向绑定。进行小改动就可以。 到这，简单的登录就差不多搞定了。现在一
Vue3使用el-form实现登录、注册功能，且进行表单验证（Element Plus中的el-form）
weixin_65793170的博客
09-11 1万+
Element Plus 中的 el-form 是一个表单组件，用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则，使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ，这两天在vue3中用到了表单登录，这里来记录一下。
前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗，以及已有样式的覆盖
热门推荐
weixin_46372074的博客
05-29 2万+
vue3使用element-plus实现登录/注册页面登录/注册页面组件预览 登录/注册页面组件 vue3 的登录和注册页面 目前只有框架和函数框架, 根据具体需要填充, 已有功能: 1.没有勾选同意使用手册, 登录和注册按钮是处于隐藏状态的 2.密码与确认密码不一致确认 3.其余功能处于待填充状态 <template> <div class="layout"> <el-tabs type="border-card"> <el-tab-pan
《Vue3实战》用路由实现跳转登录、退出登录以及路由全局守护
weixin_58070962的博客
08-09 4684
路由是什么？路由是一种将数据包从源节点转发到目标节点的技术或过程。在计算机网络中，路由器是实现路由功能的设备。它通过查看数据包的目标地址，并根据预先配置的路由表选择合适的输出接口，将数据包转发到下一跳节点，直到最终到达目标节点。通过路由，计算机网络可以实现数据的快速传输和分发，确保数据包能够有效地传递到目标节点。路由器根据网络中的拓扑结构和路由协议，动态地更新和维护路由表，以适应网络拓扑的变化和实现最佳的数据传输路径。
vue3+springboot2登录(可自己拓展其他功能)
m0_51373428的博客
07-07 4128
vue3+springboot2+springsecurity实现登录功能
vue3组合式实现点餐系统
12-03
根据提供的引用内容，没有直接提到如何使用vue3组合式实现点餐系统。但是我们可以提供一些基于vue3组合式的开发思路和建议。 1. 首先，需要使用Vue CLI创建一个新的Vue项目，并安装Vue 3和Vue Router。 2. 接下来，可以使用Vue 3的Composition API来编写组件逻辑。可以将不同的功能逻辑拆分成不同的组合函数，然后在组件中使用这些函数。 3. 对于点餐系统的不同功能模块，可以将其拆分成不同的组件。例如，可以创建一个菜单组件、一个购物车组件、一个订单组件等等。 4. 在组件之间进行通信可以使用Vue 3提供的新特性——Teleport和Provide/Inject。Teleport可以将组件的内容传送到DOM树中的任何位置，而Provide/Inject可以在祖先组件和后代组件之间进行数据传递。 5. 最后，可以使用Vue 3的新特性——Suspense和Error Boundary来处理异步加载和错误处理。 总之，使用Vue 3的Composition API可以更好地组织和管理代码，使得代码更加清晰易懂。同时，Vue 3的新特性也可以帮助我们更好地处理异步加载和错误处理等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值