用express和mysql实现了数据的增删改查,并在vue中访问接口进行显示，增加，修改，查询

express与mysql

// 引入 express 框架
var express = require('express');
// 使用express框架
var app = express()
// 引入mysql
var sql = require('mysql')
// 创建连接mysql数据库
var con = sql.createConnection({
    host: 'localhost', // 主机
    user: 'root', //用户名
    password: '', //密码
    database: 'test', //数据库名
    port: '3306', //端口
})
// 连接打开数据库
con.connect()

// 跨域
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", '3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


// 查询所有的数据接口
app.get('/login',function(req,res){
    // sql语句 game为数据表
    var sql = "select * from game"
    // 执行一条sql语句：查询表
    con.query(sql,function(err,result){
        // 发生错误
        if(err){
            res.send(err.message)
            return;
        }
        // 如果空就打印
        if(result === ''){
            console.log('空空如也');
        }
        // 返回数据
        res.send(result)
    })
})

// 删除数据
app.get('/login/del',function(req,res){
    const id = req.query.id
    console.log(id);
    const sql = 'delete from game where id = ?'
    con.query(sql,id,(err,result)=>{
        if(err){
            res.send({err:'删除失败'})
            return;
        }
        res.send({message:'删除成功'})
    })
})


// 根据名字模糊查询
app.get('/login/search',function(req,res){
    // 因为在添加查询语句的时候 字符串变量默认会加上单引号 
    // 所以我在这里直接用 '%'+req.query.name+'%' 包围起来
    const name = '%'+req.query.name+'%'
    // sql语句
    const sql = "select * from game where name like ?"
    con.query(sql,name,(err,result)=>{
        if(err){
            res.send(err.message)
            return;
        }
        res.send(result)
    })
})

// 插入数据
app.get('/login/insert',function(req,res){
    const name = req.query.name;
    const age = req.query.age;
    const keceng = req.query.keceng;
    // sql查询语句
    const sql = 'insert into game(id,name,age,keceng) values(0,?,?,?)'
    // 如果添加多个数据的话，用 [] 括起来 
    con.query(sql,[name,age,keceng],function(err,result){
        console.log(sql);
        if(err){
            res.send({err:'添加失败'})
            return;
        }
        // res.send({message:'添加成功'})
        res.send({message:'添加成功'})
    })
})


// 修改数据
app.get('/login/update',function(req,res){
    const id = req.query.id;
    const name = req.query.name;
    const age = req.query.age;
    const keceng = req.query.keceng;
    const sql = 'update game set name=?,age=?,keceng=? where id = ?'
    con.query(sql,[name,age,keceng,id],function(err,result){
        if(err){
            res.send({err:'更新数失败'})
        }
        res.send({message:'更新数据成功'})
    })
})




// 启动服务器监听端口
var server = app.listen(8080,'127.0.0.1',function(){
    var host = server.address().address
    var port = server.address().port
    console.log('端口为：http://%s:%s',host,port);
})

删除数据

app.get('/login/del',function(req,res){
    const id = req.query.id
    console.log(id);
    const sql = 'delete from game where id = ?'
    con.query(sql,id,(err,result)=>{
        if(err){
            res.send({err:'删除失败'})
            return;
        }
        res.send({message:'删除成功'})
    })
})

vue中使用

		<!-- 通过 scope 来访问当前的数据 -->
<template #default="scope">
  <el-button @click="del(scope.row.id)" size="mini">Delete</el-button>
  <el-button plain size="mini" @click="Update(scope.row)">
    Edit
 </el-button>
</template>

const del = (id) => {
  // axios.get('http://127.0.0.1:8080/login/del?id='+id)
  axios
    .get("http://127.0.0.1:8080/login/del", {
      params: { id },
    })
    .then((res) => {
      // console.log(res.data.message);
      // 删除成功弹出框
      ElMessage({
        message: res.data.message,
        type: "success",
      });
      // 刷新页面
      router.go(0);
    });
};

添加数据

app.get('/login/insert',function(req,res){
    const name = req.query.name;
    const age = req.query.age;
    const keceng = req.query.keceng;
    // sql查询语句
    const sql = 'insert into game(id,name,age,keceng) values(0,?,?,?)'
    // 如果添加多个数据的话，用 [] 括起来 
    con.query(sql,[name,age,keceng],function(err,result){
        console.log(sql);
        if(err){
            res.send({err:'添加失败'})
            return;
        }
        // res.send({message:'添加成功'})
        res.send({message:'添加成功'})
    })
})

vue中使用

<script>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios'
import { ElMessage } from "element-plus";
export default {
    setup(){
        const formInline = reactive({
            Name:'',
            Age:'',
            Keceng:''
        })
        const router = useRouter()
         const Upd = ()=>{
            console.log('点击了');
            //如果 文本框的数据没有为空的时候，在执行
            if(formInline.Name!=='' && formInline.Age!=='' && formInline.Keceng!==''){
                axios.get('http://127.0.0.1:8080/login/insert',{
                        params:{
                            name:formInline.Name,
                            age:formInline.Age,
                            keceng:formInline.Keceng
                        }
                    }).then((res)=>{
                        ElMessage({
                            message: '添加成功',
                            type:'success'
                        }) 
                        router.push('/border')
                    }).catch((err)=>{
                    	// 显示框
                        ElMessage({
                            message: err.err,
                            type:'error'
                        }) 
                    })
            }else{
                ElMessage({
                    message: '姓名或年龄或课程不能空',
                    type:'error'
                }) 
            }
        }

        return{
            formInline,
            Upd
        }
    }
};
</script>

修改数据

app.get('/login/update',function(req,res){
    const id = req.query.id;
    const name = req.query.name;
    const age = req.query.age;
    const keceng = req.query.keceng;
    const sql = 'update game set name=?,age=?,keceng=? where id = ?'
    con.query(sql,[name,age,keceng,id],function(err,result){
        if(err){
            res.send({err:'更新数失败'})
        }
        res.send({message:'更新数据成功'})
    })
})

vue中使用

//首先在页面中点击修改按钮，跳转路由到修改信息的页面
// 更新数据
    const Update = (scope)=>{
      // 跳转路由的时候 并把数据传递过去
      router.push({
        path:'container',
        query:{
          id:scope.id,
          name:scope.name,
          age:scope.age,
          keceng:scope.keceng
        }
      })
    }

<script>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import { ElMessage,ElNotification } from "element-plus";
export default {
  setup() {
    //   接受数据用
    const route = useRoute();
    // 跳转页面用
    const router = useRouter();
    // 创建接收对象
    const formInline = reactive({
      Id: "",
      Name: "",
      Age: "",
      Keceng: "",
      // 判断
      isFlag: false
    });
    // 判断有没有传数据过来
    if(route.query.id === undefined){
        ElNotification({
            title:'数据空空如也',
            message: "这是修改数据的页面哈,需要点击Edit才可以看到数据并且修改数据",
            position:'top-right',
            type:'warning'
        })
        formInline.isFlag = false
    }else if(route.query.id !== undefined){
         formInline.isFlag = true
    }

    // 将对象赋值
    formInline.Id = route.query.id;
    formInline.Name = route.query.name;
    formInline.Age = route.query.age;
    formInline.Keceng = route.query.keceng;
    // 点击更新按钮
    const Update = () => {
      // 判断 各个框是否为空
      if (
        formInline.Name !== "" &&
        formInline.Age !== "" &&
        formInline.Keceng !== ""
      ) {
        // api
        axios
          .get("http://127.0.0.1:8080/login/update", {
            params: {
              id: formInline.Id,
              name: formInline.Name,
              age: formInline.Age,
              keceng: formInline.Keceng,
            },
          })
          .then((res) => {
            // 成功消息提示
            ElMessage({
              message: res.data.message,
              type: "success",
            });
            // 跳转页面
            router.push("/border");
          })
          .catch((err) => {
            // 错误消息提示
            ElMessage.error(err.data.err);
          });
      } else {
        // 判断空消息提示
        ElMessage({
          message: "姓名或者年龄或者课程不能为空",
          type: "warning",
        });
      }
    };
    return {
      formInline,
      Update
    };
  },
};
</script>

查询数据

// 根据名字模糊查询
app.get('/login/search',function(req,res){
    // 因为在添加查询语句的时候 字符串变量默认会加上单引号 
    // 所以我在这里直接用 '%'+req.query.name+'%' 包围起来
    const name = '%'+req.query.name+'%'
    // sql语句
    const sql = "select * from game where name like ?"
    con.query(sql,name,(err,result)=>{
        if(err){
            res.send(err.message)
            return;
        }
        res.send(result)
    })
})

vue中使用

    // 搜索框
    const search = () => {
      if (sum.value !== "") {
        axios
          .get("http://127.0.0.1:8080/login/search", {
            params: { name: sum.value },
          })
          .then((res) => {
            const { data } = res;
            // console.log(data);
            obj.list = data;
          });
        sum.value = "";
      } else {
        ElMessage({
          message: "空空如也，我就显示全部数据",
          type: "success",
        });
        obj.list = obj.newList;
      }
    };

完整代码

1. 显示信息

<template>
  <div>
    <!-- 我这里引入了 elementUI框架的表格 -->
    <!-- <el-table :data="list" id="box" stripe border height="300"> -->
    <el-table :data="list" stripe border id="box" height="500"
            highlight-current-row
         >
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
      <el-table-column prop="keceng" label="Keceng"/>
      <el-table-column align="center">
        <template #header>
          <el-input
            v-model="sum"
            size="mini"
            placeholder="根据Name进行查询"
            @keyup.enter="search()"
          />
        </template>
        <!-- 通过 scope 来访问当前的数据 -->
        <template #default="scope">
          <el-button @click="del(scope.row.id)" size="mini">Delete</el-button>
          <el-button plain size="mini" @click="Update(scope.row)">
            Edit
         </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  setup() {
    // 搜索框的内容
    const sum = ref("");
    // 路由需要
    const router = useRouter();
    // 创建一个对象，对象中有list数组
    const obj = reactive({
      list: [],
      newList: [],
    });

    // 使用axios接口api
    axios.get("http://127.0.0.1:8080/login").then((res) => {
      const { data } = res;
      // console.log(data);
      // 进行赋值
      obj.list = data;
      obj.newList = data;
    });
    // 删除数据
    const del = (id) => {
      // axios.get('http://127.0.0.1:8080/login/del?id='+id)
      axios
        .get("http://127.0.0.1:8080/login/del", {
          params: { id },
        })
        .then((res) => {
          // console.log(res.data.message);
          // 删除成功弹出框
          ElMessage({
            message: res.data.message,
            type: "success",
          });
          // 刷新页面
          router.go(0);
        });
    };
    // 搜索框
    const search = () => {
      if (sum.value !== "") {
        axios
          .get("http://127.0.0.1:8080/login/search", {
            params: { name: sum.value },
          })
          .then((res) => {
            const { data } = res;
            // console.log(data);
            obj.list = data;
          });
        sum.value = "";
      } else {
        ElMessage({
          message: "空空如也，我就显示全部数据",
          type: "success",
        });
        obj.list = obj.newList;
      }
    };
    // 更新数据
    const Update = (scope)=>{
      // 跳转路由的时候 并把数据传递过去
      router.push({
        path:'container',
        query:{
          id:scope.id,
          name:scope.name,
          age:scope.age,
          keceng:scope.keceng
        }
      })
    }



    return {
      ...toRefs(obj),
      del,
      sum,
      search,
      Update
    };
  },
};
</script>
<style lang="less" scoped>
#box {
  width: 70%;
  margin: 50px auto;
}
</style>

添加数据

<template>
  <div id="add">
    <!-- 添加数据 -->
    <el-form :inline="true" :model="formInline" label-width="100px">
      <!-- 姓名 -->
      <el-form-item label="Name：" class="add1">
        <el-input
          v-model="formInline.Name"
          placeholder="Name"
        ></el-input> </el-form-item
      ><br />
      <!-- 年龄 -->
      <el-form-item label="Age：" class="add1">
        <el-input
          v-model="formInline.Age"
          placeholder="Age"
        ></el-input> </el-form-item
      ><br />
      <!-- 课程 -->
      <el-form-item label="Keceng：" class="add1">
        <el-input v-model="formInline.Keceng" placeholder="Keceng"></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="Upd()">Add</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios'
import { ElMessage } from "element-plus";
export default {
    setup(){
        const formInline = reactive({
            Name:'',
            Age:'',
            Keceng:''
        })
        const router = useRouter()
         const Upd = ()=>{
            console.log('点击了');
            if(formInline.Name!=='' && formInline.Age!=='' && formInline.Keceng!==''){
                axios.get('http://127.0.0.1:8080/login/insert',{
                        params:{
                            name:formInline.Name,
                            age:formInline.Age,
                            keceng:formInline.Keceng
                        }
                    }).then((res)=>{
                        ElMessage({
                            message: '添加成功',
                            type:'success'
                        }) 
                        router.push('/border')
                    }).catch((err)=>{
                        ElMessage({
                            message: err.err,
                            type:'error'
                        }) 
                    })
            }else{
                ElMessage({
                    message: '姓名或年龄或课程不能空',
                    type:'error'
                }) 
            }
        }

        return{
            formInline,
            Upd
        }
    }
};
</script>
<style lang="less" scoped>
#add {
  // width: 70%;
  display: flex;
  margin:20px auto;
  justify-content: center;
  .add1 {
    flex: 1;
  }
}
</style>

修改数据

<template>
  <div id="add">
    <template v-if="formInline.isFlag">
      <!-- 修改数据 -->
      <el-form :inline="true" :model="formInline" label-width="100px">
        <!-- id -->
        <el-form-item label="Name：" class="add1">
            <!-- disabled将id框设置为不能修改的 -->
          <el-input
            v-model="formInline.Id"
            placeholder="Name"
            disabled
          ></el-input> </el-form-item
        ><br />
        <!-- 姓名 -->
        <el-form-item label="Name：" class="add1">
          <el-input
            v-model="formInline.Name"
            placeholder="Name"
          ></el-input> </el-form-item
        ><br />
        <!-- 年龄 -->
        <el-form-item label="Age：" class="add1">
          <el-input
            v-model="formInline.Age"
            placeholder="Age"
          ></el-input> </el-form-item
        ><br />
        <!-- 课程 -->
        <el-form-item label="Keceng：" class="add1">
          <el-input v-model="formInline.Keceng" placeholder="Keceng"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="Update()">Update</el-button>
        </el-form-item>
      </el-form>
    </template>
    <!--如果没有数据过来，就显示一个空空的提示吧 -->
    <div class="box1" v-else>
        空空如也
    </div>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import { ElMessage,ElNotification } from "element-plus";
export default {
  setup() {
    //   接受数据用
    const route = useRoute();
    // 跳转页面用
    const router = useRouter();
    // 创建接收对象
    const formInline = reactive({
      Id: "",
      Name: "",
      Age: "",
      Keceng: "",
      // 判断
      isFlag: false
    });
    // 判断有没有传数据过来
    if(route.query.id === undefined){
        ElNotification({
            title:'数据空空如也',
            message: "这是修改数据的页面哈,需要点击Edit才可以看到数据并且修改数据",
            position:'top-right',
            type:'warning'
        })
        formInline.isFlag = false
    }else if(route.query.id !== undefined){
         formInline.isFlag = true
    }

    // 将对象赋值
    formInline.Id = route.query.id;
    formInline.Name = route.query.name;
    formInline.Age = route.query.age;
    formInline.Keceng = route.query.keceng;
    // 点击更新按钮
    const Update = () => {
      // 判断 各个框是否为空
      if (
        formInline.Name !== "" &&
        formInline.Age !== "" &&
        formInline.Keceng !== ""
      ) {
        // api
        axios
          .get("http://127.0.0.1:8080/login/update", {
            params: {
              id: formInline.Id,
              name: formInline.Name,
              age: formInline.Age,
              keceng: formInline.Keceng,
            },
          })
          .then((res) => {
            // 成功消息提示
            ElMessage({
              message: res.data.message,
              type: "success",
            });
            // 跳转页面
            router.push("/border");
          })
          .catch((err) => {
            // 错误消息提示
            ElMessage.error(err.data.err);
          });
      } else {
        // 判断空消息提示
        ElMessage({
          message: "姓名或者年龄或者课程不能为空",
          type: "warning",
        });
      }
    };
    return {
      formInline,
      Update
    };
  },
};
</script>
<style lang="less" scoped>
#add {
  // width: 70%;
  display: flex;
  margin: 20px auto;
  justify-content: center;
  .add1 {
    flex: 1;
  }
}
.box1{
    width: 70%;
    height: 300px;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #ccc;
    text-align: center;
    line-height: 300px;
    margin: 20px auto;
}
</style>

页面展示

查询

修改

删除

有更好的方法可以在评论区留言代码，我看看哈!!!