时间戳

首页 > 解决方案 > Angular JSON 服务器发布数据

angular - Angular JSON 服务器发布数据

问题描述

我在 json 服务器的帮助下运行一个本地应用程序，所以我做假后端 API 并运行我的应用程序，我在 db.json 文件中有如下用户对象，该对象正在由 user.service.ts 读取

{
  "users": [
    {
      "id": "1",
      "username": "jd",
      "firstName": "john",
      "lastName": "Dell",
      "password": "1234",
      "email": "test@gmail.com",
      "age": 34,
      "companyId": "1"
    },
    {
      "id": "2",
      "firstName": "Den",
      "lastName": "Scott",
      "email": "den@gmail.com",
      "age": 43,
      "companyId": "1"
    }]
}

在我的登录页面中，我正在发送用户输入的用户名和密码，但是根据angular 2+ 登录页面上来自互联网的给定示例，这使用 post 方法来给定服务，它确实将数据插入用户对象而不是检索给定用户名和密码的整个对象。

login(username: string, password: string) {
        return this.http.post<any>(`/users`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }

我想检索给定用户名和密码的整个用户对象。上面的示例使用用户名和密码以及 id 字段将数据插入/附加到 db.json 文件的用户对象中，我想检查用户名和密码是否匹配返回该用户的整个对象。

标签： angular

解决方案

我认为，使用代理机制比这样做更好。这样，您以后不必对服务进行任何更改。

使用 nodejs 或 express 快速创建一个 fakeapi 并在本地运行它。

将 proxy.conf.json 添加到您的 Angular 项目中，如下所示：

这意味着将所有以 /api 开头的 url 重定向到 localhost:3000

{
    "/api/*":{
        "target":"http://localhost:3000",
        "secure": false,
        "logLevel":"debug",
        "changeOrigin": true
    }
}

然后使用以下命令启动您的 Angular 应用程序： ng serve --disable-host-check --proxy-config proxy.conf.json

如果您想获取示例，请查看我的 github 帐户，这里有一个用于此目的的项目。

推荐阅读