当前位置：首页 > Web前端 > vue.js

vue-admin-chart实现管理后台登录页面，axios请求restful接口，CompositionAPI风格

时间：2023-04-01 12:00:52 vue.js

：深度（.el-form.el-form-item__content）{显示：内联；左边距：0px!important;}.login-container{margin:0auto;高度：100%；宽度：100%；背景：url('~@/assets/images/bg1.jpg')不重复；溢出：隐藏；//头像.login_avatar{margin:0auto;宽度：120px；高度：120px；边界半径：50%；边框：1px实心#409eff；框阴影：0010px#409eff；img{宽度：100%；高度：100%；边界半径：50%；}}.login-form{边距：0自动；位置：相对；宽度：600px；最大宽度：90%；填充：100px0230px0；溢出：隐藏；.btn-submit{宽度：100%；填充：5px0；颜色：#fff；字体大小：18px；}}.title{边距：0自动20px自动；字体大小：28px；文本对齐：居中；字体粗细：600；颜色：#f2f2f2；}.title-min{左填充：3px；颜色：#fff；字体大小：14px；字体粗细：500；}.tips{边距：0自动；字体大小：18px；文本对齐：居中；颜色：#666；保证金底部OM:10px;}.repo{保证金：0自动；字体大小：20px；文本对齐：居中；底部边距：10px；跨度{边距：015px；-装饰：下划线；字体大小：22px；颜色：#1145c8；}.repo-link:hover{颜色:#f7f7fc;}.register{游标：指针；文字修饰：无；字体大小：20px；:#345cc0;}.copyright{颜色：#fff;字体大小：14px；保证金：0自动；文本对齐：居中；}}vue-admin-chart管理后台登录界面基于Vue3.2vue-cli5vue-router4ElementPlus2.2Pinia2.0状态管理存储axios网络请求等，采用TS（TypeScript）脚本语言，用Compositionapi编写style，使用axios请求远程RestfulAPI接口调试。vue-admin-chart管理后台登录界面vue-admin-chart登录实现步骤：①创建vue组件页面及相关代码（template/html,ts/js,css/scss）view/auth/login.vue文件html代码部分#目录文件名：view/auth/login.vue的模板html代码登录如果还没有账号？注册

GithubRepo

GiteeRepo

版权所有(c){{data.table.year}},Todoadmin.com

js/ts代码部分#目录文件名：view/auth/login.vue的ts/js相关代码import{defineComponent,reactive,ref}from'vue'importrouterfrom'@/router'从'@/utils'导入{缓存}从'element-plus'导入类型{FormInstance}从'element-plus'导入{ElMessage，ElMessageBox}从'element-plus'导入类型{Action}'import{G}from'@/config'import{SAuth}from'@/service'importmd5from'js-md5'exportdefaultdefineComponent({name:'Login',setup(){//获取refcomponentconstformRef:any=ref()//清除所有localStorage值cache.clearLocalStorage()letdate:any=newDate()letyear:string=date.getFullYear()constdata:any=reactive({//表格列表相关数据表:{github:g.github_repo_url,gitee:g.gitee_repo_url,year:year,},//Form表单相关数据:{username:'',password:'',},reform:{password:'',////////属性设置Property:{labelwidth:'80px',FullScreen:false,closemodal:false,formsize:'default',},//formFormrules:{username:[{reQu??ired:millg,messg:method,manSAG：MESG：MESG：MESG：MESG：MESSG：MESAG：MESSG：MESG：MESG：MESG：MESG：MESG：MESAG：MESAG：MESG：MESG：MESG：MESG：MESG：MESAG：MESG：MESG：MESG：MESG：MESG:MESG:MESG:MESAG:MESAce,trigger:'blur'},{min:3,max:20,message:'username'+'3~20',trigger:'blur'},],密码：[{required:true,message:'密码输入错误',trigger:'blur'},{min:6,max:16,message:'密码长度'+'6~16',trigger:'blur'},],},//是否显示部分加载效果loading:false,//提交按钮已提交登录，提交按钮为灰色isSubmit:false,//是否登录成功,如果登录成功,隐藏表单控件loginSucc:false,})//点击按钮登录constloginSubmit=async()=>{if(!formRef.value!)returntry{//验证表单awaitformRef.value!.validate((valid:any)=>{if(valid){data.isSubmit=true//保存提交前未经过md5的值passdata=dataform.password//密码MD5加密后传输data.form.password=md5(data.form.password)//向请求服务提交数据SAuth.login(data.form).then((result:any)=>{data.form.password=data.reform.passwordif(result.code===0){data.loginsucc=trueelmessage.success.warning('即将跳转到首页')//重置表单Formref.Value.resetFields()Cleartimeout(Timeout)router.push(g.home_url)},300)}else{data.issubmit=FalseElmessage.erRor(result.message)}}).Catch((Er:Any)=>{data.Form.password=data.reformworddata.issubmit=falseconsole.log(Elmessage.error(Err)})}Else{console.log('fail')ElMessage.error('登录失败')}}})}catch(error){console.log(error){}}}//重置表单constresetundefin(formEl=FormInsted)Form=(formEl=FormInsted)!formEl)returnformEl.resetFields()}//注册用户constregister=()=>{ElMessageBox.alert('注册用户通道暂时关闭，请留意公告！','reminder',{confirmButtonText:'关闭',callback:(action:Action)=>{},})}return{formRef,data,loginSubmit,resetForm,registervuth}}})css/scss文件/目录名代码部分/scss相关代码：深度（.el-form.el-form-item__content）{显示：内联；左边距：0px!important;}.login-container{margin:0auto;高度：100%；宽度：100%；背景：url('~@/assets/images/bg1.jpg')不重复；溢出：隐藏；//头像.login_avatar{margin:0auto;宽度：120px；高度：120px；边界半径：50%；边框：1px实心#409eff；框阴影：0010px#409eff；img{宽度：100%；高度：100%；边界半径：50%；}}.login-form{边距：0自动；位置：相对；宽度：600px；最大宽度：90%；填充：100px0230px0；溢出：隐藏；.btn-submit{宽度：100%；填充：5px0；颜色：#fff；字体大小：18px；}}.title{边距：0自动20px自动；字体大小：28px；文本对齐：居中；字体粗细：600；颜色：#f2f2f2；}.title-min{左填充：3px；颜色：#fff；字体大小：14px；字体粗细：500；}.tips{边距：0自动；字体大小：18px；文本对齐：居中；颜色：#666；保证金底部OM:10px;}.repo{保证金：0自动；字体大小：20px；文本对齐：居中；底部边距：10px；跨度{边距：015px；-装饰：下划线；字体大小：22px；颜色：#1145c8；}.repo-link:hover{颜色:#f7f7fc;}.register{游标：指针；文字修饰：无；字体大小：20px；:#345cc0;}.copyright{颜色：#fff;字体大小：14px；保证金：0自动；文本对齐：居中；}}②创建路由器路由守卫文件#router\modules\routes.ts文件#routingcomponentimportLoginLayoutfrom'@/views/auth/login.vue'ts/js代码部分路由路由器守卫#router\modules\index.tsfile//导航路由守卫router.beforeEach((to:any,from:any,next:any)=>{try{//路由在白名单中if(existWhite(to.path)){next()}else{consttoken=cache.getLocalStorage(G.AUTHORIZATION_TOKEN)//如果token或userInfo为空，null,{},跳转到指定的登录页面登录if(!token){//保存我们的位置为以后接下来（G.LOGIN_URL）；}else{if(to.matched.length===0){ElMessage.error('Cannotfindroute-NotFoundRouter...')from.name?next({path:from.path,query:from.query}):next(G.NOTFOUND_URL)}else{next()}}}}catch(error){throwerror}})③创建axios请求restful接口src\service\modules\auth\auth.tsfile#src\service\modules\auth\auth.ts#axios请求restful登录界面login/***userlogin*@paramparamsobject*@returnsjsonobject*/exportconstlogin=async(params:any)=>{//获取设置存储constsettStore=settingStore()letdata:any;awaithttp.post(HUrl.LOGIN_URL,params).then((result:any)=>{//只处理code=0数据if(result.code===0){//type:0是ping心跳，无需处理，WS数据if(result.type!==0){//设置token并写入storelettoken=result.token||''//Pinia保存一个settStore.setToken(token)//LocalStorage也保存了一个cache.setLocalStorage(G.AUTHORIZATION_TOKEN,token)}//设置用户基本信息并写入storeletuserInfo=result.data.userInfoif(userInfo){settStore.setUserInfo(userInfo)}}data=result;}).catch((err:any)=>{http.catch(err)});returndata;}其中constsettStore=settingStore()是Pinia的状态管理组件，这里可以使用Vuex，甚至可以直接使用本地local或者session代替，但是对于项目来说，还是建议使用Pinia作为存储state-base基础版demo地址Github地址Gitee代码云地址用户名：guest密码：123456克隆项目访问Github仓库#克隆项目gitclone-bhttps://github.com/todoadmin/vue-admin-chart.git#install依赖npmi#本地开发启动项目npmrunserve克隆项目访问Gitee仓库#克隆项目gitclone-bhttps://gitee.com/todoadmin/vue-admin-chart.git#安装依赖npmi#本地开发启动项目npmrunserve

上一篇：Vuex+vuex-persistedstate数据持久化

下一篇：Vue-nextTick原理

vue-admin-chart实现管理后台登录页面，axios请求restful接口，CompositionAPI风格相关文章

最新推荐

猜你喜欢