用戶信息修改功能

當點擊用戶后面的按鈕時，要跳轉到用戶信息修改頁面。而修改和添加實際上是同一個頁面。
要區分跳轉后是添加操作還是修改操作，在于攜帶的參數。
如果是添加操作，那就直接跳轉過去；如果是修改操作，那就攜帶當前用戶的id，通過get的方式傳遞過去。這樣，在跳轉到用戶編輯頁面的時候，可以通過get方式中是否有id參數，來區分到底是添加操作還是修改操作。如果是修改操作，還需要將要修改的用戶信息從數據庫中查詢出來，并顯示在頁面中。
當用戶在頁面中修改完信息以后，點擊提交表單按鈕，向服務器發送修改用戶信息的請求。
修改界面表單的上方顯示的是要修改用戶的id值，如果是添加用戶，這個地方是不需要顯示的。所以在模板中需要判斷。

為用戶列表頁面為修改按鈕添加鏈接

修改鏈接是admin/user-edit
在views/user.art中

<a href="/admin/user-edit?id={{@$value._id}}" class="glyphicon glyphicon-edit"></a>

此時點擊即可跳轉，并且地址欄攜帶id參數。

找到編輯頁面所對應的路由user-edit.js，在這里，要獲取到地址欄中的id參數，從而判斷是添加還是修改操作。
因為無論是message還是id參數，都是存放在req.query當中，所以可以繼續解構。
引入User模塊，
通過id獲取到用戶信息，并將user傳遞給模板user-edit.art。
由于這個頁面就是一個表單，所以要通過表單value屬性把用戶的信息顯示在表單的控件里面。
但是，當是添加用戶操作時，并沒有傳遞給模板user，如果模板中還是用到了User，那么將會報錯。所以要先判斷user存不存在，再獲取它的屬性。

密碼不可以直接修改，要在單獨的地方進行修改密碼操作。有兩種做法：

直接隱藏密碼，不讓用戶修改

讓用戶填寫密碼，但是密碼錯誤則不讓用戶修改

在user-edit.js中，渲染頁面時，為添加和修改頁面設置自己的提交頁面和按鈕。

if (id) {//修改操作let user = await User.findOne({_id: id});//res.send(user);//return;//渲染用戶編輯頁面res.render('admin/user-edit', {message: message,user: user,link: '/admin/user-add',button: '修改'});} else {//添加操作res.render('admin/user-edit', {message: message,link: '/admin/user-edit',button: '添加'});} <form class="form-container" action="{{link}}" method="post"><div class="form-group"><label>用戶名</label><input name="username" type="text" class="form-control" placeholder="請輸入用戶名" value="{{user && user.username}}"></div><div class="form-group"><label>郵箱</label><input name="email" type="email" class="form-control" placeholder="請輸入郵箱地址" value="{{user && user.email}}"></div><div class="form-group"><label>密碼</label><input name="password" type="password" class="form-control" placeholder="請輸入密碼"></div><div class="form-group"><label>角色</label><select name="role" class="form-control"><option value="normal" {{user && user.role == 'normal' ? 'selected' : ''}}>普通用戶</option><option value="admin" {{user && user.role == 'admin' ? 'selected' : ''}}>超級管理員</option></select></div><div class="form-group"><label>狀態</label><select name="state" class="form-control"><option value="0" {{user && user.state == 0 ? 'selected' : ''}}>啟用</option><option value="1" {{user && user.state == 1 ? 'selected' : ''}}>禁用</option></select></div><div class="buttons"><input type="submit" class="btn btn-primary" value="{{button}}"></div></form></div>

修改數據庫中的用戶信息

將要修改的用戶id傳遞到服務器端（link: '/admin/user-modify?id=' + id）

建立用戶信息修改功能對應的路由

接收客戶端表單傳遞過來的請求參數

根據id查詢用戶信息，并將客戶端傳遞過來的密碼和數據庫中的密碼進行比對

如果比對失敗，直接對客戶端做出響應

如果比對成功，則將用戶信息更新到數據庫中

如果比對失敗，要給請求處理函數傳一個next，然后失敗后調用next，傳一個字符串類型的對象過去。并且需要攜帶id信息。

let obj = {path: '/admin/user-edit', message: '密碼比對失敗，無法修改信息', id : id};return next(JSON.stringify(obj));

但此時，app中的中間件代碼是寫死的，需要改善一下這個代碼，把所有傳遞的參數拼接到地址后面。
app.js

app.use((err, req, res, next) => {//將字符串對象轉換為對象類型//JSON.parse()const result = JSON.parse(err);//console.log(err);let params = [];for(let attr in result) {if(attr != 'path'){params.push(attr + '=' + result[attr]);}}return res.redirect(`${result.path}?${params.join('&')}`); })

輸入錯誤密碼，將得到這樣的提示

而地址欄是這樣的

如果比對成功，把從req.body中解構出用戶的屬性，并更新到數據庫中。其中密碼是不能更新的。

//不包括idconst { username, email, role, state, password } = req.body; await User.updateOne({_id: id}, {username: username,email: email,role: role,state: state});

通過重定向

res.redirect('/admin/user');

提交成功后，頁面重定向到user頁面了。
此時，用戶信息修改功能完成。

總結

以上是生活随笔為你收集整理的web前端 | 博客（八）用户信息修改功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。