zoukankan      html  css  js  c++  java
  • angular6 实现每日佳句示例

    如图:每日佳句的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在到核心模块(只加载一次的模块)中注入即可

  • 相关阅读:
    MySQL经典练习题(四)
    MySQL经典练习题(三)
    MySQL经典练习题(二)
    MySQL经典练习题(一)
    MySQL经典练习题-数据准备
    表连接
    子查询
    MySQL中函数分类
    排序
    数据分组
  • 原文地址:https://www.cnblogs.com/maochunyan/p/9456483.html
Copyright © 2011-2022 走看看