2019-03-17

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

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

前后端分离开发的意义：

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

一、后台部分

大致顺序总览:

173256.png

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

image.png

image.png

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

image.png

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

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

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

image.png

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

    
        
        
        
        
        
        
        
        
        
    
    
        

            

                
进行中的班课
                
{{courses.length}}个进行中的班课
            
            

            

                

                    

                        
                    
                    

                        
{{course.courseClass}}
                    
                    

                        
{{course.courseName}}
                    
                    

                        

                            

                                
                            
                            

                                
{{course.username}}
                            
                        
                        

                            
{{course.courseCode}}
                        
                    
                

            
            

                
已结束的班课
                
{{courses1.length}}个已经结束的班课
            
            

            

                

                    

                        
                    
                    

                        
{{course.courseClass}}
                    
                    

                        
{{course.courseName}}
                    
 
                    

                        

                            

                                
                            
                            

                                
{{course.username}}
                            
                        
                        

                            
{{course.courseCode}}
                        
                    
                
            
            
        
        
    

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

image.png

image.png

image.png

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