first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/韩一伟/每天课程/2021-08-13/index.html
+++ b/历届学生/韩一伟/每天课程/2021-08-13/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>路由</title>
+    <style>
+        .slide-fade-enter-active {
+            transition: all .3s ease;
+        }
+
+        .slide-fade-leave-active {
+            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+        }
+
+        .slide-fade-enter,
+        .slide-fade-leave-to
+
+        /* .slide-fade-leave-active for below version 2.1.8 */
+            {
+            transform: translateX(10px);
+            opacity: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id="app">
+        <h1>Hello App!</h1>
+        <p>
+            <router-link to="/">首页</router-link>
+            <router-link to="/car">购物车</router-link>
+            <router-link to="/login">登录</router-link>
+        </p>
+
+        <div class="content">
+            <transition name="slide-fade">
+                <router-view></router-view>
+            </transition>
+
+        </div>
+    </div>
+
+</body>
+<script src="./vue.js"></script>
+<script src="./vue-router.js"></script>
+<script>
+
+    const Home = {
+        data() {
+            return {
+                list: [
+                    { id: 1, title: '新闻1' },
+                    { id: 2, title: '新闻2' },
+                    { id: 3, title: '新闻3' },
+                ],
+            }
+        },
+        template: `
+        <div class="Home">
+            <ul>
+                <router-link 
+                  :to="{ name: 'info', params: { id: item.id, title: item.title  } }" 
+                  tag="li" 
+                  v-for="item,index in list" :key="index">
+                  {{ item.title }}
+                </router-link>
+            </ul>
+        </div>`,
+    }
+    const Car = { template: '<div class="Car">Car</div>' }
+    const Login = {
+        methods: {
+            Login() {
+                localStorage.setItem("token", "Q3456TRFGTHR6Y4R3.3454.4356")
+                if (this.$route.query.hasOwnProperty("from")) {
+                    this.$router.replace({
+                        path: this.$route.query.from
+                    })
+                } else {
+                    this.$router.replace({
+                        path: "/"
+                    })
+                }
+            }
+        },
+        template: '<div class="Login" @click="Login">Login</div>'
+    }
+    const Info = {
+        created() {
+            console.log(this.$route.params.id);
+        },
+        // beforeRouteLeave(to, from, next) {
+        //     var isLeave = confirm("确认离开吗？")
+        //     if (isLeave) {
+        //         next()
+        //     }
+        // },
+        template: `
+        <div class="Info">
+            {{ $route.params.id }}
+        </div>`,
+    }
+
+    const routes = [
+        { path: '/', name: 'home', component: Home, meta: { isLogin: false } },
+        { path: '/car', name: 'car', component: Car, meta: { isLogin: true } },
+        { path: '/login', name: 'login', component: Login, meta: { isLogin: false } },
+        { path: '/info/:id/:title', name: 'info', component: Info, meta: { isLogin: false } },
+    ]
+
+    const router = new VueRouter({
+        routes
+    });
+
+    router.beforeEach((to, from, next) => {
+        // 页面需要登录
+        if (to.meta.isLogin) {
+            // 登录过了
+            if (localStorage.getItem("token") != null) {
+                next()
+            } else {
+                next({
+                    path: '/login',
+                    query: {
+                        from: to.path
+                    }
+                })
+            }
+        } else {
+            next()
+        }
+    })
+
+    const app = new Vue({
+        el: '#app',
+        router
+    })
+</script>
+
+</html>
--- a/历届学生/韩一伟/每天课程/2021-08-13/vue-router.js
+++ b/历届学生/韩一伟/每天课程/2021-08-13/vue-router.js
--- a/历届学生/韩一伟/每天课程/2021-08-13/vue.js
+++ b/历届学生/韩一伟/每天课程/2021-08-13/vue.js
--- a/历届学生/韩一伟/每天课程/2021-08-13/笔记.txt
+++ b/历届学生/韩一伟/每天课程/2021-08-13/笔记.txt
@@ -0,0 +1,76 @@
+单页web应用(spa)
+
+只有一个HTML页面，程序中所有页面都是js
+路由 vue-router
+
+
+路由有两种模式
+
+https://www.jianshu.com/p/ae8f9c41a77c
+
+hash 
+www.baidu.com/#/index
+www.baidu.com/#/about
+
+
+location.hash
+
+history
+www.baidu.com/index
+www.baidu.com/about
+
+
+pushState  添加一条浏览器的历史记录
+replaceState 替换浏览器历史记录
+
+
+页面跳转  
+1: router-link
+2: this.$router.push
+
+
+$router表示方法
+$route是获取路由参数
+
+
+参数传递：
+1：query
+www.baidu.com/#/info?id=1&page=122
+
+2：params
+www.baidu.com/#/info/1/122
+
+
+导航守卫
+1：全局前置守卫
+2：路由独享的守卫
+3：组件内的守卫
+
+
+登录拦截
+
+1：在登录页面，点击登录按钮，调用登录接口，将用户名密码给后端
+   {
+       code: 200,
+       msg: '',
+       result: {
+           token: 'sdfgfdwqerggfwbt'
+       }
+   }
+
+   token：是一串用户信息的加密字符串
+          WQDWEFEFWEFREFREFG.WFREGRTY5665YHRTGDR.WFREGRTY5665YHRTGDR
+
+  后端在接口中会返回token，前端需要缓存到本地中。
+
+2: 前端在全局路由守卫中判断，需要将要访问的页面是否需要登录，如果需要登录，是否已经登录  
+
+接口是无状态的
+
+json web token  jwt
+
+
+vue-cli
+2.x
+
+3.x 4.x