电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

springboot+vue實(shí)現(xiàn)登錄功能

瀏覽:11日期:2022-09-29 11:38:10

本文實(shí)例為大家分享了springboot+vue實(shí)現(xiàn)登錄功能的具體代碼,供大家參考,具體內(nèi)容如下

目錄結(jié)構(gòu)

springboot+vue實(shí)現(xiàn)登錄功能

前端端口:8080后端端口:8900

login.vue

<template> <div class='login_content'><!-- 登錄塊 --><div class='login_box'> <!-- 頭像 --> <div class='avatar_box'><img src='http://www.hdgsjgj.cn/assets/logo.png'/> </div> <!-- 表單區(qū)域 --> <el-form ref='loginFormRef' :rules='loginRules' :model='loginForm' label-width='0'><!-- 用戶名 --><el-form-item prop='username'> <el-input v-model='loginForm.username' prefix-icon='iconfont icon-denglu'></el-input></el-form-item><!-- 密碼 --><el-form-item prop='password'> <el-input v-model='loginForm.password' prefix-icon='iconfont icon-mima' type='password'></el-input></el-form-item><!-- 按鈕 --><el-form-item class='btns'> <el-button type='primary' @click='login'>提交</el-button> <el-button type='info' @click='resetLoginFrom'>重置</el-button></el-form-item> </el-form></div> </div></template><script> export default {data(){ return {// 表單數(shù)據(jù)loginForm:{ username:'admin', password:'123456'},// 驗(yàn)證對(duì)象loginRules:{ // 校驗(yàn)用戶名 username:[{ required: true, message: ’用戶名為必填項(xiàng)’, trigger: ’blur’ },{ min: 5, max: 12, message: ’長度在 5 到 12 個(gè)字符’, trigger: ’blur’ } ], // 校驗(yàn)密碼 password:[{ required: true, message: ’用戶密碼為必填項(xiàng)’, trigger: ’blur’ },{ min: 6, max: 10, message: ’長度在 6 - 10 個(gè)字符’, trigger: ’blur’ } ],}, }},methods:{ // 重置表單內(nèi)容 resetLoginFrom(){this.$refs.loginFormRef.resetFields(); }, // 登錄方法 login(){// 1.表單驗(yàn)證this.$refs.loginFormRef.validate(async valid =>{ if(!valid){return ; } // 表單驗(yàn)證成功 const {data:res} = await this.$http.post('login',this.loginForm) // 訪問后臺(tái)地址 console.log(res) if( res.flag == 'ok'){this.$message.success('操作成功');// 跳轉(zhuǎn)到home頁面this.$router.push({path:'/home'});// 存儲(chǔ)user對(duì)象window.sessionStorage.setItem('user',res.user); }else{this.$message.error('操作失敗') }}); }} }</script><style lang='less' scoped> .login_content{background-color: #2b4b6b;height: 100%; } .login_box{height: 300px;width: 450px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);.avatar_box{ width: 130px; height: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform:translate(-50%,-50%); background-color: #0ee; img{width: 100%;height: 100%;border-radius: 50%;background-color: #0ee; }} } .btns{display: flex;justify-content: flex-end; } .login_form{position: absolute;buttom:0%;width: 100%;padding: 0 10px;box-sizing: border-box;margin-top: 120px; }</style>

Home.vue

<template> <div><el-button type='info' @click='logout'>安全退出</el-button> </div></template><script> export default {methods:{ logout(){// 清楚sessionwindow.sessionStorage.clear();this.$router.push('/login'); }} }</script><style scoped></style>

index.js

import Vue from ’vue’import VueRouter from ’vue-router’// 引入login組件import Login from ’../components/login.vue’import Home from ’../components/Home.vue’Vue.use(VueRouter)const routes = [ {path:'/',redirect:'/login' }, {path:'/login',component:Login }, {path:'/home',component:Home },]const router = new VueRouter({ routes})// 掛載路由導(dǎo)航守衛(wèi)router.beforeEach((to,from,next)=>{ // to將要訪問 // from 從哪訪問 // next 接著干next(url)重定向url上,繼續(xù)訪問to路徑 if(to.path==’/login’) return next(); // 獲取user const userFlag = window.sessionStorage.getItem('user'); // 無值返回登錄頁 if(!userFlag) return next(’/login’); // 符合要求,放行 next();})export default router

main.js

import Vue from ’vue’import App from ’./App.vue’import router from ’./router’import ’./plugins/element.js’// 添加全局樣式import ’./assets/css/global.css’// 引入icfontimport ’./assets/font/iconfont.css’// 導(dǎo)入aioxsimport axios from ’axios’// 掛載axiosVue.prototype.$http = axios// 設(shè)置訪問根路徑axios.defaults.baseURL='http://localhost:9000'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$mount(’#app’)

后臺(tái)實(shí)現(xiàn)

@RestControllerpublic class LoginController { @Autowired UserDao userDao; @PostMapping('login') public String login(@RequestBody User user){String flag = 'fail';User user1 = userDao.getUserByMessage(user.getUsername(),user.getPassword());System.out.println('user'+user1);if(user1!=null){ flag='ok';}Map<String , Object> map = new HashMap<>();map.put('flag',flag);map.put('user',user);String param= JSON.toJSONString(map);return param; }}

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Spring
相關(guān)文章:
主站蜘蛛池模板: 薄壁轴承-等截面薄壁轴承生产厂家-洛阳薄壁精密轴承有限公司 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 深圳货架厂家_金丽声精品货架_广东金丽声展示设备有限公司官网 | MVR蒸发器厂家-多效蒸发器-工业废水蒸发器厂家-康景辉集团官网 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 渣土车电机,太阳能跟踪器电机,蜗轮蜗杆减速电机厂家-淄博传强电机 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 高精度-恒温冷水机-螺杆式冰水机-蒸发冷冷水机-北京蓝海神骏科技有限公司 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 淘气堡_室内儿童乐园_户外无动力儿童游乐设备-高乐迪(北京) | 代理记账_免费注册公司_营业执照代办_资质代办-【乐财汇】 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 高空重型升降平台_高空液压举升平台_高空作业平台_移动式升降机-河南华鹰机械设备有限公司 | 匀胶机旋涂仪-声扫显微镜-工业水浸超声-安赛斯(北京)科技有限公司 | 法兰连接型电磁流量计-蒸汽孔板节流装置流量计-北京凯安达仪器仪表有限公司 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 塑料检查井_双扣聚氯乙烯增强管_双壁波纹管-河南中盈塑料制品有限公司 | 代做标书-代写标书-专业标书文件编辑-「深圳卓越创兴公司」 | 艾乐贝拉细胞研究中心 | 国家组织工程种子细胞库华南分库 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 建筑工程资质合作-工程资质加盟分公司-建筑资质加盟 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 工业硝酸钠,硝酸钠厂家-淄博「文海工贸」 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 手术室净化厂家_成都实验室装修公司_无尘车间施工单位_洁净室工程建设团队-四川华锐16年行业经验 | 氮化镓芯片-碳化硅二极管 - 华燊泰半导体 | 洗石机-移动滚筒式,振动,螺旋,洗矿机-青州冠诚重工机械有限公司 | 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 不锈钢列管式冷凝器,换热器厂家-无锡飞尔诺环境工程有限公司 | 上海赞永| 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 钢格板|热镀锌钢格板|钢格栅板|钢格栅|格栅板-安平县昊泽丝网制品有限公司 |