对数据进行一些基本操作(四)

接收post请求(vue+axios)解决跨域问题(三)

效果预览

最终效果预览

node路由配置增删改查
//查询语句
var selAll='select * from list';
//根据post的id查询
var selId='select * from list where id=?';
//插入数据
var addData='insert into list (u_name,u_phone) values (?,?)';
//删除数据
var delData='delete from list where id=?';
//更新数据
var upData='update list set u_name=?,u_phone=? where id=?'
//更新数据
router.post('/edit',function(req,res,next){
    var params=req.body;
    console.log(params)
    pool.getConnection(function(err,suc){
        suc.query(upData,[params.name,params.phone,params.id],function(err,result){
            console.log(err)
            console.log(result)
            if(result){
                result={
                    code:200,
                    msg:'更新数据成功'
                }
            }
            res.json(result);
            suc.release()
        })
    })
})
//删除数据
router.post('/del',function(req,res,next){
    var params=req.body;
    console.log(params)
    pool.getConnection(function(err,suc){
        suc.query(delData,[params.id],function(err,result){
            if(result){
                result={
                    code:200,
                    msg:'删除数据成功'
                }
            }
            res.json(result);
            suc.release()
        })
    })
})
//插入数据
router.post('/add', function(req, res, next) {
    var params=req.body;
    console.log(params)
    pool.getConnection(function(err,suc){
        suc.query(addData,[params.name,params.phone],function(err,result){
            if(result){ //数据库有返回数据
                result={    //返回数据与格式
                    code:200,
                    msg:'新增数据成功'
                }
            }
            res.json(result);   //响应返回json数据
            suc.release();  //关闭数据库连接
        })
    })
});

router.get('/list', function(req, res, next) {
    pool.getConnection(function(err,suc){
        suc.query(selAll,[],function(err,result){
            if(result){ //数据库有返回数据
                result={    //返回数据与格式
                    code:200,
                    msg:'获取测试列表成功',
                    data:result
                }
            }
            res.json(result);   //响应返回json数据
            suc.release();  //关闭数据库连接
        })
    })
});

//响应post
router.post('/list', function(req, res, next) {
    var id=req.body.id; //通过req的body拿到post的id
    pool.getConnection(function(err,suc){
        suc.query(selId,[id],function(err,result){
            if(result){ //数据库有返回数据
                result={    //返回数据与格式
                    code:200,
                    msg:'获取单个测试列表成功',
                    data:result
                }
            }
            res.json(result);   //响应返回json数据
            suc.release();  //关闭数据库连接
        })
    })
});
Vue代码更新

html

<template>
  <div class="hello">
    <ul>
      <li>
        <el-input placeholder="请输入姓名" v-model="name">
          <template slot="prepend">姓名:</template>
        </el-input>
      </li>
      <li>
        <el-input placeholder="请输入电话" v-model="phone">
          <template slot="prepend">电话:</template>
        </el-input>
      </li>
      <li>
        <el-button type="primary" plain @click="add">添加</el-button>
      </li>
    </ul>
    <el-table class="user_table"
      :data="userList"
      border>
      <el-table-column
        fixed
        prop="Id"
        label="用户ID">
      </el-table-column>
      <el-table-column
        prop="u_name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="u_phone"
        label="电话">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="edit(scope)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible">
      <div class="update">
        <el-input placeholder="请输入姓名" v-model="edit_name">
          <template slot="prepend">姓名:</template>
        </el-input>
        <el-input placeholder="请输入电话" v-model="edit_phone">
          <template slot="prepend">电话:</template>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editY()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

script

import axios from 'axios';
export default {
  name: 'HelloWorld',
  data () {
    return {
      // msg: 'Welcome to Your Vue.js App'
      name:'',
      phone:'',
      userList:[],
      dialogVisible:false,
      edit_name:'',
      edit_phone:'',
      edit_id:''
    }
  },
  mounted(){
    this.get()
  },
  methods:{
    editY(){
      var this_=this;
      axios.post('/users/edit',{
        id:this.edit_id,
        name:this.edit_name,
        phone:this.edit_phone
      }).then(function(res){
        console.log(res)
        this_.dialogVisible=false;
        this_.get()
      }).catch(function(err){
        console.log(err)
      })
    },
    edit(row){
      var this_=this,index=row.$index;
      this_.dialogVisible=true;
      var p_id=this_.userList[index].Id,
          p_name=this_.userList[index].u_name,
          p_phone=this_.userList[index].u_phone;
      this_.edit_id=p_id;
      this_.edit_name=p_name;
      this_.edit_phone=p_phone;
    },
    get(){
      var this_=this;
      axios.get('/users/list').then(function(res){
        this_.userList=res.data.data

      }).catch(function(err){
        console.log(err)
      })
    },
    add(){
      var this_=this;
      // var name=,phone=;
      axios.post('/users/add',{
        name:this.name,
        phone:this.phone
      }).then(function(res){
        console.log(res)
        this_.get()
      }).catch(function(err){
        console.log(err)
      })
    },
    del(row){
      var this_=this;
      axios.post('/users/del',{
        id:row.Id
      }).then(function(res){
        this_.get()
      }).catch(function(err){
        console.log(err)
      })
    }
  }
}

完整代码 ↓ ↓ ↓ ↓ github地址:https://github.com/jgsrty/jianshu_node 码云地址:https://gitee.com/RtyXmd/jianshu_node 测试代码写完了,接下来会重新部署一个,对node和vue代码进行优化与整理,下一步增加聊天室、完善登陆与注册(session,加密等)、评论、上传文件图片、爬虫爬取资源。。。 规划整理前后端代码(五)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据库

SQLite 使用方法详解

提供了对 SQLite 数据库的完全支持。应用中的任何类(不包括应用外部的类)均可按名称访问您所创建的任何数据库。如果想让自己创建的数据库供外部应用使用,请使用...

24660
来自专栏禹都一只猫博客

mysql数据库主从复制教程

21650
来自专栏Danny的专栏

SQL Server 2008 附加数据库时出错

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

3K30
来自专栏C/C++基础

MySQL设置远程访问

在MySQL Server端,执行mysql 命令进入mysql 命令模式。使用grant命令用来建立新用户,指定用户口令并增加用户权限。命令格式如下:

20410
来自专栏醉梦轩

Ubuntu 16.04 部署MySQL服务

MySQL是一款开源的关系型数据库管理系统,大量公司都在使用它,或是在它的基础上做二次开发。有时,我们会需要在Linux系统上部署MySQL服务用于测试。

11710
来自专栏逸鹏说道

SQL SERVER几种数据迁移/导出导入的实践

SQLServer提供了多种数据导出导入的工具和方法,在此,分享我实践的经验(只涉及数据库与Excel、数据库与文本文件、数据库与数据库之间的导出导入)。 (一...

78890
来自专栏林欣哲

MySQL数据库备份和恢复

29920
来自专栏文渊之博

数据库副本的自动种子设定(自增长)

背景 在 SQL Server 2012 和 2014 中,初始化 SQL Server Always On 可用性组中的次要副本的唯一方法是使用备份、复制和还...

299110
来自专栏日常分享

Oracle常用数据库系统表单以及SQL的整理

  因为最近涉及到了一些数据库的归档,备份等工作,所以一部分的重心放在了数据库上,毕竟之前对数据库的了解也只停留在了一般的建表,查询,最多最多再写一写触发器之类...

16410
来自专栏乐沙弥的世界

myloader恢复mysql数据库示例

    mydumper是针对mysql数据库备份的一个轻量级第三方的开源工具,备份方式为逻辑备份。它支持多线程,备份速度远高于原生态的mysqldump以及众...

14820

扫码关注云+社区

领取腾讯云代金券