Использование React для подключения кораблей из списка к странице обзора - PullRequest
Новая
       21

Использование React для подключения кораблей из списка к странице обзора

0 голосов
/ 23 октября 2019

С моим сайтом React Cruise Ship на GitHub https://github.com/RobertWSON/Personal-ship-project/tree/robs-shipslist-under-cruiselines, это ветка robs-shiplist-under-cruiselines, мне удалось получить список кораблей, работающий с кнопками Cruise Line.

Сейчас я пытаюсь найти лучший способ сделать следующую часть. Следующая часть относится к тому, как это должно работать, когда вы нажимаете на судно в Списке с помощью кнопки Круизной Линии в http://localhost:3000/cruiselines.. Она предназначена для перехода на страницу обзора для этой Круизной Линии, и эта страница обзора можетиметь более одного корабля. Корабль подобрали по идентификатору на странице обзора. Я еще не определился, как сделать так, чтобы на странице обзора отображалось более одного корабля для его проверки и получения правильной круизной линии.

Компонент обзора для отображения отзывов находится на клиенте / компонентах / обзоре. .jsx

У меня уже есть клиентский / api / api.js-интерфейс для getCruiseLine, getShips и getShip.

Бэкэнд имеет файлы базы данных server / db / dbcruises.js и dbships.js.

Файлы маршрутов бэкэнд-сервер / routs / cruises.js и ship.js. У меня также есть server / server.js в бэкэнде.

У меня есть код для server / db / dbcruises.js и ниже этого dbships.js ниже. 

const environment = process.env.NODE_ENV || 'development'
const config = require('../../knexfile')[environment]
const db = require('knex')(config)


function getCruiseLines (testConn)  {
    const conn = testConn || db
    console.log('server/db/dbcruises.js getCruiseLines called!')

    //Line below connects to Ships Table
    return conn('Ships')
    //Line below picks out each distinct Cruise Line (only once) from Ships Database
    .distinct('cruise_line')
    //Line below puts Cruise Line Headings in Alphabetical Order.
    .orderBy('cruise_line')
    .then(dbResult  =>  {
        console.log('dbcruises.js - GOT CRUISE LINES:',dbResult)
        return dbResult
    })
}

//The Function below is used for getting Cruise Line on Review Page
function getCruiseLine(testConn)    {

}

module.exports = {
    getCruiseLines
}




const environment = process.env.NODE_ENV || 'development'
const config = require('../../knexfile')[environment]
const db = require('knex')(config)


function getShipsList(cruise_line, testConn)   {
    const conn = testConn || db
    console.log('server/db/dbships.js getShipsList called!')

    //Line below connects to Ships Table
    return conn('Ships')
    //Line below picks out the Ships to display for each Cruise Line
    .select('id','cruise_line','ship_name')
    //Line below picks up the Cruise line from where the Ships names 
     have come from
    .where('cruise_line', cruise_line)
    //Line below puts Ships in Alphabetical Order.
    .orderBy("ship_name")    
    .then(dbResult  =>  {
        console.log('dbships.js - GOT SHIPS LIST:', dbResult)
        return dbResult
    })
}

//The Functions below are used for getting Ships on Review Page
function getShips(testConn) {
    const conn = testConn || db
    console.log('server/db/dbships.js getShips called!')

    //Line below connects to Ships Table
    return conn('Ships')
    //Line below 
}

function getShip(testConn)  {
    const conn = testConn || db
    console.log('server/db/dbships.js getShip called!')

    //Line below connects to Ships Table
    return conn('Ships')
}

module.exports = {
    getShipsList
}

Ожидаемые результаты состоят в том, что в верхней части страницы просмотра должна быть указана правильная линия круиза. Под заголовком должен быть каждый Круизный корабль с его Обзором.

Фактические результаты, которые я выбрал на Карнавальной легенде, например, из Списка кораблей Карнавала, переходят на http://localhost:3000/cruiselines/Carnival#Carnival%20Legend. Отображается только навигация страницы ибольше ничего, может ли это быть связано с моим рендерингом и как вы избавляетесь от% 20?

Просто подумав, могу ли я на самом деле получить корабли для каждой страницы обзора так же, как я делал для кораблейсписок?

Я просто хотел бы получить представление о том, как я могу двигаться вперед с этим, и любые идеи будут высоко ценится

...