前提:趣编程的API已经写好。关于API的写法,参见之前的文章(上手第一个API)。本文着重介绍前端Angular2与API的结合。 所需要用到的路由为趣编程admin-api项目里技术类别的列表与添加两个路由。

构建基础页面

代码一般只需要在根目录下src/app/文件夹下编写即可。首先新建tech-category目录,在tech-category目录下新建 index.ts, tech-category.ts, tech-categories.component.ts, tech-category-index.html, tech-category.service.ts五个文件。

接着在下面的文件中写入如下代码(无关代码用省略号代替):

此时基础的页面应该已经可以成功加载了。

完善技术分类列表

在基础页面搭建完毕后,我们需要将数据显示出来。接下来开始写Service文件

这个Service文件类似于我们在API项目下写的Repository,所有的数据操作都在这里进行,然后在其他地方调用Service来进行数据处理。

因此,在tech-categories.component.ts中引入这个服务,并进行返回。

在component中调用了Service来返回数据,值得一提的是data => { this.techCategories = data.data}这一行代码,那是因为写好的API返回的是一个Laravel分页数据,在这个数据里面的data才是我们想要的数组,因此是data.data

这里只是简单的返回数据,还没有进行分页处理。

接着在tech-category-index.html里面修改一下代码。

此时,页面就可以正常展示出我们从API里获取的数据了。

添加技术分类

接着进行添加数据的处理。首先在Service里面添加处理添加数据的代码。

这里就是一个最简单的post请求,具体API的实现去相应的项目里查看。

接着新建tech-category-form.component.ts,在这个文件里我们来处理相关事宜。

新建tech-category-form.html,代码如下

接着新建tech-category-create.component.ts、tech-category-create.html
这两个代码很简单。只是一些简单的页面布局和初始化设置。

注意到刚才创建的html文件里的<tech-category-form></tech-category-form>这个自定义标签了么,这个和我们在tech-category-form.component.ts里的selector是一样的,这样就可以在其他页面里引入写好的form表单页面了。

最后在app.module.ts和app.routes.ts里面引入刚刚创建的几个Component。基本上就大功告成了。

测试

在列表页我们可以看到数据已经成功添加进来了。

至此,一个基本的列表页和添加页就写成功了。不过,这个代码还是有许多可以惊醒优化和改进的地方。比如错误提示、页面美化等等,这些就需要你们自己来改进啦。

Comments

  1. JoeLemonJoeLemon

    跨域问题:
    描述:由于浏览器本身限制,导致无法拿到api返回的数据。
    (https://laracasts.com/discuss/channels/requests/laravel-5-cors-headers-with-filters?page=1)提供了各种解决方法。使用Nginx配置可以解决get请求的跨域问题,但是post请求无法解决(和option相关,我也暂时没搞清楚);使用中间件不知道什么原因,一直提示类未定义,最终使用了laravel的CORS插件解决(https://github.com/barryvdh/laravel-cors)
    附上相关资料:
    CORS(http://www.ruanyifeng.com/blog/2016/04/cors.html)
    PS.前前后后因为这个问题折腾了半个多月,解决了之后看过来,走了许多弯路,希望可以帮助到遇到相同问题的小伙伴。有时间会把相关问题总结到博客,可能会详细一点^_^

    1. 郝瑞杰郝瑞杰 Article Author

      其实趣编程的API项目已经引入了这个CORS包,后台的API貌似还未处理,能自己解决问题就是一种进步。 继续加油。

发表评论

电子邮件地址不会被公开。 必填项已用*标注