后台管理系统-登录页面

对于element-ui的修改：完成登录业务

静态组件完成

  <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

点击事件为handleLogin，在methods中实现函数调用

//登录业务handleLogin() {//验证表单的两个元素的规则是否符合规则this.$refs.loginForm.validate(valid => {if (valid) {this.loading = true//派发一个action，带着用户名和密码this.$store.dispatch('user/login', this.loginForm).then(() => {//登录成功，进行路由跳转this.$router.push({ path: this.redirect || '/' })this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})}

在store中派发’user/login’，携带this.loginForm表单数据，到store/modules/users.js中进行处理登录业务

import { login, logout, getInfo } from '@/api/user'//处理登录业务async login({ commit }, userInfo) {//从userInfo获取用户密码 const { username, password } = userInfolet result = await login({ username: username.trim(), password: password })//登录请求，调用@/api/user中的接口if(result.code==20000){//若返回为20000(使用mock接口)commit('SET_TOKEN', result.data.token)//提交tokensetToken(result.data.token)//本地存储cookiereturn 'ok'}else{return Promise.reject(new Error('faile'))}},

书写API（换成真实的接口）

在@/api/user中，展示url

import request from '@/utils/request'export function login(data) {return request({url: '/admin/acl/index/login',method: 'post',data})
}

axios二次封装

在@/utils/request中，修改axios封装

换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)

在vue.config.js中修改配置文件，进行proxy代理

devServer: {port: port,open: true,overlay: {warnings: false,errors: true},//配置代理跨域proxy:{'/dev-api':{target:'http://39.98.123.211:8170',pathRewrite:{'^/dev-api':''},}}},

后台管理系统-登录页面相关推荐

React后台管理系统-登录页面
登录页面 <div className="col-md-4 col-md-offset-4"> <div className=&qu ...
【Vue 实战项目】后台管理系统登录页详解附源码
提示:前端查漏补缺,仅代表个人观点. 文章目录一.先看效果图二.实战步骤 1. 创建项目 2. 引入库 3. 登录页关键代码三.页面源代码总结提示:项目源代码除了登录页面还有动态路由一.先 ...
后台管理系统-------登录功能@zj-zhangjie
后台管理系统-------登录功能实现(element-ui) 登录页面代码(login): <template><div class="login">&l ...
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
淘淘商城第20讲——展示后台管理系统首页面
我们前面做了那么多准备工作不是白做的,大家如果坚持到现在,真的值得给自己一个拥抱!现在我们就来开始着手处理后台管理系统. 首先,大家需要整合淘淘商城的后台管理系统静态页面,你可能想问这些静态页面怎么获 ...
后台管理系统——登录功能
登录功能 1. 根据UI图完成页面编写页面支持登录方式账号登录包括用户名, 密码 ,图形验证码 ,短信验证码账号登录形式为表单 // html <template><el-fo ...
用ASP.NET实现简单的超市管理系统-登录页面
一. 任务描述 1. 使用Asp.NET技术,完成超市商品管理系统 2. 开发工具:VS2010 3. 数据库:SQL Server 2008 4. 功能模块:登录. ...
Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录主页 #left>a:nth-child(4) {} 登录页主页 #left& ...
搭建Vue3 后台管理框架 —— 登录页面
声明本文章只是自己搭建后台框架得一个笔记,不作为任何项目搭建指南,大家看着乐呵乐呵就行. 之前把项目简单配置了依赖路由算是基础打出来了细节肯定还需要打磨,然后就是脸面(登录页面),各种疯狂查询搜 ...

后台管理系统-登录页面

后台管理系统-登录页面相关推荐

最新文章

热门文章