Блог

Так что в моем Vue.js веб-приложение Я использую цикл v-for для отображения данных, которые я получаю с помощью Axios. Мое приложение представляет собой электронную таблицу, которая позволяет вводить данные, и у меня есть функция, которая отправляет данные в базу данных с помощью Axios.post(url). url — адрес-это мой локальный адрес, по которому я запускаю Express.js api на моем локальном компьютере. Предупреждение не связано с запросом POST, но вместо этого оно возникает из Axios.get(url), который использует цикл v-for для отображения всех данных. На переднем конце все выглядит нормально, и когда вы @нажимаете кнопку для отправки новых данных, она отображается нормально, за исключением того факта, что в консоли есть журнал [vue-warn]. Функция, которую я использую для получения данных, вызывается в крюке жизненного цикла created (). Я попытался использовать JSON.stringify(axiosResponse), чтобы убедиться, что данные из Axios являются строкой, а не объектом, но если я попытаюсь это сделать, это приведет к сбою и приведет к ошибке, а не просто к предупреждению. Это немного сложно, но, несмотря на то, что внешний продукт выглядит хорошо и отображает данные, я хотел бы устранить предупреждение о том, что существует рекурсивный мутационный эффект. Это приложение не находится в производственной среде, так что это безопасно, но я бы хотел, чтобы это приложение было бесплатным и не несло никаких рисков, так как я хотел бы включить его в портфель веб-разработчиков.

Вот это Vue.js код:

 <template>
  <div>
    <div class="home">
      <div class="flex">
        <div class="title inline">Matthew Brignola</div>
        <h2 class="inline">My Vue.js Website</h2>
        <span class="material-icons"> format_list_bulleted </span>
      </div>
      <div class="title2"></div>
      <div class="header"></div>
      <div class="content">
        <br />
        <table>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>City</th>
            <th>State</th>
            <th>Gender</th>
          </tr>
          <tr>
            <td><input type="text" v-model="fname" required /></td>
            <td><input type="text" v-model="lname" required /></td>
            <td><input type="email" v-model="email" required /></td>
            <td><input type="text" v-model="phone" required /></td>
            <td><input type="text" v-model="address" required /></td>
            <td><input type="text" v-model="city" required /></td>
            <td>
              <select v-model="state" required>
                <option disabled selected hidden>State</option>
                <option value="AL">Al</option>
                <option value="AK">AK</option>
                <option value="AR">AR</option>
                <option value="AZ">AZ</option>
                <option value="CA">CA</option>
                <option value="CO">CO</option>
                <option value="CT">CT</option>
                <option value="DE">DE</option>
                <option value="FL">FL</option>
                <option value="GA">GA</option>
                <option value="HI">HI</option>
                <option value="IA">IA</option>
                <option value="ID">ID</option>
                <option value="IL">IL</option>
                <option value="IN">IN</option>
                <option value="KS">KS</option>
                <option value="KY">KY</option>
                <option value="LA">LA</option>
                <option value="MA">MA</option>
                <option value="MD">MD</option>
                <option value="ME">ME</option>
                <option value="MI">MI</option>
                <option value="MN">MN</option>
                <option value="MO">MO</option>
                <option value="MT">MT</option>
                <option value="MS">MS</option>
                <option value="NC">NC</option>
                <option value="ND">ND</option>
                <option value="NE">NE</option>
                <option value="NH">NH</option>
                <option value="NJ">NJ</option>
                <option value="NM">NM</option>
                <option value="NV">NV</option>
                <option value="NY">NY</option>
                <option value="OH">OH</option>
                <option value="OK">OK</option>
                <option value="OR">OR</option>
                <option value="PA">PA</option>
                <option value="RI">RI</option>
                <option value="SC">SC</option>
                <option value="SD">SD</option>
                <option value="TN">TN</option>
                <option value="TX">TX</option>
                <option value="UT">UT</option>
                <option value="VA">VA</option>
                <option value="VT">VT</option>
                <option value="WA">WA</option>
                <option value="WI">WI</option>
                <option value="WV">WV</option>
                <option value="WY">WY</option>
                <option value="undefined" selected>No Record</option>
              </select>
            </td>
            <td>
              <select v-model="gender" required>
                <option value="Gender" disabled selected hidden>Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
              </select>
            </td>
            <td><input type="submit" @click="enterData" /></td>
          </tr>
          <tr v-for="(row, index) in rows.reverse()" :key="index">
            <td>{{ row.FirstName }}</td>
            <td>{{ row.LastName }}</td>
            <td>{{ row.Email }}</td>
            <td>{{ row.Phone }}</td>
            <td>{{ row.Address }}</td>
            <td>{{ row.City }}</td>
            <td>{{ row.State }}</td>
            <td :class="{ f: f, m: m }">{{ row.Gender }}</td>
            <td><button id="edit" @click="edit">Edit</button></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      fname: "",
      lname: "",
      email: "",
      phone: "",
      gender: "",
      address: "",
      city: "",
      state: "",
      rows: [],
      f: false,
      m: false,
      a: 0,
    };
  },
  methods: {
    enterData() {
      const url = "http://localhost:8081/data";
      axios.post(url, {
        data: {
          firstname: this.fname,
          lastname: this.lname,
          phone: this.phone,
          gender: this.gender,
          email: this.email,
          address: this.address,
          city: this.city,
          state: this.state,
        },
      });
      location.reload();
    },
    get() {
      const url = "http://localhost:8081/data";
      axios.get(url).then((Response) => {
        var obj = Response.data;
        try {
          console.log(typeof this.rows);
          if (typeof obj === "object") {
            this.rows = JSON.parse(JSON.stringify(obj));
            this.a  ;
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
    clear() {
      this.fname = "";
      this.lname = "";
      this.email = "";
      this.phone = "";
      this.gender = "";
      this.address = "";
      this.city = "";
      this.state = "";
    },
  },
  created() {
    this.get();
  },
};
</script>

<style scoped>
.inline {
  display: inline;
  margin-right: 1em;
}
table {
  margin-left: auto;
  margin-right: auto;
  border: 3px solid rgb(0, 195, 255);
}
td {
  overflow: hidden;
}
input {
  width: 90%;
}
tr:hover {
  background-color: #777;
  color: white;
}
.f {
  color: pink;
}
.b {
  color: rgb(158, 158, 255);
}
</style>

 

Вот это Express.js код сервера.

 const express = require('express');
const cors = require('cors');
const mysql = require('mysql2');
const nodemailer = require('nodemailer');
const jwt = require('jsonwebtoken');

const app = express();

// middleware
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors())

const data = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    database: 'spreadsheet',
    password: 'mhc22Lde55s'
  });
  console.log('spreadsheet DB Connected')

app.post('/data', (req, res) => {
    data.query('INSERT INTO sheet (lastname, firstname, phone, gender, email, address, city, state) VALUES ("'   req.body.data.lastname   '","'    req.body.data.firstname   '","'   req.body.data.phone   '","'   req.body.data.gender   '","'   req.body.data.email   '","'   req.body.data.address   '","'   req.body.data.city   '","'   req.body.data.state  '")', (err) => {
        if (err) throw err;
      });
});

app.get('/data', (req, res) => {
    data.query('SELECT * FROM sheet', (err, results) => {
        if (err) throw err;
        res.send(results)
    })
})

app.get('/', (req, res) => {
  res.send('<h1>Express Backend</h1>')
});

const server = app.listen(process.env.PORT || 8081, () => {
    console.log('Server is running at on port '  (process.env.PORT || 8081))
  });