Question

我使用git bash创建了回送项目。我正在使用vuejs进行前端开发。我在项目中添加了html页面，并在localhost中运行此HTML。但是问题是我无法在localhost中运行应用程序，而是始终显示回送API ..

这是我的HTML代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/app.css">
  <script>

    const API = 'http://localhost:3000/api/cats/';

    let catApp = new Vue({
      el: '#catApp',
      data: {
        cats: [],
        cat: {
          id: '',
          name: '',
          age: '',
          gender: '',
          breed: ''
        }
      },
      created: function () {
        this.getCats();
      },
      methods: {
        getCats: function () {
          fetch(API)
            .then(res => res.json())
            .then(res => this.cats = res);
        },
        storeCat: function () {
          let method;
          console.log('storeCat', this.cat);
          // Handle new vs old
          if (this.cat.id === '') {
            delete this.cat.id;
            method = 'POST';
          } else {
            method = 'PUT';
          }
          fetch(API, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: method,
            body: JSON.stringify(this.cat)
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
              this.reset();
            });
        },
        deleteCat: function (c) {
          fetch(API + c.id, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: 'DELETE'
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
            });

          // call reset cuz the cat could be 'active'
          this.reset();
        },
        editCat: 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.cat.id = c.id;
          this.cat.name = c.name;
          this.cat.age = c.age;
          this.cat.breed = c.breed;
          this.cat.gender = c.gender;
        },
        reset: function () {
          this.cat.id = '';
          this.cat.name = '';
          this.cat.age = '';
          this.cat.breed = '';
          this.cat.gender = '';
        }
      }
    });
  </script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

  <div id="catApp" v-cloak>

    <h1>Cats</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Breed</th>
          <td>&nbsp;</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="cat in cats">
          <td @click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.gender}}</td>
          <td>{{cat.breed}}</td>
          <td @click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
        </tr>
      </tbody>
    </table>

    <form @submit.prevent="storeCat">
      <p>
        <label for="name">Name</label>
        <input type="text" id="name" v-model="cat.name">
      </p>
      <p>
        <label for="age">Age</label>
        <input type="number" id="age" v-model="cat.age">
      </p>
      <p>
        <label for="breed">Breed</label>
        <input type="text" id="breed" v-model="cat.breed">
      </p>
      <p>
        <label for="gender">Gender</label>
        <input type="text" id="gender" v-model="cat.gender">
      </p>
      <input type="reset" value="Clear" @click="reset">
      <input type="submit" value="Save Cat ?">
    </form>
  </div>


</body>
</html>
<script src="https://unpkg.com/vue"></script>
<script src="./server.js"></script>

这是server.js的代码

// Copyright IBM Corp. 2016. All Rights Reserved.
// Node module: loopback-workspace
// This file is licensed under the MIT License.
// License text available at https://opensource.org/licenses/MIT

'use strict';

var loopback = require('loopback');
var boot = require('loopback-boot');

var app = module.exports = loopback();

app.start = function() {
  // start the web server
  return app.listen(function() {
    app.emit('started');
    var baseUrl = app.get('url').replace(/\/$/, '');
    console.log('Web server listening at: %s', baseUrl);
    if (app.get('loopback-component-explorer')) {
      var explorerPath = app.get('loopback-component-explorer').mountPath;
      console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
    }
  });
};

// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function(err) {
  if (err) throw err;

  // start the server if `$ node server.js`
  if (require.main === module)
    app.start();
});

这是root.js的代码

// Copyright IBM Corp. 2016. All Rights Reserved.
// Node module: loopback-workspace
// This file is licensed under the MIT License.
// License text available at https://opensource.org/licenses/MIT

'use strict';

module.exports = function(server) {
  // Install a `/` route that returns server status
  var router = server.loopback.Router();
  router.get('/', server.loopback.status());
  server.use(router);
};

这是我运行应用程序时的输出..

回送网页无法渲染

0 个答案: