0
Я сделал restful API в папке с именем (rest), она соединяется с портом 3000 на моем localhost по ..... http://localhost:3000/api/products. также я сделал приложение регистрации jQuery в папке с именем (logs), выполняющей вызов Ajax для извлечения данных из API, добавления новых пользователей и т. Д. Я запускаю свое приложение в браузере-синхронизации, которое выполняется на другом порту, и поэтому далеко я не могу подключиться к API, потому что я не знаю, к какому пути должен подключаться. пожалуйста, помогите мне в двух вещах:jQuery ajax от localhost: 3000 api
- где разместить эти две папки (отдых), (журналы)?
- Какой URL-адрес API (работает на порту: 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>
моего апи код:
/*************** 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;
/************* товар.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);
примечание: i`m слишком новый для бэкэнд.
Заранее спасибо.
ok, я заменен inde x.html, который использует jquery ajax .. внутри rest/routes на одном уровне api.js, я также изменил api-порт на 3002, потому что 3000 был занят браузером-синхронизацией, теперь я получаю эту ошибку: XMLHttpRequest не может загрузить HTTP: // локальный: 3002/API/продукты. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому исходный адрес http: // localhost: 3000 'не допускается. –