我在docker容器中的rails5.2 webpacker vuejs中有一个应用程序 .
问题是，在做了 axios.put(this.baseUrl + '.json', obj) 之后重定向或重新编辑页面（这里不太确定），什么时候不应该这样做 . 在代码中，它比用文字解释更容易看到 .
app / controllers / positions_controller.rb
class PositionsController < ApplicationController
....
def update
respond_to do |format|
if @position.update(position_params)
format.html { redirect_to plan_position_url(@plan, @position), notice: 'Position was successfully updated.' }
format.json { head :no_content } # <--- Here will end the request.
else
format.html { render :edit }
format.json { render json: @position.errors, status: :unprocessable_entity }
end
end
end
....
end
app / javascript / packs / position_vue.js
/* eslint no-console: 0 */
import Vue from 'vue/dist/vue.esm';
import axios from 'axios';
...
document.addEventListener('DOMContentLoaded', () => {
axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
const app = new Vue({
// ...
computed:{
baseUrl() { return window.location.href },
},
methods: {
autoSave(){
console.log('autoSave')
axios.put(this.baseUrl + '.json', { // <---- Adding .json
position: {
arg1: "yeay!",
}
})
.then(function (response) {
console.log(response);
})
}
},
})
})
在视图中
....
<a @click.prevent='autoSave' class='btn btn-success btn-lg btn-block'>
<i class="fa fa-magic"></i> Save
</a>
....
Showtime
vue应用程序没有问题 . 单击保存按钮时，这就是它发生的情况：
Firefox webConsole
autoSave position_vue.js:64
Object { data: "", status: 204, statusText: "No Content", headers: {…}, config: {…}, request: XMLHttpRequest } position_vue.js:75 // <-- This is the response of the request, which is ok.
Navega a http://myapp.localhost/plans/1/positions/undefined // <-- this is the weird part ... 'Navega a' means 'Browse to'. This should not be triggered
Rails日志
put请求（成功） .
web_1 | Processing by PositionsController#update as JSON
web_1 | Parameters: {"position"=>{"args1"=>"yeay!"}
web_1 | User Load (1.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 1], ["LIMIT", 1]]
web_1 | ↳ .bundle/gems/activerecord-5.2.0/lib/active_record/log_subscriber.rb:98
web_1 | Plan Load (0.8ms) SELECT "plans".* FROM "plans" WHERE "plans"."user_id" = $1 AND "plans"."sequential_id" = $2 LIMIT $3 [["user_id", 1], ["sequential_id", 1], ["LIMIT", 1]]
web_1 | ↳ app/controllers/positions_controller.rb:92
web_1 | Position Load (1.3ms) SELECT "positions".* FROM "positions" WHERE "positions"."plan_id" = $1 AND "positions"."sequential_id" = $2 LIMIT $3 [["plan_id", 1], ["sequential_id", 1], ["LIMIT", 1]]
web_1 | ↳ app/controllers/positions_controller.rb:102
web_1 | (0.3ms) BEGIN
web_1 | ↳ app/controllers/positions_controller.rb:52
web_1 | (0.6ms) COMMIT
web_1 | ↳ app/controllers/positions_controller.rb:52
web_1 | Completed 204 No Content in 103ms (ActiveRecord: 4.0ms)
然后重定向/重新渲染
web_1 | Started GET "/plans/1/positions/undefined" for 172.18.0.8 at 2018-08-05 21:45:20 +0000
web_1 | Cannot render console from 172.18.0.8! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
web_1 | Processing by PositionsController#show as HTML
配置
我的猜测是它与webpack-dev-server有关 . 它以某种方式尝试重新加载页面 .
这是我的webpacker / webpacker配置 .
config / webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .vue
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: webpacker # <-- docker container for webpacker
port: 3035
public: 0.0.0.0:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
config / webpack / loaders / vue.js
const { dev_server: devServer } = require('@rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader',
options: { extractCSS }
}]
}
config / webpack / environment.js
const { environment } = require('@rails/webpacker')
const vue = require('./loaders/vue')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
'window.$': 'jquery',
JQuery: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.Tether': "tether",
Popper: ['popper.js', 'default'] // for Bootstrap 4
})
)
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
environment.loaders.append('vue', vue)
module.exports = environment
config / webpack / development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
docker-compose.yml
...
webpacker:
build: .
command: bash -c "rm -rf /myapp/public/packs; /myapp/bin/webpack-dev-server"
volumes:
- myapp-sync:/myapp:nocopy
ports:
- "3035:3035"
...
我这里的想法已经不多了 . 任何帮助都感激不尽 . 谢谢