看视频学习angular2+SpringBoot建站

先奉上学习资料

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

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

项目结构

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


看视频学习angular2+SpringBoot建站_第1张图片
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的相片

你可能感兴趣的:(看视频学习angular2+SpringBoot建站)