从壹开始前后端开发【.Net6+Vue3】（二）前端创建

风的轻吟

项目名称:KeepGoing(继续前进)

介绍

工作后，学习的脚步一直停停走走，希望可以以此项目为基础，可以不断的迫使自己不断的学习以及成长
将以Girvs框架为基础，从壹开始二次开发一个前后端管理框架
在这过程中一步步去学习使用到的技术点，也同时会将在此过程中遇到的问题进行分享
项目地址
前端框架创建

上文介绍到这次将使用到Vue3作为前端使用的技术，也将和大家一起学习并使用这项技术，首先我们将从头开始创建一个Vue3空项目
具体的操作步骤就不在介绍了，网上一搜就有很多的文章，下面附上自己在使用过程中参照的文章 Vue3 项目创建
这次将实现两个功能：用户登录,获取用户信息
1.用户登录

1.1需要完成的任务

开发一个用户登录页面，并调用后台登录接口获取到token,并存储到浏览器缓存中
1.2实现步骤

1.2.1实现登录页面

这一功能的工作大致流程：
在根目录下创建一个Login.Vue页面,页面很简单，两个输入框，一个按钮，点击按钮对输入数据进行校验，校验通过后调用登录接口，登录成功保存token到缓存中
后台接口登录成功后将用户Id，用户名称构建到授权中去
下面是Login.Vue源码

1. <template>
2.    
3.     <el-form :model="form" label-width="120px"  :rules="rules"   ref="ruleFormRef">
4.         <el-form-item label="用户名" prop="userAccount">
5.           <el-input v-model="form.userAccount" />
6.         </el-form-item>
7.         <el-form-item label="用户密码"  prop="password">
8.             <el-input v-model="form.password" type="password" />
9.           </el-form-item>
10.         <el-form-item>
11.             <el-button type="primary" @click="submit(ruleFormRef)" :loading="isSending">登录</el-button>
12.           </el-form-item>
13.         </el-form>
14.    
15. </template>

复制代码

总结：
主要实现了用户登录以及获取用户信息这两个功能，前端使用到了路由、请求响应，拦截。实现的功能比较简单，但由于对Vue了解的不是很足够，在响应拦截这块遇到了一些困难，最终通过查阅资料并进行了解决。

来源:https://www.cnblogs.com/wuyongfu/archive/2023/09/04/17677114.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！