Vue类型 API+Vs Code 的分页+查询+单删+批量删除

Vue类型 API+Vs Code 的分页+查询+单删+批量删除

一、 后台操作

1.DAL层的代码 显示分页、删除、批量删除

      public List<DtoUser> ShowPage(string uname,out int totalcount,int pageindex=1,int pagesize=2)
        {
            var query = db.Users.AsQueryable();
            if (!string.IsNullOrWhiteSpace(uname))
            {
                query = query.Where(u => u.UserName.Contains(uname));
            }
            totalcount = query.Count();  //总条数
​
            query = query.OrderBy(u => u.Uid).Skip((pageindex - 1) * pagesize).Take(pagesize);
            var list = from a in query
                       select new DtoUser
                       {
                           Uid = a.Uid,
                           UserName = a.UserName,
                           PassWord = a.PassWord,
                           HeadIocUrl = "http://localhost:54080/Images/" + a.HeadIocUrl
​
                       };
​
            return list.ToList();
            //return query.OrderBy(u => u.Uid).Skip((pageindex - 1) * pagesize).Take(pagesize).Select(u => new DtoUser
            //{
            //    Uid = u.Uid,
            //    UserName = u.UserName,
            //    PassWord = u.PassWord,
            //    HeadIocUrl = "http://localhost:54080/" + u.HeadIocUrl
            //}).ToList();
        }
        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public int Delete(int id)
        {
            var item =  db.Users.FirstOrDefault(u=>u.Uid==id);
            if (item!=null)
            {
                db.Users.Remove(item);
                return db.SaveChanges();
            }
            return 0;
        }
        /// <summary>
        /// 批量删除
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        public int DelAll(string ids)
        {
            var item = db.Users.Where(u => ids.Contains(u.Uid.ToString())).ToList();
            db.Users.RemoveRange(item);
            return db.SaveChanges();
        }

 

2.控制器的代码

 [HttpGet,Route("api/page")]
        public IHttpActionResult ShowPage(string uname, int pageindex = 1, int pagesize = 2)
        {
            int totalcount = 0;
            var list = userDal.ShowPage(uname, out totalcount, pageindex, pagesize);
            return Json(new {totalcount,list });
        }
        [HttpGet,Route("api/del")]
        public IHttpActionResult Delete(int id)
        {
            return Json(userDal.Delete(id));
        }
        [HttpGet,Route("api/delall")]
        public IHttpActionResult DelAll(string ids)
        {
            return Json(userDal.DelAll(ids));
        }

 

二、Vue --Vs Code 前台操作

1、分页显示查询

<template>
  <div class="bg">
    <el-row>
      <el-col :span="4">
        <el-input v-model="uname"
                  placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="20"
              style="padding-left:10px">
        <el-button type="success"
                   @click="loadData">搜索</el-button>
                   <el-button type="warning"
                   @click="handleDelAll">批量删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                   <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column width="180"
                           label="头像">
                           <template slot-scope="scope">
                               <img :src="scope.row.HeadIocUrl" width="100" height="100" alt="">
                           </template>
          </el-table-column>
          <el-table-column prop="UserName"
                           label="用户名"
                           width="180">
          </el-table-column>
          <el-table-column prop="PassWord"
                           label="密码"
                           width="180">
          </el-table-column>
          
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageindex"
                       :page-sizes="[1, 2, 5, 10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalcount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
​
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      uname: '', //查询用户名
      pageindex: 1, //页码
      pagesize: 2, //页容量
      totalcount: 0, //总条数
      tableData: [], //数据
      ids:[], //存放的是选中的数据
    }
  },
  components: {},
  methods: {
    loadData() {
      this.$axios
        .get('http://localhost:54080/api/page', {
          params: {
            //?uname=&pageindex=1&pagesize=2
            uname: this.uname,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.list
          this.totalcount = res.data.totalcount
        })
    },
    //当页容量发生变化时 触发
    handleSizeChange(val) {
      this.pagesize = val
      this.loadData()
      //console.log(`每页 ${val} 条`);
    },
    //当页码发生变时触发
    handleCurrentChange(val) {
      this.pageindex = val
      this.loadData()
      //console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //删除操作 连接API
          this.$axios
            .get(`http://localhost:54080/api/del?id=${row.Uid}`)  
            //.get('http://localhost:54080/api/del?id=' + row.Uid)
            .then((res) => {
              if (res.data > 0) {
                this.loadData()
              } else {
                this.$message.error('删除失败')
              }
            })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
​
      console.log(index, row)
    },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        for (let index = 0; index < val.length; index++) {
            this.ids.push(val[index].Uid);
        }
      },
      handleDelAll(){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //删除操作 连接API
          this.$axios
            .get(`http://localhost:54080/api/delall?ids=${this.ids.toString()}`)  
            //.get('http://localhost:54080/api/del?id=' + row.Uid)
            .then((res) => {
              if (res.data > 0) {
                  this.$message({
            type: 'success',
            message: '删除成功!',
          })
                this.loadData()
              } else {
                this.$message.error('删除失败')
              }
            })
          
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      }
  },
  created() {
    this.loadData()
  },
}
</script>
​
<style scoped>
.bg {
  
  padding: 10px;
}
</style>