Vue标准后台界面及登录功能流程（2）

安装完依赖后，咱们接着下一步。

一.在根目录创建个文件 .env.development

如果是本地api则使用：

VUE_APP_BASE_API=http://localhost:3000

如果是使用线上接口则用：等于你线上的地址

VUE_APP_BASE_API=

二.封装axios

新增src/utils/request.js文件

import axios from "axios";const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000,
});service.interceptors.response.use((response) => {return response.data;
});export default service;

三.配置全局过滤器

新建src/filters/index.js文件

import moment from 'moment';/*** "Fri Dec 10 2021 01:01:49 GMT+0800 (China Standard Time)" => "2021年12月10日凌晨1点01分"* @param {number} num*/
export function dateFormat(value) {if (!value) {return "";}moment.locale('zh-cn');return moment(value).format('LL');
}/*** 10000 => "10,000"* @param {number} num*/
export function thousandFormat(num) {const result = (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));return result + '元';

接下来就是我们的css文件啦！我自己的css，需要可以复制哟！

新建src/styles/common.scss文件

a {color: #1f99b0;text-decoration: none;
}.clear:after {display: block;content: "clear";height: 0;clear: both;overflow: hidden;visibility: hidden;
}

新建src/styles/element-ui.scss文件

.el-menu-item.is-active {color: #1f99b0 !important;
}.el-switch.is-checked .el-switch__core {border-color: #1f99b0 !important;background-color: #1f99b0 !important;
}.el-button--primary {color: #fff !important;background-color: #1f99b0 !important;border-color: #1f99b0 !important;
}.el-menu-item:focus, .el-menu-item:hover {background-color: #e1f0f0 !important;
}.el-submenu__title:hover {background-color: #e1f0f0 !important;
}

新建src/styles/layouts.scss文件

html, body {height: 100%;margin: 0;
}.el-container, .el-aside, .el-aside .el-col, .el-menu {height: 100%;
}.el-header, .el-footer {background-color: #e1f0f0;color: #333;height: 60px;line-height: 60px;
}.el-header {.logo {height: 40px;margin-top: 10px;float: left;}h1 {margin: 0 0 0 20px;font-size: 18px;font-weight: normal;float: left;line-height: 60px;;}
}.el-footer {text-align: center;
}.el-aside {background-color: #e1f0f0;color: #333;line-height: 200px;
}.el-main {color: #333;overflow: visible;
}

新建src/styles/index.scss文件

@import './layouts.scss';
@import './common.scss';
@import './element-ui.scss';

四.后台首页

<template><div class="home"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>仪表盘</el-breadcrumb-item></el-breadcrumb><el-divider></el-divider><el-card class="box-card"><div slot="header" class="clearfix">标题</div><div class="info">唧唧复唧唧，木兰开飞机。</div></el-card></div>
</template><script>
export default {name: "Home"
};
</script><style scoped lang="scss">
.info {font-size: 14px;
}
</style>

五.布局模板

新建src/components/layouts/Aside.vue组件

<template><el-aside width="200px"><el-col><el-menu:router="true"default-active="/"class="el-menu-vertical-demo"><el-menu-item index="/"><i class="el-icon-pie-chart"></i><span slot="title">仪表盘</span></el-menu-item><el-submenu index="article_manage"><template slot="title"><i class="el-icon-document"></i><span>新闻管理</span></template><el-menu-item index="/articles">新闻</el-menu-item><el-menu-item index="/articles/trash">回收站</el-menu-item></el-submenu><el-menu-item index="/users"><i class="el-icon-user"></i><span slot="title">用户管理</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span slot="title">系统设置</span></el-menu-item></el-menu></el-col></el-aside>
</template>

Vue标准后台界面及登录功能流程（2）相关推荐

一步步带你做vue后台管理框架(三)——登录功能
系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 ...
3.1 Vue实战--电商后台管理系统的登录功能补充了加密功能
1. 原来功能的不足当登录成功之后,打开调试面板,找到"网络",在请求体中会看到密码和用户名,这是不安全的.这是因为:http协议是明文传输,只要别人一抓包就可以获取到传输的报文 ...
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...
后台管理系统的登录功能
1.完成登录功能 1.1 表单重置第一步:给表单添加ref<el-form ref="loginForm"></el-form>第二步:给重置按钮添加事件 ...
Vue后台管理系统实现登录功能
登录页面 vuex router.js main.js设置全局退出功能删除token 清空localStorage 显示用户名键盘事件 ** 记住密码操作( 读存取cookie与调后端数据无关提 ...
【愚公系列】2022年01月 Django商城项目13-登录界面-QQ登录功能实现
文章目录前言 1.QQ互联开发者申请 2.QQ互联应用申请 3.网站对接QQ登录一.django实际对接流程 1.创建抽象模型类 2.创建QQ用户模型类 3.注册应用 4.配置QQ登录信息 5.登 ...
vue通用后台管理（登录页面）
1.这里是一个form表单,有两个表单域一个是用户名,一个是密码 ,还有一个底部的 button 按钮,点击button会将表单的内容提交到我们的后端. 2.找到router下的index.js ...
vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...
前言接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...

Vue标准后台界面及登录功能流程（2）

Vue标准后台界面及登录功能流程（2）相关推荐

最新文章

热门文章