Question

我是回环的新手。我正在尝试在网页中显示记录列表。我正在使用mysql作为后端。当我运行服务器时，它运行了2或3分钟，然后服务器关闭了连接。当我向本地主机发出请求时，网页未显示数据库。

这是users.json的代码。

{
  "name": "users",
  "plural": "User",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "username": {
      "type": "string",
      "required": true
    },
    "password": {
      "type": "number",
      "required": true
    },
    "createdAt": {
      "type": "date",
      "required": true
    },
    "updatedAt": {
      "type": "date",
      "required": true
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": {}
}

这是datasource.json文件。

{
  "db": {
    "name": "db",
    "connector": "memory"
  },
  "users": {
    "host": "localhost",
    "port": 3306,
    "url": "",
    "database": "shoppingdatabase",
    "password": "",
    "name": "users",
    "user": "root",
    "connector": "mysql"
  }
}

这是index.html代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src=".../boot/server.js"></script>


</head>
<body id="UserApp">
  <script>
    const API = 'http://localhost:3000/api/User/';

    let UserApp = new Vue({
      el: '#UserApp',
      data: {
        users: [],
        user: {
          id: '',
          username: '',
          password: '',
          createdAt: '',
          updatedAt: '',
          email: ''
        }
      },
      created: function () {
        this.getUsers();
      },
      methods: {
        getUsers: function () {
          fetch(API)
            .then(res => res.json())
            .then(res => this.users = res);
        },
        storeUser: function () {
          let method;
          console.log('storeCat', this.user);
          // Handle new vs old
          if (this.user.id === '') {
            delete this.user.id;
            method = 'POST';
          } else {
            method = 'PUT';
          }
          fetch(API, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: method,
            body: JSON.stringify(this.user)
          })
            .then(res => res.json())
            .then(res => {
              this.getUsers();
              this.reset();
            });
        },
        deleteCat: function (c) {
          fetch(API + c.id, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: 'DELETE'
          })
            .then(res => res.json())
            .then(res => {
              this.getUsers();
            });

          // call reset cuz the cat could be 'active'
          this.reset();
        },
        editUser: function (c) {
          /*
          This line was bad as it made a reference, and as you typed, it updated
          the list. A user may think they don't need to click save.
          this.cat = c;
          */
          this.user.id = c.id;
          this.user.username = c.username;
          this.user.password = c.password;
          this.user.createdAt = c.createdAt;
          this.user.updatedAt = c.updatedAt;
          this.user.email = c.email;
        },
        reset: function () {
          this.user.id = '';
          this.user.username = '';
          this.user.password = '';
          this.user.createdAt = '';
          this.user.updatedAt = '';
          this.user.email = '';
        }
      }
    });
  </script>
  <div>

    <h1>User List</h1>
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Username</th>
          <th>Password</th>
          <th>Created Date</th>
          <th>Updated Date</th>
          <th>Email Address</th>
          <td>&nbsp;</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users">
          <td @click="editUser(user)" class="userItem" title="Click to Edit">{{user.username}}</td>
          <td>{{uaer.id}}</td>
          <td>{{uaer.username}}</td>
          <td>{{uaer.password}}</td>
          <td>{{uaer.createdAt}}</td>
          <td>{{uaer.updatedAt}}</td>
          <td>{{uaer.email}}</td>
          <td @click="deleteUser(user)" class="deleteUser" title="Click to Delete">Delete</td>
        </tr>
      </tbody>
    </table>

    <form @submit.prevent="storeUser">
      <p>
        <label for="username">User Name</label>
        <input type="text" id="username" v-model="user.username">
      </p>
      <p>
        <label for="password">Password</label>
        <input type="password" id="password" v-model="user.password">
      </p>
      <p>
        <label for="createdAt">Created Date</label>
        <input type="text" id="createdAt" v-model="user.createdAt">
      </p>
      <p>
        <label for="updatedAt">Updated Date</label>
        <input type="text" id="updatedAt" v-model="user.updatedAt">
      </p>
      <p>
        <label for="email">Email </label>
        <input type="text" id="email" v-model="user.email">
      </p>
      <input type="reset" value="Clear" @click="reset">
      <input type="submit" value="Save User ?">
    </form>
  </div>



</body>
<html/>

这是我的项目结构

这是我运行应用程序时的屏幕截图。

Answer 1

您真的需要访问该/server.js吗？尝试为模型创建单独的控制器。或者尝试根据需要创建模型。供参考-https://loopback.io/doc/en/lb3/Defining-models.html

然后删除从您的html

您实际上不需要该/server.js。而且，根据您的项目结构，您也没有任何boot / server.js。您的“启动”文件夹中只有2个文件 1. root.js 2. authentication.js

环回应用程序错误ERR_ABORTED 404（未找到）

1 个答案: