node.js+express写后台接口，vue-cli前端调用实现增删查

在上一篇笔记中，我们已经实现了前端通过服务器读取数据库中的数据。
现在我们尝试在前端通过交换操作对数据库中的数据进行修改。

首先写接口

以下为服务器代码

本次，我们实现对数据库中students表的增加删除和查看功能。
首先写一个类，将我们执行查看、增加、删除数据表中信息的函数写在类里。
因为删除和增加信息之后的返回值并非是students表的全部信息，为了让信息整体显示在前端页面并且实时更新，我们需要在 getHnfDelete() 和 getHnfAdd() 的回调函数的else中加入对整表的查询，并且返回表的全部信息。
mysqlConnection.js文件

var mysql = require('mysql');//调用MySQL模块
//创建一个connection

class Database
{
    //js的构造器
    constructor(){
        this.connection = mysql.createConnection({
            host: '10.207.125.34', //主机
            user: 'root',     //数据库用户名
            password: 'Xiaomaque123',     //数据库密码
            port: '3306',       
            database: 'student', //数据库名称
            // charset: 'UTF8_GENERAL_CI' //数据库编码
        });
        this.connection.connect((err) => {
            if (err) { console.log("连接失败") }
            else { console.log("连接成功") }
        })
    }
    
    

    //读取表中数据
    getHnf(res){
        var resultData = {};
        this.connection.query("select * from students",
            function(err,result){
                if(err){
                    console.log(err);
                }
                else
                {
                    resultData=result;
                    res.send({result:resultData});
                }
            }
        )
    }
    //删除表中某条数据
    getHnfDelete(res){
        var resultData = {};
        var that = this;
        this.connection.query("delete from students where Id_P=1",
            function(err,result){
                if(err){
                    console.log("no such item");
                    res.send(err)
                }
                else
                {
                    //这时不可再用this.connection，因为此时的this是function函数。
                    var result=that.connection.query("select * from students",
                        function(err,result){
                            if(err){
                                console.log('something wrong')
                            }
                            else
                            {
                                resultData=result;
                                res.send({result:resultData});
                            }
                            
                        }
                    )
                }
            }
        )
    }
    //向表中增加数据
    getHnfAdd(res){
        var resultData = {};
        var that = this;
        this.connection.query("insert into students(Address,City,FirstName,Id_P,LastName) values('aaa','Chengdu','Yi','1','Li')",
            function(err,result){
                if(err){
                    console.log("no such item");
                    res.send(err)
                }
                else
                {
                    //这时不可再用this.connection，因为此时的this是function函数。
                    var result=that.connection.query("select * from students",
                        function(err,result){
                            if(err){
                                console.log('something wrong')
                            }
                            else
                            {
                                resultData=result;
                                res.send({result:resultData});
                            }
                            
                        }
                    )
                }
            }
        )
    }


}   
// 把databasse导出 
module.exports = Database;

读取表中信息的hnf.js我们在上一篇笔记中已经记录过了。现在我们新建apiAdd.js，和apiDelete.js。
apiAdd.js文件

var express = require('express');
var router = express.Router();
var Database = require('./mysqlConnection')

// nodeJs接口
router.get('/', function(req, res, next){
    console.log("insert information to students")
    new Database().getHnfAdd(res);
});

module.exports = router;

apiDelete.js文件

var express = require('express');
var router = express.Router();
var Database = require('./mysqlConnection')

// nodeJs接口
router.get('/', function(req, res, next){
    console.log("delete information from students")
    new Database().getHnfDelete(res);
});

module.exports = router;

在app.js中对接口进行配置

var apiDelete = require('./routes/apiDelete');
var apiAdd = require('./routes/apiAdd');

app.use('/apiAdd',apiAdd)
app.use('/apiDelete',apiDelete)

以下为前端代码

页面显示的数据绑定了result list，在每次调用函数改变数据库中数据时，用 this.result = result.data.result 来实时更新页面数据显示。

<template>
  <div>
    <!-- <input id="file" type="file" accept="image/*" capture="camera" /> -->
    <div>
      <router-link to="/">
        <button>返回首页</button>
      </router-link>
    </div>
    <div v-for="item of result" :key="item.Id_P">
      <div class="button">{{item}}</div>
    </div>
    <div>
      <button @click="deleteTableInfo">删除数据</button>
    </div>
    <div>
      <button @click="insertTableInfo">添加数据</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Story",
  data() {
    return {
      result: []
    };
  },
  methods: {
    getTableInfo() {
      axios.get("http://10.207.125.34:3000/hnf").then(result => {
        // console.log("get the table");
        // console.log( '***result.data.result')
        // console.log(typeof result.data.result)
        // console.log( result.data.result)
        // console.log( '***result.data')
        // console.log(typeof result.data)
        // console.log( result.data)
        // console.log( '***result')
        // console.log(typeof result)
        // console.log( result)
        this.result = result.data.result;
      });
    },
    insertTableInfo() {
      axios.get("http://10.207.125.34:3000/apiAdd").then(result => {
        console.log("Insert information to students");
        this.result = result.data.result;
      });
    },
    deleteTableInfo() {
      axios.get("http://10.207.125.34:3000/apiDelete").then(result => {
        console.log("Delete information to students");
        this.result = result.data.result;
      });
    }
  },
  mounted() {
    this.getTableInfo();
  },
  // updated (result){
  //   console.log("new new new")
  // }
};
</script>

<style scoped="">
</style>

front

继续完善

前端向服务器传值，删除服务器中指定数据或者增加数据行。

front.png

前端代码

<template>
  <div>
    <!-- <input id="file" type="file" accept="image/*" capture="camera" /> -->
    <div>
      <router-link to="/">
        <button>返回首页</button>
      </router-link>
    </div>
    <div v-for="item of result" :key="item.Id_P">
      <div class="button">{{item}}</div>
    </div>
    <div>
      <input v-model="keyword" type="text" placeholder="输入要删除信息的Id_P" />
      <button @click="deleteTableInfo">删除数据</button>
    </div>
    <div class="inputStyle">
      <div>
        <input v-model="id" type="text" placeholder="ID" />
      </div>
      <div>
        <input v-model="lastName" type="text" placeholder="姓" />
      </div>
      <div>
        <input v-model="firstName" type="text" placeholder="名" />
      </div>
      <div>
        <input v-model="address" type="text" placeholder="地址" />
      </div>
      <div>
        <input v-model="city" type="text" placeholder="城市" />
      </div>
      <div>
        <button @click="insertTableInfo">添加数据</button>
      </div>
    </div>
    
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Story",
  data() {
    return {
      result: [],
      keyword: "",
      id: "",
      lastName: "",
      firstName: "",
      address: "",
      city: ""
    };
  },
  methods: {
    getTableInfo() {
      axios.get("http://10.207.125.34:3000/hnf").then(result => {
        this.result = result.data.result;
      });
    },
    insertTableInfo() {
      axios
        .get("http://10.207.125.34:3000/apiAdd", {
          params: {
            id: this.id,
            lastName: this.lastName,
            firstName: this.firstName,
            address: this.address,
            city: this.city
          }
        })
        .then(result => {
          console.log("Insert information to students");
          this.result = result.data.result;
        });
    },
    deleteTableInfo() {
      axios
        .get("http://10.207.125.34:3000/apiDelete", {
          //axios传参数的方法
          params: {
            id: this.keyword
          }
        })
        .then(result => {
          console.log("Delete information from students");
          this.result = result.data.result;
          console.log(this.keyword);
        });
      this.keyword = "";
    }
  },
  mounted() {
    this.getTableInfo();
  }
  // updated (result){
  //   console.log("new new new")
  // }
};
</script>

<style scoped="">
.inputStyle {
  /* width: 2rem; 宽度 */
  /*以下两行使得输入框的字体左右两边不是完全顶着边的*/
  box-sizing: border-box;
  padding: 0 0.1rem;
  width: 100%;
  height: 0.62rem;
  line-height: 0.62rem;
  text-align: center;
  border-radius: 0.06rem;
  color: #666;
}
</style>

服务器代码

var mysql = require('mysql');//调用MySQL模块
//创建一个connection

class Database
{
    //js的构造器
    constructor(){
        this.connection = mysql.createConnection({
            host: '10.207.125.34', //主机
            user: 'root',     //数据库用户名
            password: 'Xiaomaque123',     //数据库密码
            port: '3306',       
            database: 'student', //数据库名称
            // charset: 'UTF8_GENERAL_CI' //数据库编码
        });
        this.connection.connect((err) => {
            if (err) { console.log("连接失败") }
            else { console.log("连接成功") }
        })
    }
    
    

    //读取表中数据
    getHnf(res){
        var resultData = {};
        this.connection.query("select * from students",
            function(err,result){
                if(err){
                    console.log(err);
                }
                else
                {
                    resultData=result;
                    res.send({result:resultData});
                }
            }
        )
    }
    //删除表中某条数据
    getHnfDelete(id,res){
        var resultData = {};
        var that = this;
        // var request = req;
        console.log(id)
        this.connection.query('delete from students where Id_P='+id,
            function(err,result){
                if(err){
                    console.log("no such item");
                    res.send(err)
                }
                else
                {
                    //这时不可再用this.connection，因为此时的this是function函数。
                    var result=that.connection.query("select * from students",
                        function(err,result){
                            if(err){
                                console.log('something wrong')
                            }
                            else
                            {
                                resultData=result;
                                res.send({result:resultData});
                            }
                            
                        }
                    )
                }
            }
        )
    }
    //向表中增加数据
    getHnfAdd(StudentInfo,res){
        var resultData = {};
        var that = this;
        var addStudentInfo = StudentInfo;
        // console.log("insert into students(Address,City,FirstName,Id_P,LastName) values("+addStudentInfo.address+','+addStudentInfo.city+','+addStudentInfo.firstName+','+addStudentInfo.id+','+addStudentInfo.lastName+')');
        // console.log(typeof addStudentInfo.address)
        //这种方式引入变量很容易出错，要十分注意双引号和单引号的使用。
        this.connection.query("insert into students(Address,City,FirstName,Id_P,LastName) values('"+addStudentInfo.address+"','"+addStudentInfo.city+"','"+addStudentInfo.firstName+"','"+addStudentInfo.id+"','"+addStudentInfo.lastName+"')",
        // this.connection.query("insert into students(Address,City,FirstName,Id_P,LastName) values('aaa','Chengdu','Yi','1','Li')",
        
            function(err,result){
                if(err){
                    console.log("insert failed");
                    res.send(err)
                }
                else
                {
                    //这时不可再用this.connection，因为此时的this是function函数。
                    var result=that.connection.query("select * from students",
                        function(err,result){
                            if(err){
                                console.log('something wrong')
                            }
                            else
                            {
                                resultData=result;
                                res.send({result:resultData});
                            }
                            
                        }
                    )
                }
            }
        )
    }


}   
// 把databasse导出 
module.exports = Database;

数据库端注意事项

重启电脑后Mysql服务会被关闭，需要打开服务，进行开启。

服务.png
按照数据类型进行输入才能进行正确的插入操作

Database.png