springboot+vue實(shí)現(xiàn)登錄功能
本文實(shí)例為大家分享了springboot+vue實(shí)現(xiàn)登錄功能的具體代碼,供大家參考,具體內(nèi)容如下
目錄結(jié)構(gòu)
前端端口:8080
后端端口:8900
login.vue
<template> <div class="login_content"> <!-- 登錄塊 --> <div class="login_box"> <!-- 頭像 --> <div class="avatar_box"> <img src="../assets/logo.png"/> </div> <!-- 表單區(qū)域 --> <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" 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: '長(zhǎng)度在 5 到 12 個(gè)字符', trigger: 'blur' } ], // 校驗(yàn)密碼 password:[ { required: true, message: '用戶密碼為必填項(xiàng)', trigger: 'blur' }, { min: 6, max: 10, message: '長(zhǎng)度在 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(){ // 清楚session window.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' // 引入icfont import './assets/font/iconfont.css' // 導(dǎo)入aioxs import axios from 'axios' // 掛載axios Vue.prototype.$http = axios // 設(shè)置訪問根路徑 axios.defaults.baseURL="http://localhost:9000" Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
后臺(tái)實(shí)現(xiàn)
@RestController public 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; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- springboot+vue+elementsUI實(shí)現(xiàn)分角色注冊(cè)登錄界面功能
- 基于SpringBoot和Vue3的博客平臺(tái)的用戶注冊(cè)與登錄功能實(shí)現(xiàn)
- springboot+vue實(shí)現(xiàn)登錄功能的最新方法整理
- vue+springboot+shiro+jwt實(shí)現(xiàn)登錄功能
- vue+springboot實(shí)現(xiàn)登錄功能
- springboot+VUE實(shí)現(xiàn)登錄注冊(cè)
- vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
- Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼
- SpringBoot3結(jié)合Vue3實(shí)現(xiàn)用戶登錄功能
相關(guān)文章
java設(shè)計(jì)模式之外觀模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了java設(shè)計(jì)模式之外觀模式學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10Java中將File轉(zhuǎn)化為MultipartFile的操作
這篇文章主要介紹了Java中將File轉(zhuǎn)化為MultipartFile的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10Spring boot配置多數(shù)據(jù)源代碼實(shí)例
這篇文章主要介紹了Spring boot配置多數(shù)據(jù)源代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07MyBatis-Plus 使用枚舉自動(dòng)關(guān)聯(lián)注入
本文主要介紹了MyBatis-Plus 使用枚舉自動(dòng)關(guān)聯(lián)注入,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06