VUE综合数据库编程

VUE综合数据库编程

1.实验要求：

基于node express+vue cli+elementUI+mysql，在如图8.14所示的功能的基础上增加一个输入框用于输入商品的id，增加一个“删除”按钮，完成根据id删除商品的功能（删除后的结果通过查看数据表goods的最新数据来验证）。

2.参考代码

第一步：将helloWord.vue中代码替换为：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form >
      <el-row :span="12" type="flex" justify="space-around" align="middle">
​
        <el-col > <el-input v-model="name" placeholder="名称" style="width:200px"></el-input>
          <el-input v-model="price" placeholder="价格" style="width:200px"></el-input>
          <el-button type="primary" @click="addGood">提交</el-button></el-col>
      </el-row>
         <el-row type="flex" justify="space-around" align="middle">
           <el-col :span="12"> <el-input v-model="id" placeholder="序号" style="width:200px"></el-input>
      <el-button type="danger" @click="delGood">删除</el-button></el-col>
         </el-row>
        
    </form>
  </div>
</template>
<script>
export default {
  name: ' HelloWorld ',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: '',
      price: '',
      id:''
    }
  },
  methods: {
// 添加商品信息
    addGood() {
      var name = this.name;
      var price = this.price;
      //通过http post方式访问后端服务器。http post方式用于上传数据到服务器。
      //http.post的第一个参数为请求地址，第二个参数为携带的参数，第三参数可以为空，但不能省略。
      this.$http.post('/api/good/addGood', {
        name: name,
        price: price
      }, {}).then((response) => {
        console.log(response);
      })
    },
    // 删除商品的信息
    delGood() {
      var id = this.id;
      //通过http post方式访问后端服务器。http post方式用于上传数据到服务器。
      //http.post的第一个参数为请求地址，第二个参数为携带的参数，第三参数可以为空，但不能省略。
      this.$http.post('/api/good/delGood', {
        id:id
      }, {}).then((response) => {
        console.log(response);
      })
    }
  }
}
</script>

​

第二步：修改node中的代码。

• sqlMap中增加： del: 'delete from goods where id=?'

• api中增加一个删除的方法

  // 增加一个根据id删除商品信息的
  router.post('/delGood', (req, res) => {
      var sql = $sql.good.del;
      var params2 = req.body;
      conn.query(sql, [params2.id], function (err, result) {
          if (err) {
              console.log(err);
          }
          if (result) {
              console.log("result:");
              console.log(result);
              jsonWrite(res, result);
          }
      })
  });
  ​
  

第三步：效果图如下