fwb
3 months ago
@ -1,15 +1,7 @@ |
||||
<template> |
||||
<div> |
||||
<h1>ces</h1> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import request from '@/utils/request' |
||||
import { onMounted } from 'vue' |
||||
import { reqLogin } from '@/api/user' |
||||
|
||||
onMounted(() => { |
||||
reqLogin({ username: 'admin', password: '111111' }) |
||||
}) |
||||
</script> |
||||
<script setup lang="ts"></script> |
||||
<style scoped></style> |
||||
|
||||
|
After Width: | Height: | Size: 996 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 301 B |
@ -0,0 +1,19 @@ |
||||
//通过vue-router插件实现模板路由配置
|
||||
import { createRouter, createWebHashHistory } from 'vue-router' |
||||
import { constantRoute } from '@/router/routes' |
||||
//创建路由器
|
||||
let router = createRouter({ |
||||
//路由模式
|
||||
history: createWebHashHistory(), |
||||
routes: constantRoute, |
||||
//混动行为
|
||||
scrollBehavior() { |
||||
return { |
||||
//水平方向
|
||||
left: 0, |
||||
//垂直方向
|
||||
top: 0, |
||||
} |
||||
}, |
||||
}) |
||||
export default router |
||||
@ -0,0 +1,23 @@ |
||||
//对外暴露配置的路由(常量路由)
|
||||
export const constantRoute = [ |
||||
{ |
||||
name: 'login', |
||||
path: '/', |
||||
component: () => import('@/views/login/index.vue'), |
||||
}, |
||||
{ |
||||
name: 'home', |
||||
path: '/home', |
||||
component: () => import('@/views/home/index.vue'), |
||||
}, |
||||
{ |
||||
name: '404', |
||||
path: '/404', |
||||
component: () => import('@/views/404/index.vue'), |
||||
}, |
||||
{ |
||||
name: 'Any', |
||||
path: '/:pathMatch(.*)*', |
||||
redirect: '/404', |
||||
}, |
||||
] |
||||
@ -0,0 +1,5 @@ |
||||
//仓库大仓库
|
||||
import { createPinia } from 'pinia' |
||||
//创建大仓库
|
||||
let pinia = createPinia() |
||||
export default pinia |
||||
@ -0,0 +1,25 @@ |
||||
//创建用户相关的小仓库
|
||||
import { defineStore } from 'pinia' |
||||
//引入登录接口
|
||||
import { reqLogin } from '@/api/user' |
||||
//引入数据类型
|
||||
import type { loginForm } from '@/api/user/type' |
||||
//创建小仓库
|
||||
let useUserStore = defineStore('User', { |
||||
//小仓库存储数据的地方
|
||||
state: () => {}, |
||||
//异步|逻辑的地方
|
||||
actions: { |
||||
//用户登录方法
|
||||
//括号内data收集参数(实参)
|
||||
async userLogin(data: loginForm) { |
||||
//登录请求
|
||||
let result = await reqLogin(data) |
||||
console.log(result) |
||||
}, |
||||
}, |
||||
getters: { |
||||
|
||||
}, |
||||
}) |
||||
export default useUserStore |
||||
@ -0,0 +1,7 @@ |
||||
<template> |
||||
<div> |
||||
<h1>404</h1> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"></script> |
||||
<style scoped></style> |
||||
@ -0,0 +1,7 @@ |
||||
<template> |
||||
<div> |
||||
<h1>2级路由</h1> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"></script> |
||||
<style scoped></style> |
||||
@ -0,0 +1,87 @@ |
||||
<template> |
||||
<div class="login_container"> |
||||
<el-row> |
||||
<el-col :span="12" :xs="0"></el-col> |
||||
<el-col :span="12" :xs="24"> |
||||
<el-form class="login_form"> |
||||
<h1>Hello</h1> |
||||
<h2>欢迎登录</h2> |
||||
<el-form-item> |
||||
<el-input |
||||
:prefix-icon="User" |
||||
v-model="loginForm.username" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input |
||||
:prefix-icon="Lock" |
||||
type="password" |
||||
v-model="loginForm.password" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
class="login_btn" |
||||
type="primary" |
||||
size="large" |
||||
@click="loginHandle" |
||||
> |
||||
登录 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { User, Lock } from '@element-plus/icons-vue' |
||||
import { reactive } from 'vue' |
||||
import { useRouter } from 'vue-router' |
||||
//引入用户相关的小仓库 |
||||
import useUserStore from '@/store/modules/user' |
||||
let useStore = useUserStore() |
||||
//收集账号和密码的数据 |
||||
const loginForm = reactive({ |
||||
username: 'admin', |
||||
password: '111111', |
||||
}) |
||||
const loginHandle = () => { |
||||
//通知仓库发登录请求 |
||||
//请求成功后跳转到首页（展示数据的home页面） |
||||
//登录失败弹出登录失败信息 |
||||
useStore.userLogin(loginForm) //传形参loginForm |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.login_container { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: url('@/assets/images/background.jpg') no-repeat; |
||||
background-size: cover; |
||||
} |
||||
.login_form { |
||||
width: 80%; |
||||
top: 30vh; |
||||
position: relative; //相对 |
||||
background: url('@/assets/images/login_form.png') no-repeat; |
||||
background-size: cover; |
||||
padding: 40px; |
||||
h1 { |
||||
color: white; |
||||
font-size: 40px; |
||||
} |
||||
h2 { |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
color: white; |
||||
font-size: 20px; |
||||
} |
||||
.login_btn { |
||||
width: 100%; |
||||
background: deepskyblue; |
||||
} |
||||
} |
||||
</style> |
||||