从壹开始前后端开发【.Net6+Vue3】(二)前端创建
项目名称:KeepGoing(继续前进)介绍
工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长
将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架
在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享
项目地址
前端框架创建
上文介绍到这次将使用到Vue3作为前端使用的技术,也将和大家一起学习并使用这项技术,首先我们将从头开始创建一个Vue3空项目
具体的操作步骤就不在介绍了,网上一搜就有很多的文章,下面附上自己在使用过程中参照的文章 Vue3 项目创建
这次将实现两个功能:用户登录,获取用户信息
1.用户登录
1.1需要完成的任务
开发一个用户登录页面,并调用后台登录接口获取到token,并存储到浏览器缓存中
1.2实现步骤
1.2.1实现登录页面
这一功能的工作大致流程:
在根目录下创建一个Login.Vue页面,页面很简单,两个输入框,一个按钮,点击按钮对输入数据进行校验,校验通过后调用登录接口,登录成功保存token到缓存中
后台接口登录成功后将用户Id,用户名称构建到授权中去
下面是Login.Vue源码
<template>
<el-form :model="form" label-width="120px":rules="rules" ref="ruleFormRef">
<el-form-item label="用户名" prop="userAccount">
<el-input v-model="form.userAccount" />
</el-form-item>
<el-form-item label="用户密码"prop="password">
<el-input v-model="form.password" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit(ruleFormRef)" :loading="isSending">登录</el-button>
</el-form-item>
</el-form>
</template>总结:
主要实现了用户登录以及获取用户信息这两个功能,前端使用到了路由、请求响应,拦截。实现的功能比较简单,但由于对Vue了解的不是很足够,在响应拦截这块遇到了一些困难,最终通过查阅资料并进行了解决。
来源:https://www.cnblogs.com/wuyongfu/archive/2023/09/04/17677114.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页:
[1]