完成基本封装

admin-fe/README.MD

@@ -158,10 +158,24 @@ const router = createRouter({
 const app = createApp();
 app.use(router); // 在应用使用router
 ```
+
 显示路由及跳转
+
 ```vue
+
 <template>
-    <router-view />
+    <router-view/>
     <router-link to="要跳转的路径"></router-link>
 </template>
-```
+```
+
+### 前端分离的接口交互
+
+#### 1.跨域
+
+协议、访问域、端口只有一个不同都是跨域.
+
+协议： http/https 端口： 冒号后面的数字
+> 跨域除了上述原则之外，自定义请求头也会使跨域失败
+
+#### 请求接口

admin-fe/src/App.vue

@@ -1,30 +1,16 @@
 <template>
     <div>
-        <h1>vue3 + vite + {{ username }} {{ currentPath }}</h1>
+        <router-view/>
-        <input type="text" v-model="username">
-
-        <router-view />
     </div>
 </template>
 
 <script lang="ts">
 import {ref} from "vue";
-import Home from "./Home.vue";
-import User from "./User.vue";
 
 export default {
     name: "App",
-    components: {User, Home},
     setup() {
-        const username = ref<string>()
+        return {}
-        const currentPath = ref<string>(location.hash ? location.hash.substring(1) : '/home')
-        window.onhashchange = () => {
-            currentPath.value = location.hash ? location.hash.substring(1) : '/home'
-        }
-        return {
-            username,
-            currentPath,
-        }
     }
 }
 </script>

admin-fe/src/User.vue

@@ -1,14 +0,0 @@
-<template>
-    <h1>User</h1>
-    <router-link to="/home">Home</router-link>
-</template>
-
-<script>
-export default {
-    name: "User"
-}
-</script>
-
-<style scoped>
-
-</style>

admin-fe/src/assets/app.css

@@ -0,0 +1,19 @@
+:root {
+    --primary-color: #fff;
+    --primary-color-text: #333;
+    --font-size: 14px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Source Han Sans SC', 'Microsoft YaHei', 'Microsoft YaHei UI', "Helvetica Neue", sans-serif;
+    scroll-behavior: smooth;
+}
+.container{
+    max-width: 1200px;
+    margin: auto;
+}

admin-fe/src/main.ts

@@ -1,6 +1,10 @@
 import {createApp} from 'vue';
 import App from './App.vue'
 import router from './router'
+import {httpConfig} from "./util/http";
+
+
+httpConfig.baseURL = "http://localhost:8080"
 
 const app = createApp(App)
 // 使用路由

admin-fe/src/router/routes.ts

@@ -1,6 +1,7 @@
 import {RouteRecordRaw} from "vue-router";
-import Home from './../Home.vue'
+import Home from '../views/admin/Home.vue'
-import User from './../User.vue'
+import Login from '../views/Login.vue'
+import NotFound from '../views/NotFound.vue'
 
 const routes: RouteRecordRaw[] = [
     {
@@ -8,8 +9,12 @@ const routes: RouteRecordRaw[] = [
         component: Home
     },
     {
-        path: '/user',
+        path: '/login',
-        component: User
+        component: Login
+    },
+    {
+        path:'/:pathMatch(.*)*',
+        component: NotFound
     }
 ]
 

admin-fe/src/util/http.ts

@@ -0,0 +1,41 @@
+export type HttpMethod = 'get' | 'post' | 'delete' | 'put'
+
+export const httpConfig = {
+    baseURL: ''
+}
+export type ResponseModel<T> = {
+    code: number
+    message: string
+    data: T
+    trace?: string
+}
+
+class Http {
+    post<T>(url, data) {
+        return this.request<T>(url, 'post', data)
+    }
+
+    request<T>(url: string, method: HttpMethod, data: any = null) {
+        return new Promise<ResponseModel<T>>((resolve, reject) => {
+
+            fetch(httpConfig.baseURL + url, {
+                method,
+                body: JSON.stringify(data),
+                headers: {
+                    'Content-Type': 'application/json;charset=utf-8'
+                }
+            })
+                .then(res => res.json()) // 只要json的响应数据
+                .then((res: ResponseModel<T>) => {
+                    if (res.code !== 0) {
+                        reject(Error(res.message))
+                        return;
+                    }
+                    resolve(res.data)
+                }).catch(reject)
+        });
+    }
+}
+
+const http = new Http();
+export default http

admin-fe/src/views/Login.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="login-wrapper">
+        <form @submit="onLogin">
+            <p>
+                <input placeholder="请输入账号" type="text" v-model="data.account">
+            </p>
+            <p>
+                <input placeholder="请输入密码" type="text" v-model="data.password">
+                {{ data.password }}
+            </p>
+            <button type="submit">登录</button>
+        </form>
+    </div>
+</template>
+
+<script lang="ts">
+import {reactive} from "vue";
+import http from "../util/http";
+
+export default {
+    name: "User",
+    setup() {
+        // vue 数据双向绑定(响应式原理)
+        // vue2 Object.definedProperty
+        // vue3 Proxy
+        const data = reactive({
+            account: '',
+            password: ''
+        })
+
+        function onLogin(e: Event) {
+            e.preventDefault()
+            http.post('/admin/user/login', data).then(result => {
+                console.log(result)
+            }).catch(err => {
+                console.log(err)
+            })
+        }
+
+        return {
+            data, onLogin
+        }
+    }
+}
+</script>
+
+<style scoped>
+.login-wrapper {
+
+}
+</style>

admin-fe/src/views/NotFound.vue

@@ -0,0 +1,18 @@
+<template>
+    <h1>Not Found</h1>
+</template>
+
+<script>
+import {useRoute} from 'vue-router'
+export default {
+    name: "NotFound",
+    setup(){
+        const r = useRoute();
+        console.log(JSON.stringify(r))
+    }
+}
+</script>
+
+<style scoped>
+
+</style>