股票场内基金交易,没时间盯盘?

   
使用优财助手电脑客户端记录下您的股票买入卖出数据,能帮您时刻盯盘,会根据您记录的未售出买入价计算上涨或下跌幅度,及时弹框通知您。想知道如何使用?快点击左方视频观看了解吧~~下载地址:http://youcaizhushou.com

前提:趣编程的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。基本上就大功告成了。

测试

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

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

   

想获得去掉 5 元限制的证券账户吗?

证券交易股票基金的佣金,不足 5 元会按照 5 元收取。比如交易 1000 元的股票,按照普遍的证券佣金手续费率万 2.5,其交易佣金为 0.25 元,小于 5 元,实际会收取佣金 5 元,买卖两次需要支付 10 元佣金成本,1% 的利润就这样没了。

如果您想去掉最低交易佣金 5 元限制,使用微信扫描左边小程序二维码,访问微信小程序「优财助手」,点击底部菜单「福利」,阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」,按照文章步骤操作即可获得免 5 元证券账户,股票基金交易手续费率万 2.5。

请注意,一定要按照文章描述严格操作,如错误开户是无法获得免 5 元证券账户的。

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貌似还未处理,能自己解决问题就是一种进步。 继续加油。

发表评论

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