看视频学习angular2+SpringBoot建站

先奉上学习资料

SpringBoot And Angular2 入门实战视频教程：

链接：https://pan.baidu.com/s/1i4qqutVm_DHp4VkXBN5zRg
提取码：gyvi

项目结构

这是整个项目结构，也是开发的指导思想，通过这张图我们可以对项目有一个清晰的认识

image.png

环境搭建

第一讲介绍搭建前端angular2环境，还是比较使用原始的手动编译、js引入方式，看看这部分也挺有意思的，了解一下更原始的开发方式，视频距离现在有2年了，angular的版本也已经从beta升级到4了，语法和开发方式都有比较大的变化，我们现在可以用cli更方便的写代码，所以视频中前端的开发部分，我推荐使用ng-cli开发，页面和逻辑可以参考视频。前端开发的编辑器我推荐vscode，作者用的Atom，vscode打开项目速度更快。
第二讲介绍后端环境搭建，作者选择spring boot的版本是1.3.3release，我用的是1.5.3release，新版本的开发过程没有遇到什么坑，不过在依赖上有一些差异。开发工具作者选择的是eclipse，我用的是intellij idea旗舰版，占内存更小，个人比较喜欢idea的界面。
在文章的末尾，我会贴上视频对应项目的github地址和我自己建的项目地址，同时介绍各个讲次的主要内容。

开发心得

application.properties文件我建议改成yml的格式，结构会更清晰。加上profiles.active配置，设置不同环境下的配置，方便你在公司家里切换。
通过手打后端代码，学习后端的项目结构，可以学习到分层概念，controller、dao、service、model各个模块互相分工又相互依赖，结构清晰。
学习到后面你会发现前端ts代码和后端java代码太像了，结构也很相似，后端项目的分层机制对前端开发也很有指导意义。
后端开发在配置跨域、加token验证等方面，都是比较陌生的环节，这些环境配置，都是前后端联调的关键节点，spring boot关键在一些注解和jpa，简单的项目中，后端代码的任务就是存取数据。
前端方面不需要多讲，增加了semantic ui框架
其他的主要是实现业务的代码
项目完成后，感觉有几个不足之处：

1. like的时候需要同时更新user和photo数据，这里应该使用事务管理
2. 接口报错应该有提示框
3. 获取用户的时候，拿到了所有数据包括密码，这样不合理
4. 退出登录做得不好
5. 一些页面要求用户登录的，可以加上路由守卫
6. 中文编码格式:mysql的数据库原因，把mysql升级到5.7更方便设置编码

项目地址

github上的视频对应项目地址：https://github.com/zdavidlnx/lagoon
我的项目地址：https://github.com/LeventZheng/angular4-SpringBoot/tree/master/lagoon

最后整理了一下讲次结构

讲次	内容
0	项目成果展示与介绍
1	ng2入门与环境搭建
2	springboot介绍
3	项目总览
4	首页前端
5	前端建photo-list和side-panel组件
6	前端项目引入jquery和semantic库文件
7	前端nav-bar导航栏
8	后端环境搭建与启动、pom文件加依赖、建photo的model文件
9	后端建user和comment的model文件
11	前端注册register组件
12	前端注册service文件
13	前端User、Photo、Comment的model，注册组件调用sendUser
14	后端register接口实现
15	后端配置application文件
16	前后端register功能接口联调、配置跨域
17	前端register.compopnent.ts实现注册用户并处理回调
18	使用jjwt包加token验证，介绍jwt.io
19	后端加token验证，加载依赖、实现逻辑
20	前端登录页逻辑实现
21、22	前后端实现登录的功能
23	前端完善登录页的页面交互
24、25	前端my-album我的相册组件的页面与service
26、27	前端add-photo添加相册组件的页面与service
28	后端实现上传图片、添加相册的功能
29	后端解决photo表中user字段为空的问题，注意前端传user必须是json结构
30、31	前后端相册详情页的页面与逻辑
32	前后端相册评论功能
33、34	前后端首页改成动态展示
35	前后端展示photo ranking，筛选排名前3的相片