小编mil*_*lan的帖子

我使用reactjs作为前端,django作为后端.React路由器用于路由.当我刷新反应路由器路由的页面时,我得到django 404 Page Not Found error.如果我刷新主页,我不会得到任何这样的错误,因为主页也是由django模板使用其url呈现.

我必须在webpack中配置它吗？我的项目结构是我已经分离了django和reactjs.我创建了一个文件夹作为reactjs文件所在的前端.

UPDATE

主页模板包含addrestaurant等路线的所有链接.

我的webpack.config文件

const path = require("path");
if(!process.env.NODE_ENV) {
    process.env.NODE_ENV = 'development';
}

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join("../app/static/build/", "js"),
    filename: "app.js",
    publicPath: "../app/static/build/"
  },
  devtoo: 'source-map',
  debug: true,
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=images/[name].[ext]"},
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

urls.py …

我开发了过滤系统,它提供3种选择,如房产类型,房间数量和最高价格.每次他们选择过滤器选项时,用户都会立即获得他们的搜索结果.例如,如果用户选择了公寓的房产类型和房间数为4且最高价格为12000,则用户将获得其房产类型为公寓的租金,其中4个房间为12000标记.我用React.js开发了前端部分,可以成功获取用户选择的数据.我还将数据传递给ajax但我不知道如何根据用户提供的过滤值显示搜索结果而不加载页面.

Ajax代码

$.ajax({
  type: 'GET',
  url: '/filter/space/',
  data{property:propertySelectedValue, room:roomSelectedValue, price:maxPrice},
  success: function(data){
    console.log(data['fields']);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown){
    console.error("Status: " + textStatus); alert("Error: " + errorThrown);
  },
});

Views.py

class FilterSpace(View):
    def get(self,request,*args,**kwargs):
        property = request.GET.get('property',None)
        room = request.GET.get('room', None)
        price = request.GET.get('price', None)
        rental = Rental.objects.all()
        if room:
            rental = rental.filter(room=room)
            print('rental',rental)
        if price:
            rental = rental.filter(price__lte=price)
        if property:
            rental = rental.filter(property=property)
        rental_json =  serializers.serialize('json',rental)
        print('rental_json',rental_json)
        return HttpResponse(rental_json,content_type="application/json")

我已经react-router v4在我的应用程序中用于路由.在主页上,有一个表格.当用户填写表单并点击提交按钮时,将调度该操作(showResultofCar)并将其重定向到主页中不是子项的结果页面,而不是从上到下具有不同UI的不同页面.

我尝试这样做,但只是路由已经过渡但没有调度操作但显示相同的主页而不是新页面(结果)

index.js

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <ConnectedIntlProvider>
      <Router>
        <App />
      </Router>
    </ConnectedIntlProvider>
  </Provider>
  , document.querySelector('.app'));

app.js

render() {
  return (
      <div className="container-fluid">
        <Nav
          showModal={(e) => this.showModal(e)}
          hideModal={() => this.hideModal()}
          show={this.state.show}
          onHide={() => this.hideModal()}
        />
          <Banner />
          <Media />
          <Footer />
        </div>
        );
}

form.js(它是横幅的子组件,是app的子组件)

onSubmit = (e) => {
  e.preventDefault();
  const originwithCountry = e.target.Origen.value;
  const originwithCity = originwithCountry.split(', ')[0];
  const cityFrom = base64.encode(originwithCity);
  const startDate = (new Date(e.target.startDate.value).getTime() / 1000);
  this.props.showResultofCar(cityFrom, cityTo, startDate);
  this.context.router.transitionTo('/result');
  }

render() { …

我有一个工作模式组件，我也需要在故事书中展示它。显示和关闭取决于道具。例如，如果我需要显示模态，我必须执行以下操作

const Demo = () => {
    const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            <Modal open={open} onClose={() => setOpen(false)}>
                <Modal.Header>Modal Header goes here</Modal.Header>
                <Modal.Content>Modal Content goes here</Modal.Content>
                <Modal.Footer>Modal Footer goes here</Modal.Footer>
            </Modal>
        </>
    )
}

我正在使用 ReactDOM.createPortal 来渲染模态，因此为此我创建了一个带有 id 模态的 div 元素，并在其中创建了模态出现的另一个 div 元素。为此，我创建了一个模态故事，如下

storiesOf('Modals', module)
  .addDecorator(storyFn => (
    <>
      <div id="modal">
        <div>{storyFn()}</div>
      </div>
    </>
  ))
  .addDecorator(withKnobs)
  .add('Modals - Basic', () => (
    <>
      <button type="button">Show Modal</button>
      <Modal open={boolean('open', false)}>
        <Modal.Header>Modal Header goes here</Modal.Header> …

React 本身引入了使用 Suspense 和 Lazy 的代码分割和异步路由的新概念。有了这个概念，我们如何才能在路线改变时在页面顶部显示进度条呢？我可以显示加载图标、文本等，但不能显示进度条（0 到 100%）。这是我的做法

const About = lazyLoading(() => import("./components/About"), {
  fallback: <h1>Loading...</h1>
});
const Home = lazyLoading(() => import("./components/Home"), {
  fallback: <h1>Loading...</h1>
});

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <Home name="hello" />} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
render(<BasicExample />, document.getElementById("root"));

延迟加载.js

const lazyloading = (importFunc, { fallback = null }) …

我需要创建自定义用户模型，因为我需要再添加一个称为角色的字段。如果提供了角色，则应将其分配给用户模型，否则在用户模型中提供代理作为角色。我继承了AbstractUser。这样，在创建用户时，首先将密码另存为纯文本，另一种是用户无法登录，即表示无法登录。所以我尝试了以下方式，如在docs中，但问题是我不需要电子邮件部分，所以我将其排除在外，只使用了用户名和密码，但出现了类似的错误TypeError: create_superuser() got an unexpected keyword argument 'email'

class UserManager(BaseUserManager):
        def create_user(self, username, password=None):
            """
            Creates and saves a User with the given username, date of
            birth and password.
            """
            if not username:
                raise ValueError('Users must have an username')
            user = self.model(username=username)
            user.set_password(password)
            user.save(using=self._db)
            return user

    def create_superuser(self, username, password):
        """
        Creates and saves a superuser with the given username and password.
        """
        user = self.create_user(
            username=username,
            password=password,
        )
        user.is_admin = True
        user.save(using=self._db)
        return user


class Role(models.Model): …

我正在使用 graphene-django 作为 api。我正在尝试创建一个突变来创建一个具有公司外键的品牌。当我变异时，我收到以下错误“'input'是 print() 的无效关键字参数”。我无法弄清楚为什么会抛出这个错误。

这是我的突变

class BrandInput(graphene.InputObjectType):

    company = graphene.List(CompanyInput)
    name = graphene.String()
    website = graphene.String()
    description = graphene.String()
    country = graphene.String()
    city = graphene.String()
    address = graphene.String()


    class CreateBrand(graphene.Mutation):

        class Arguments:

            input = BrandInput(description="These fields are required", required=True)


        class Meta:

            description = "Create Brand Mutation"

        errors = graphene.String()
        brand = graphene.Field(BrandNode)

        @staticmethod
        def mutate(root, info, **args):
            print('args', args, **args)
            if not info.context.user.is_authenticated:
                return CreateBrand(errors=json.dumps('Please Login to list your brand'))
            try:
                company = models.Company.objects.get(slug=args.get('input')['company'])
                if company:
                    brand = …

我正在尝试构建过滤系统.有两个过滤菜单.一个是房间数,另一个是房产类型.我已经从api加载了json文件到space对象.但是当我尝试将所有这些空格传递给SpaceFilterResults组件时,我的空间数组返回为[undefined,undefined].

我的过滤代码

class FilterSpace1 extends React.Component {
  constructor() {
    super();

    this.handleFormInput = this.handleFormInput.bind(this);

    this.state = {
      space:[],
      propertyType: 0,
      rooms: 0
    }
  }

  componentDidMount(){
        this.loadRoomFromServer();
    }

    loadRoomFromServer(){
        $.ajax({
            url:'/api/rentals/',
            dataType:'json',
            success: (data) => {
                console.log('data',data);
                this.setState({space: data.results});
                console.log('success',this.state.space);
              },
              error: (xhr, status, err) => {
                console.error(url, status, err.toString());
              }
            });
    }

  handleFormInput(propertyType, rooms) {
    this.setState({
      propertyType: propertyType,
      rooms: rooms
    })
  }

  render() {
   let space = _.map(this.state.space, (space,id) => {
    console.log('space is',space); // has an array as shown below
      <SpaceFilterResults …