diff --git a/username-edit.html b/username-edit.html
new file mode 100644
index 0000000..11af223
--- /dev/null
+++ b/username-edit.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        *{
+            margin: 0 0;
+            padding: 0 0;
+        }
+        .form{
+            width: 300px;
+            height: 300px;
+            margin: 244px auto;
+            box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
+            padding-top: 10px;
+        }
+        p{
+            display: inline-block;
+        }
+        h2{
+            margin-left: 89px;
+            margin-top: 10px;
+        }
+        .form div p{
+            margin-top: 10px;
+
+        }
+        .p1{
+            margin-left: 30px;
+        }
+        .p2{
+            margin-left: 19px;
+        }
+        button{
+            display: block;
+            margin-top: 20px;
+            margin-left: 130px;
+        }
+        input{
+            width: 150px;
+        }
+        #wrong{
+            color: red;
+            font-size: 12px;
+            margin-top: 10px;
+            margin-left: 89px;
+            display: none;
+        }
+    </style>
+    <title>Document</title>
+</head>
+<body>
+    <div class="form">
+    <h2>用户名编辑</h2>
+    <div>
+        <p class="p1">用户名:</p><p class="p2" id="username">{{ username }}</p>
+    </div>
+    <div>
+        <p class="p1">新用户名:</p>
+        <input type="text" id="myinput" >
+        <button onclick="func()">保存</button>
+    </div>
+    <div id="wrong">用户名为空,无法提交</div>
+    </div>
+</body>
+<script>
+      function sendEmail(email) {
+        var emailMessage = email;
+
+        var form = document.createElement('form');
+        form.method = 'POST';
+        form.action = 'http://127.0.0.1:5000/edit';
+
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'email';
+        input.value = emailMessage;
+
+        form.appendChild(input);
+
+        document.body.appendChild(form);
+
+        form.submit();
+    }
+    function func(){
+        var inputelement = document.getElementById('myinput')
+        var newusername = inputelement.value
+        var username = document.getElementById('username')
+        username = username.innerText
+        var xhr = new XMLHttpRequest();
+        var nullname = document.getElementById('wrong')
+        xhr.open('POST','http://127.0.0.1:5000/data_edit',true)
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        var data = {};
+        data['newusername'] = newusername
+        data['username'] = username
+        if(newusername === '')
+        {
+
+            nullname.style.display = 'block';
+        }
+        xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+    // 请求完成并成功
+        console.log('POST request successful');
+        if (xhr.responseText === '发生了异常错误'){
+            nullname.innerText = '用户名可能已发生更改，请重新再试'
+            nullname.style.marginLeft='55px';
+            nullname.style.display = 'block'
+        }
+        else
+            nullname.innerText = '修改成功!将返回编辑页'
+            nullname.style.marginLeft='70px';
+            nullname.style.fontSize = '16px'
+            nullname.style.display = 'block'
+            nullname.style.color = 'green'
+            setTimeout(sendEmail(xhr.responseText),500);
+
+        }
+        };
+        xhr.send(JSON.stringify(data))
+    }
+
+</script>
+</html>
\ No newline at end of file
