【學習筆記】 Angular × Parse《安裝設定 & 基本操作》

Ray
12 min readApr 8, 2021

--

安裝、設定,踩到的坑,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);

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

No responses yet

Write a response