Articles of vue.js

如何组织由express / koa后端服务的webpacked vue.js应用程序?

我在设置一个易于debuggingvue.js项目与koa服务器结合的一些困难。 命令cross-env NODE_ENV=development webpack-dev-server –open –hot从webpack-simple生成configuration似乎是一件好事,但与koa / express一起使用这个命令的惯例是什么? 我find的一个解决scheme是使用pm2同时启动vue和后端的webpack-dev-server,但是我认为这意味着我需要初始着陆vue.js应用程序页面的复制版本,目前正在从koa路线上/。 对于我来说这两种服务器的想法也是令人困惑的,而且感觉很奇怪。 所以,我想我一定是做错了! 有人可以解释一个很好的常规方式做到这一点。

Laravel 5.4推送器错误

我在Laravel 5.4中使用推送器,但是出现以下错误: WebSocket连接到'ws://ws.pusherapp.com/app/731e32c5f123456298e?protocol = 7&client = js&version = 4.1.0&flash = false'失败:WebSocket在连接build立之前closures。 Pusher错误:{“type”:“WebSocketError”,“error”:{“type”:“PusherError”,“data”:{“code”:4001,“message”:“你忘了指定集群时创buildPusher实例?应用程序密钥731e32c5f123456298e在此群集中不存在。“}}}

将数据从Node传递给Vuejs

我有一个本地Node.js服务器运行在端口3000.我有另一个前端使用webpack,在8080上运行的开发服务器。节点连接到MySQL服务器。 我的项目结构如下所示: SampleProject -> BackEnd -> FrontEnd 我已经使用webpack-dev-server代理选项将来自webpack-dev-server(8080)的请求代理到节点(3000)。 开发服务器configuration我的webpack.config.js看起来像这样: – devServer: { proxy: { '/api': { target: 'http://localhost:3000' } }, historyApiFallback: true, noInfo: true } 我在services.js中写了一个Node api exports.getAllPatientData = function(req, res) { con.connection.query("SELECT fname, lname, city, country_code, TIMESTAMPDIFF(YEAR, DOB, CURDATE()) AS age FROM sbds_patient_data where pid = 1", function(err, result, fields) { if (err) { […]

在VueJs中发布未定义响应的请求

我是VueJs和Expressjs的初学者。 我正在试图通过Vuejs和ExpressJs后端。 我向后端(expressJs)发送一个post请求,并且: 1-响应是未定义的2-同时我可以在铬开发工具中看到2个请求。 一个是Option,另一个是Post。 3-邮递员根本没有问题。 这里是快递app.js的代码 console.log('Server is running') const express = require('express'), bodyParser = require('body-parser'), cors = require('cors'), morgan = require('morgan'); app = new express(); //Setup middleware app.use(cors()); app.use(morgan('combined')) app.use(bodyParser.json()) app.post('/register', (req, res, next) => { res.send({ message: `Hello ${req.body.email}! your user was registered!` }) }); app.listen(8081); 这里是VueJs中的代码: // Api Setting import axios […]

我无法使用passport-facebook来validation路线

下午好。 我前几天尝试使用express和passport-facebookvalidation路线,但没有成功。 而在客户端,我正在使用VueJs。 如果有人能帮我解决这个问题,我会很开心的。 我将在下面发布我的代码: express.js 'use strict'; let express = require('express'); let bodyParser = require('body-parser'); let cors = require('cors'); let cookieParser = require('cookie-parser'); let session = require('express-session'); let passport = require('passport'); let load = require('express-load'); module.exports = () => { let app = express(); //configurar a porta em que o express irá rodar app.set('port', […]

Vuejs $ emit在callback中不会触发

在下面的代码中: export default { props: ['note'], methods: { remove(){ NoteRepo.remove(this.note, (err) => { if (err) { console.log('Should Fire') this.$emit('alerted', { type: 'error', message: 'Failed to remove note' }); } }) } } } 当调用remove函数时,控制台会logging“Should Fire”,但是$ emit事件不会被触发。 如果我将$ emit放在callback之外,如下所示: export default { props: ['note'], methods: { remove(){ this.$emit('alerted', { type: 'error', message: 'Failed to remove note' […]

Webpack:如何将电子应用程序中的用户界面从业务逻辑中分离出来?

我在Electron + Vue 2 + Webpack 2 + Bootstrap 3上开发了一个桌面应用程序。目前,所有的JS代码都被webpack捆绑在一起,并作为单个文件包含在HTML中。 的index.html <body> <script src="bundle.js"></script> </body> 一切正常,但… 主要的缺点是bundle.js大小太大了。 虽然,我用Webpack CommonsChunkPlugin将bundle.js拆分为app.js (我的代码)和vendor.js(第三方库),但我仍然觉得有些问题。 在Electron中, 不需要将所有的东西捆绑在一起,因为文件不会通过networking传输。 但在另一方面,我需要Webpack来编译Vue模板。 所以,我想find一种将UI与业务逻辑分开的方法: <body> <!– UI: views, controllers, etc / bundled by webpack –> <script src="app.js"></script> <script src="vendor.js"></script> <!– business logic : models, services, DAO etc / NOT bundled by webpack –> <script src="logic.js"></script> […]

node.js和chrome浏览器之间console.log的奇数输出

我正在玩节点的crypt() ,只是想要确认Diffie-Hillman在节点('Alice')和Chrome客户端('Bob')之间共享的秘密是匹配的。 我把socket.io上的公共密钥发送给对方,并且在他们各自的控制台输出中使用base64编码正确输出,但是当我输出共享密钥时,节点的控制台显示正确,但是Chrome的控制台给了我一串数字。 有什么想法吗? 节点的代码: var Alice = crypto.getDiffieHellman(group); Alice.generateKeys('base64'); console.log("receiving Bob's public key from browser"); var BobsPublicKey = message.data; console.log(BobsPublicKey); console.log("sending Alice's public key to browser"); var AlicesPublicKey = Alice.getPublicKey('base64'); console.log(AlicesPublicKey); client.emit('message', AlicesPublicKey); // compute shared secret var AlicesSharedSecret = Alice.computeSecret(BobsPublicKey, 'base64', 'base64'); console.log("Alice's shared secret:"); console.log(AlicesSharedSecret); 节点的控制台输出(为简洁起见,缩写): receiving Bob's public key from browser […]

带有vuejs和nodejs的Google oauth2

我开发一个错误记者应用程序。 整个项目分为两个不同的项目 – 两个都有不同的package.json文件 – 一个用于客户端,我使用Vue.js 2,一个用Nodejs 8和Express.js构build的服务器部分。 这两部分将通过REST API进行通信。 要访问信息中心并报告错误,用户必须login他的Google帐户。 到目前为止,我已经初始化Vuejs中用户将会触发login事件的结构。 我使用a标签,当按下时触发signin()方法:in <a @click="sign">SIGN IN</a> // … export default { methods: { signin() { // start animation let loadingInstance = this.$loading({ fullscreen: true, text: 'Waiting for Google authorization…' }); // opens the Google sign in window // when ready stop the loading loadingInstance.close(); }, […]

Vue在input时searchAjax响应数组

我试图过滤一个列表,当input到我从Ajax调用中获得的文本框。 问题似乎是在Ajax准备好之前应用filter。 HTML: <input type="text" class="form-control" v-model="searchTerm"> <table> <tr v-for="food in filteredItems"> <td>{{ food.name }}</td> <td>{{ food.energy }}</td> </tr> </table> 助手/ index.js: export default { getFoods() { return Vue.http.get('http://localhost:3000/foods/allfoods') .then((response) => { return response.data; }); } } Vue组件: import helpers from '../helpers' export default { name: 'Search', mounted() { helpers.getFoods().then((response) => { this.foodData = response; […]