时间：2023-07-05 08:36:02 | 来源：网站运营
时间：2023-07-05 08:36:02 来源：网站运营
做一个简单的留言——leancloud数据库：leancloud :自带数据库和增删改查（CRUD）功能的后台系统
在线咨询
var APP_ID = '2zeITbbU6cgHT0mdBscQtmp0-gzGzoHsz';var APP_KEY = 'iByF5Dy55tJodAoxC4cxwAwx';AV.init({ appId: APP_ID, appKey: APP_KEY});run 一下看看成功没//创建 TestObject 表var TestObject = AV.Object.extend('TestObject');//在表中创建一行数据var testObject = new TestObject();//数据内容是 words:'Hello World'//若保存成功，则运行 alert('')testObject.save({ words: 'Hello World!'}).then(function(object) { alert('LeanCloud Rocks!');})Run 一下看看成功没<form id="postMessageForm" style="width: 1000px;margin: 50px auto;"> <input type="text" name="content"> <input type="submit" value="提交"></form>监听 form 表单：监听 submit 事件而不是提交按钮，因为用户可以不点击按钮而使用回车let myForm = document.querySelector('#postMessageForm')myForm.addEventListener('submit', function (e) { //首先阻止默认事件 e.preventDefault() //content 就是用户输入的文本 let content = myForm.querySelector('input[name=content]').value var Message = AV.Object.extend('Message'); var message = new Message(); message.save({ content: content }).then(function (object) { alert('提交成功'); console.log(object) })})提交内容后数据库的效果如图var query = new AV.Query('Todo'); query.find().then(function (todos) { todos.forEach(function(todo) { todo.set('status', 1); }); return AV.Object.saveAll(todos); }).then(function(todos) { // 更新成功 }, function (error) { // 异常处理 });Tode 没有，换成我们自己的 Messagevar query = new AV.Query('Message'); query.find().then(function (messages) { messages.forEach(function(message) { message.set('status', 1); }); return AV.Object.saveAll(messages); }).then(function(messages) { // 更新成功 }, function (error) { // 异常处理 });得到我们的数据记录，说明成功了//html<ol id="messageList"></ol>//jsvar query = new AV.Query('Message');query.find().then(function (messages) { let array = messages.map((item) => item.attributes) array.forEach((item) => { let li = document.createElement('li') li.innerText = item.content let messageList = document.querySelector('#messageList') messageList.appendChild(li) })})//alert('提交成功');window.location.reload()更好的方法：不刷新页面，直接让 .then(function(object){} 执行添加 li 的代码//alert('提交成功');let li = document.createElement('li')//这里 content 要改成 object.attributes.contentli.innerText = object.attributes.contentlet messageList = document.querySelector('#messageList')messageList.appendChild(li)然后清除输入的文字：让 content 的 value 为空myForm.querySelector('input[name=content]').value = ''MVC 的 M(model)! function () { // MVC 的 V var view = document.querySelector('section.message') //添加 M var model = { init: function () { var APP_ID = '2zeITbbU6cgHT0mdBscQtmp0-gzGzoHsz' var APP_KEY = 'iByF5Dy55tJodAoxC4cxwAwx' AV.init({ appId: APP_ID, appKey: APP_KEY }) }, //获取所有数据 fetch: function () { var query = new AV.Query('Message') return query.find() //Promise 对象 }, //创建数据 save: function (name,content) { var Message = AV.Object.extend('Message'); var message = new Message(); return message.save({ //Promise 对象 name: name, content: content }) } } // MVC 的 C var controller = { view: null, model: null, messageList: null, init: function (view, model) { this.view = view this.model = model this.messageList = view.querySelector('#messageList') this.form = view.querySelector('form') this.model.init() this.loadMessages() this.bindEvents() }, loadMessages: function () { this.model.fetch().then((messages) => { let array = messages.map((item) => item.attributes) array.forEach((item) => { let li = document.createElement('li') li.innerText = `${item.name} : ${item.content}` this.messageList.appendChild(li) }) }) }, bindEvents: function () { this.form.addEventListener('submit', (e) => { e.preventDefault() this.saveMessage() }) }, saveMessage: function () { let myForm = this.form let content = myForm.querySelector('input[name=content]').value let name = myForm.querySelector('input[name=name]').value this.model.save(name, content).then(function (object) { let li = document.createElement('li') li.innerText = `${object.attributes.name} : ${object.attributes.content}` let messageList = document.querySelector('#messageList') messageList.appendChild(li) myForm.querySelector('input[name=content]').value = '' console.log(object) }) } } controller.init(view, model)}.call()对 MVC（这里应该是 MVP 模式，但是为了方便直接用了 Controller ，并不影响我们学习这一思想，MVP 可以说是 MVC 的演变， MVC 和 MVP 的主要区别在于 M 和 V 是否交互，有兴趣可以查看相关博客） 的总结：关键词：数据,留言,简单
