一、HTML结构：
<body>
<div id = 'id-input-weibo-div'>
<input id='id-input-weibo'>
<button id='id-button-add'>写微博</button>
</div>
<div id="id-weibo-list">
<div class='weiboCell'>
<span class='class-weibo-content' id=weibo${weibo.id} data-id=${weibo.id}>${weibo.content}</span>
<button class='class-weibo-delete' data-id=${weibo.id}>删除</button>
<button class='class-weibo-edit' data-id=${weibo.id}>编辑</button>
<div class='class-comment'>
<input class='class-comment-input'>
<button class='class-weibo-comment' data-id=${weibo.id}>评论</button>
</div>
<div class='class-weibo-edit-form'>
<input class = 'class-weibo-edit-input'>
<button class='class-weibo-update-button' data-id=${weibo_id}>更新</button>
</div>
<div class='class-comment-cell'>
<span class='class-comment-content'>${comment.content}</span>
<button class='class-comment-delete' data-id=${comment.id}>删除</button>
<button class='class-comment-edit' data-id=${comment.id}>编辑</button>
<div class = 'class-comment-update-form'>
<input class = 'class-comment-edit-input'>
<button class='class-comment-update-button' data-id=${comment.id}>更新</button>
</div>
</div>
<br>
</div>
</div>
<script src="/static?file=gua.js"></script>
<script src="/static?file=weibo.js"></script>
</body>
二、gua.py的全部代码
var log = function() {
console.log.apply(console, arguments)
}
var e = function(sel) {
return document.querySelector(sel)
}
/*
ajax 函数
*/
var ajax = function(method, path, data, responseCallback) {
var r = new XMLHttpRequest()
// 设置请求方法和请求地址
r.open(method, path, true)
// 设置发送的数据的格式为 application/json
// 这个不是必须的
r.setRequestHeader('Content-Type', 'application/json')
// 注册响应函数
r.onreadystatechange = function() {
if(r.readyState === 4) {
// r.response 存的就是服务器发过来的放在 HTTP BODY 中的数据
responseCallback(r.response)
}
}
// 把数据转换为 json 格式字符串
data = JSON.stringify(data)
// 发送请求
r.send(data)
}
三、api_weibo.py的全部代码
var apiWeibo = function(callback){
path = '/api/weibo/all'
ajax('GET', path, '', callback)
}
var apiWeiboAdd = function(form, callback){
path = '/api/weibo/add'
ajax('POST', path, form, callback)
}
// 这是一个点
var apiWeiboDelete = function(weibo_id, callback){
path = `/api/weibo/delete?id=${weibo_id}`
ajax('GET', path, '', callback)
}
var weiboTemplate = function(weibo){
// 将一类的元素用class表示，将特定的元素用id表示
var w = `
<div class='weiboCell'>
<span class='class-weibo-content' id=weibo${weibo.id} data-id=${weibo.id}>${weibo.content}</span>
<button class='class-weibo-delete' data-id=${weibo.id}>删除</button>
<button class='class-weibo-edit' data-id=${weibo.id}>编辑</button>
<div class='class-comment'>
<input class='class-comment-input'>
<button class='class-weibo-comment' data-id=${weibo.id}>评论</button>
</div>
</div>
`
return w
}
var insertWeibo = function(weibo){
var weibodiv = e('#id-weibo-list')
var weibo = weiboTemplate(weibo)
weibodiv.insertAdjacentHTML('beforeEnd', weibo)
}
var loadsWeibos = function(){
log('执行函数')
apiWeibo(function(r){
var weibos = JSON.parse(r)
for (var i=0; i< weibos.length;i++){
weibo = weibos[i]
insertWeibo(weibo)
}
})
}
var bindEventWeiboAdd = function(){
// 事件委托的好处，绑定一个事件，所有子元素都能执行该事件，并不是所有事件都需要委托
var weiboAdd = e('#id-button-add')
log('添加微博')
weiboAdd.addEventListener('click', function(){
var weiboInput = e('#id-input-weibo')
var content = weiboInput.value
var form = {
content: content
}
log('form:', form)
apiWeiboAdd(form, function(r){
var weibo = JSON.parse(r)
log('weibo:', weibo)
insertWeibo(weibo)
weiboInput.value = ''
})
})
}
// 取值，通过拿到weibo id 去删除
var bindEventWeiboDlete = function(){
var weiboDelete = e('#id-weibo-list')
log('点击了删除')
log(weiboDelete)
weiboDelete.addEventListener('click', function(event){
// 这是一个点
var self = event.target
if (self.classList.contains('class-weibo-delete')){
// 这是一个点
var weibo_id = self.dataset.id
log('weibo_id', weibo_id)
apiWeiboDelete(weibo_id, function(r){
var weibo = JSON.parse(r)
// 这是一个点
self.parentElement.remove()
})
}
})
}
var weiboeditTemplate = function(weibo_id){
var e = `
<div class='class-weibo-edit-form'>
<input class = 'class-weibo-edit-input'>
<button class='class-weibo-update-button' data-id=${weibo_id}>更新</button>
</div>
`
return e
}
var insertweiboEdit = function(self){
// 获取父元素 closest
var weiboCell = self.closest('.weiboCell')
var weibo_id = self.dataset.id
// 传递 当前微博的id
var weiboeditCell = weiboeditTemplate(weibo_id)
weiboCell.insertAdjacentHTML('beforeEnd', weiboeditCell)
}
var bindEventWeiboEdit = function(){
var weiboList = e('#id-weibo-list')
log('majun')
weiboList.addEventListener('click', function(event){
var self = event.target
log('self是：', self)
// 这个 class 不需要加 .
if (self.classList.contains('class-weibo-edit')){
log('点击的self是：', self)
insertweiboEdit(self)
}
})
}
var apiweiboUpdate = function(form, callback){
path = '/api/weibo/update'
ajax('POST', path, form, callback)
}
var bindEventWeiboUpdate = function(){
var weiboList = e('#id-weibo-list')
weiboList.addEventListener('click', function(event){
var self = event.target
if (self.classList.contains('class-weibo-update-button')){
// 获取值的套路
log('点击的按钮：', self)
// 经常忘记这个 ‘.’
var weiboeditForm = self.closest('.class-weibo-edit-form')
// 写成了 querySelector
var weiboInput = weiboeditForm.querySelector('.class-weibo-edit-input')
var content = weiboInput.value
var weibo_id = self.dataset.id
var form = {
content: content,
id: weibo_id
}
log('提交的数据是：', form)
apiweiboUpdate(form, function(r){
var weibo = JSON.parse(r)
var weiboCell = self.closest('.weiboCell')
var weibo_content = weiboCell.querySelector('.class-weibo-content')
weibo_content.innerText = weibo.content
self.parentElement.remove()
})
}
})
}
var commentTemplate = function(comment){
var c = `
<div class='class-comment-cell'>
<span class='class-comment-content'>${comment.content}</span>
<button class='class-comment-delete' data-id=${comment.id}>删除</button>
<button class='class-comment-edit' data-id=${comment.id}>编辑</button>
</div>
<br>
`
return c
}
var apiloadsComments = function(callback){
path = '/api/weibo/comment/all'
ajax('GET', path, '', callback)
}
// 这个逻辑很重要，这个定位目标元素同样重要
var insertComment = function(comment){
var commenttemplate = commentTemplate(comment)
log('commenttemplate', commenttemplate)
var weiboList = e('#id-weibo-list')
var weibo_id = comment.weibo_id
var targetWeibo = weiboList.querySelector(`#weibo${weibo_id}`)
var weiboCell = targetWeibo.closest('.weiboCell')
weiboCell.insertAdjacentHTML('beforeEnd', commenttemplate)
}
var loadsComments = function(){
log('执行函数')
apiloadsComments(function(r){
var comments = JSON.parse(r)
log('comments', comments)
for (var i=0; i < comments.length; i++){
var comment = comments[i]
insertComment(comment)
}
})
}
var apicommentAdd = function(form, callback){
path = '/api/weibo/comment/add'
ajax('POST', path, form, callback)
}
var bindEventCommentAdd = function(){
var weiboList = e('#id-weibo-list')
log('增加评论')
weiboList.addEventListener('click', function(event){
var self = event.target
// 这里不能加 .
if (self.classList.contains('class-weibo-comment')){
var weibo_id = self.dataset.id
log('weibo_id是：', weibo_id)
var commentinputcell = self.closest('.class-comment')
var commentinput = commentinputcell.querySelector('.class-comment-input')
var value = commentinput.value
form = {
content:value,
weibo_id: weibo_id,
}
apicommentAdd(form, function(r){
var comment = JSON.parse(r)
insertComment(comment)
commentinput.value = ''
})
}
})
}
var apicommentDelete = function(comment_id, callback){
path = `/api/weibo/comment/delete?id=${comment_id}`
ajax('GET', path, '', callback)
}
var bindEventCommentDelete = function(){
var weiboList = e('#id-weibo-list')
weiboList.addEventListener('click', function(event){
var self = event.target
if (self.classList.contains('class-comment-delete')){
var comment_id = self.dataset.id
apicommentDelete(comment_id, function(r){
var comment = JSON.parse(r)
self.parentElement.remove()
})
}
})
}
var commenteditTempalte = function(comment_id){
var c = `
<div class = 'class-comment-update-form'>
<input class = 'class-comment-edit-input'>
<button class='class-comment-update-button' data-id=${comment_id}>更新</button>
</div>
`
return c
}
// 这个是传递的元素（按钮）
var insertcommentEdit = function(self){
var comment_id = self.dataset.id
var commentedittemplate = commenteditTempalte(comment_id)
var commentcell = self.closest('.class-comment-cell')
commentcell.insertAdjacentHTML('beforeEnd', commentedittemplate)
}
var bindEventCommentEdit = function(){
var weiboList = e('#id-weibo-list')
weiboList.addEventListener('click', function(event){
var self = event.target
if (self.classList.contains('class-comment-edit')){
insertcommentEdit(self)
}
})
}
var apicommentUpdate = function(form, callback){
path = '/api/weibo/comment/update'
ajax('POST', path, form, callback)
}
var bindEventCommentUpdate = function(){
var weiboList = e('#id-weibo-list')
weiboList.addEventListener('click', function(event){
var self = event.target
if (self.classList.contains('class-comment-update-button')){
var classcommentupdateform = self.closest('.class-comment-update-form')
var commentinput = classcommentupdateform.querySelector('.class-comment-edit-input')
var content = commentinput.value
var id = self.dataset.id
form = {
content: content,
id: id,
}
apicommentUpdate(form, function(r){
var comment = JSON.parse(r)
// 直接找到祖父元素
var classcommentcell = self.closest('.class-comment-cell')
var content = classcommentcell.querySelector('.class-comment-content')
content.innerText = comment.content
self.parentElement.remove()
})
}
})
}
var bindEvents = function(){
bindEventWeiboAdd()
bindEventWeiboDlete()
bindEventWeiboEdit()
bindEventWeiboUpdate()
bindEventCommentAdd()
bindEventCommentDelete()
bindEventCommentEdit()
bindEventCommentUpdate()
}
var __main = function(){
loadsWeibos()
loadsComments()
bindEvents()
}
__main()
网友评论