iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
Modern Web

從零開始使用Microsoft MVC架構來搭建web server系列 第 25

DAY 25 實作案例_忘記密碼

  • 分享至 

  • xImage
  •  

這次做一個稍微有點複雜的案例,在我們常見的web中也常常會看到這個功能,那我們先來分析一下我們忘記密碼的流程:
點擊忘記密碼->輸入帳號->連接SQL查詢是否有這這個帳號->如果有則跳轉到修改密碼的頁面->輸入新密碼以及確認密碼->修改完成
這是大致的流程,那我們將其轉換為程式碼:
Model
我們自訂義資料型態,因為我們要接收以下資訊:使用者帳號、新的密碼、確認密碼

public class changepwd
{
//需要接收到的資料
    public string Account { get; set; }
    public string newpassword { get; set; }
    public string checkpassword { get; set; }
};

Controller
會用到以下的頁面分別是Foget、Changepwd兩個web頁面,以及DoForget、跟Dochange兩個功能

 public ActionResult Forget()
 {
     return View();
 }
 public ActionResult Changepwd()
 {
     return View();
 }
 public ActionResult DoForget( string Account)
{
//連接資料庫
    string connstr = "Data Source=CSIE-TEST2;Initial Catalog=Student_data;User ID=TEST03;Password=1qaz@WSX;Encrypt=False";
    SqlConnection conn = new SqlConnection(connstr);
    conn.Open();
    //查詢資料庫是否有這個帳號
    SqlCommand cmd = new SqlCommand("select * from Login where Account=@Account");
    cmd.Parameters.AddWithValue("@Account", Account);
    cmd.Connection = conn;
    SqlDataAdapter adpt = new SqlDataAdapter();
    DataSet ds = new DataSet();
    adpt.SelectCommand = cmd;
    adpt.Fill(ds);
    
    if (ds.Tables[0].Rows.Count > 0)
    {
    //如果有就跳轉到修改密碼頁面並把帳號也傳送過去
        TempData["Account"] = Account;
        return RedirectToAction("Changepwd");
    }
    else
    {
    //如果沒有就刷新頁面並顯示以下錯誤訊息
        TempData["Errmsg"] = "帳號不存在";
        return RedirectToAction("Forget");
    }
}
 public ActionResult Dochange(changepwd changepwd)
 {
 //確認新密碼與確認密碼是否一致
     if (changepwd.newpassword != changepwd.checkpassword)
     {
       //如果不一致則重新刷新頁面並顯示以下錯誤資訊
         TempData["Account"] = changepwd.Account;
         TempData["Errmsg"] = "密碼不一致";
         return RedirectToAction("Changepwd");
     }
     //連接資料庫
     string connstr = "Data Source=CSIE-TEST2;Initial Catalog=Student_data;User ID=TEST03;Password=1qaz@WSX;Encrypt=False";
     SqlConnection conn = new SqlConnection(connstr);
     conn.Open();
     //更新密碼的sql語法
     SqlCommand cmd = new SqlCommand("update Login set Password=@Password where Account=@Account");
     cmd.Connection = conn;
    //填入參數
     cmd.Parameters.AddWithValue("@Password", changepwd.newpassword);
     cmd.Parameters.AddWithValue("@Account",changepwd.Account);
     cmd.ExecuteNonQuery();
//如果成功的話就跳轉到登入頁面
     return RedirectToAction("login");
 }

view
** Forget**

<h2>Forget</h2>

<b>忘記密碼</b>
<!--填入自己的帳號並傳送至Doforget函數-->
<div class="input-field">
    <form action="@Url.Action("Doforget", "Home")">
        <label for="account">帳號</label>
        <input type="text" class="input" id="Account" name="Account" required autocomplete="off">
        <button type="submit" class="btn btn-primary">送出</button>
</div>
<!--顯示錯誤資訊-->
<div style="color: red; margin-top: 10px;">@TempData["Errmsg"]</div>
                </div>

Changepwd

<h2>Changepwd</h2>
<!--填入新密碼與確認密碼並傳送至Dochange函數-->
<form action="@Url.Action("Dochange","Home")" method="post">
<!--這行相當於已經預設填入帳號並設置為隱藏,因此頁面中不會出現這個輸入框-->
    <input type='hidden' id="account" name="Account" value="@TempData["Account"]" />
    <div class="input-field">
        <label for="newpassword">密碼</label>
        <input type="password" class="input" id="newpassword" name="newpassword" required autocomplete="off">
    </div>
    <div class="input-field">
        <label for="checkpassword">確認密碼</label>
        <input type="password" class="input" id="checkpassword" name="checkpassword" required>
    </div>

    <div class="input-field">
        <input type="submit" class="submit" value="修改" required autocomplete="off">
    </div>
</form>
<!--顯示錯誤資訊-->
<div style="color: red; margin-top: 10px;">@TempData["Errmsg"]</div>
                </div>

總結:由於忘記密碼的程式碼較多且複雜一些,但其運用的手法都大致相同,但還是會分篇來解說


上一篇
DAY 24 實作案例_註冊的程式碼詳解
下一篇
DAY 26 實作案例_忘記密碼程式詳解_View
系列文
從零開始使用Microsoft MVC架構來搭建web server30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言