使用 Django、GraphQL、Apollo 和 VueJS 进行 URL 管理

Posted 2023-03-08

【中文标题】使用 Django、GraphQL、Apollo 和 VueJS 进行 URL 管理

【英文标题】：URL management with Django, GraphQL, Apollo and VueJS

【发布时间】：2020-06-07 22:41:57

【问题描述】：

正如标题中所说，我在我的项目中使用Django、GraphQL、Apollo 和VueJS。 我正在将其开发为SPA（单页应用程序）。

一切正常，直到我按下 F5 按钮并刷新页面。实际上，它显示了一个未知页面。问题是 VueRouter 正在管理 SPA，它运行良好。但是当我按下 F5 时，即 Django 会尝试为当前 URL 提供一个页面，但由于它不知道它，所以它无法提供相应的页面。

我的问题如下： 当我在特定的表单视图（即：用户表单视图）上时，我的 URL 如下：

http://localhost:8000/user

由于我将 GraphQL 用于我的 API，因此检索到的数据不是基于 URL。事实上，那是我的 VueJS 组件，上面写着：Hey Apollo, run that GraphQL to retrieve the User I want。

所以当我刷新时，是的，它服务于用户表单视图..但为空。

问题是：我该如何解决这个问题？

为了清楚起见，这里有一些代码示例：

我的 Django 网址：

# (... other imports here ...)
from .schema import schema

urlpatterns = [
    path('admin/', admin.site.urls),
    path('graphql', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),  # 'schema' is the main GraphQL schema
    path('', TemplateView.as_view(template_name='index.html')),
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))  # I saw that many times to serve the page whatever the URL is when refreshing the page
]

我的 Vue 路由器：

export default new Router(
  mode: 'history',
  routes: [
     path: '/', name: 'MainApp' ,
    // ...
     path: '/users', name: 'UserList', component: UserList ,
     path: '/user/create', name: 'UserFormCreate', component: UserForm, props: true ,
     path: '/user', name: 'UserFormView', component: UserForm, props: true ,
     path: '/user/edit', name: 'UserFormEdit', component: UserForm, props: true ,
    // Same pattern for other models like 'Group' ...
  ]

我的示例 VueJS 组件：

<script>
import 
  // ...
  USER_QUERY,
  // ...
 from '../../graphql/base/user.js'

export default 
  name: 'UserForm',
  props: 
    userId: Number,
    editing: 
      type: Boolean,
      default: false
    
  ,
  apollo: 
    user: 
      query: USER_QUERY,
      variables ()  return  id: this.userId  ,
      skip ()  return this.userId === undefined ,
      result ( data ) 
        this.form.username = data.user.username
        this.form.firstName = data.user.firstName
        this.form.lastName = data.user.lastName
      
    
  ,
  data () 
    return 
      form: 
        username: '',
        password: '',
        firstName: '',
        lastName: ''
      ,
      // ...
    
  ,
  methods: 
    // ...
  

我不得不提一下，我或多或少地看到了相关的主题，但这并不能解决我的问题。

提前感谢您的帮助！

【参考方案1】：

编辑您的路由路径以使用参数。例如：

 path: '/user/:userId', name: 'UserFormView', component: UserForm, props: true 

现在，应用程序会将user/ 路径后面的任何数字解释为名为@9​​87654324@ 的道具。 （props: true 在这里使用参数作为道具很重要。）

您需要做的唯一其他更改是调整您的路由器链接以包含id（例如：http://localhost:8000/user/1），以便在刷新页面时，将有一个参数可供读取。

【讨论】：

因为我已经使用openUserFormView (user, index) this.$router.push( name: 'UserFormView', params: userId: user.id ) , 从他们的列表中打开了用户表单视图，我想它会立即起作用！为什么我没有早点考虑...？！

似乎您已经完成了大部分所需的设计操作，甚至 props: true :)

是的，似乎.. 但是由于我使用的是 GraphQL，所以我根本没有考虑使用 URL 中的参数来做这件事……我会试试这个，如果有问题再回来！谢谢

嗯，它工作得很好。一切都准备好了..我唯一需要添加的是 URL 中的:userId，因为其他一切都已经完成。感谢您的快速帮助，我现在没有考虑在 URL 中使用参数..！