美文网首页
6、前后端分离开发——前端学习

6、前后端分离开发——前端学习

作者: youi_e050 | 来源:发表于2019-03-17 20:42 被阅读0次

前端代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js-访问API接口数据-蓝墨云班课练习</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 通过CDN引入axios -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <style type="text/css">
            body {
                background-color: #eee;
            }

            .top {
                width: 80%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
            }
           
            
            hr {
                width: 80%;
                color: #efefef;
            }

            .container {
                width: 80%;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                padding-left: 20px;
                padding-top: 10px;
            }

            .container1 {
                width: 80%;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                padding-left: 20px;
                padding-top: 10px;
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                
                filter: grayscale(100%);
                
                filter: gray;
            }

            .card {
                width: 190px;
                display: flex;
                flex-direction: column;
                border: 1px solid #eee;
                margin-right: 20px;
                margin-bottom: 10px;
                background-color: #fff;
                justify-content: center;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 5px;
            }

            

            p {
                font-size: 12px;
                margin-bottom: 5px;
            }

            .teacher {
                display: flex;
                justify-content: space-between;
            }

            .left {
                display: flex;
            }

            .avatar img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .code {
                color: #00BBDD;
                margin-top: 5px;
            }
            .cover{
                 overflow: hidden;
            }

            .fang {
                width: 100%;
                height:100%;
                /* 沿Y轴翻转180度 */
                /* transform:rotateY(180deg); */
                /* 100%填充背景图 */
                background-size: 100% 100%;
                /* 两秒完成进入离开动画 */
                 transition: all 2s;
            
            }

            .fang:hover {
                /* 沿Y轴翻转180度 */
                /* transform:rotateY(180deg); */
                /* 背景图放大 */
                background-size:130% 130%;
                /* 透明度变为0.5 */
                opacity: 0.5;
                transform: scale(1.4);
                /* 鼠标手型 */
                cursor: pointer;
            }

            
        </style>
    </head>
    <body>
        <div id="app">
        
            <div class="top">
                <p>进行中的班课</p>
                <p>{{courses.length}}个进行中的班课</p>
            </div>
            <hr>
            <div class="container">
                <div class="card" v-for="(course, index) in courses" :key="index">
                    <div class="cover">
                     <img :src="'img/'+course.cover" class="fang">
                    </div> 
                    <div class="course-class">
                        <p>{{course.courseClass}}</p>
                    </div>
                    <div class="course-name">
                        <p>{{course.courseName}}</p>
                    </div>
                    <div class="teacher">
                        <div class="left">
                            <div class="avatar">
                                <img :src="'img/'+course.avatar">
                            </div>
                            <div class="username">
                                <p class="code">{{course.username}}</p>
                            </div>
                        </div>
                        <div class="course-code">
                            <p class="code" v-if="loginUserId === course.userId">{{course.courseCode}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top">
                <p>已结束的班课</p>
                <p>{{finishcourses.length}}个结束的班课</p>
            </div>
            <hr>
            <div class="container1">
                <div class="card" v-for="(course, index) in finishcourses" :key="index">
                    <div class="cover">
                        <img :src="'img/'+course.cover" >
                    </div>
                    <div class="course-class">
                        <p>{{course.courseClass}}</p>
                    </div>
                    <div class="course-name">
                        <p>{{course.courseName}}</p>
                    </div>
                    <div class="teacher">
                        <div class="left">
                            <div class="avatar">
                                <img :src="'img/'+course.avatar" >
                            </div>
                            <div class="username">
                                <p class="code">{{course.username}}</p>
                            </div>
                        </div>
                        <div class="course-code">
                            <p class="code" v-if="loginUserId === course.userId">{{course.courseCode}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    loginUserId: 2,
                    courses: [],
                    finishcourses: []
                },
                created: function() {
                    var _this = this;
                    axios.all([
                            axios.get('http://localhost:8080/web/courses'),
                            axios.get('http://localhost:8080/web/courses1')
                        ])
                        .then(axios.spread(function(courses, finishcourses) {
                            console.log('User', courses.data);
                            _this.courses = courses.data;
                            console.log('Repositories', finishcourses.data);
                            _this.finishcourses = finishcourses.data;
                        }))

                }

            })
        </script>
    </body>
</html>

运行结果:


image.png
image.png

上面的内容都是从数据库导出的,然后设置了一些css

相关文章

  • 前端如何高效的与后端协作开发

    前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由...

  • 前后端分离开发

    含义 前后端分离开发顾名思义,就是将前端后端分离可以同时进行开发.前端就只管前端的事,后端就只管后端的事,比起传统...

  • 前后端分离开发

    前后端分离开发顾名思义,就是将前端后端分离可以同时进行开发.前端就只管前端的事,后端就只管后端的事,比起传统的We...

  • 前端该如何与后端合作?

    1、前后端分离 前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化...

  • 前后端分离-独立于后端的前端开发

    题目:前后端分离-独立于后端的前端开发简介:如何构建 Web 前端 Mock Server 前后端分离真实数据模拟...

  • Django RESTful 系列教程(四)

    前后端分离的好处就是可以使前端和后端的开发分离开来,如果使用 Django 的模板系统,我们需要在前端和后端的开发...

  • Webpack设置代理,实现前后端分离开发

    最近做的项目是前后端分离进行开发的,在后端给到前端接口前,需要前端自己去mock数据完成开发。因此查阅了一些资料,...

  • Vue基础

    相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...

  • 2018-04-27 MVC框架(Model View Cont

    MVC是一种编程模式,也就是前端与后端分离的一种编程思想。前端与后端分离有利于提高开发效率与开发速度,同一后端程序...

  • DRF初识,以及CORS

    开发模式 普通开发方式(前后端一起写)前后端分离 后端开发: 永远返回HttpResponse为前端提供url( ...

网友评论

      本文标题:6、前后端分离开发——前端学习

      本文链接:https://www.haomeiwen.com/subject/zrlpmqtx.html