整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
圖2
圖3
圖4
就愛UI - 分享UI設計的點點滴滴
家覺得好的話，請大家關注點贊轉發一波，謝謝！
1.制作一個測試主頁
A.思維導圖：
B.源碼：
<?php
session_start();//啟動新會話或者重用現有會話說明
?>
<html>
<head>
<meta charset="utf-8" />
<title>測試主頁</title> <!--標題-->
</head>
<body>
<?php
if (isset($_SESSION['userName'])) //isset() 檢測變量是否設置 如果登錄成功
{
$userName=$_SESSION['userName'];//$_SESSION['username']的值賦值給變量$userName
echo "歡迎您：" . $userName; //歡迎您：登錄的名稱
echo '<a href="logout.php"><input type="button" value="注銷" /></a>'; //注銷按鈕
}
else {//登錄失敗
echo '<a href="login.php"><input type="button" value="登錄" /></a>';//登錄按鈕
echo '<a href="register.php"><input type="button" value="注冊" /></a>';//注冊按鈕
}
?>
</body>
</html>
C.結果：
從有了chatgpt，寫頁面的時間大幅度的縮短了，今天就來嘗試用vue3寫一個登錄界面吧。
問：使用vue3 編寫一個登錄界面，包含用戶名、密碼、記住我
答：好的，以下是使用 Vue 3 編寫一個簡單的登錄界面的示例代碼：
<template>
<div class="login-container">
<h1>登錄</h1>
<form @submit.prevent="submitForm">
<label>
用戶名：
<input type="text" v-model="username" required>
</label>
<label>
密碼：
<input type="password" v-model="password" required>
</label>
<label>
記住我：
<input type="checkbox" v-model="remember">
</label>
<button type="submit">登錄</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const username=ref('')
const password=ref('')
const remember=ref(false)
function submitForm() {
// 處理登錄邏輯
}
return {
username,
password,
remember,
submitForm
}
}
}
</script>
<style>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
}
form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 20px;
}
label {
display: flex;
align-items: center;
gap: 8px;
}
input[type="text"],
input[type="password"] {
width: 200px;
}
button {
margin-top: 20px;
}
</style>
上述代碼中，使用了 Vue 3 中的 ref 方法創建了三個響應式變量：username、password 和 remember，分別對應用戶名、密碼和記住我復選框的狀態。在表單提交時，可以調用 submitForm 方法處理登錄邏輯。同時，利用 CSS 樣式設置了登錄界面的布局和樣式。
注意：上述代碼中省略了登錄邏輯的處理，實際項目中需要根據具體需求進行編寫。
從回答的角度不難看出，這個代碼完全可以修改一下就可以使用了，是不是十分的方便。
喜歡點贊加關注哈！！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
