资讯专栏INFORMATION COLUMN

angularjs+springMvc学习笔记

dreamGong / 3502人阅读

摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太

回调

说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数
例如,在下面这段代码中,上面定义了两个函数success和error,下面的promise.then(success,error)方法请求成功执行success,失败执行error

异步

异步的原理我看了网上的一些博客和例子,大都以定时任务setTimeout, setInterval为例子说明,但具体的原理我还是不太明白,我只知道js异步的执行顺序和c/c++的不同
例如,我把上面的success方法中的$scope.teachers = response.data写到外面,即:

按照c/c++的顺序,当上面promise.then()语句执行完之后,才执行下面的赋值语句,可js的异步处理会直接执行下面的赋值语句,如果在控制台输出teachers,会显示undefined

跨域CROS

在前后台对接时会发生跨域问题

在spring官方文档有详细的解决方案,如下图

按照需求进行改写就行了

建立数据表(后台)

在thinkphp中,我们通过navicatMysql数据库工具建立数据表,而在spring中,则是通过新建类来建立数据表,对应关系如下

teacher类对应表名,私有属性对应表的各个字段

然后建立接口来访问和操作数据

这里遇到一个小问题,在定义Teacher类时,设置主键自增

官方推荐使用AUTO,但是由于我们的数据库存在一些问题,只能使用IDENTITY来暂时解决

通过ui-router定制路由(前台)

ui-router的出现使得路由定制非常简单易用,在安装完ui-router后,改写app.js

接着,在V层添加ui-view标签就可以实现页面的跳转了

功能性开发(前台)

1.定义路由对应的控制器(ui-router)
2.初始化控制器->yoman命令->yo angular.controller user 生成位置app/scripts/controller/user.js
3.数据绑定至V层(双向绑定)
4.功能开发

功能性开发(后台)

后台
1.增加路由注解
(1)指明方法(get,post,delete,put,patch)
(2)指明地址(例如127.0.0.1:8080/Teacher)
2.有cros设置的,增加cros设置

关于第一步,按照下面的写法改写就行

@Autowired 自动装置接口实例化的对象
@GetMapping使用的方法

总结

1.第一次接触angularjs与springMVC前后台分离开发的模式,感受到了它比thinkphp强大的原因,非常方便团队分工开发
2.使用注解的方式写程序,就好像给程序注释一样,非常方便,而且易读
3.yoman的自动刷新机制解放了每次写前台F5刷新,在写原型时相当方便,有了angularJs的双向绑定,就再也不会出现thinkphp里十几行长的$this->assign()
4.idea编译器强大的功能省下很多用在程序规范的精力,alt+insert生成模板相当方便,出了错打断点debug可以很快可以发现问题
5.总之,相比于thinkphp,angularJs+springMVC的开发更加规范,很容易做到代码风格的统一和程序的易读,可以将更多的精力投放到功能的设计和实现上来

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97800.html

相关文章

  • angularjs+springMvc学习笔记

    摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...

    rozbo 评论0 收藏0
  • 前后端分离的一点实践

    摘要:怎么做前后端的分离我目前的做法是将作为一种服务存在,仅需要提供接口即可,前端目前采用,调用后端,解析数据,静态页面。采用,充当层,前后端实现了真正的分离,但还是有点问题的。 什么是前后端分离 对于这个问题,其实可以看看我的学习历程,我觉得很好的体现了Web开发模式的演化。 石器时代:那正是本人刚学JSP的时候,写了一个简单的商城DEMO,所有的业务逻辑,数据库的交互以及Javascri...

    enda 评论0 收藏0
  • springMvc学习笔记(2)

    摘要:笔记这周学习安装和配置和,为测试做准备。该软件由创建,并于年首次公开发布。同名公司成立于年,以提供支持。从年月开始,的开发由赞助,而年月至年月期间,其开发由赞助。最后发现是因为中的中的应该为大写将其改为及解决了此问题。 笔记 这周学习安装和配置nginx和redis,为测试做准备。showImg(https://segmentfault.com/img/bVbpdYF?w=660&h=...

    Shonim 评论0 收藏0
  • 《Build your own AngularJS笔记分享

    摘要:初次写文章,请多多包涵我最近正在根据这本书从头开始实现了一遍的框架。笔记目录链接个人认为本书对于想了解框架源码的读者来说相当有用,完全值得去购买这本书书本主页。因为是初学者,笔记里可能有一些错误,我也会继续修改。 (初次写文章,请多多包涵) 我最近正在根据《Build your own angularJS》这本书从头开始实现了一遍AngularJS的框架。我把相关的源码和我的个人学习笔...

    firim 评论0 收藏0

发表评论

0条评论

dreamGong

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<