Question

我在名为（rest）的文件夹中创建了一个restful API，它在我的localhost上与http://localhost:3000/api/products处的端口3000连接。我还在名为（logs）的文件夹中创建了一个jQuery日志记录应用程序，执行Ajax调用以从API检索数据，添加新用户等等。我在浏览器同步上运行我的应用程序，它运行在另一个端口上，到目前为止我无法连接到API，因为我不知道我应该连接到哪个路径URL。请你帮我两件事：

在哪里放置这两个文件夹（休息），（日志）？
API的哪个URL（在端口上运行：3000）？

我的jquery应用代码：

<!DOCTYPE html>
<html lang="en">
<head>
<!--------------------------- Meta tags -------------------->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logs</title>



    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <!-- jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- Jquery css ui -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
    <!-- My stile link -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="row">
        <div class="col-md-6">
            <table class="table table-striped">
                <thead>
                <tr> <th>ID</th> <th>First name</th> <th>Last name</th> </tr>
                </thead>
                <tbody class="user">

                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <button class="btn btn-success getUsers"> Get Users </button>
            <form class= "form-inline">
                <input id="id" class="form-group" placeholder="ID">
                <input id="firstName" class="form-group" placeholder="First name">
                <input id="lastName" class="form-group" placeholder="Last name">
                <button class="btn btn-success addUsers"> Add a user</button>
            </form>
        </div>
    </div>
    <script>
        var $user = $('.user');
        var $id = $('#id');
        var $firstName = $('#firstName');
        var $lastName = $('#lastName');
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        $('.getUsers').click(function(){
            $.ajax({
                type:"GET",
                url: '/api/products',
                dataType: 'json',
                success: function(users){
                    $.each(users, function(i, user){
                        $user.append('<tr><td>'+ user.id +'</td> <td>'+ user.firstName +'</td> <td>' +user.lastName + '</td></tr>');
                    });
                },
                error: function(){
                    alert('error');
                }
            });
        });
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        $('.addUsers').click(function(){
            var $newUser = {
                id: $id.val(),
                firstName: $firstName.val(),
                lastName: $lastName.val()
            };
            $.ajax({
                type:"POST",
                url: '/api/products',
                dataType: 'json',
                data: $newUser,
                success: function(newUser){
                        $user.append('<tr><td>'+ newUser.id +'</td> <td>'+ newUser.firstName +'</td> <td>' +newUser.lastName + '</td></tr>');
                },
                error: function(){
                    console.log('error');
                }
            });
        });
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </script>
</body>
</html>

我的api代码：

/ *************** server.js ************************ /

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

// MongoDB
mongoose.connect('mongodb://localhost/testdb');

// EXPRESS
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());  

// ROUTES
app.use('/api', require('./routes/api')); 

// START SERVER
app.listen(3000);
console.log('API is working on port 3000,yes');

/ **************** api.js *************************** ** /

// DEPENDENCIES
var express = require('express');
var router = express.Router();

// MODELS
var Product = require('../models/product');

// ROUTES
Product.methods(['get', 'put', 'post', 'delete']);
Product.register(router, '/products');

// RETURN ROUTER
module.exports = router;

/ ************* product.js ****************** /

// DEPENDENCIES
var restful = require('node-restful');
var mongoose = restful.mongoose;

// SCHEMA
var productSchema = new mongoose.Schema({
    id: Number,
    firstName: String,
    lastName: String,
    mark: Number
});

// return model
module.exports = restful.model('Products', productSchema);

注意：我对后端来说太新了。

提前谢谢。

Answer 1

必须启用您的服务器CORS为此，您可以使用CORS Module

使用npm install cors安装此模块，添加到依赖项var cors = require('cors');

只需将app.use('/api', require('./routes/api'));更改为app.use('/api', cors(), require('./routes/api'));

即可

如果要为所有路由启用CORS，请在include模块写入app.use(cors())

之后

来自localhost的jQuery ajax：3000 api

1 个答案: