Question

我在节点server.js上运行时遇到错误。错误说

“拒绝执行来自'http://localhost:8888/inventoryApp.js'的脚本，因为其MIME类型（'text / html'）不可执行，并且启用了严格的MIME类型检查。”

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Inventory App</title>
  <!--CSS Bootstrap CDN-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  <!--Angular CDN-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <!--angular ui-router CDN-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <!--inventoryApp module link-->
  <script src="inventoryApp.js"></script>

</head>

<body>
  <div class="container" ng-app="inventoryApp">
    <header ng-include="'nav.html'"></header>
    <h1>Dashboard</h1>
    <div ng-controller="inventoryCtrl">

      <!--searchItem-->
      <div>
        <label for="searchItemTextField">Search Item</label>
        <input id="searchItemTextField" type="text" name="searchItemTextField" ng-model="searchItem">
      </div>
      <!--inventory table-->
      <div>
        <table class="table-bordered">
          <tr>
            <th>index#</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Update Quantity</th>
            <th>Quantity Alert</th>
            <th>Set Quantity Alert</th>
          </tr>
          <tbody ng-repeat="item in inventory | filter: searchItem track by $index">
            <tr>
              <td>{{$index+1}}</td>
              <td>{{item.itemName}}</td>
              <td>{{item.quantity}}</td>
              <td>
                <div class="btn-group" role="group" aria-label="Basic example">
                  <input id="updateQuantityTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="updateQuantityTextField" ng-model="newQuantity">
                  <button type="button" class="btn btn-secondary" ng-click="addQuantity(item, newQuantity)">Add</button>
                  <button type="button" class="btn btn-secondary" ng-click="deductQuantity(item, newQuantity)">Deduct</button>
                  <button type="button" class="btn btn-secondary" ng-click="setQuantity(item, newQuantity)">Set</button>
                </div>
              </td>
              <td>{{item.quantityAlert}}</td>
              <td>
                <input id="restockQtyTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="restockQtyTextField" ng-model="quantityAlert">
                <button type="button" class="btn btn-secondary" ng-click="setQuantityAlert(item, quantityAlert)">Set</button>
              </td>
              <td><button ng-click="deleteItem(item)">Delete Item</button></td>
              <td class="alert alert-danger" role="alert" ng-if="item.quantity <= item.quantityAlert">Quantity Alert!</td>

            </tr>
          </tbody>
        </table>
        <br>
      </div>



      <div>
        <form ng-submit="addItem()">
          <label for="itemName">Item Name</label>
          <input id="itemName" type="text" name="itemName" ng-model="newItem.itemName" required="">

          <label for="quantity">Quantity</label>
          <input id="quantity" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="quantity" ng-model="newItem.quantity" required>

          <button type="submit">Add Item</button>
        </form>
      </div>



    </div>
  </div>



</body>


</body>

</html>

nav.html

<ul class="nav nav-pills pull-right">
  <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
  <li ui-sref-active="active"><a ui-sref="about">About</a></li>
  <li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>

inventoryApp.js文件

var inventoryApp = angular.module('inventoryApp', ['ui.router']);


inventoryApp.controller('inventoryCtrl', ['$scope', function($scope) {

  var item1 = new Item("shirt", 1);
  var item2 = new Item("phone", 1);

  var inventory = [];


  inventory.push(item1);
  inventory.push(item2);

  $scope.inventory = inventory;

  $scope.addItem = function() {

    if ($scope.newItem.itemName === undefined) {
      $scope.newItem.itemName = "";
    }

    //trim whitespaces
    $scope.newItem.itemName = $scope.newItem.itemName.replace(/^\s+/, '').replace(/\s+$/, '');

    //validate quantity and itemName
    if (parseInt($scope.newItem.quantity) > 0 && $scope.newItem.itemName !== "") {
      //convert quantity "01 to 1"
      $scope.newItem.quantity = parseInt($scope.newItem.quantity);
      $scope.inventory.push($scope.newItem);
      $scope.newItem = {};
    } else {
      alert("invalid item name");
    }

  };


  $scope.deleteItem = function(item) {

    var index = $scope.inventory.indexOf(item);
    $scope.inventory.splice(index, 1);
    $scope.searchItem = "";
  }

  $scope.addQuantity = function(item, newQuantity) {
    if (newQuantity !== undefined && newQuantity !== "") {
      item.quantity = parseInt(item.quantity) + parseInt(newQuantity);
      this.newQuantity = "";
    }

  }

  $scope.deductQuantity = function(item, newQuantity) {
    if (newQuantity !== undefined && newQuantity !== "") {
      item.quantity = parseInt(item.quantity) - parseInt(newQuantity);
      this.newQuantity = "";
    }
  }

  $scope.setQuantity = function(item, newQuantity) {
    if (newQuantity !== undefined && newQuantity !== "") {
      item.quantity = parseInt(newQuantity);
      this.newQuantity = "";
    }
  }

  $scope.setQuantityAlert = function(item, quantityAlert) {
    if (quantityAlert !== undefined && quantityAlert !== "") {
      item.quantityAlert = quantityAlert;
      this.quantityAlert = "";
    }
  }






}]);





function Item(itemName, quantity) {
  var itemName;
  var quantity;
  var quantityAlert = -1;

  this.itemName = itemName;
  this.quantity = quantity;



  function getItemName() {
    return this.itemName;
  }

  function getQuantity() {
    return this.quantity;
  }

  function getQuantityAlert() {
    return quantityAlert;
  }

  function setItemName(itemName) {
    this.itemName = itemName;
  }

  function setQuantity(quantity) {
    this.quantity = quantity;
  }

  function setQuantityAlert(quantity) {
    this.quantityAlert = quantity;
  }
}

server.js

var express = require('express');
var app = express();
var port = 8888;

app.get('/', function(req, res, next) {
  res.sendFile(__dirname + '/index.html');


});

app.listen(port, '0.0.0.0', function() {
  console.log('Server running at port ' + port);
});

Answer 1

查看服务器的代码。

你有这个：

app.get('/', function(req, res, next) {
  res.sendFile(__dirname + '/index.html');
});

...当您请求/.

时，它会为index.html文件提供服务

处理/inventoryApp.js请求的代码在哪里？

你需要写它。（提示：调查使用Express提供静态文件的模块）。

拒绝执行脚本，因为其MIME类型（'text / html'）不可执行，并且启用了严格的MIME类型检查

1 个答案: