Day 08 前后端分离开发综合练习

准备工作：

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

前后端分离开发的意义：

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

一、后台部分

大致顺序总览

1.根据需求，分析数据库，建库，建表，准备数据
2.建立web模块，webapp类型的maven项目
3.手动创建src(蓝色)，resources，test(绿色)—java目录
4.建立package，entity，dao，service，controller
5.添加pom依赖：web模块依赖，webmvc模块依赖，jackson相关依赖
6.创建entity实体类
7.dao接口，用注解的方式增加自定义的复杂关联语句
8.service接口，注入dao，调用相关方法
9.用Junit对service做单元测试
10.controller，使用RESTful风格请求，完成控制层
11.用postman对controller进行测试，杜绝一切404,500

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

  
  
  t_sys_user
  
  
  t_course
• 表建完之后，自己添加几条数据

• 在idea中创建好web项目以及相应的包

  
  
  结构如图
• 按照顺序一步步完成代码，代码已经上传到github的web项目中，地址如下：
  github地址

• 配置tomacat服务器

  
  
  1
  
  
  2
  
  
  3
  
  
  4
  
  
  5

• 设置完记得先aply，再点击ok

  
  
  6
  
  
  测试
  
  
  配置成功

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

  
  
  测试

到这里,后台工作大致也结束了

二、前端部分

• 将后台数据通过页面展示出来

    
        
        
        
        
        
        
        
        
        
    
    
        

            

                
进行中的班课
                
{{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)
效果演示：

演示

修改数据库

刷新页面

注意点：

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