更新简历

a.css

@@ -550,3 +550,24 @@ section .jobs .small2 {
     top: 312px;
     left: 646px;
 }
+
+
+section.messageList > ol{
+    max-width: 700px;
+    max-height: 800px ;
+    overflow: auto;
+    margin:0 auto;
+    border-top: 1px solid #DDD;
+    border-bottom: 1px solid #DDD;
+    background: #f4f4f4;   
+}
+
+section.messageList > ol > li{
+    padding: 16px;
+    border-bottom: 1px solid #DDD;
+}
+section.messageList > form{
+
+    text-align: center;
+    padding: 0 20px 200px;
+}

index.html

@@ -203,9 +203,21 @@ <h2>作品集</h2>
 				</div>
 		</div>
 		</section>
+
+		<section class="messageList">
+			<h2 style="text-align: center;"><b>留言</b></h2>
+			<ol id=messageList></ol>
+			<form action="" id=PostMessageForm>
+				<label>称呼：</label><input type="text" name="name">
+				<label>内容：</label><input type="text" name="content">
+				<input type="submit" value='发送'>
+			</form>
+		</section>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.3.0/Tween.min.js"></script>
 		<script src='./swiper.js'></script>
+		<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>
+		<script src="./leaveAMessage.js"></script>
 		<script src='./pageAnimation.js'></script>
 	</body>
 </html> 

leaveAMessage.js

@@ -0,0 +1,51 @@
+var APP_ID = '7pp9hNxP5KSSuq5RMAFc2Fcq-gzGzoHsz';
+var APP_KEY = 'POxVDL86RVWQm7OHPJFjAmcv';
+
+AV.init({
+  appId: APP_ID,
+  appKey: APP_KEY
+});
+
+var query = new AV.Query('LeavingAMessage');
+  query.find().then(function (Messages) {
+    let arr = Messages.map((item) => item['attributes'])
+    arr.forEach((item)=>{
+        let li = document.createElement('li')
+        li.innerText = `${item['name']}:${item['content']}`
+        let messageList = document.querySelector('#messageList')
+        messageList.append(li)
+
+    })
+  }, function (error) {
+      alert('请稍后再试试，试试就逝世')
+    // 异常处理
+  })
+
+let myForm = document.querySelector('#PostMessageForm') 
+
+myForm.addEventListener('submit',function(e){
+    e.preventDefault()//阻止默认(刷新)事件
+    let content = myForm.querySelector('input[name=content]').value//获取input中的值
+    let name = myForm.querySelector('input[name=name]').value
+    var LeavingAMessage = AV.Object.extend('LeavingAMessage');
+    var message = new LeavingAMessage()
+    message.save({
+        'name':name,
+        'content':content
+    }).then((object) => {
+      let li = document.createElement('li')
+      li.innerText = `${object.attributes['name']}:${object.attributes['content']}`
+      let messageList = document.querySelector('#messageList')
+      myForm.querySelector('input[name=content]').value = ''
+      messageList.append(li) 
+    })
+})
+
+// Test-Code
+// var TestObject = AV.Object.extend('TestObject');
+// var testObject = new TestObject();
+// testObject.save({
+//   words: 'Hello World!'
+// }).then(function(object) {
+
+// })