个人中心
gpt4 book ai didi

javascript - 书籍及其图像未呈现在页面上

转载 作者：行者123 更新时间：2023-12-03 06:16:52 25 4
gpt4 key购买 nike

所以我几乎已经完成了使用 MEAN 堆栈创建书店应用程序的工作，但是当我创建前端时，我的书没有在浏览器中呈现。这些书肯定在 Mongo 数据库中:

/Users/ldco2016/Projects/bookstore/client/index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>MEAN Books</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MEAN Bookstore</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#/books/add">Add Book</a></li>

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div ng-view></div>
            </div>
        </div>    
    </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-route/angular-route.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/app.js"></script>
    <script src="/controllers/books.js"></script>
    <script src="/controllers/genres.js"></script>

</body>
</html>

/Users/ldco2016/Projects/bookstore/client/views/books.html:

<div class="panel panel-default" ng-init="getBooks()">
  <div class="panel-heading">
    <h3 class="panel-title">Latest Books</h3>
  </div>
  <div class="panel-body">
    <div class="row">
        <div ng-repeat="book in books">
            <div class="col-md-6">
                <div class="col-md-6">
                    {{book.title}}
                    <p>{{book.description}}</p>
                </div>
                <div class="col-md-6">
                    <img ng-src="{{book.image_url}}" alt="">
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

Chrome 浏览器中的 Javascript 控制台是这样说的:

BooksController loaded...
angular.js:13920 TypeError: Cannot set property 'getBooks' of undefined
    at new <anonymous> (http://localhost:3000/controllers/books.js:6:18)
    at Object.instantiate (http://localhost:3000/bower_components/angular/angular.js:4733:14)
    at $controller (http://localhost:3000/bower_components/angular/angular.js:10369:28)
    at Object.link (http://localhost:3000/bower_components/angular-route/angular-route.js:1054:26)
    at http://localhost:3000/bower_components/angular/angular.js:1247:18
    at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9934:9)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9335:11)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8620:13)
    at publicLinkFn (http://localhost:3000/bower_components/angular/angular.js:8500:30)
    at lazyCompilation (http://localhost:3000/bower_components/angular/angular.js:8844:25) <div ng-view="" class="ng-scope">

/Users/ldco2016/Projects/bookstore/app.js:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

app.use(express.static(__dirname+'/client'));
app.use(bodyParser.json());

Genre = require('./models/genre.js');
Book = require('./models/book.js');

// Connect to Mongoose
mongoose.connect('mongodb://localhost/bookstore');
var db = mongoose.connection;

app.get('/', function(req, res){
    res.send('Please use /api/books or /api/genres');
});

app.get('/api/genres', function(req, res){
    Genre.getGenres(function(err, genres){
        if(err){
            throw err;
        }
        res.json(genres);
    });
});

app.post('/api/genres', function(req, res){
    var genre = req.body;
    Genre.addGenres(genre, function(err, genre){
        if(err){
            throw err;
        }
        res.json(genre);
    });
});

app.put('/api/genres/:_id', function(req, res){
    var id = req.params._id
    var genre = req.body;
    Genre.updateGenres(id, genre, {}, function(err, genre){
        if(err){
            throw err;
        }
        res.json(genre);
    });
});

app.get('/api/books', function(req, res){
    Book.getBooks(function(err, books){
        if(err){
            throw err;
        }
        res.json(books);
    });
});

app.get('/api/books/:_id', function(req, res){
    Book.getBookById(req.params._id, function(err, book){
        if(err){
            throw err;
        }
        res.json(book);
    });
});

// This is not production level code, it is not safe to allow whatever a user posts to go into your database! You do have mongoose which uses models
// which makes it more secure, then there is authentication and a lot of other security measures to take. If this were to go into production.
app.post('/api/books', function(req, res){
    var book = req.body;
    Book.addBooks(book, function(err, book){
        if(err){
            throw err;
        }
        res.json(book);
    });
});


app.put('/api/books/:_id', function(req, res){
    var id = req.params._id
    var book = req.body;
    Book.updateBooks(id, book, {}, function(err, book){
        if(err){
            throw err;
        }
        res.json(book);
    });
});

app.delete('/api/books/:_id', function(req, res){
    var id = req.params._id
    Book.removeBooks(id, function(err, book){
        if(err){
            throw err;
        }
        res.json(book);
    });
});

app.listen(3000);
console.log('Running on port 3000...');

/Users/ldco2016/Projects/bookstore/client/app.js:

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(function($routeProvider){
    $routeProvider.when('/', {
        controller:'BooksController',
        templateUrl: 'views/books.html'
    })
    .when('/books', {
        controller:'BooksController',
        templateUrl: 'views/books.html'
    })
    .when('/books/details/:id',{
        controller:'BooksController',
        templateUrl: 'views/book_details.html'
    })
    .when('/books/add',{
        controller:'BooksController',
        templateUrl: 'views/add_book.html'
    })
    .when('/books/edit/:id',{
        controller:'BooksController',
        templateUrl: 'views/edit.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

/Users/ldco2016/Projects/bookstore/client/controllers/books.js:

var myApp = angular.module('myApp');

myApp.controller('BooksController', [function($scope, $http, $location, $routeParams){
    console.log('BooksController loaded...');

    $scope.getBooks = function(){
        $http.get('/api/books').success(function(response){
            $scope.books = response;
        });
    }
}]);

需要帮助了解为什么我的书籍及其图像未在页面上呈现。有什么建议吗？

最佳答案

尝试像这样声明依赖关系:

myApp.controller('BooksController', ["$scope", "$http", "$location", "$routeParams", function($scope, $http, $location, $routeParams){
    ...
}]);

关于javascript - 书籍及其图像未呈现在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39068130/

25 4 0
文章推荐： javascript - 将按钮与 div 底部对齐
文章推荐： javascript - YouTube如何以1个网址打开2个JPG
文章推荐： gradle - 多模块项目 gradle - 多个或单个 build.gradle
文章推荐： javascript - 如何在同一个类名上添加不同的ID？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com