2019-03-17

2019-03-17 本文已影响0人诅咒猎豹

前后端分离开发综合练习:
准备工作：

确保Idea和Hbulider正常工作之外，还要安装好数据库软件，比如MySQL，后台测试接口软件Postman(提前注册好)

前后端分离开发的意义：

知乎：Web 前后端分离的意义大吗？
《浅谈架构之路：前后端分离模式》

一、后台部分

大致顺序总览:

173256.png

1.建立数据库db_spring,分别建立表t_sys_user,t_course

image.png

2.表建完之后，自己添加几条数据
在idea中创建好web项目以及相应的包

image.png

按照顺序一步步完成代码，代码已经上传到github的web项目中，地址如下：
github地址
配置tomacat服务器

image.png

service单元测试通过之后，开始进行controller测试，使用postman

image.png

到这里,后台工作大致也结束了
二、前端部分
将后台数据通过页面展示出来

<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;
            }
            .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;
            }
            .card img {
                width: 100%;
            }
            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;
            }
            .bottom {
                width: 80%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
            }
            .container1 {
                width: 80%;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                padding-left: 20px;
                padding-top: 10px;
            }
            .card1 {
                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;
                -webkit-filter: grayscale(1);
            }
            
        </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">
                    </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="bottom">
                <p>已结束的班课</p>
                <p>{{courses1.length}}个已经结束的班课</p>
            </div>
            <hr>
            <div class="container1">
                <div class="card1" v-for="(course, index) in courses1" :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: [],
                    courses1: []
                },
                created: function() {
                    var _this = this;
                    axios.get('http://127.0.0.1:8080/web/courses')
                        .then(function(response) {
                            console.log(response.data);
                            _this.courses = response.data;
                        }),
                       axios.get('http://127.0.0.1:8080/web/fin-courses')
                        .then(function(response) {
                            console.log(response.data);
                            _this.courses1 = response.data;
                        })
                }
            })
        </script>
    </body>
</html>

tips：对图片加上一层黑白色：-webkit-filter: grayscale(1)
效果演示：

image.png

注意点：
1、文件命名要符合规范，存放位置一定要保证正确合理
2、数据库中主键属性为bignit，在idea中为Long(L要大写)
3、要按照步骤来编写后台代码，单元测试要保证通过，结果合理
4、一定要保证Tomcat服务器配置正确
5、postman测试要杜绝404等一切错误
6、在写完前端代码进行测试时，tomacat服务器不能关闭，不然数据跳转不过去

2019-03-17

前后端分离开发的意义：

一、后台部分

猜你喜欢

热点阅读