安裝、設定,踩到的坑,Parse基本操作
1.Angular & Parse 安裝跟設定
1-1.安裝
npm i parse
npm install @types/parse
1-2.設定
1-2-1 HTML( app.component.html)綁定BUTTON
<button (click)="queryTest()">query</button>
1-2-2.app.component.ts 寫FUNTION
基本只要設定 APPID 跟 SERVER URL就可以操作了
import { Component } from '@angular/core';
const Parse = require('parse');
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'NGparse';
queryTest() {
Parse.initialize("EamJQt5....gxms");
Parse.serverURL = 'https://.../parse'
//通常上面兩句會寫在main
const query = new Parse.Query("example");
console.log(query.find())
}
}
2.安裝踩坑
Angular 用 const Parse = require('parse'); 報錯:
Error: src/main.ts:7:15 - error TS2591: Cannot find name 'require'.
Do you need to install type definitions for node?
Try `npm i --save-dev @types/node` and then add `node` to the types field in your tsconfig.
第一個解法
1.npm install @types/node --save-dev
2.修改tsconfig.json:
{
"compilerOptions": {
"types": ["node"]
}
}
上面解法是錯的,雖然這樣可以讓程式執行,但事實上這樣只是把code由node操作,並不是讓用typescript讓parse執行。
因為發生的原因是沒有npm install @types/parse,補上去就可以了
npm install @types/parseimport * as Parse from ‘parse’;
3.Parse基本操作
3-1.Object
3-1-1.儲存
async queryTest() {
var GameScore = Parse.Object.extend("example5");
//建立一個新table(class)的物件 叫example5
//如果已經有了就會直接把下面的實例添加到已存在的table var gameScore = new GameScore();
//實例出來 但這時候還沒有在database裡
gameScore.set("score", 1337);
gameScore.set("playerName", "Sean Plott");
gameScore.set("cheatMode", false);
console.log(gameScore)
gameScore.save(); //這時候database就有資料了
}
3-1-2.取值
async queryTest() {
const GameScore = Parse.Object.extend("example5");
const query = new Parse.Query(GameScore);
console.log(await (await query.get("7PXl9QaLAK")).get('score') )
//第一次await get到的是object
//第二次await get到的是欄位
}
3-1-3.修改
先用Parse.Query取出要的物件,然後放進Parse.Object,修改後再儲存回去
3-1-3修改
async queryTest() {
const GameScore = Parse.Object.extend("example5");
const query = new Parse.Query(GameScore);
var gameScore = new GameScore();
gameScore = await query.get("7PXl9QaLAK")
gameScore.set('score',2100244)
gameScore.save();
}
3-1-4.刪除欄位的值(unset)
async queryTest() {
const GameScore = Parse.Object.extend("example5");
const query = new Parse.Query(GameScore);
var gameScore = new GameScore();
gameScore = await query.get("7PXl9QaLAK")
gameScore.unset("playerName");
gameScore.save();
}
3-1-5.刪除那筆資料(destroy)
const Activity = Parse.Object.extend(‘VOD_Activity’);const activityObj = new Activity();var getMissingData = query.find({ success: function(obj) { console.log(‘deleted like!’) obj[0].destroy({}) }, error: function(object, error) { console.log(‘deleted like error’) }});
3-2.Query
3–2–1.equalTo與find方法
通常都是前面先設條件(ex.equalTo),條件可以有多個,最後再呼叫find()
async queryTest() {
var GameScore = Parse.Object.extend("example5");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
console.log( await query.equalTo("playerName", "Dan Stemkoski").find())
}
3–2–2.數字範圍限制(greaterThan & lessThan)
async queryTest() {
var GameScore = Parse.Object.extend("example5");
var query = new Parse.Query(GameScore);
console.log( await query.greaterThan("score", 10).find())
//query.lessThan("score", 10); 小於
}
3–2–3.Query返回數限制(limit)
query.limit(10)
//default:100筆
3-2-4.排序(ASC DES)
query.ascending("score");
query.descending("score");
3-2-5.利用參數(陣列)做filter
async queryTest()
{
var GameScore = Parse.Object.extend("example5");
var query = new Parse.Query(GameScore);
let a = await query.containedIn("playerName",
["Jonathan Walsh", "Ray", "Shawn Simon"]).find();
console.log( a )
}
3-2-6.當該欄位是undefined時做filter(exist)
const query = new Parse.Query(Parse.Object.extend('ParseClass')).exists('someColName')
3-2-7.只想知道筆數,但不想知道資料內容,可以節省運算(count)
async queryTest() {
var GameScore = Parse.Object.extend("example5");
var query = new Parse.Query(GameScore);
let a = await query.containedIn("playerName",
["Jonathan Walsh", "Ray", "Dan Stemkoski"]).count();
console.log( a )
}
3–2–8.Parse.Object.or使用範例
var lotsOfWins = new Parse.Query("Player");
lotsOfWins.greaterThan("wins", 150);
var fewWins = new Parse.Query("Player");
fewWins.lessThan("wins", 5);
var mainQuery = Parse.Query.or(lotsOfWins, fewWins);
mainQuery.find()
3-2-9.用success及error捕獲事件
var query = new parse.query(myclass);
query.find({
success: function(results) {
// results is an array of parse.object.
},
error: function(error) {
// error is an instance of parse.error.
}
});
3-3.User
User是Parse內建管控使用者的機制,Parse.User具備Parse.Object沒有的屬性
3–3–1.註冊
singUp()會自動幫你驗證email是否重複、且會將帳號密碼加密後寫入User Class
async queryTest() {
var user = new Parse.User();
user.set("username", "urn");
user.set("password", "pwd");
user.set("email", "xi...@gmail.tw");
user.signUp();
}
3-3-2.登入
登入後Parse會產生一組session存放在Session Table,這樣之後就不需要重複輸入帳號密碼,只需要拿token就能登入
帳號密碼登入
Parse.User.logIn("myname", "mypass", {
success: function(user) {
// Do stuff after successful login.
},
error: function(user, error) {
// The login failed. Check error to see why.
}
});
Session登入
Parse.User.become("session-token-here").then(function (user)
{
}, function (error) {
});
3-3-3.登入操作
驗證當前是否登入可調用Parse.User.current()
var currentUser = Parse.User.current();
if (currentUser) {
// do stuff with the user
} else {
// show the signup or login page
}
清除當前登入狀態可調用Parse.User.logOut
Parse.User.logOut().then(() => {
var currentUser = Parse.User.current();
// this will now be null
})
3–3–4.對象安全
setPublicAccess的部分預設都是True,若不改False則下面其他設定都會失效
SetRole跟Set的差別在:
『假如我要開權限給公司的小葉,則用setReadAccess/setWriteAccess,若要開權限給工程部或專案部則使用setRoleReadAccess/setRoleWriteAccess,因為一個人他的身分可以僅是他一個人,也可以是部門的某個單位(role)』
const messageBoard: Parse.Object = new MessageBoard();
const acl = new Parse.ACL();
acl.setPublicReadAccess(false);
acl.setPublicWriteAccess(false);
acl.setRoleReadAccess(selectedBox.username + '_family', true);
acl.setRoleWriteAccess(selectedBox.username + '_family', false);
acl.setReadAccess(Parse.User.current(), true);
acl.setWriteAccess(Parse.User.current(), true);
messageBoard.setACL(acl);