#javascript #python #api #vue.js
Вопрос:
я попытался решить проблему с помещением while(true) внутрь созданного, чтобы он всегда обновлялся, часто отправляя запросы в flask. Есть ли другой способ обновить мою ценность?
Vue:
let app = Vue.createApp({
data() {
return {
session: null,
showAcc: "",
};
},
created() {
this.fetchLog()
},
methods: {
async fetchLog() {
let response = await fetch("/logstat");
if (response.status == 200) {
let result = await response.json();
this.session = resu<
if (this.session != null) {
this.showAcc = "";
} else {
this.showAcc = "none";
setTimeout(this.fetchLog, 500); // repeats the action if nothing comes
}
}
},
logIn() {
this.$router.push("/login");
},
logOut: async function () {
console.log("Logging out...");
let response = await fetch("/logout");
if (response.status == 200) {
this.session=null;
this.$router.push("/login");
}
},
…. И колба-это всего лишь базовый ответ на возврат сеанса:
@app.route('/logstat', methods=["GET"])
def logstat():
'''Checking if user is authorised/session, returning username if so'''
username = session.get("userid", None)
return json.dumps(username)
@app.route("/logout")
def logout():
'''Ending session/logout from account'''
session.pop("userid", None)
return 'OK'
И в моем index.html
<div v-if=(session) @click='logOut'>
<p>Logged in as: {{session}} </p> <input type='submit' class='log_info_button pointer' name='submit'
value='LOG OUT' /> <i class='fa fa-sign-in' aria-hidden='true'></i>
</div>
<div v-else @click='logIn'> <input type='submit' class='log_info_button pointer' name='submit'
value='LOG INN' /> <i class='fa fa-sign-in' aria-hidden='true'></i></div>
</div>
То, что я ищу, — это метод, позволяющий моим кнопкам входа и выхода обновляться в зависимости от статуса «сеанса», если есть идентификатор сеанса, то появится выход из системы. если значение равно нулю, то войдите в систему.
Может быть, есть другое значение, которое может помочь мне вместо sessionid?
this.showAcc
предназначен для отображения ссылки «Моя учетная запись» в навигационной панели. Это также зависит от сеанса.
Ответ №1:
если вам нужно обновить эту информацию, чтобы сделать это в бэкэнде (или прокси-сервере, если на то пошло), это определенно не идеальный способ.
Если вам нужно прекратить опрос серверной части, как только вы получили информацию о сеансе, то это то, что вы можете сделать вместо этого:
...
data: {...},
created() {
fetchLog()
},
methods: {
async fetchLog() {
let response = await fetch("/logstat");
if (response.status == 200) {
let result = await response.json();
this.session = resu<
if (this.session != null) {
this.showAcc = "";
} else {
this.showAcc = "none";
this.fetchLog(); // repeats the action if nothing comes
}
}
}
}
Это исключило бы необходимость в тайм-ау для колбы.
P.S.: если вы хотите, вы также можете установить небольшой тайм-аут для вызова this.fetchLog()
, например setTimeout(this.fetchLog, 500)
, на полсекунды. В идеале, однако, вам также нужно будет сохранить этот идентификатор тайм-аута и с его помощью выполнить clearTimeout
выход (вкл unmount
.или destroy
).
Комментарии:
1. Идея состоит не в том, чтобы обновлять, а в том, чтобы обновлять значение. Я вижу, что /logstat вызывается только тогда, когда я нажимаю или обновляю страницу. Я хочу, чтобы он обновлялся сам по себе. Но по какой-то причине это не так.
2. В этом случае я могу порекомендовать последний подход, вызвав его снова с тайм-аутом. Я также думаю о подключении к websocket, но это немного сложнее.
3. Огромное спасибо. Это действительно помогло. Я также немного изменил свои методы.
4. Можно ли использовать sleep(0.5) в flask для запроса /logstat вместо setTimeout или это не так часто используется?
5. Независимо от того, работает это или нет (хотя так и должно быть), задержка вашего внутреннего ответа вместо внешнего запроса не является обычным решением для таких случаев
Ответ №2:
обычно это вызвано использованием this
ключевого слова в обратном вызове ответа/ошибки, относящегося к самой функции, а не к экземпляру Vue; Вы можете решить эту проблему с помощью
- Назначьте значение
this
другой переменной и используйте эту переменную в обратных вызовах
также попробуйте проверить статус входа в систему, когда экземпляр был смонтирован, если только срок действия вашей сессии не истечет довольно быстро, не будет необходимости постоянно проверять статус входа в систему.
mounted: function(){
this.checkSession();
},
methods:{
checkSession: async function(){
let _this = this;
let response = await fetch("/logstat");
if (response.status == 200) {
let result = await response.json();
_this.session = resu<
_this.showAcc = this.session != null ? "" : "none";
}
}
}
Комментарии:
1. Для чего используется_? Можете ли вы объяснить немного подробнее: «Обычно это вызвано использованием этого ключевого слова в обратном вызове ответа/ошибки, относящемся к самой функции, а не к экземпляру Vue»?
2. Я пробовал, но он все еще не обновляет мои кнопки. Мне нужно освежиться .
Ответ №3:
Очень необычно, что веб-сайт обновляет текущее состояние входа в систему без взаимодействия с пользователем, в любом случае, всякий раз, когда я хочу, чтобы мой сервер обновлял мою страницу, я использую websocket.