我正在使用 Vue.js 开发一个 WP 主题，所有数据都是通过 REST API 获取的。到目前为止，在显示数据方面一切都完美无缺。
我正在尝试实现联系表单插件(Contact Form 7——但愿意接受建议)。该插件通过向 PHP 添加短代码来工作，但由于我没有使用 PHP，而是在客户端呈现所有前端——我对如何实现这两者之间的集成感到困惑。
想法 (我最初的方法...)
<强>1。隐藏
我可以将短代码包含在我的 index.php 文件中，它的可见性是隐藏的，一旦用户到达联系页面就可以通过 javascript 与它交互。我不太确定这种方式，因为实际上不需要在输入时加载表单，只需在联系页面上加载即可。
<强>2。客户端 -> 服务器
在前端构建一个表单，收集用户数据并将其发送到服务器端的函数 (functions.php)。然后服务器使用此数据来执行所需的提交。这是否有意义/甚至可能吗？
所以...
我只是在寻找一些方向。我很乐意分别使用 Wordpress 和 Vue，但在这种情况下，当涉及到客户端和服务器端之间的交互时，我仍然有疑问。
有什么建议可以帮助我前进吗？我更喜欢使用 Contact Form 7 插件，因为我的许多网站都使用它，但我也对其他解决方案持开放态度，最好在 Wordpress 中管理，而不是第三方服务。任何意见或建议表示赞赏!
谢谢!
最佳答案
这可能是一个解决方案，可能不是最优雅的。
供引用，loadPageInformation 是我用来调用 REST API 的方法，然后，响应存储在 pageInfo 中，如下所示:
loadPageInformation: function(slug) {
this.pageInfo = null;
// retrieving page data using the page slug.
axios.get(this.appData.rest_url + '/wp/v2/pages?slug=' + slug)
.then( response => { this.pageInfo = response.data[0]; } )
.catch( error => { console.log( error ); } );
},
在你的模板文件中:
<template>
<div class="v-page" v-if="this.$root.pageInfo != null">
<b-row class="">
<b-col cols="12">
<h1>{{ this.$root.pageInfo.title.rendered }}</h1>
<div class="contact-form"></div>
</b-col>
</b-row>
<!-- footer. -->
<footer-component></footer-component>
</div>
</template>
<script>
export default {
created: function() {
this.$root.loadPageInformation(this.$route.params.pageSlug);
},
updated: function() {
$( ".cform7 .wpcf7" ).appendTo( ".contact-form" );
}
}
</script>
您可以注意到 更新 方法下的 jQuery 行，它基本上会从 PHP 中剪切表单并将其粘贴到模板文件中。 那条线是建议的解决方案。该表格将使用 do_shortcode 调用在 PHP 中:
<div class="cform7 d-none">
<?php echo do_shortcode('[contact-form-7 id="104" title="Contact form"]'); ?>
</div>
编辑:一个不同的解决方案
我测试了之前的解决方案，发现了一些问题。所以这是一种新方法。
简答:创建一个新的自定义帖子类型来打印简码，然后 load生成的 URL 到 Vue 组件中。
很长的回答:
供引用:从 functions.php 加载 Vue 生成的 JS 和 CSS 文件应该是正确的过程。它将在后续步骤中派上用场。
所以我创建了一个名为短代码的自定义帖子类型，如下所示:
function custom_shortcodes_post() {
$labels = array(
'name' => __( 'Shortcodes' ),
'singular_name' => __( 'Shortcode' ),
'add_new' => __( 'Add new shortcode' ),
'add_new_item' => __( 'Add new shortcode' ),
'edit_item' => __( 'Edit shortcode' ),
'new_item' => __( 'New shortcode' ),
'all_items' => __( 'All shortcodes' ),
'view_item' => __( 'See shortcode' ),
'search_items' => __( 'Search shortcodes' ),
'not_found' => __( 'No shortcodes found' ),
'not_found_in_trash' => __( 'No shortcodes in trash' ),
'parent_item_colon' => '',
'menu_name' => 'Shortcodes'
);
$args = array(
'labels' => $labels,
'description' => 'Save shortcodes with specific data',
'public' => true,
'show_in_rest' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'shortcodes' ),
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => 6,
'supports' => array( 'title', 'editor' )
);
register_post_type( 'shortcodes', $args );
}
add_action( 'init', 'custom_shortcodes_post' );
然后我创建了一个新的简码 帖子，在内容中，我写了 Contact Form 7 给我的简码。我还创建了 single-shortcodes.php，如下所示:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>
<body style="background:none">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php wp_footer(); ?>
</body>
</html>
最后，模板文件保持不变，但 JS 内容不同:
<template>
<div class="v-page" v-if="this.$root.pageInfo != null">
<b-row class="">
<b-col cols="12">
<h1>{{ this.$root.pageInfo.title.rendered }}</h1>
<div class="contact-form"></div>
</b-col>
</b-row>
<!-- footer. -->
<footer-component></footer-component>
</div>
</template>
<script>
export default {
created: function() {
this.$root.loadPageInformation(this.$route.params.pageSlug);
},
updated: function() {
if (this.$route.params.pageSlug == 'contact') {
$( '.contact-form' ).load( '/shortcodes/contact-form/' );
}
}
}
</script>
在那之后，控制台中应该会出现一个错误，因为 single-shortcodes.php 正在从 Vue 加载 JS 和 CSS 文件，所以在 functions.php 我做了一点修复:
if ( !is_singular( 'shortcodes' ) ) {
// here I load the JS and CSS files from Vue.
}
我注册 CSS 和 JS 文件的整个代码如下所示:
function rci_theme_enqueue() {
if ( !is_singular( 'shortcodes' ) ) {
// enqueue main style.
wp_enqueue_style(
'app',
get_template_directory_uri() . '/spa/dist/css/app.css'
);
// register the script.
wp_register_script(
'vue_app',
get_template_directory_uri() . '/spa/dist/app.js',
array(),
'1.0.0',
true
);
// localize the script with new data.
global $post;
$app_data = array(
'rest_url' => untrailingslashit( esc_url_raw( rest_url() ) ),
'theme_url' => get_template_directory_uri(),
'app_path' => $post->post_name, // page where the custom page template is loaded.
);
wp_localize_script( 'vue_app', 'app_data', $app_data );
// enqueued script with localized data.
wp_enqueue_script( 'vue_app' );
}
}
add_action( 'wp_enqueue_scripts', 'rci_theme_enqueue' );
再说一次:对我来说，这听起来不像是一个优雅的解决方案，但不幸的是，当将 Vue 与 WordPress 混合使用时，您将失去一些 WordPress 的核心功能。
希望对大家有帮助。
关于javascript - WordPress + Vue.js : Contact Forms，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44954565/
我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server
如何将send与+=一起使用？a=20;a.send"+=",10undefinedmethod`+='for20:Fixnuma=20;a+=10=>30 最佳答案 恐怕你不能。+=不是方法，而是语法糖。参见http://www.ruby-doc.org/docs/ProgrammingRuby/html/tut_expressions.html它说Incommonwithmanyotherlanguages,Rubyhasasyntacticshortcut:a=a+2maybewrittenasa+=2.你能做的最好的事情是:
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有一个数组数组，想将元素附加到子数组。+=做我想做的，但我想了解为什么push不做。我期望的行为(并与+=一起工作):b=Array.new(3,[])b[0]+=["apple"]b[1]+=["orange"]b[2]+=["frog"]b=>[["苹果"],["橙子"],["Frog"]]通过推送，我将推送的元素附加到每个子数组(为什么？):a=Array.new(3,[])a[0].push("apple")a[1].push("orange")a[2].push("frog")a=>[[“苹果”、“橙子”、“Frog”]、[“苹果”、“橙子”、“Frog”]、[“苹果”、“
有没有办法让Ruby能够做这样的事情？classPlane@moved=0@x=0defx+=(v)#thisiserror@x+=v@moved+=1enddefto_s"moved#{@moved}times,currentxis#{@x}"endendplane=Plane.newplane.x+=5plane.x+=10putsplane.to_s#moved2times,currentxis15 最佳答案 您不能在Ruby中覆盖复合赋值运算符。任务在内部处理。您应该覆盖+，而不是+=。plane.a+=b与plane.a=
出于某种原因，heroku尝试要求dm-sqlite-adapter，即使它应该在这里使用Postgres。请注意，这发生在我打开任何URL时-而不是在gitpush本身期间。我构建了一个默认的Facebook应用程序。gem文件:source:gemcuttergem"foreman"gem"sinatra"gem"mogli"gem"json"gem"httparty"gem"thin"gem"data_mapper"gem"heroku"group:productiondogem"pg"gem"dm-postgres-adapter"endgroup:development,:t
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
我是Ruby和这个网站的新手。下面两个函数是不同的，一个在函数外修改变量，一个不修改。defm1(x)x我想确保我理解正确-当调用m1时，对str的引用被复制并传递给将其视为x的函数。运算符当调用m2时，对str的引用被复制并传递给将其视为x的函数。运算符+创建一个新字符串，赋值x=x+"4"只是将x重定向到新字符串，而原始str变量保持不变。对吧？谢谢 最佳答案 String#+::str+other_str→new_strConcatenation—ReturnsanewStringcontainingother_strconc