【前后端交互】

1、在前端页面中显示后台的数据

(1)创建后台项目：

npm install mysql
npm sequelize mysql2

注：

(1)修改vite创建的项目的默认接口：在vite.config.js文件中增加

server：{
			port：端口号
		}

(2)修改服务器端的默认端口：在bin/www下修改

💥举例：

（1）后端连接数据库，导出数据，并放在前端页面中

dbconfig.js代码段：

const Sequelize = require('sequelize')
const mysqlConnection=new Sequelize('xy','root','123456',{
    host:'localhost',
    port:3306,
    dialect:'mysql',
    pool:{
        max:10,
        min:1,
        idle:10000
    }

})
 module.exports = mysqlConnection

StudentModel.js代码段：

const Sequelize=require('sequelize')

const mysqlConnection=require('../config/dbconfig')
const StudentModel=mysqlConnection.define('student',{
    stuId:{
        type:Sequelize.STRING,
        primaryKey:true,
        field:'sid'
    },
    stuName:{
        type:Sequelize.STRING,
        allowNull:false,
        field:'sname'
    },
    stuSex:{
        type:Sequelize.STRING,
        field:'sex',
        allowNull:false
    },
},{
    freezeTableName:true,
    timestamps:false
})
module.exports=StudentModel

StudentRoute.js代码段：

var express = require('express');
var router = express.Router();
var StudentModel=require('../src/model/StudentModel')
//测试:http://localhost:3000/students/all
router.get('/all',(req, res) => {
    StudentModel.findAll({
        raw:true  //不显示时间戳列
    }).then(function (result){
        res.json({
            code:1000,
            info:result
        })
    }).catch((err)=>{
        console.log(err)
    })

})

module.exports = router;

（2）创建前端页面，导入数据

Main.vue中代码段：

<template>
  <el-container>
    <el-header height="80px" style="padding: 0">

      <div class="header">
        <img src='../assets/vue.svg' style="float: left;text-align: center" >
        学生信息管理系统
      </div>
    </el-header>
  </el-container>

  <el-container>
    <el-aside width="200px">
      <el-menu class="aside" default-active="1" @select="selectFunc" :unique-opened="true">
        <el-sub-menu index="1">
          <template #title>七年级</template>
          <el-menu-item index="1-1">1班</el-menu-item>
          <el-menu-item index="1-2">2班</el-menu-item>
          <el-menu-item index="1-3">3班</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>八年级</template>
          <el-menu-item index="2-1">1班</el-menu-item>
          <el-menu-item index="2-2">2班</el-menu-item>
          <el-menu-item index="2-3">3班</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>九年级</template>
          <el-menu-item index="3-1">1班</el-menu-item>
          <el-menu-item index="3-2">2班</el-menu-item>
          <el-menu-item index="3-3">3班</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header height="80px" style="padding: 0;margin: 0;">
        <el-container class="subHeader">
          <div class="desc">{{desc}}</div>
          <el-button type="primary" style="width: 100px;height: 30px;margin: 20px">新增记录</el-button>
        </el-container>
      </el-header>
<el-main style="margin: 0;padding: 0">
        <div class="content">
          <el-table :data="stus">
            <el-table-column prop="stuId" label="编号"/>
            <el-table-column prop="stuName" label="姓名"/>
            <el-table-column prop="stuSex" label="性别"/>
          </el-table>
        </div>
      </el-main>
      <el-footer height="30px" class="footer">Vue of ElementPlus</el-footer>
    </el-container>
  </el-container>
  </template>

<script>
export default {
  name: "Main",
  data(){
    return{
      desc:'七年级1班学生信息',
      stus:[]
    }
  },
  methods:{
    selectFunc(key){
      console.log('Key'+key)
      let strs = ['七','八','九']
      let rank = key.split('-')
      this.desc = `${strs[rank[0]-1] }年级${rank[1]}班学生信息`
    },
    getStudents(){
      this.axios.get('http://localhost:3000/students/all').then((res)=>{
        this.stus=res.data.info
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  created() {
    this.getStudents()
  }
</script>

main.js中代码段：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import axios from "axios";
import VueAxios from "vue-axios";

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app= createApp(App)

app.use(VueAxios,axios)
app.use(ElementPlus)
app.mount('#app')

App.vue中代码段：

<script setup>
import Main from "./components/Main.vue";
</script>

<template>
  <Main/>
</template>