Dieser Artikel teilt Ihnen hauptsächlich die Praxis des Reaktionstechnologie-Stacks kleiner Anwendungen für die Filmsammlung mit und hofft, allen zu helfen.
Douban-Filminformationen durchsuchen und in MongoDB eingeben
Filmlistenanzeige, Klassifizierung, Suche
Anzeige von Filmdetails und Verwaltung von Anhängen
Registrierung und Anmeldung
Berechtigungskontrolle, normale Benutzer können sich anmelden in, Favoriten, Administratoreintrag, Änderung, Löschung
Benutzercenter, meine Favoritenliste
Die Front-End-Anwendungen React, Redux und Redux-Saga fassen Redux kurz zusammen und zeichnen ein Abhängigkeitsproblem bei Front- und Rear-Schnittstellenaufrufen auf
Um Redux in einem Satz zusammenzufassen: Ich denke, es geht darum, den vertikalen Requisitentransfer zwischen Komponenten und die Hassliebe zu verknüpfen Die Beziehung zwischen übergeordneten und untergeordneten Komponenten wird ausgeglichen und eine vertikale Beziehung in 多个组件和一个独立出来的状态对象直接交互 umgewandelt, sodass die Codestruktur klarer aussieht.
Die Kernkonzepte Redux, Action, Reducer und Store
action就是说明我要操作一个状态了，怎么操作是reducer的事，而所有状态存储在store中，store发出动作并交由指定的reducer来处理
Redux zwingt uns dazu, unsere Operationen auf den Zustand zu standardisieren, was nur in Aktionen erfolgen kann und Reduzierer Auf diese Weise wird die ursprüngliche komplizierte Geschäftslogikverarbeitung geändert und auf Aktionen und Reduzierer beschränkt, und die Komponenten sehen sehr sauber aus. Tatsächlich ist es kompliziert, egal wo man diese komplizierte Sache platziert, aber jetzt ist es etwas klarer
Der Nachteil der Verwendung von Redux besteht darin, dass es zu umständlich ist, verschiedene Aktionen zu definieren und verschiedene Komponenten zu verbinden. . . . . Jetzt gibt es einen weiteren Mobx, ich weiß nicht, wie mächtig er ist, aber alle sind sich einig~
redux-saga wird verwendet, um asynchrone Aufrufe und andere Dinge zu verarbeiten. Häufig verwendete Generatoren sind take,takeLatest,takeEvery,put,call,fork,select. Während des Verwendungsprozesses bin ich auf ein Problem mit Schnittstellenaufrufen gestoßen interessant.
Beschreiben Sie es:
hat eine Schnittstelle /api/user/checkLogin, die verwendet wird, um zu bestimmen, ob eine Anmeldung erfolgen soll. Die ComponentDidMount der äußersten
function* checkLogin() {
const res = yield Util.fetch('/api/user/checkLogin')
yield put(recieveCheckLogin(!res.code))
if (!res.code) {
//已登录
yield put(fetchUinfo())
}
}
export function* watchCheckLogin() {
yield takeLatest(CHECK_LOAGIN, checkLogin)
} um Benutzerinformationen zu erhalten. Dann habe ich eine Filmdetailseitenkomponente, in der componentDidMount dieser Komponente wird die /api/movies/${id}-Schnittstelle initiiert um Filminformationen zu erhalten. Wenn der Benutzer angemeldet ist, wird auch eine Schnittstelle zum Abrufen von Filmanhangsinformationen initiiert/api/movies/${id}/attach, Der gesamte Schritt ist in einem Generator geschrieben
function* getItemMovie(id) {
return yield Util.fetch(`/api/movies/${id}`)
}
function* getMovieAttach(id) {
return yield Util.fetch(`/api/movies/${id}/attach`)
}
function* getMovieInfo(action) {
const { movieId } = action
let { login } = yield select(state => state.loginStatus)
const res = yield call(getItemMovie, movieId)
yield put(recieveItemMovieInfo(res.data[0]))
if (res.data[0].attachId && login) {
const attach = yield call(getMovieAttach, movieId)
yield put(recieveMovieAttach(attach.data[0]))
}
}
export function* watchLoadItemMovie() {
yield takeLatest(LOAD_ITEM_MOVIE, getMovieInfo)
}Der Benutzer ist angemeldet und gibt die Details ein. Der Vorgang ist normal. Wenn die Seite jedoch auf der Detailseite aktualisiert wird, ist die Schnittstelle zum Abrufen von Anhängen geöffnet nicht ausgelöst. Der Grund dafür ist, dass die checkLogin-Schnittstelle zu diesem Zeitpunkt das Ergebnis nicht zurückgegeben hat, der Status state.loginStatus immer noch falsch ist und das Obige nicht zum if
geht Zuerst habe ich darüber nachgedacht, wie ich die Reihenfolge der Erträge in einigen Generatoren steuern kann, um das Problem zu lösen (wenn der Benutzer nicht angemeldet ist, senden Sie einen weiteren CHECK_LOAGIN, und der Prozess wird fortgesetzt, nachdem das Ergebnis zurückgegeben wurde), aber es gibt zweimal CHECK_LOAGIN-Aufrufe . Wenn nach der Anmeldung ein weiterer Schnittstellenaufruf erfolgt, um Benutzerinformationen abzurufen, ist dies definitiv nicht möglich.
function* getMovieInfo(action) {
const { movieId } = action
let { login } = yield select(state => state.loginStatus)
const res = yield call(getItemMovie, movieId)
yield put(recieveItemMovieInfo(res.data[0]))
// if (!login) {
// //刷新页面的时候，如果此时checklogin接口还没返回数据或还没发出，应触发一个checklogin
// //checklogin返回后才能得到login状态
// yield put({
// type: CHECK_LOAGIN
// })
// const ret = yield take(RECIEVE_CHECK_LOAGIN)
// login = ret.loginStatus
// }
if (res.data[0].attachId && login) {
const attach = yield call(getMovieAttach, movieId)
yield put(recieveMovieAttach(attach.data[0]))
}
}Die letzte Methode ist die Zerlegung Die Verantwortlichkeiten des Generators ComponentWillUpdate lösen die Aktion zum Erhalten von Anhängen ordnungsgemäß aus
//将获取附件的动作从 getMovieInfo这个generator中分离出来
function* getMovieInfo(action) {
const { movieId } = action
const res = yield call(getItemMovie, movieId)
yield put(recieveItemMovieInfo(res.data[0]))
}
function* watchLoadItemMovie() {
yield takeLatest(LOAD_ITEM_MOVIE, getMovieInfo)
}
function* watchLoadAttach() {
while (true) {
const { movieId } = yield take(LOAD_MOVIE_ATTACH)
const { attachId } = yield select(state => state.detail.movieInfo)
const attach = yield call(getMovieAttach, movieId)
yield put(recieveMovieAttach(attach.data[0]))
}
}
//组件中
componentWillUpdate(nextProps) {
if (nextProps.loginStatus && (nextProps.movieInfo!==this.props.movieInfo)) {
//是登录状态，并且movieInfo已经返回时
const { id } = this.props.match.params
this.props.loadMovieAttach(id)
}
}Abschließend: Verwenden Sie die Hook-Funktion der Komponente rational und nicht Verarbeiten Sie zu viele Vorgänge im Generator, um die Flexibilität zu erhöhen
Das Backend verwendet Express und Mongodb, und Redis wird ebenfalls verwendet.使用pm2来管理node应用及部署代码 . Um die Identitätsauthentifizierung in Mongodb zu aktivieren, lohnt es sich, beim Durchführen der Identitätsauthentifizierung und beim Schreiben von Komponententests im Knoten JWT + Redis für die tokenbasierte Benutzeridentitätsauthentifizierung zu verwenden 🎜>
jwt.sign(payload, secretOrPrivateKey, [options, callback])
** Wenn Sie jsonwebtoken zum Generieren eines Tokens verwenden, können Sie die Gültigkeitsdauer des Tokens angeben, und die Überprüfungsmethode von jsonwebtoken bietet auch Optionen zum Aktualisieren der Gültigkeitsdauer des Tokens
Hier wird jedoch die Middleware express_jwt verwendet , und express_jwt bietet keine Methode zum Aktualisieren des Tokens. **
Idee:
Der Client fordert erfolgreich eine Anmeldung an und generiert ein Token
Speichern Sie dieses Token in Redis. Legen Sie die Gültigkeitsdauer von Redis fest (z. B. 1 Stunde).
Wenn eine neue Anfrage eingeht, überprüfen Sie zuerst das Token mit express_jwt, der Verifizierung ist erfolgreich, und überprüfen Sie dann, ob das Token in Redis vorhanden ist. Die Existenzanweisung ist gültig
Während des Gültigkeitszeitraums kommt eine neue Anfrage vom Client, extrahieren Sie das Token und aktualisieren Sie es Gültigkeitsdauer dieses Tokens in Redis
Der Client meldet sich von der Anmeldeanforderung ab und löscht dieses Token in Redis
Spezifischer Code
Testabdeckung Ich habe alle Schnittstellen langsam geschrieben, da es keine gab Fortschrittsanforderungen. Nachdem ich eine Schnittstelle geschrieben hatte, war der Test ziemlich detailliert. Der gesamte Prozess war sehr interessant >Mocha ist ein Node-Unit-Test-Framework, ähnlich dem Front-End-Jasmine, mit ähnlicher Syntax
Supertest ist eine Bibliothek zum Testen von Node-Schnittstellen
sollte die Assertionsbibliothek von NodeJS gut lesbar sein
Ein Beispiel für Tests, es ist zu lang, deshalb werde ich es hier nicht einfügen
Verwandte Empfehlungen ::Erkundung des internen Mechanismus von React
Wie können Komponenten in React geschrieben werden?
react.js gibt Logo-Referenz , holen Sie sich den Inhalt
Das obige ist der detaillierte Inhalt vonReact-Technologie-Stack-Praxis einer kleinen Anwendung für die Filmsammlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Fähigkeiten sind erforderlich, um in der PHP-Branche zu arbeiten?
Ripple-Handelsplattform
So verbinden Sie PHP mit der MSSQL-Datenbank
Was sind die am häufigsten verwendeten DNSs?
Big-Data-Plattform
Was bedeutet Handy-Zweitkarte?
httpstatus500-Fehlerlösung
Was sind die gängigen Managementsysteme?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
