我正在尝试制作一个非常基本的全栈应用程序，其中前端是 Gatsby，后端是一个简单的 Express 服务器。我有一个数据库，其中有一些用户，目标是通过查询在后端获取这些用户，然后使用 fetch() 在 Gatsby (React) 组件中显示它们。显然出了点问题，我无法在屏幕上显示它们，即使使用 Postman 请求被正确处理。以下是相关的代码片段：
Express：我使用了经典的 express-generator，我只更改了路由文件 users.js，将其链接到数据库。（由于 Gatsby 使用端口 8000，因此无需更改端口以便 React 和 express 不会重叠）。
var express = require('express');
var router = express.Router();
const mysql = require('mysql');
var mysqlconnection = mysql.createConnection({
host : ****,
user : ****,
password : ****,
database : ****
});
mysqlconnection.connect(function(err) {
if (err) {
console.log(err)
}
else {
console.log(`You are now connected` )
}
})
router.get('/', (req, res) => {
mysqlconnection.query('SELECT * FROM table_basic', (err, rows, fields) => { …我想在我的共享主机上运行基本的聊天应用程序。我将使用 PHP Websockets 实现库Ratchet。
但是，当我访问我的共享主机 (Hostgator) websockets 信息页面时，它指出：
PHP 套接字支持吗？如果您正在连接，它应该可以工作。我们不允许客户端绑定到本地端口以进行传入。
这是什么意思？我可以通过 ssh 运行命令创建自己的 websocket 吗？我将使用这个基本代码来运行它。
require dirname(__DIR__) . '/vendor/autoload.php';
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8081
);
$server->run();
我注意到有类似的问题，但大多数答案都说这是不可能的，因为提问者试图使用 Node.js 或 Python websockets 库，而大多数共享主机不支持这些库。
我在玩Laravel身份验证。
在使用Composer刚创建的Laravel应用上，我按照说明进行操作，直到这一点为止（已包括）
https://laravel.com/docs/5.8/api-authentication#generating-tokens
但是，当我注册新用户时，api_token字段为NULL。
为了在用户注册时开始生成api令牌，我还需要做什么？
在RegisterController中创建方法：
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
'api_token' => Str::random(60),
]);
}
迁移（我称其为令牌）更新用户表：
class Token extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('api_token', 80)->after('password')
->unique()
->nullable()
->default(null);
});
}
应用\用户模型：
<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
use Notifiable;
/**
* …我正在用Gatsby构建一个多页的网站（所以，多组件）。在官方文档中，它说在Layouts文件夹中，我应该有index.js文件，该文件存储其他页面共有的组件（例如navbar和footer，就像一个React Router，在这里称为MainNavBar和MainFooter）。现在，当您到达localhost：8000位置（一旦上传将是www.mywebsite.com）时，index.js文件也是主页和登录页面。问题在于，此页面现在为空，在网站上选择页面后仅呈现存储在页面文件夹中的children（）。但是，如果我在其中创建一个组件，例如主页（现在已作为home.js存储在pages文件夹中），则其他页面将呈现在主页下方，并且主页本身将对所有其他页面，无法正确显示组件。如何正确创建主页，同时也是保持此配置的登录页面？
这是index.js组件
import Helmet from 'react-helmet'
import MainNavBar from '../components/navbar.js';
import Footer from '../components/footer';
import React, { Component } from 'react';
import logo from '../images/recsenz.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'
const Layout = ({ children, data }) => (
<div>
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' }, …我将这个 div 设置为两个小标志来选择页面的语言。它们固定（粘性）在屏幕的右上角。问题是当我滚动时，因为它们隐藏在其他元素（例如图像或背景颜色）后面。如何让他们不再隐藏？我尝试将父类设置为“导航栏”并且以某种方式起作用，但是当屏幕缩小时元素会收起来。
#flags {
position: fixed;
}<div style=" float: right; width: 100px; margin-top: 60px;">
<div id="flags">
<span>
<a href="default.html">
<img id="uk" src="images/uk.png">
</span></a>
<span><a href="default_ita.html">
<img id="uk" src="images/italy.png">
</span></a>
</div>
</div>使用 Reactstrap 和 Bootstrap 构建一个简单的 React 网站。我想为我的卡片设置自定义边框半径，但是当将其设置在卡片的上部时，它不会呈现，因为它内部的图像（也是白色）与容器本身重叠。是否有一个 css 属性可以“平滑”img 边框？你会如何解决这个问题？
成分：
import React, { Component } from 'react';
import './App.css';
import logo from '../images/logo.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
class App extends Component {
render() {
return (
<div>
<div className="App">
<br/>
<img src={logo} />
</div>
<br/>
<br/>
<br/>
<Container className="prova" fluid="true">
<Row>
<Col …我在React中编写了一些代码来练习.我希望有人解释一下为什么如果clickChange单击目标(h3),状态不会更新.
下面是我的主要App组件:
import React, { Component } from "react";
import Prova from "./components/prova";
import "./App.css";
class App extends Component {
state = {
name: "giovanni"
};
clickChange = () => {
this.setState({ name: "joe" });
};
render() {
return (
<div>
<h3>SONO APP</h3>
<Prova onClick={this.clickChange} provaProp={this.state.name} />
</div>
);
}
}
export default App;
在另一个Component下面,导入并调用(和渲染)到主App组件中.现在,你可以看到我设置了一个方法,clickChange一旦你点击元素,它应该改变状态,将"giovanni"切换为"joe".
问题是:为什么它不会触发？我知道它在另一个组件中的代码的渲染部分,但是它在我的App组件中的状态.因此,状态在内部改变,而不涉及外部.
import React, { Component } from "react";
class Prova extends Component {
constructor(props) {
super(props);
}
render() {
return ( …