如图:每日佳句的html格式
1.
按照面向对象的方式来看,每日佳句组成:1、中文佳句 2、图片 3、英文佳句
所以,我app目录下新建一个domain文件夹(里面存放对象结构),如下图所示:
因为它是一个对象模型,所以命名统一命名为:XXX.model.ts,针对以上对象,建立的对象模型如下:
2.
开发期间,可以自己创建一个数据库,在跟目录下建立一个目录叫做mock(用于放置数据的地方)。
新建一个data.json文件,自制一些数据:
这个api也就搭好了。
使用:
1.命令行中敲 json-server ./src/mock/data.json
//JSON-Server主要的作用是搭建一台JSON服务器,测试一些业务逻辑(这里采用读取文件的方式)
json-server 使用:首先,先确保安装了nodejs,然后在命令键入:npm install -g json-server
运行结果,告诉我们,在localhost:3000下有这个链接
在浏览器中键入这个地址,得到如下页面
当然,也可以直接输入http://localhost:3000/quotes 直接进入
3.
新建一个服务:
使用快捷方式 ngser, 会有提示
选择第一个,得到service模板
在service里编写获取佳句的服务
其中,必填项为url,指的是api的地址。由以上得知,API的地址为
因为这是一个死地址,以后想要改的话,维护起来会很困难。
所以在核心模块中添加一个provider,useValue使用对象形式,可以在里面维护新增其他的配置
把api的根的地址 写在这里。然后在service注入进去
在login中注入然后调用即可。
PS:
services目录长这样
其中QuoteService 在services.module.ts模块中注入
servicesModule在到核心模块(只加载一次的模块)中注入即可