Maciek Korsan
Frontend developer @ polarbits_
Maciek @ Korsan Studio
Wykładowca @ Studia Podyplomowe WI PB
API
THE INTERNET
HTTP
Hypertext Transfer Protocol
Jak działa HTTP?
GET
Żądanie typu GET
<form action="/miejscedocelowe" method="get">
.
<input type="text" name="klucz">
.
</form>
http://adres.pl/?klucz=wartość&drugiklucz=drugawartość
|
|
parametry get
POST
Żądanie typu POST
<form action="/miejscedocelowe" method="post">
.
<input type="text" name="klucz">
.
</form>
kody odpowiedzi http
200
OK
404
PAGE NOT FOUND
500
INTERNAL SERVER ERROR
1xx: hold on
2xx: here you go
3xx: go away
4xx: you fucked up
5xx: I fucked up
URL
Uniform Resource Locator
Uniform Resource Locator
http://studia.korsan.studio:80/test/?parametr=wartość
| | | | |
| host (adres | ścieżka dostępu parametry
| serwera) | do zasobu
| port
|
protokół
JavaScript Object Notation
package.json
{
"devDependencies": {
"browser-sync": "^2.18.8",
"browserify": "^14.3.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-browserify": "^0.5.1",
"gulp-headerfooter": "^1.0.3",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^2.1.2"
}
}
packages.json
var jason = {
'job': 'actor',
'name': 'JSON Statham',
'age': '49'
}
{}
obiekt
[]
tablica
{
"results": [
{
"gender": "male",
"name": "nathaniel cooper"
},
{
"gender": "female",
"name": "lea abraham"
},
{
"gender": "female",
"name": "anaëlle vidal"
}
]
}
przykładowy json z użytkownikami
API
Application Programming Interface
connect everything!
Pobierz woeid dla Warszawy (warsaw)
Sprawdź pogodę
*jeśli niezainstalowane
npm install gulp-cli -g
*jeśli niezainstalowane
cd C:\naszkatalog
cd /home/user/naszkatalog
windows
linux
cd /Users/user/naszkatalog
mac os
user -> nazwa naszego użytkownika
naszkatalog -> nazwa katalogu z plikami projektu
npm install
gulp
app/partials/header.html
app/content/nazwastrony.html
app/partials/footer.html
dist/nazwastrony.html
http://localhost:3000/nazwastrony.html
hello vuejs
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})
app.js
<div id="app">
{{ message }}
</div>
index.html
data i {{ }}
new Vue({
el: '#app',
data: {
"person": {
"gender": "male",
"name": "nathaniel cooper"
}
}
})
app.js
<div id="app">
{{ person.name }}
</div>
index.html
modele:
v-model="nazwa modelu"
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})
app.js
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
index.html
v-bind:atrybut
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})
app.js
<div id="app">
<span v-bind:title="message">Hover me!</span>
</div>
index.html
custom component
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})
app.js
<div id="app">
<my-component></my-component>
</div>
index.html
warunki:
v-if="warunek"
new Vue({
el: '#app',
data: {
showMe: false // change to true to show h1
}
})
app.js
<div id="app">
<h1 v-if="showMe">Hello world!</h1>
</div>
index.html
zdarzenia:
v-on:nazwa
new Vue({
el: '#app',
data: {
showMe: false // change to true to show h1
}
})
app.js
<div id="app">
<button v-on:click="showMe = !showMe">Toggle h1</button>
<h1 v-if="showMe">Hello world!</h1>
</div>
index.html
pętle:
v-for="item in items"
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
app.js
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
index.html
metody
new Vue({
el: '#app',
data: {
message: "podmień na swoje imię"
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
app.js
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
index.html
pobieranie danych:
vue-resource
new Vue({
el: '#app',
data: {
"persons": false
},
created: function() {
this.$http.get(apiUrl).then(response => {
this.persons = response.body.results;
}, response => {
console.log ('error');
});
}
});
app.js
<div id="app">
<div class="person" v-for="person in persons">
<img v-bind:src="person.picture.large"/>
<h2>{{ person.name.first }} {{ person.name.last }}</h2>
</div>
</div>
index.html
Hej mówiłeś dzisiaj na zajęciach że już praktycznie nie korzystasz z jquery.
W takim razie jakie frameworki są na czasie? Czy może raczej vanilla JS?
Pytanie dotyczące frontendkickstartera. Gdzie wrzucać zdjęcia, tak żeby były poprawnie wyświetlane? Mówiłeś, żeby nie ruszać folderu dist. Po wrzuceniu w content, nie wyświetla ich. Błędny link?
Jaki jest najlepszy sposób na osiągnięcie efektu startu pewnych animacji bądź ładowania kontentu na stronie np. one page dopiero gdy dany element/div/etc. znajdzie się w zasięgu widzenia użytkownika/ użytkownik zescrolluje do tego elementu stronę? Znalazłam skrypty np ScrollReveal - jeśli w praktyce właśnie robi się to przy pomocy skryptów to jak jest z prawami autorskimi czy po prostu dołączmy ten skrypt i używamy czy są jakieś ograniczenia? Może jakieś inne skrypty/pluginy/etc. godne polecenia..
studia.korsan.studio