import {createStore} from "vuex";
import axios from "axios";
export default createStore({
state: () => ({
data() {
return{
id: 0,
username: "",
password: "",
status: 0,
eror: 0,
}
},
}),
getters: {
},
mutations: {
setlogin(state,username) {
state.username = username
},
setpassword(state, password){
state.password = password;
},
},
actions: {
async login() {
try {
const {id, username, password, status} = this.state;
const {data} = await axios.post('http://127.0.0.1:5000/login', {
id,
username,
password,
status
})
const mydata = (JSON.parse(data))
if (mydata[3] === 1) {
return this.$router.push('/main')
}
if (mydata[3] === 2) {
return this.$router.push('/teacher')
}
} catch (e) {
this.eror += 2
return setTimeout(() => { this.eror -= 2 }, 1500);
}
}
},
})<template>
<head>
<title>Вход</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
</head>
<body class="bodyy">
<img src="../../public/123.png" class="img1" alt="">
<div class="div2">
Добро пожаловать в:
</div>
<div class="div3">
ELECTRONIC DIARY
</div>
<form @submit.prevent ="login" class="form1" action="#" method="post">
<div v-if="eror > 1" class="div5"> Неверный логин или пароль </div>
<button type="submit" class="button">
Войти
</button>
<div class="div1">
ВХОД
</div>
<div class="div4"><strong>__________</strong></div>
<div>
<img src="../../public/3.png" class="img2" alt=""><input v-model="message" type="text" tabindex="1"
name="username" placeholder="login:" class="input1">
</div>
<br>
<div>
<img src="../../public/4.png" class="img3" alt=""><input v-model="message2" type="password" tabindex="2"
name="userpass"
placeholder="password:" class="input2">
</div>
</form>
<footer class="footer">
<div class="footer_div1">
<a target="AAA</a>
</div>
<div class="footer_div2">
Детский телефон доверия: 8-800-2000-122
</div>
<div class="footer_div3">
@gmail.com
</div>
<div class="footer_div4">
Дизайн: AAA
</div>
</footer>
</body>
</template>
<script>
import {mapActions, mapMutations} from 'vuex'
export default {
name: "auth",
methods: {
...mapActions({
login: 'login'
}),
...mapMutations({
setlogin: "setlogin",
setpassword: "setpassword",
})
},
computed:{
message: {
set (value) {
this.$store.commit('setlogin', value)
}
},
message2: {
set (value1) {
this.$store.commit('setpassword', value1)
}
},
},
}
</script>import Main from "@/pages/Main";
import {createRouter, createWebHistory} from "vue-router";
import Auth from "@/pages/Auth";
import Teacher from "@/pages/Teacher";
import Store from "@/pages/Store"
const routes = [
{
path: '/main',
component: Main,
},
{
path: '/',
component: Auth,
},
{
path: '/teacher',
component:Teacher
},
{
path: '/store',
component:Store
},
]
const router = createRouter({
routes,
history: createWebHistory(process.env.BASE_URL)
})
export default router;import App from './App'
import router from "@/router/router";
import {createApp} from "vue";
import store from '@/store'
const app = createApp(App)
app
.use(router)
.use(store)
.mount('#app');
this, вполне очевидно, не указывает на текущий инстанс Vue(потому что какой для стора текущий?).
Простой
Простой
Средний
Средний
