后台登录界面和首页

已于 2022-09-03 09:36:42 修改
阅读量451 收藏
点赞数
分类专栏： 前端 # admin 文章标签： javascript vue.js 前端
于 2022-09-02 15:56:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50960310/article/details/126656497
版权

请添加图片描述
router 管理组件 在index.vue
api 管理 接口，获取后暴露出来 $http
store vuex 统一管理数据状态 user 和 menu $store.state.user.info
app.vue 为主业渲染
login.vue 为注册页渲染

目录标题

logoin

webpack 配置

var path = require('path')
var webpack = require('webpack')

module.exports = {
	entry:{
		'main': './src/main.js',
		'login': './src/login.js'
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		publicPath: '/dist/',
		filename: '[name].js'
	},

进来打包的
和打包出去的, to dir
/dist
npm run build

logo.vue with element

logo.js import element-ui

import Vue from 'vue'
import resource from 'vue-resource'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import login from './login.vue'

Vue.use(resource)
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(login)
})

字体格式的配置
weppack ttf

{
				test: /\.(png|jpg|gif|svg|ttf|woff)$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]?[hash]'
				}
			}

<template>
	<div id="">
		<div style="width: 500px;margin: 0 auto;padding-top:200px">
			<el-form ref="form" :model="login" label-width="80px">
				<el-form-item label="账号">
					<el-input v-model="login.user"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="login.pass"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {http,login} from './api/api.js'
	export default {
		data() {
			return {
				login: {
					user: '',
					pass: ''
				}
			}
		},
		methods: {
			//登录事件
			onSubmit() {
				//最简单的一个验证
				if(this.login.user ==''){
					this.$message.error('请输入账号');
				}else if(this.login.pass ==''){
					this.$message.error('请输入密码');
				}else{
					//登录的ajax
					this.$http.post(http+login,{
						username:this.login.user,
						password:this.login.pass
					},{emulateJSON:true}).then((data)=>{
						console.log(data)
						if(data.data.msg == '用户名或密码错误'){
							this.$message.error('用户名或密码错误');
						}else if(data.data.msg == '成功'){
							localStorage.token = data.data.data.token
							location.href = './'
						}
					},(err)=>{
						this.$message.error('登录失败');
					})
				}
			}
		}
	}
</script>

<style>
 	*{
 		margin: 0;
 		padding: 0;
 	}
	html,body{
		width: 100%;
		height: 100%;
	}
	body{
		background: url(./assets/1.jpg);
		background-size: 100% auto;
	}
</style>

登录交互

element

alert 提示使用

交互逻辑

输入为空
输入错误
输入校验正确
token 正确
跳转到首页开始

methods: {
			//登录事件
			onSubmit() {
				//最简单的一个验证
				if(this.login.user ==''){
					this.$message.error('请输入账号');
				}else if(this.login.pass ==''){
					this.$message.error('请输入密码');
				}else{
					//登录的ajax
					this.$http.post(http+login,{
						username:this.login.user,
						password:this.login.pass
					},{emulateJSON:true}).then((data)=>{
						console.log(data)
						if(data.data.msg == '用户名或密码错误'){
							this.$message.error('用户名或密码错误');
						}else if(data.data.msg == '成功'){
							localStorage.token = data.data.data.token
							location.href = './'
						}
					},(err)=>{
						this.$message.error('登录失败');
					})
				}
			}
		}
	}

登录的插件 ajax

vue-resource 记录 package.json 记录使用的插件

api.js 统一管理 接口

判断用户登录状态

main,js 全局

import Vue from 'vue'
import resource from 'vue-resource'
import echarts from 'echarts'
import store from './store/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/router.js'
import App from './App.vue'

//把echarts 添加到vue实例中
Vue.prototype.$echarts = echarts

Vue.use(resource)
Vue.use(ElementUI);

//判断有没有登录

//拦截器
Vue.http.interceptors.push((request, next) => {
	//设置token请求头
	if(localStorage.token) {
		//设置token请求头
		Vue.http.headers.common['Authorization'] = localStorage.token
	} else {
		location.href = './login.html'
	}
	next((response)=>{
		if(response.status == 401){
			location.href = './login.html'
		}
		return response
	})
})

new Vue({
	el: '#app',
	store,
	router,
	render: h => h(App)
})

根据后端接口请求到的token

container 布局容器

<template>
	<div id="app">
		<el-container>
			<el-aside style="width: auto;">
				<!--导航-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" v-if="$store.state.menu.menu && $store.state.user.info" router>
					<el-menu-item index="/">
						<i class="el-icon-location"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path">
						<template slot="title">
							<i :class="icontype[i.id]"></i>
							<span slot="title">{{i.name}}</span>
							<!--{{i.name}}{{i.path}}-->
						</template>
						<el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1">
							<i :class="icontype[a.id]"></i>
							<span slot="title">{{a.name}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
				<!--导航结束-->
			</el-aside>
			<el-main v-if="$store.state.user.info&&$store.state.user.menulist">
				<div style="height: 50px;line-height: 50px;background:#ccc;">
					<el-row type="flex" class="row-bg" justify="center">
						<el-col :span="12">
							<div>
								<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;padding-top:5px;padding-left:10px">
									<el-radio-button :label="false">展开</el-radio-button>
									<el-radio-button :label="true">收起</el-radio-button>
								</el-radio-group>
							</div>
						</el-col>
						<el-col :span="12">
							<div style="text-align: right;padding-right: 40px;">
								当前账号：
								<router-link to="/info" style="color: deepskyblue;">
									{{$store.state.user.info.profile.name}}	
								</router-link>
							</div>
						</el-col>
					</el-row>
				</div>
				<div style="padding: 20px;background:rgba(0,0,0,0.3);min-height:600px;position: relative;">
						<router-view></router-view>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

navigation data load

app.vue

<script>
	import { http, listForRouter, info,menulist} from './api/api.js'
	export default {
		name: 'app',
		data() {
			return {
				isCollapse: false,
				icontype: {
					1: 'el-icon-setting',
					2: 'el-icon-tickets',
					4: 'el-icon-user',
					12: 'el-icon-s-custom',
					21: 'el-icon-s-check',
					17: 'el-icon-menu',
					22: 'el-icon-collection',
					41: 'el-icon-s-order',
					46: 'el-icon-document-add',
					42: 'el-icon-document',
					45: 'el-icon-folder-opened'
				}
			}
		},
		mounted() {
			this.getmenu()
			this.getinfo()
			this.getlist()
		},
		methods: {
			//获取操作功能信息
			getlist(){
				this.$http.get(http + menulist).then((data) => {
					var data = data.data.data
					var json = {}
					//循环父级
					for(var i=0;i<data.length;i++){
						var child = data[i].children
						//循环子级
						for(var a=0;a<child.length;a++){
							this.$set(json,child[a].url,child[a].children)
						}
					}
					//存储到vuex 中
					this.$store.commit('setmenulist',json)
				}, (err) => {
					this.$message.error(err.data.message);
				})
			},
			//获取导航
			getmenu() {
				this.$http.get(http + listForRouter).then((data) => {
					//修改导航状态树
					this.$store.commit('setmenu', data.data.data)
				}, (err) => {
					this.$message.error(err.data.message);
				})
			},
			//获取当前账号信息
			getinfo() {
				this.$http.get(http + info).then((data) => {
					//修改账号状态树
					this.$store.commit('setinfo', data.data.data)
				}, (err) => {
					this.$message.error(err.data.message);
				})
			}
		}
	}
</script>

vuex管理

main.js store

import Vue from 'vue'
import resource from 'vue-resource'
import echarts from 'echarts'
import store from './store/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/router.js'
import App from './App.vue'

//把echarts 添加到vue实例中
Vue.prototype.$echarts = echarts

Vue.use(resource)
Vue.use(ElementUI);

//判断有没有登录

//拦截器
Vue.http.interceptors.push((request, next) => {
	//设置token请求头
	if(localStorage.token) {
		//设置token请求头
		Vue.http.headers.common['Authorization'] = localStorage.token
	} else {
		location.href = './login.html'
	}
	next((response)=>{
		if(response.status == 401){
			location.href = './login.html'
		}
		return response
	})
})

new Vue({
	el: '#app',
	store,
	router,
	render: h => h(App)
})

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

export default {
	state:{
		menu:''
	},
	mutations:{
		//修改导航
		setmenu(state,data){
			state.menu = data
		}
	}
}

menu.js

//获取导航
			getmenu() {
				this.$http.get(http + listForRouter).then((data) => {
					//修改导航状态树
					this.$store.commit('setmenu', data.data.data)
				}, (err) => {
					this.$message.error(err.data.message);
				})
			},

导航icon

先console 每个栏目名的 id 给对应id 绑定 icon

<el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path">
						<template slot="title">
							<i :class="icontype[i.id]"></i>
							<span slot="title">{{i.name}}</span>
							<!--{{i.name}}{{i.path}}-->
						</template>
						<el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1">
							<i :class="icontype[a.id]"></i>
							<span slot="title">{{a.name}}</span>
						</el-menu-item>
					</el-submenu>

账号权限

//获取当前账号信息
			getinfo() {
				this.$http.get(http + info).then((data) => {
					//修改账号状态树
					this.$store.commit('setinfo', data.data.data)
				}, (err) => {
					this.$message.error(err.data.message);
				})
			}

api,js 获取后端接口

创建 user.js

export default {
	state:{
		info:'',
		menulist:''
	},
	mutations:{
		//修改当前账号信息
		setinfo(state,data){
			state.info = data
		},
		//设置功能权限
		setmenulist(state,data){
			state.menulist = data
		}
	}
}

disabled

<template>
	<div id="app">
		<el-container>
			<el-aside style="width: auto;">
				<!--导航-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" v-if="$store.state.menu.menu && $store.state.user.info" router>
					<el-menu-item index="/">
						<i class="el-icon-location"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path">
						<template slot="title">
							<i :class="icontype[i.id]"></i>
							<span slot="title">{{i.name}}</span>
							<!--{{i.name}}{{i.path}}-->
						</template>
						<el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1">
							<i :class="icontype[a.id]"></i>
							<span slot="title">{{a.name}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
				<!--导航结束-->
			</el-aside>
			<el-main v-if="$store.state.user.info&&$store.state.user.menulist">
				<div style="height: 50px;line-height: 50px;background:#ccc;">
					<el-row type="flex" class="row-bg" justify="center">
						<el-col :span="12">
							<div>
								<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;padding-top:5px;padding-left:10px">
									<el-radio-button :label="false">展开</el-radio-button>
									<el-radio-button :label="true">收起</el-radio-button>
								</el-radio-group>
							</div>
						</el-col>
						<el-col :span="12">
							<div style="text-align: right;padding-right: 40px;">
								当前账号：
								<router-link to="/info" style="color: deepskyblue;">
									{{$store.state.user.info.profile.name}}	
								</router-link>
							</div>
						</el-col>
					</el-row>
				</div>
				<div style="padding: 20px;background:rgba(0,0,0,0.3);min-height:600px;position: relative;">
						<router-view></router-view>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
廾匸_247
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
九款好看的后台管理系统登录模板
qq_19522625的博客
02-13 1万+
九款好看的后台管理系统登录模板，可以直接在项目中使用
后台管理系统【登录页面】
weixin_62765236的博客
10-06 1758
后台管理系统【登录页面】
后台登录功能开发 -- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖（二）
HHX_01的博客
06-21 1559
为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚，文章中如果有记录错误，欢迎读者朋友们批评指正。（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）
后台管理系统-登录页面
weixin_43820675的博客
10-14 1116
在store中派发’user/login’，携带this.loginForm表单数据，到store/modules/users.js中进行处理登录业务。在vue.config.js中修改配置文件，进行proxy代理。在@/utils/request中，修改axios封装。在@/api/user中，展示url。，在methods中实现函数调用。
后台系统实现登录登出以及过滤器功能
helloyuanye的博客
07-11 599
后台系统实现登录登出以及过滤器功能
非常好看后台登陆界面
01-24
同时，"后台登陆界面"意味着这是一个供系统管理员或内部用户使用的登录页面，因此它需要具备安全性、易用性和功能性，如输入验证、错误提示、记住密码、多因素认证等特性。 【标签】"后台登陆界面 java 后台 登 ...
18种后台登陆界面HTML源码
03-02
在本资源包中，"18种后台登陆界面HTML源码" 提供了多种设计精美的后台登录页面模板，这些模板对于开发者来说是非常宝贵的参考资料，无论是初学者还是经验丰富的专业人员，都能从中受益。 后台登录界面是用户进入...
博客登陆界面后台phpcms模板
04-01
【描述】：“博客登陆界面后台phpcms模板” 描述进一步明确了这个模板是用于博客后台的登录界面。在网站管理中，后台通常指的是管理员使用的部分，用来发布、编辑和管理网站内容。登录界面是后台系统的第一道关卡，...
HTML5动态后台登陆界面
07-07
HTML5动态后台登陆界面是一种利用HTML5新特性构建的交互式、动感十足的登录页面，旨在为用户提供更吸引人的用户体验。HTML5作为现代网页开发的标准，引入了许多增强网页功能的新特性，如离线存储、拖放功能、媒体...
后台系统登录一般流程
qq_33348135的博客
02-25 7863
登录整个流程 1.异步请求后端得到验证码(生成验证码的答案后存入redis,uuid作为key),验证码图片以base64的编码和uuid返回前端 2.根据用户名和密码、验证码值、uuid传递到后端，为了效率，先判断验证码值是否正确，正确的话，再根据用户名和密码去数据库进行匹配，匹配时，查询用户表、部门表、用户与角色的关联表、角色表获取当中的有用字段信息,再使用用户id去查询权限表、角色权限关联表、用户角色关联表、角色表（因其中功能涉及角色、权限状态） 返回权限标识如（system:role:edit多个的
后台管理系统——登录功能
socaicaicaicai的博客
11-18 2842
登录功能 1. 根据UI图完成页面编写 页面支持登录方式 账号登录包括用户名， 密码 ，图形验证码 ，短信验证码 账号登录形式为表单 // html <template> <el-form class="loginForm" :model="loginForm" :rules="loginRules" ref="loginForm" auto-complete="on"> <!-- 此处为后台管理系统的logo --> <div cl
内容管理系统——后台登录
nyu0815的博客
06-24 883
内容管理系统”案例分为前台和后台。前台的功能包括用户登录与注册、内容列表、内容详细页、广告展示、评论和热门内容等。后台的功能包括管理员的登录、栏目内容和广告的增删查改等。下面将对后台登录这一功能进行介绍。后台登录运用了Ajax交互：当用户填写完登录表单后，使用Ajax将请求的代码进行封装，使页面不发生跳转，对用户的体验度也提高了许多。后台登录的功能十分简单，但相对于前台登录来说还有些复杂，因为涉及的验证很多。但至少我完成了这些。运行也没问题。
【java】【项目实战】[外卖二]后台登录与退出功能实现
最新发布
春天的波菜
08-25 877
实现管理系统的登录功能开发，包含需求分析、代码开发、功能测试。
VUE通用后台管理系统（一）登录
qq_45600228的博客
07-13 6684
VUE通用后台管理系统（一）
vue路由权限和按钮权限的实现
周金鱼啊
04-15 1781
一 菜单路由权限 1.1前端路由配置表 1.2后端数据返回 1.3 拿到数据后存到vuex 1.4 扁平化的目的是为了跳转路由时进行对比权限 //扁平化方法 flatten(data) { return data.reduce((arr,{name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) => arr.concat([{name,id,resourceType,dimen.
简单服务器网站后台登入过程
m0_69048853的博客
10-16 3160
简单服务器网站后台登入过程
后台管理系统：登录功能的实现
小羽苏的博客
10-30 2083
之前完成了项目初始化以及第三方工具的引入，现在开始登录功能的实现。
前后端分离开发——登录页面（后端部分）
weixin_52880572的博客
11-30 3184
前后端分离开发——登录页面制作（后端部分）
后台管理项目--登录页面
qq_63322025的博客
10-22 842
后台管理项目--登录页面
登陆界面的后台代码
05-25
以下是一个简单的登陆界面后台代码示例，使用 PHP 和 MySQL 数据库进行验证和授权： ```php session_start(); // 连接数据库 $servername = "localhost"; $username = "root"; $password = ""; $dbname = "myDB";...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值