login page

frontend/src/App.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { RouterView } from 'vue-router'
+
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style scoped>
+
+</style>

frontend/src/assets/base.css

@@ -0,0 +1,6 @@
+body,html, #app{
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

frontend/src/main.js

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+import 'normalize.css'
+import '@/assets/base.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

frontend/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+
+const routes = [
+  {
+    path: '/login',
+    component: () => import('@/views/login.vue')
+  }
+
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes
+})
+
+export default router

frontend/src/service/request.js

@@ -0,0 +1,36 @@
+import axios from "axios";
+import {message, ElLoading} from 'element-plus'
+import userStore from '@/stores/user'
+
+
+const store = userStore()
+
+export default (config) => {
+
+    const instance = axios.create({
+        baseURL: import.meta.env.VITE_BASE_URL,
+        timeout: 5000,
+    })
+
+    instance.interceptors.request.use(config => {
+        ElLoading.service({
+            title: '请求中.'
+        })
+        config.headers.Authorization = store.accessToken
+        return config
+    })
+
+    instance.interceptors.response.use(res => {
+        if (res.data.code !== 20000 ){
+            message.error(res.data.msg)
+        }
+        ElLoading.close()
+        return res.data
+    }, err => {
+        message.error(err)
+        ElLoading.close()
+        return Promise.reject(err)
+    })
+
+    return instance(config)
+}

frontend/src/stores/user.js

@@ -0,0 +1,23 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const userStore = defineStore('user', () => {
+  const info = ref({})
+  const token = ref("")
+  const accessToken = computed(() => 'Bearer ' + token)
+
+  return { info, token, accessToken }
+}, {
+    persist: true,
+  })
+
+// export const userStore = defineStore('user',{
+//     state: () => ({
+//         token: ""
+//     }),
+//     getters: {
+//         accessToken() {
+//             return `Bearer ${this.token}`
+//         }
+//     }
+// })

frontend/src/views/login.vue

@@ -0,0 +1,79 @@
+<script setup>
+    import { User, Lock } from '@element-plus/icons-vue'
+    import {ref,reactive} from 'vue'
+
+    // 表单配置
+    const rules = {
+        username: [
+            {required: true, message: '请输入用户名', trigger: 'blur'},
+            {min:5, max:20, message: '5~20', trigger: 'blur'}
+        ],
+        password: [
+            {required: true, message: '请输入密码', trigger: 'blur'},
+            {min:6, max:12, message: '6~12', trigger: 'blur'}
+        ]
+    }
+
+    // 响应式数据
+    const formRef = ref()
+    const formData = reactive({
+        username: 'admin',
+        password: '123456'
+    })
+
+    // 事件
+    const submitForm = (formEl) => {
+        if (!formEl) return
+        formEl.validate( valid => {
+            if (valid) {
+                // 验证通过
+                console.log('submit!')
+            }
+        })
+    }
+    
+</script>
+
+<template>
+  <div class="login">
+    <div class="continer">
+      <h1>Mini RBAC</h1>
+      <el-form ref="formRef" :model="formData" :rules="rules" status-icon>
+        <el-form-item prop="username">
+          <el-input placeholder="用户名" clearable :prefix-icon="User"
+          v-model.trim="formData.username"/>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input placeholder="密码" show-password :prefix-icon="Lock"
+          v-model.trim="formData.password"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(formRef)" >登录</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  display: flex;
+  background-color: #2d3a4b;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+.continer {
+  width: 300px;
+  height: 300px;
+}
+.continer h1{
+    color: #fff;
+}
+.continer .el-button {
+  width: 100%;
+}
+</style>