后台管理系统-------登录功能@zj-zhangjie

后台管理系统-------登录功能实现（element-ui）

登录页面代码（login）:

<template><div class="login"><el-form:model="userinfo":rules="loginRules"label-position="right"class="el_box"label-width="60px"><el-form-item label="账号:" class="el_username" prop="username"><el-input v-model="userinfo.username"></el-input></el-form-item><el-form-item label="密码:" class="el_password" prop="username"><el-input type="password" v-model="userinfo.password"></el-input></el-form-item><el-button type="primary" class="el_login" @click.prevent="login">登录</el-button></el-form></div>
</template><script>
//引入封装好的api登录接口
import { login } from "../http/api";
export default {name: "login",data() {return {userinfo: {username: "",password: ""},loginRules: {username: [{ required: true, message: "请输入用户名", trigger: "blur" },{ min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }],password: [{ required: true, message: "请输入密码", trigger: "blur" },{ min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }]}};},methods: {//   登录async login() {const res = await login(this.userinfo);//   console.log(res);//   结构赋值const {meta: { msg, status }} = res.data;//   判断code值if (status === 200) {//   结构赋值tokenconst { token } = res.data.data;// 本地存储tokenlocalStorage.setItem("token", token);//赋值redirect表示的是被路由拦截拦下来的页面const { redirect } = this.$route.query;//如果直接登录，没有redirect,成功后直接跳转到homeif (!redirect) {this.$router.push({ name: "Home" });} else {this.$router.push({ path: redirect });}// 成功提示this.$message({message: msg,type: "success"});} else {//   失败提示this.$message({message: msg,type: "error"});}}}
};
</script><style lang="scss" scoped>
.login {width: 100%;height: 836px;background: #2a4c6b;.el_box {background: white;position: absolute;top: 30%;left: 40%;text-align: center;width: 400px;height: 300px;border-radius: 5px;margin: 0 auto;.el_username {margin-top: 70px;width: 80%;margin-left: 25px;}.el_password {margin-top: 20px;width: 80%;margin-left: 25px;}.el_login {width: 30%;margin-top: 20px;}}
}
</style>

api接口封装：(两个文件 request.js和api.js文件)

request.js: 设置axios拦截

import axios from "axios"const service = axios.create({baseURL: "https://www.liulongbin.top:8888/api/private/v1",timeout: 3000
})// 请求拦截
axios.interceptors.request.use(function (config) {return config;
}, function (error) {return Promise.reject(error)
})// 响应拦截
axios.interceptors.response.use(function (response) {return response;
}, function (error) {return Promise.reject(error)
});
export default service;

api.js：项目中的业务接口

import request from "./request"// 登录接口
export function login(data){console.log(data)return request({url:"/login",method:"POST",data})
}

在main.js里面设置全局路由守卫：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import axios from "axios";
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.axios = axios;// 全局路由守卫
router.beforeEach((to, from, next) => {// console.log("from:", from);// console.log("to:", to);if (to.meta.auth) {// 本地获取tokenconst token = localStorage.getItem('token')// 判断token是否存在if (!token) {next({name: 'Login',// 返回上次跳转的路由query: { redirect: to.fullPath }})} else {next()}} else {next();}});new Vue({router,store,render: h => h(App)
}).$mount("#app");

router 路由配置：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue"Vue.use(VueRouter);const routes = [{path: "/",name: "Login",component: Login},{path: "/home",name: "Home",meta:{auth:true},component: Home}];const router = new VueRouter({routes
});export default router;

登录的基本逻辑操作就是这样了

后台管理系统-------登录功能@zj-zhangjie相关推荐

后台管理系统——登录功能
登录功能 1. 根据UI图完成页面编写页面支持登录方式账号登录包括用户名, 密码 ,图形验证码 ,短信验证码账号登录形式为表单 // html <template><el-fo ...
电商后台管理系统登录功能前端实现
目录一登录概述 1 登录业务流程 2 登录业务的相关技术点 3 token 和 cookie/session 一般选型策略 4 路由导航守卫控制访问权限 5 退出功能实现原理二登录-- tok ...
python后台框架_我的第一个python web开发框架（14）——后台管理系统登录功能
27 28 29 30 31 32 33  34 35 36 37 38 39  40 41 42 43 44 45 46 47 style="width:150px;"> ...
电商管理系统-登录功能
电商管理系统-登录功能一.登录逻辑 1.在登录页面输入账号和密码进行登录,将数据发送给服务器 2.服务器返回登录的结果,登录成功则返回数据中带有token 3.客户端得到token并进行保存,后续的 ...
【Vue 实战项目】后台管理系统登录页详解附源码
提示:前端查漏补缺,仅代表个人观点. 文章目录一.先看效果图二.实战步骤 1. 创建项目 2. 引入库 3. 登录页关键代码三.页面源代码总结提示:项目源代码除了登录页面还有动态路由一.先 ...
神仙接私活神器，好用的后台管理系统，功能完整，代码结构清晰，强推
今天,推荐一个后台管理系统.我第一次使用就有点上头,爱不释手,必须要推荐给大家. 上次是谁要的后台管理系统啊,我帮你找到了. 这是我目前见过最好的后台管理系统.功能完整,代码结构清晰.值得推荐.
多人博客管理系统登录功能
多人博客管理系统目标能够知道搭建项目环境的步骤能够理解模板优化熟悉登录功能的思路逻辑知道密码为什么需要加密知道cookie跟session是什么能够参照笔记写出登录功能功能需求博客内 ...
论文管理系统(登录功能)
目录一.后端部分 1.1 实体类 1.2 UserMapper类 1.3 Service层接口实现类 1.4 controller层 1.5 拦截器二.前端部分效果图源码如下代码讲解准 ...
Web Storage知识点梳理，模拟后台管理系统部分功能
这货是啥? Web Storage又称网页数据存储: 当我们在制作网页时会希望记录一些信息,例如常见的用户登陆状态,计数器或- 者小游戏,但是又不希望用到数据库,就可以利用Web Storage技术将 ...

后台管理系统-------登录功能@zj-zhangjie

后台管理系统-------登录功能实现（element-ui）

登录页面代码（login）:

api接口封装：(两个文件 request.js和api.js文件)

在main.js里面设置全局路由守卫：

router 路由配置：

后台管理系统-------登录功能@zj-zhangjie相关推荐

最新文章

热门文章