Vue项目连接数据库(本地)

  • 前端vue2环境搭建及axios流程
    • 步骤一：进入vue2-mysql文件夹 步骤二：右键vue2-mysql文件夹→在集成终端中打开 步骤三：输入以下指令搭建vue2环境
    npm create vite@latest
    步骤四：输入y 步骤五：输入项目文件名vue2 步骤六：选择Vue 步骤七：勾选JavaScript（到这里项目就创建成功了） 步骤八：cd到项目文件并安装依赖
    cd vue2
    npm install
    步骤九：安装axios
    npm add axios
    步骤十：在components 文件夹中新建一个文件 mysql.vue 并写入以下代码
    script部分
    import axios from 'axios'
    export default {
     name: 'UserInfo',
     data () {
      return {
       list:[]
      }
     },
     async created () {
      try {
       const res = await axios.get('https://localhost:3000')
       this.list = res.data.userinfo
       console.log(this.list)
      } catch(error) {
       console.error('请求失败', error)
      }
     }
    }
    步骤十一：在页面中就可以通过 v-for="item in list" :key="item.id" 拿到数据并渲染了 最后：输入以下命令启动项目
    npm run dev
  • 后端mysql环境搭建流程
    • 步骤一：在桌面创建一个名为vue2-mysql文件夹 步骤二：进入vue2-mysql文件夹并创建一个名为mysql文件夹 步骤三：用VScold打开mysql文件夹 步骤四：右键mysql文件夹→在集成终端中打开 步骤五：输入以下命令安装 mysql2
    npm install mysql2
    步骤六：初始化项目
    npm init -y
    步骤七：安装express
    npm install express
    步骤八：安装mysql依赖
    npm install mysql
    步骤九：安装cors
    npm install cors
    步骤十：在mysql文件夹中新建一个名为index.js文件并写入以下内容
    const express = require('express');
    const cors = require('cors');
    const mysql = require('mysql2/promise'); // 使用支持 Promise 的 mysql2
    const app = express();
    app.use(cors());
    app.use(express.json());
    // 创建数据库连接池
    const db = mysql.createPool({
     host: 'localhost',
     user: 'root',
     password: '123456',
     database: 'vue2-mysql',
    });
    // 示例路由。如果请求成功后直接访问 http://localhost:3000/ 就可以看到请求过来的数据
    app.get('/', async (req, res) => {  try {
      // userinfo
      const [userinfo] = await db.query('SELECT * FROM userinfo');
      // myclassroom
      const [myclassroom] = await db.query('SELECT * FROM myclassroom');
      // windows_server
      const [windows_server] = await db.query('SELECT * FROM windows_server');
      // nat_server
      const [routing_switching] = await db.query('SELECT * FROM routing_switching');
      // python_programming
      const [python_programming] = await db.query('SELECT * FROM python_programming');
      // MyTextbook
      const [MyTextbook] = await db.query('SELECT * FROM myTextbook');
      // MyExam
      const [MyExam] = await db.query('SELECT * FROM myExam');
      res.json({
       userinfo,
       myclassroom,
       windows_server,
       routing_switching,
       python_programming,
       MyTextbook,
       MyExam
      });
     } catch (err) {
      console.error('服务器错误:', err);
      res.status(500).json({ error: 'Internal Server Error' });
     }
    });
    app.listen(3000, () => {
     console.log('服务器启动成功： http://localhost:3000');
    });
    最后：输入以下命令启动项目
    node index.js
    上一篇:vue项目在服务器临时开启服务 下一篇:Nginx托管静态网页
    复制成功