zoukankan      html  css  js  c++  java
  • VUE框架之路由层,仓库层

    一:路由跳转

    this.$router.push('/course');
    this.$router.push({name: course});
    this.$router.go(-1);
    this.$router.go(1);
    <router-link to="/course">课程页</router-link>
    <router-link :to="{name: 'course'}">课程页</router-link>
    <template>
        <div class="nav">
            <ul>
                <li :class="{active: currentPage === '/'}">
                    <router-link to="/">主页</router-link>
                </li>
                <li :class="{active: currentPage === '/course'}">
                    <router-link to="/course">课程</router-link>
                </li>
                <li :class="{active: currentPage === '/course_detail'}">
    <!--                路由跳转-->
                    <router-link :to="{name: 'course_detail'}">课程详情页</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav"
        }
    </script>
    
    <style scoped>
        .nav {
            width: 100%;
            height: 60px;
            background-color: black;
        }
    
        .nav li {
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 30px;
        }
    
        .nav li:hover {
            cursor: pointer;
            background-color: aquamarine;
        }
    
        .nav li.active {
            cursor: pointer;
            background-color: aquamarine;
        }
    </style>
    component组件层
    <template>
        <div>
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土'
            },
            {
                id: 2,
                name: '前端放弃攻略'
            },
            {
                id: 3,
                name: '你最棒,他最强'
            },
            {
                id: 4,
                name: '基佬修炼法则'
            },
        ];
    
        export default {
            name: "course",
            components: {
                Nav
            },
            data() {
                return {
                    course_list
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
    
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1)
                },
                 gocourse_detail(){
                // this.$router.push({name:'course_detail'})
                        this.$router.push({name: 'course_detail'});
            }
            },
    
    
    
        }
    </script>
    
    <style scoped>
    
    </style>
    View页面层一
    <template>
        <div class="">
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
        </div>
    </template>
    
    <script>
    
        import Nav from "../components/Nav";
    
    
        export default {
            name: 'home',
            components: {
                Nav,
    
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)  // 跳转到页面
    
                    }
                },
                goBack() {
                    this.$router.go(-1); // 返回上一页
                    this.$router.go(-2);  // 返回上两页
    
                    this.$router.go(1)  // 前进一页
                },
                gocourse_detail(){
                    this.$router.push({name: 'course_detail'});  // 路由跳转
                }
    
            }
        }
    </script>
    View页面层二

    二:路由传参

    (1)方式一

    <template>
        <div class="course-card">
            <h3 @click="goDetail">{{course.name}}</h3>
        </div>
    </template>
    
    <script>
        export default {
            name: "CourseCard",
            props: ['course'],
            methods:{
                goDetail(){
                    this.$router.push({
                        name:'course_detail',
                        query:{id:this.course.id},   // 页面刷新传参不会消失
                        params:{id:this.course.id}  //  页面刷新传参会消失
                    })
                }
            }
        }
    </script>
    
    
    <style scoped>
        .course-card h3, .course-card a {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: coral;
            font: normal 20px/200px 'STSong';
            float: left;
            text-align: center;
            cursor: pointer;
            display: block;
        }
    </style>
    小组件一
    <template>
        <div class="nav">
            <ul>
                <li :class="{active: currentPage === '/'}">
                    <router-link to="/">主页</router-link>
                </li>
                <li :class="{active: currentPage === '/course'}">
                    <router-link to="/course">课程</router-link>
                </li>
                <li :class="{active: currentPage === '/course_detail'}">
    <!--                路由跳转-->
                    <router-link :to="{name: 'course_detail'}">课程详情页</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav",
            data(){
                return{
                    currentPage:''
                }
            },
            created() {
                this.currentPage = this.$route.path
            }
        }
    </script>
    
    <style scoped>
        .nav {
            width: 100%;
            height: 60px;
            background-color: black;
        }
    
        .nav li {
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 30px;
        }
    
        .nav li:hover {
            cursor: pointer;
            background-color: aquamarine;
        }
    
        .nav li.active {
            cursor: pointer;
            background-color: aquamarine;
        }
    </style>
    小组件二
    <template>
        <div>
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程页</h2>
            <hr>
            <div>
                <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
            </div>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
        import CourseCard from '@/components/CourseCard'
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土'
            },
            {
                id: 2,
                name: '前端放弃攻略'
            },
            {
                id: 3,
                name: '你最棒,他最强'
            },
            {
                id: 4,
                name: '基佬修炼法则'
            },
        ];
    
        export default {
            name: "course",
            components: {
                Nav,
                CourseCard
            },
            data() {
                return {
                    course_list
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
    
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1)
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});
                }
            },
    
    
        }
    </script>
    
    <style scoped>
    
    </style>
    页面渲染一
    <template>
        <div>
            <Nav></Nav>
    
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
    
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程详情页</h2>
            <hr>
            <p> {{course.name}} </p>
            <p> {{course.info}}</p>
            <p> {{course.price}}</p>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土',
                price: 6.66,
                info: '三分钟入门,一分钟入土!学了你不吃亏,不学你就废了!'
            },
            {
                id: 2,
                name: '前端放弃攻略',
                price: 3.66,
                info: '学习前端,忘掉所有痛苦!'
            },
            {
                id: 3,
                name: '你最棒,他最强',
                price: 5.22,
                info: '别做梦了!'
            },
            {
                id: 4,
                name: '基佬修炼法则',
                price: 80000,
                info: '就是他,错不了!'
            },
        ];
    
        export default {
            name: "Course-detail",
            components: {
                Nav
            },
            data() {
                return {
                    course: {},
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1);
                }
            },
            created() {
    
                let id = this.$route.query.id;  // 接受传参值
                // let id = this.$route.query.id;      // 接受传参值
                for (let courses of course_list) {  // 便利所有的值
                    if (id == courses.id) {
    
                        this.course = courses;
    
    
                        break
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    页面渲染二
    <template>
        <div class="">
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
    
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>主页</h2>
            <hr>
        </div>
    </template>
    
    <script>
    
        import Nav from "../components/Nav";
    
    
        export default {
            name: 'home',
            components: {
                Nav,
    
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)  // 跳转到页面
    
                    }
                },
                goBack() {
                    this.$router.go(-1); // 返回上一页
                    this.$router.go(-2);  // 返回上两页
    
                    this.$router.go(1)  // 前进一页
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});  // 路由跳转
                }
    
            }
        }
    </script>
    页面渲染三

    PS:

    (1)query:传参的时候刷新页面传参数据不会消失

    (2)params:传参的时候刷新页面数据会消失

    (2)方式二

    <template>
        <div class="nav">
            <ul>
                <li :class="{active: currentPage === '/'}">
                    <router-link to="/">主页</router-link>
                </li>
                <li :class="{active: currentPage === '/course'}">
                    <router-link to="/course">课程</router-link>
                </li>
                <li :class="{active: currentPage === '/course_detail'}">
    <!--                路由跳转-->
                    <router-link :to="{name: 'course_detail'}">课程详情页</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav",
            data(){
                return{
                    currentPage:''
                }
            },
            created() {
                this.currentPage = this.$route.path
            }
        }
    </script>
    
    <style scoped>
        .nav {
            width: 100%;
            height: 60px;
            background-color: black;
        }
    
        .nav li {
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 30px;
        }
    
        .nav li:hover {
            cursor: pointer;
            background-color: aquamarine;
        }
    
        .nav li.active {
            cursor: pointer;
            background-color: aquamarine;
        }
    </style>
    小组件一
    <template>
        <div class="course-card">
            <h3 @click="goDetail">{{course.name}}</h3>
        </div>
    </template>
    
    <script>
        export default {
            name: "CourseCard",
            props: ['course'],
            methods:{
                goDetail(){
                    this.$router.push(
                        this.$router.push(`/course_detail/${this.course.id}`)  // 通过传参id 需要使用``这个双引号可以添加变量
                    )
                }
            }
        }
    </script>
    
    
    <style scoped>
        .course-card h3, .course-card a {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: coral;
            font: normal 20px/200px 'STSong';
            float: left;
            text-align: center;
            cursor: pointer;
            display: block;
        }
    </style>
    小组件二
    <template>
        <div>
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程页</h2>
            <hr>
            <div>
                <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
            </div>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
        import CourseCard from '@/components/CourseCard'
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土'
            },
            {
                id: 2,
                name: '前端放弃攻略'
            },
            {
                id: 3,
                name: '你最棒,他最强'
            },
            {
                id: 4,
                name: '基佬修炼法则'
            },
        ];
    
        export default {
            name: "course",
            components: {
                Nav,
                CourseCard
            },
            data() {
                return {
                    course_list
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
    
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1)
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});
                }
            },
    
    
        }
    </script>
    
    <style scoped>
    
    </style>
    页面层一
    <template>
        <div>
            <Nav></Nav>
    
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
    
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程详情页</h2>
            <hr>
            <p> {{course.name}} </p>
            <p> {{course.info}}</p>
            <p> {{course.price}}</p>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土',
                price: 6.66,
                info: '三分钟入门,一分钟入土!学了你不吃亏,不学你就废了!'
            },
            {
                id: 2,
                name: '前端放弃攻略',
                price: 3.66,
                info: '学习前端,忘掉所有痛苦!'
            },
            {
                id: 3,
                name: '你最棒,他最强',
                price: 5.22,
                info: '别做梦了!'
            },
            {
                id: 4,
                name: '基佬修炼法则',
                price: 80000,
                info: '就是他,错不了!'
            },
        ];
    
        export default {
            name: "Course-detail",
            components: {
                Nav
            },
            data() {
                return {
                    course: {},
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1);
                }
            },
            created() {
    
    
                let id = this.$route.params.id;      // 接受传参值
                for (let courses of course_list) {  // 便利所有的值
                    if (id == courses.id) {
    
                        this.course = courses;
    
    
                        break
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    页面层二
    <template>
        <div class="">
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
    
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>主页</h2>
            <hr>
        </div>
    </template>
    
    <script>
    
        import Nav from "../components/Nav";
    
    
        export default {
            name: 'home',
            components: {
                Nav,
    
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)  // 跳转到页面
    
                    }
                },
                goBack() {
                    this.$router.go(-1); // 返回上一页
                    this.$router.go(-2);  // 返回上两页
    
                    this.$router.go(1)  // 前进一页
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});  // 路由跳转
                }
    
            }
        }
    </script>
    页面层三
     {
          path: '/course_detail/:id',  // 类似于正则表达式
          name: 'course_detail',
          component: course_detail
        },
    路由层

    PS:

    (1)此种方式使用了正则表达式 通过匹配正则传递的参数 进行数据的筛选

    三:VUE跨组件传参

    (1)方式一:localstorage

        <template>
            <div class="course-card">
                <h3 @click="goDetail">{{course.name}}</h3>
            </div>
        </template>
    
        <script>
            export default {
                name: "CourseCard",
                props: ['course'],
                methods:{
                    goDetail(){
                        this.$router.push(
                            {
                                name:'course_detail',
                                query:{id:this.course.id}
                            }  // 通过传参id 需要使用``这个双引号可以添加变量
                        )
                    }
                }
            }
        </script>
    
    
        <style scoped>
            .course-card h3, .course-card a {
                width: 200px;
                height: 200px;
                border-radius: 50%;
        background-color: coral;
                font: normal 20px/200px 'STSong';
                float: left;
                text-align: center;
                cursor: pointer;
                display: block;
            }
        </style>
    小组件一
    <template>
        <div class="nav">
            <ul>
                <li :class="{active: currentPage === '/'}">
                    <router-link to="/">主页</router-link>
                </li>
                <li :class="{active: currentPage === '/course'}">
                    <router-link to="/course">课程</router-link>
                </li>
                <li :class="{active: currentPage === '/course_detail'}">
    <!--                路由跳转-->
                    <router-link :to="{name: 'course_detail'}">课程详情页</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav",
            data(){
                return{
                    currentPage:''
                }
            },
            created() {
                this.currentPage = this.$route.path
            }
        }
    </script>
    
    <style scoped>
        .nav {
            width: 100%;
            height: 60px;
            background-color: black;
        }
    
        .nav li {
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 30px;
        }
    
        .nav li:hover {
            cursor: pointer;
            background-color: aquamarine;
        }
    
        .nav li.active {
            cursor: pointer;
            background-color: aquamarine;
        }
    </style>
    小组件二
    <template>
        <div>
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>{{cTitle}}</h2>
            <hr>
            <div>
                <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
            </div>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
        import CourseCard from '@/components/CourseCard'
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土'
            },
            {
                id: 2,
                name: '前端放弃攻略'
            },
            {
                id: 3,
                name: '你最棒,他最强'
            },
            {
                id: 4,
                name: '基佬修炼法则'
            },
        ];
    
        export default {
            name: "course",
            components: {
                Nav,
                CourseCard
            },
            data() {
                return {
                    course_list,
                    cTitle: '课程页'
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
    
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1)
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});
                }
            },
            created() {
                localStorage.cTitle && (this.cTitle = localStorage.cTitle)
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>
    页面层一
    <template>
        <div>
            <Nav></Nav>
    
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
    
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程详情页</h2>
            <p>
                主页:<input type="text" v-model="hTitle">
                <!--            点击修改主页的名称会发生改名-->
                <button @click="changehTitle">修改主页</button>
            </p>
            <p>
                课程页:<input type="text" v-model="cTitle">
                <!--            点击修改课程页的名称会发生改名-->
                <button @click="changecTitle"> 修改课程页</button>
            </p>
            <hr>
            <p> {{course.name}} </p>
            <p> {{course.info}}</p>
            <p> {{course.price}}</p>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土',
                price: 6.66,
                info: '三分钟入门,一分钟入土!学了你不吃亏,不学你就废了!'
            },
            {
                id: 2,
                name: '前端放弃攻略',
                price: 3.66,
                info: '学习前端,忘掉所有痛苦!'
            },
            {
                id: 3,
                name: '你最棒,他最强',
                price: 5.22,
                info: '别做梦了!'
            },
            {
                id: 4,
                name: '基佬修炼法则',
                price: 80000,
                info: '就是他,错不了!'
            },
        ];
    
        export default {
            name: "Course-detail",
            components: {
                Nav
            },
            data() {
                return {
                    course: {},
                    hTitle: '',
                    cTitle: '',
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1);
                },
                changehTitle() {
                    this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真(也就是输入的有值) 后面的才会成立
    
    
                },
                changecTitle() {
                    this.cTitle && (localStorage.cTitle = this.cTitle)        // 只有this.cTitle为真(也就是输入的有值) 后面的才会成立
                },
    
            },
            created() {
    
    
                let id = this.$route.query.id;      // 接受传参值
                for (let courses of course_list) {  // 便利所有的值
                    if (id == courses.id) {
    
                        this.course = courses;
    
    
                        break
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    页面层二
    <template>
        <div class="">
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
    
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>{{hTitle}}</h2>
            <hr>
        </div>
    </template>
    
    <script>
    
        import Nav from "../components/Nav";
    
    
        export default {
            name: 'home',
            components: {
                Nav,
    
            },
            data() {
                return {
                    hTitle: '主页'
    
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)  // 跳转到页面
    
                    }
                },
                goBack() {
                    this.$router.go(-1); // 返回上一页
                    this.$router.go(-2);  // 返回上两页
    
                    this.$router.go(1)  // 前进一页
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});  // 路由跳转
                }
    
            },
            created() {
                localStorage.hTitle && (this.hTitle = localStorage.hTitle)  // 如果localStorage有值 则使用仓库的 没有值使用默认值
            }
        }
    </script>
    页面层三

    PS:

      (1)上述课程详情页 更改了主页与课程页面的名称 且刷新之后课程名称不会更改为原有的

      (2)localstorage存储的是永久的数据

    (2)方式二:VUE仓库(store.js)

    (1)

    <template>
        <div>
            <Nav></Nav>
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
            <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button>
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>{{cTitle}}</h2>
            <hr>
            <div>
                <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
            </div>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
        import CourseCard from '@/components/CourseCard'
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土'
            },
            {
                id: 2,
                name: '前端放弃攻略'
            },
            {
                id: 3,
                name: '你最棒,他最强'
            },
            {
                id: 4,
                name: '基佬修炼法则'
            },
        ];
    
        export default {
            name: "course",
            components: {
                Nav,
                CourseCard
            },
            data() {
                return {
                    course_list,
                    cTitle: '课程页'
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
    
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1)
                },
                gocourse_detail() {
                    this.$router.push({name: 'course_detail'});
                }
            },
            created() {
                    
                    this.cTitle = this.$store.state.cTitle  // 获取仓库数据
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>
    课程页
    <template>
        <div>
            <Nav></Nav>
    
            <button type="button" @click="goPage('/course')">跳转课程页面</button>
    
            <button type="button" @click="goPage('/')">跳转主页</button>
            <button type="button" @click="goBack">页面前进返回</button>
            <h2>课程详情页</h2>
            <p>
                主页:<input type="text" v-model="hTitle">
                <!--            点击修改主页的名称会发生改名-->
                <button @click="changehTitle">修改主页</button>
            </p>
            <p>
                课程页:<input type="text" v-model="cTitle">
                <!--            点击修改课程页的名称会发生改名-->
                <button @click="changecTitle"> 修改课程页</button>
            </p>
            <hr>
            <p> {{course.name}} </p>
            <p> {{course.info}}</p>
            <p> {{course.price}}</p>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
    
        let course_list = [
            {
                id: 1,
                name: 'Python入门到入土',
                price: 6.66,
                info: '三分钟入门,一分钟入土!学了你不吃亏,不学你就废了!'
            },
            {
                id: 2,
                name: '前端放弃攻略',
                price: 3.66,
                info: '学习前端,忘掉所有痛苦!'
            },
            {
                id: 3,
                name: '你最棒,他最强',
                price: 5.22,
                info: '别做梦了!'
            },
            {
                id: 4,
                name: '基佬修炼法则',
                price: 80000,
                info: '就是他,错不了!'
            },
        ];
    
        export default {
            name: "Course-detail",
            components: {
                Nav
            },
            data() {
                return {
                    course: {},
                    hTitle: '',
                    cTitle: '',
                }
            },
            methods: {
                goPage(path) {
                    let current_path = this.$route.path;
                    if (current_path != path) {
                        this.$router.push(path)
                    }
                },
                goBack() {
                    this.$router.go(-1);
                    this.$router.go(1);
                },
                changehTitle() {
                    this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真(也就是输入的有值) 后面的才会成立
    
    
                },
                changecTitle() {
                    console.log(this.$store);  // 查看仓库数据存储在哪个目录下
                    this.$store.state.cTitle = this.cTitle;  // 数据更改
    
                },
    
            },
            created() {
    
    
                let id = this.$route.query.id;      // 接受传参值
                for (let courses of course_list) {  // 便利所有的值
                    if (id == courses.id) {
    
                        this.course = courses;
    
    
                        break
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    课程详情页
    import Vue from 'vue'
    import Vuex from 'vuex'
    import cookies from 'vue-cookies'
    
    
    Vue.use(Vuex);
    Vue.use(cookies);
    export default new Vuex.Store({
      state: {
          cTitle:'课程页'
      },
      mutations: {
    
      },
      actions: {
    
      }
    })
    store.js

    PS:

      (1)如上述课程详情页从仓库获取数据更改了课程页的名称

      (2)刷新更改名称之后的页面 页面名称又恢复之前的页面

      (3)vue通过仓库存储的数据 不会临时有效刷新就没了

    (2)仓库插件

    export default new Vuex.Store({
        state: {
            title: '默认值'
        },
        mutations: {
            // mutations 为 state 中的属性提供setter方法
            // setter方法名随意,但是参数列表固定两个:state, newValue
            setTitle(state, newValue) {
                state.title = newValue;
            }
        },
        actions: {}
    })
    store.js
    任意组件给变量赋值
    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle', 'newTitle')
    任意组件获取变量的值
    console.log(this.$store.state.title)

     (3)方式三:cookie

    (1)安装

    cnpm install vue-cookies  // 安装cookie插件

    (2)配置

    // 第一种
    import cookies from 'vue-cookies'      // 导入插件
    Vue.use(cookies);                    // 加载插件
    new Vue({
        // ...
        cookies,                        // 配置使用插件原型 $cookies
    }).$mount('#app');
    
    // 第二种
    import cookies from 'vue-cookies'    // 导入插件
    Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies
    PS:推荐使用第二种
    <template>
        <div class="tst-page">
            <Nav></Nav>
            <h2>测试页面</h2>
            <p>
                <input type="text" v-model="token">
                <button @click="setToken">设置token</button>
            </p>
            <p>
                <button @click="getToken">获取token</button>
            </p>
            <p>
                <button @click="delToken">删除token</button>
            </p>
        </div>
    </template>
    
    <script>
        import Nav from '@/components/Nav.vue'
    
        export default {
            name: "TestPage",
            components: {
                Nav
            },
            data() {
                return {
                    token: ''
                }
            },
            methods: {
                setToken() {
                    if (this.token) {
                        let token = this.token;
                        this.$cookies.set('token', token, '1d'); // 设置token 第一个参数是key 第二个参数是值 第三个参数是token生存时间 默认一天
                        console.log(token);
                        this.token = ''
                    }
                },
                getToken() {
                    this.$cookies.get('token')  // 获取token
                },
                delToken() {
                    this.$cookies.remove('token')  // 删除token
                },
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    页面层

     PS:

      (1)token:用来认证的字符串

      (2)产生:后台产生

      (3)存储:后台存储(session表 文件 缓存) 前台存储:cookie

      (4)使用:服务器生成返回给前台 前台进行认证的时候携带cookie进行认证

      (5) 前后台分离项目:后台生成token,返回给前台 => 前台自己存储,发送携带token请求 => 后台完成token校验 => 后台得到登陆用户

     四:axios

    (1)作用:前后台数据进行交互

    (2)安装

    cnpm install axios

    (3)main.js

    import axios from 'axios'
    
    Vue.prototype.$axios = axios;

    (3)

    <template>
        <div class="tst-page">
            <Nav></Nav>
            <h2>测试页面</h2>
            <p>
                用户名称:
                <input type="text" v-model="username">
            </p>
            <p>
                用户密码:
                <input type="text" v-model="password">
            </p>
            <button type="button" @click="axiosAction">后台提交数据</button>
    
        </div>
    </template>
    
    <script>
        import Nav from '@/components/Nav.vue'
    
        export default {
            name: "TestPage",
            components: {
                Nav
            },
            data() {
                return {
                    username: '',
                    password: ''
                }
            },
            methods: {
    
                axiosAction() {
                    // this.$axios({
                    //     url: 'http://127.0.0.1:8000/test/',  // 因为不在一个服务器必须写全路径
                    //     method: 'get',  // get请求
                    //     params: {
                    //         username: this.username,
                    //         password: this.password,
                    //     }
                    // })
                    this.$axios({
                            url: 'http://127.0.0.1:8000/test/',  // 因为不在一个服务器必须写全路径
                            method: 'post',  // get请求
                            params: {
                                username: this.username,
                                password: this.password,
    
                            }
    
                        },
                        this.username = '',
                        this.password = ''
                    )
                        .then(function (response) {  // 回调函数 成功
                            console.log(response)
                        }).catch(function (response) {
                        console.log(response)
                    })
                },
    
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>
    前段

    五:域间同源问题

    // 后台接收到前台的请求,可以接收前台数据与请求信息,发现请求的信息不是自身服务器发来的请求,拒绝响应数据,这种情况称之为 - 跨域问题(同源策略 CORS)
    
    // 导致跨域情况有三种
    // 1) 端口不一致
    // 2) IP不一致
    // 3) 协议不一致
    
    // Django如何解决 - django-cors-headers模块
    // 1) 安装:pip3 install django-cors-headers
    // 2) 注册:
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    // 3) 设置中间件:
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]
    // 4) 设置跨域:
    CORS_ORIGIN_ALLOW_ALL = True

    六:element-ui插件

    (1)安装:

    >: cnpm i element-ui -S

    (2)main.js配置

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
  • 相关阅读:
    通过internet网络唤醒主机的方法
    信用风险计量模型
    Vintage、滚动率、迁移率的应用
    (信贷风控十五)评分卡分数切分、授信额度与利率定价
    (信贷风控十)催收评分卡的介绍
    (信贷风控十六)组合评分卡模型
    (信贷风控十四)深度神经网络模型用于评分卡模型(理论)
    (十三)GBDT模型用于评分卡模型python实现
    (信贷风控九)行为评分卡模型python实现
    改变jupyter notebook的主题背景
  • 原文地址:https://www.cnblogs.com/SR-Program/p/11667227.html
Copyright © 2011-2022 走看看