sockets - Quasar アプリのルーティングの問題

Question

現在、Quasar アプリを開発しています。これまでのところ、ログインページと quasar が提供するデフォルトのレイアウトしかありません。ポート100で実行するように設定した別のサーバーがあります。プロキシを設定して、axiosおよびsocket.ioからのすべての呼び出しを、アプリケーションのmySQLデータベースをホストするサーバーにリダイレクトします。すでにルートを設定しており、ブラウザーの検索でルートを手動で入力するとそこに移動できますが、ログインで this.$router.push() を使用してメインページに移動すると、ナビゲートされません。それ。たとえば、ポート 8080 でこのアプリをホストしています。デフォルトでは、「localhost:8080」のログインページに移動します。ログインが認証されると、ユーザーは this.$router.push('/main') を使用してクエーサーアプリ内のメインページにリダイレクトされるはずです。ただし、これは行いません。ログインを押すと、URL が「localhost:8080/?」に変わるだけです。ただし、ブラウザで手動で「localhost:8080/main」と入力すると、メインページに移動します。私のルートのコードは次のとおりです。

export default [
{ 
    path: '/', 
    component: () => import('components/login'),
  },

  {
    path: '/main',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      { path: 'chat', component: () => import('components/chat')}
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

ログインコンポーネントのコードは次のとおりです。

<template>
    <div>
        <form id="login" label="Login">
            <q-input type="text" float-label="Username" v-model="username" /> <br>
            <q-input v-model="password" type="password" float-label="Password" />
            <q-btn input type="submit" @click="authenticate()">Submit</q-btn>
        </form>
    </div>
</template>

<style>
    input{
        margin: 10px;
    }
    #login{
        vertical-align: middle;
        text-align: center;
    }
</style>

<script>

module.exports = {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    authenticate () {
      this.$axios.post('/api/login', {
        Username: this.username,
        Password: this.password
      })
        .then(response => {
          this.$Socket.emit('LoginInfo', {
            firstname: response.data[0].ClientFirstName,
            lastname: response.data[0].ClientLastName,
            name: response.data[0].ClientFirstName + ' ' + response.data[0].ClientLastName,
            userid: response.data[0].ClientID
          })
          console.log(this.$router)
          this.$router.push({path: '/main'})
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

問題の可能性があるものを検索するのに何時間も費やしましたが、これまでのところ、有用なものは何も見つかりませんでした. もしかしたらバグかも？私の同僚は私のコードを調べましたが、問題はありませんでした。うまくいけば、皆さんが私を助けてくれます。とても感謝しております。

要求に応じて、サーバーコード:

const Express=require('express');
const path=require('path');
var cors = require('cors')
var app = Express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "ChatDB"
});

con.connect(function(err) {
  if (err)throw err;
  /*let query="INSERT INTO Client(ClientUserName, ClientPassword, ClientFirstName, ClientLastName) VALUES(\"jeffrey\", \"penner\", \"Jeffrey\", \"Penner\")";
  con.query(query, function(err, result){
    if(err) throw err;
  })*/
  console.log("Connected!");
});

io.set('origins', 'http://localhost:8080');

app.use(Express.json())
//app.use('/public', Express.static(path.join(__dirname, 'public')));
app.use(cors());

app.post('/login', cors(), function(req, res){
  let a=req.body.Username;
  let b=req.body.Password;
  let query="SELECT ClientID, ClientFirstName, ClientLastName FROM Client WHERE ClientUsername=\'" + a + "\' AND ClientPassword=\'" + b + "\';";
  con.query(query, function (err, rows) {
    if (err){
      throw err;
    }
    else if(rows.length)
    {
      console.log(rows);
      res.json(rows);
    }
  })
});

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
  socket.on('LoginInfo', function(data) {
    console.log(data)
  });
})

http.listen(100, function(){
  console.log('listening on *:100')
});

ルーターコードの index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

const Router = new VueRouter({
  /*
   * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
   *
   * If you decide to go with "history" mode, please also set "build.publicPath"
   * to something other than an empty string.
   * Example: '/' instead of ''
   */

  // Leave as is and change from quasar.conf.js instead!
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior: () => ({ y: 0 }),
  routes
})

export default Router

sockets - Quasar アプリのルーティングの問題

3 に答える 3

Related

Reference