Bmob實作Vue圖書管理增删改查

- 1.Vue圖書管理增删改查
- - 1.核心代碼
  - - 1.查詢所有書籍
    - 2.添加書籍
    - 3.删除書籍
    - 4.修改書籍
    - 5.查詢書籍
  - 2.全部代碼
  - - 1.main.js
    - 2.App.vue
  - 3.免費demo源碼

1.Vue圖書管理增删改查

Bmob詳細介紹和使用方法傳送門

1.核心代碼

1.查詢所有書籍

requestBook() {
				var that = this
				const query = this.Bmob.Query("Booktest");
				query.find().then(res => {
					console.log(res)
					that.tableData = res
				});



			}

Bmob實作Vue圖書管理增删改查

2.添加書籍

onaddBook() {
				var that = this
				const query = this.Bmob.Query('Booktest');
				query.set("name", this.form.name)
				query.set("author", this.form.author)
				query.set("price", this.form.price)
				query.save().then(res => {
					console.log(res)
					console.log(res.message)
					that.addBookVisible = false
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			}

Bmob實作Vue圖書管理增删改查

3.删除書籍

deleteBook(objectId) {
				var that = this

				const query = this.Bmob.Query('Booktest');
				query.destroy('' + objectId).then(res => {
					console.log(res)
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			}

Bmob實作Vue圖書管理增删改查

4.修改書籍

onUpdateCommit() {
				var that = this
				const query = this.Bmob.Query('Booktest');
				query.set('id', this.updateBookForm.objectId) //需要修改的objectId
				query.set('name', this.updateBookForm.name)
				query.set('author', this.updateBookForm.author)
				query.set('price', this.updateBookForm.price)

				query.save().then(res => {
					console.log(res)
					that.updateBookVisible = false
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			}

Bmob實作Vue圖書管理增删改查

5.查詢書籍

searchBook() {

				var that = this
				const query = this.Bmob.Query("Booktest");
				query.equalTo("id", "==", +this.input);
				query.find().then(res => {
					if (this.input.length == 0 || this.input.split(" ").join("").length == 0) {
						that.requestBook()

					} else {
						console.log(res)
						that.tableData = res;
					}

				});


			}

Bmob實作Vue圖書管理增删改查

2.全部代碼

1.main.js

引入element-ui和bomb初始化

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引用Bomb
import Bmob from "hydrogen-js-sdk";
// 挂載到全局使用
Vue.prototype.Bmob = Bmob
Bmob.initialize('70ae0115b8087a68','123456');
// 調試模式
Bmob.debug(true)

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2.App.vue

<template>
	<div id="app">
		<el-row style="padding: 20px;">
			<el-col :span="10">
				<el-input v-model="input" placeholder="請輸入搜尋書籍的id"></el-input>
			</el-col>
			<el-col :span="6" <el-button type="primary" @click='searchBook' round>搜尋書籍</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" @click='onaddBookVisible' round>添加書籍</el-button>
			</el-col>
		</el-row>
		<el-table stripe border :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="id" width="100">
			</el-table-column>
			<el-table-column prop="name" label="書名" width="180">
			</el-table-column>
			<el-table-column prop="author" label="作者" width="180">
			</el-table-column>
			<el-table-column prop="price" label="價格(元)" width="180">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="updateBook(scope.row)" round>修改書籍</el-button>
					<el-button type="danger" @click="deleteBook(scope.row.objectId)" round>删除書籍</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="添加書籍" :visible.sync="addBookVisible" width="80%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="書名:">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="作者:">
					<el-input v-model="form.author"></el-input>
				</el-form-item>
				<el-form-item label="價格(元):">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onaddBook">确認添加</el-button>
					<el-button @click="onaddBookcancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog title="修改書籍" :visible.sync="updateBookVisible" width="80%">
			<el-form :m664fcafea7odel="updateBookForm" label-width="80px">
				<el-form-item label="書名:">
					<el-input v-model="updateBookForm.name"></el-input>
				</el-form-item>
				<el-form-item label="作者:">
					<el-input v-model="updateBookForm.author"></el-input>
				</el-form-item>
				<el-form-item label="價格(元):">
					<el-input v-model="updateBookForm.price"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onUpdateCommit">确認修改</el-button>
					<el-button @click="onupdatecancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		name: 'App',
		mounted() {
			this.requestBook()
		},
		methods: {
			onaddBook() {
				var that = this
				const query = this.Bmob.Query('Booktest');
				query.set("name", this.form.name)
				query.set("author", this.form.author)
				query.set("price", this.form.price)
				query.save().then(res => {
					console.log(res)
					console.log(res.message)
					that.addBookVisible = false
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			},
			searchBook() {

				var that = this
				const query = this.Bmob.Query("Booktest");
				query.equalTo("id", "==", +this.input);
				query.find().then(res => {
					if (this.input.length == 0 || this.input.split(" ").join("").length == 0) {
						that.requestBook()

					} else {
						console.log(res)
						that.tableData = res;
					}

				});


			},
			onaddBookcancel() {
				this.addBookVisible = false
			},
			onupdatecancel() {
				this.updateBookVisible = false
			},
			onaddBookVisible() {
				this.addBookVisible = true
			},
			updateBook(user) {
				console.log(user)
				this.updateBookForm = user
				this.updateBookVisible = true
			},
			onUpdateCommit() {
				var that = this
				const query = this.Bmob.Query('Booktest');
				query.set('id', this.updateBookForm.objectId) //需要修改的objectId
				query.set('name', this.updateBookForm.name)
				query.set('author', this.updateBookForm.author)
				query.set('price', this.updateBookForm.price)

				query.save().then(res => {
					console.log(res)
					that.updateBookVisible = false
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			},
			deleteBook(objectId) {
				var that = this

				const query = this.Bmob.Query('Booktest');
				query.destroy('' + objectId).then(res => {
					console.log(res)
					that.requestBook()
				}).catch(err => {
					console.log(err)
				})

			},
			requestBook() {
				var that = this
				const query = this.Bmob.Query("Booktest");
				query.find().then(res => {
					console.log(res)
					that.tableData = res
				});



			}
		},
		data() {
			return {
				tableData: [],
				input: '',
				addBookVisible: false,
				updateBookVisible: false,
				form: {
					name: '',
					author: '',
					price: '',
				},
				updateBookForm: {
					id: 0,
					name: '',
					author: '',
					price: 's',
				}
			}
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

3.免費demo源碼

https://download.csdn.net/download/qq_46526828/14001191

部落客為了可以學到更多的Android知識，建立了一個安卓知識交流群，歡迎大佬入群，當然也歡迎和我一樣的安卓小白，我們可以一起交流，最重要的是快樂水群，記得定個小目标，沖擊bat

Bmob實作Vue圖書管理增删改查

Bmob實作Vue圖書管理增删改查

Bmob實作Vue圖書管理增删改查

1.Vue圖書管理增删改查

1.核心代碼

1.查詢所有書籍

2.添加書籍

3.删除書籍

4.修改書籍

5.查詢書籍

2.全部代碼

1.main.js

2.App.vue

3.免費demo源碼

繼續閱讀

vue中父元件調用子元件的方法

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目