Vue 登入案例

2021-10-03 13:35:44 字數 1838 閱讀 7515

這篇文章主要是介紹如何用vue+springboot來實現乙個簡單前後端分離的登入案例，**比較詳細。

@apioperation("登入功能")


@responsebody


public result dologin(@requestparam("username") string username,


@requestparam("password") string password)else if(!password.equals(user.getupsw()))else


}
介面就是這樣，注意兩點，一是要在controller中新增跨域註解@crossorigin，二是接收引數的形式要和前端對應

1. 前期準備

用腳手架工具建立乙個vue專案

安裝axios（請求），vue-router（路由），vuex（狀態管理）

先給大家展示我檔案目錄

2. 正式開始

首先，在src下建立乙個store資料夾，在裡面建立乙個store.js，這是我們的專案全域性狀態管理，不懂可以去搜一下，很好用的，在store.js中建立乙個全域性狀態，**如下：

import vue from 'vue'


import vuex from 'vuex'


import from 'fs'


vue.use(vuex)


export default new vuex.store(,


},mutations: 


state.user = user;


window.localstorage.setitem("user", json.stringify(user))}},


actions: {}


})
接著，在src下建立乙個router.js（路由），**如下：

import vue from 'vue'


import vuerouter from 'vue-router'


vue.use(vuerouter)


import home from './compenents/home'


import login from './compenents/login'


const router = new vuerouter(},}


]})export default router
然後，在components下建立兩個元件，乙個是login.vue，乙個是home.vue，**如下：

login.vue

登入home
home.vue

登入
最後，在main.js中引入axios，router，store，**如下：

import vue from 'vue'


import axios from 'axios'


import router from './router'


vue.prototype.$axios = axios


vue.config.productiontip = false


import store from './store/store'


new vue({


store: store,


router: router,

vue專案登入頁 實現字型動畫案例

vue專案登入頁 實現字型動畫案例 實現思路 1，讓每個字都包含在span標籤中，span標籤的display inner block 2，頁面剛生成時 動畫之前 設定margin寬度為80px,opacity為0.2 3，頁面渲染完後 mounted方法 設定乙個settimeout，新增乙個cs...

17 登入案例

使用session技術，主頁面只有使用者名稱和密碼 使用者主頁的邏輯 2.取出會話資料 string loginname string session.getattribute loginname if loginname null html 歡迎回來，loginname request.getco...

Flask登入案例

class dataswitch 資料交換 def init self server,port,user,password,db name,autocommit false self.conn psycopg2.connect host server,port port,user user,pass...