vue登入功能

引入需要的模組

eg: const mysql = require(「mysql」);

const express = require(「express」)

const cors = require(「cors」) //解決跨域問題

建立連線池:提高效率

var pool = mysql.createpool ()

建立express物件

var server = express();

配置允許訪問列

server.use(cors ())

配置靜態資源目錄

server.use(express.static(『public』));

為express配置監聽埠

server.listen(3000,() => )

使用者登入功能

// 1. 使用者獲取get請求路徑 /login

server.get("/login",(req,res) => )

} else ) }})

})在腳手架的components元件下建立 login.vue 元件

在 router.js中引入元件

① import 『login』 from 『./components/login』

② 在 routes 中 加入元件

在 main.js中引入 axios 庫

① 引入axios庫

import axios from 『axios』

② 配置 跨域訪問選項

axios.default.widthcredentials = true

③ 將axios 配置vue例項屬性

vue.prototype.axios = axios

import 『mint-ui/lib/style.css』

// 引入header 元件

import from 『mint-ui』

vue.component(header.name,header)

在 login.vue中編輯頁面並實現功能

// 引入 min-ui toast 布局使用

import from "mint-ui" // 要使用 mint-ui 的元件 需要在 main.js 中引入相應的元件

export default

},methods: $/i; // i是忽略大小寫,g是全域性查詢

if (!reg.test(u))

if (!reg.test(p))

//3.傳送ajax

var url = "" + u + "&upwd=" + p;

//4. 獲取伺服器返回結果

this.axios.get(url).then(result => else

})}

} }

登入頁功能

html 模信網 模信網精品模具 不容錯過 賬戶登入 歡迎來到模信網 賬號為手機號 賬號或者密碼錯誤 驗證碼錯誤 登入立即註冊 忘記密碼？css headers headers span headerleft headerright sp1 sp2 sp3 內容部分 content section1...

自動登入功能

下面記錄並分享一下自動登入功能的實現 一 自動登入 1 登入功能是用session實現的，就是向session物件中儲存當前使用者的物件 2 自動功能用cookie實現，就是登陸時將使用者的資訊儲存為持久化cookie 3 下次訪問時，讀取請求中如果有使用者資訊的cookie就可以自動登陸 二 防止...

登入功能測試

首先我不輸入密碼直接進後台頁面 進不去，直接回到了登入頁面面 輸入賬號 密碼 驗證碼 跳轉到後台頁面成功 關掉視窗，再輸入後台位址 進入成功 關掉視窗，清除cooki，再輸入後台位址 返回登入頁面 登入頁面輸入正確的名字 錯誤的密碼 正確的驗證碼 賬號或密碼錯誤 登入頁面輸入錯誤的名字 正確的密碼 ...