Webpack Encore在Symfony 5中获取

编程问答 2022-08-10

问题描述

我正在学习使用webpack Encore

我想知道是否可以使用'path'函数通过ajax调用路由

webpack.config.js 

    .setoutputPath ('public / build /')
    .setPublicPath ('/ build')
    .addEntry ('app','./assets/js/app.js') 
    .addEntry ('ajax','./assets/js/ajax.js')

我创建了第二个条目，该条目导入了所有ajax调用

ajax.js 

import 'bootstrap'; // adds functions to jQuery

import articleShow './myAjax/articleShow';
articleShow();
...

myAjax> articleShow.js

是否可以使用路径功能？

        ...
        let formData = new FormData();

        formData.append("folder",folder);
        formData.append("id",id);

        **var urlAjax = "{{ path('showArticle') }}";** (pb)!!!
        //var urlAjax = "https://localhost:8000/article/show";
        fetch(urlAjax,{
            method: 'POST',body: formData
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (message) {
            ...

Articlecontroller 

    /**
    * @Route("/article/show",name="showArticle")
    */
    public function showArticle(....) {
     ...

问题1：是否可以在webpack encore中使用“路径”功能？

问题2：我的方法正确吗？如果没有，您是否有具体示例的建议，因为我几乎找不到任何文档。

感谢您的帮助。

解决方法

谢谢您，我成功使用了webpack encore。要帮助：

完整的Fos jsrouting包

step 1 :  expose your route in your controller otherwise you have to modify the file: fos_js_routes.json in the public folder or rename the route

/**
* @Route("/country",**options={"expose"=true},** name="ajaxCountry") 
**/

step 2 : 

import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const routes = require('../../../public/js/fos_js_routes.json');
Routing.setRoutingData(routes);

 var formData = new FormData();

    var urlAjax = Routing.generate('yourRoute');

    fetch(urlAjax,{
        method: 'POST',body: formData
    })
        .then(function (response) {
            return response.json();
        })
        .then(function (message) {
           ...


step 3 : in your terminal 

 php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

再见

fetchjavascripturlwebpackwebpackwebpack