VS Code+Api+Element的分页显示查询，删除

一、API后台操作

•     跨域

     两个引用

using System.Web.Http;
using System.Web.Http.Cors;

     配置方式

//全局跨域
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

•    API代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using DengLuLiangx.Dal;
using DengLuLiangx.Models;

namespace DengLuLiangx.Controllers
{
    public class UserController : ApiController
    {
        LoginDal loginDal = new LoginDal();
        //注册
        [HttpPost]
        public IHttpActionResult PostRegister(LoginModel login)
        {
            return Json(loginDal.PostRegister(login));
            
        }
        //登录
        [HttpPost]
        public IHttpActionResult  PostUser(string name, string pwd)
        {
            var list= loginDal.PostUser(name,pwd);
            if (list != null)
            {
                return Json( new { code = 1, msg = "登陆成功", data = "" });
            }
            else
            {
                return Json( new { code = 0, msg = "登陆失败", data = "" });
            }
        }

        //查询 分页
        [HttpGet,Route("api/page")]
        public IHttpActionResult  Show(string name,int pageindex = 1, int pagesize = 2)
        {
            int totalcount = 0;
            var list = loginDal.Show(name, out totalcount, pageindex, pagesize);
            return Json(new { totalcount,list });
        }

        //删除
        [HttpGet,Route("api/Delete")]
        public IHttpActionResult Delete(int id)
        {
            return Json(loginDal.Delete(id));
        }

        //批量删除
        [HttpGet,Route("api/DeAll")]
        public IHttpActionResult  DeAll(string ids)
        {
            return Json(loginDal.DeAll(ids));
        }
    }
}

二、Vs Code 前台操作

•   登录操作

<template>
  <table>
    <tr>
      <td>账号</td>
      <td><input type="text" value="" v-model="Use.sname" /></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="text" value="" v-model="Use.pwd" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <button @click="login">登录</button>
        <button @click="register">注册</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      Use: {
        sname: "",
        pwd: "",
      },
    };
  },
  methods: {
    login() {
      if (this.Use.name == "") {
        alert("账号不能为空");
        return;
      }
      if (this.Use.pwd == "") {
        alert("密码不能为空");
        return;
      }
      this.$axios
        .post(
          "http://localhost:58518/api/User?name=" +
            this.Use.sname +
            "&pwd=" +
            this.Use.pwd +
            ""
        )
        .then((res) => {
          if (res.data.code == 1) {
            this.$router.push("/index/main");
          } else {
            alert(res.data.msg);
          }
        });
    },
    register() {
      if (this.Use.name == "") {
        alert("账号不能为空");
        return;
      }
      if (this.Use.pwd == "") {
        alert("密码不能为空");
        return;
      }
      this.$axios.post("http://localhost:58518/api/User",this.Use).then((res) => {
        if (res.data > 0) {
          alert("注册成功");
        } else {
          alert("注册失败");
        }
      });
    },
  },
  created() {},
};
</script>

<style>
</style>

• 分页显示查询

<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-input v-model="name" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="4" style="padding-left: 10px">
        <el-button type="success" @click="getShow">搜索</el-button>
        <el-button @click="handDelAdd">批量删除</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="show"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="Id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="SName" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="Pwd" label="密码"> </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-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: [],
      name: "",
      pageindex: 1,
      pagesize: 2,
      totalcount: "",
      ids: [],
    };
  },
  methods: {
    //显示
    getShow() {
      this.$axios
        .get(
          "http://localhost:58518/api/page?name=" +
            this.name +
            "&pageindex=" +
            this.pageindex +
            "&pagesize=" +
            this.pagesize +
            ""
        )
        .then((res) => {
          this.show = res.data.list;
          this.totalcount = res.data.totalcount;
        });
    },
    //分页 当前显示页数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getShow();
    },
    //分页 当前页码
    handleCurrentChange(val) {
      this.pageindex = val;
      this.getShow();
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //单删
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("http://localhost:58518/api/Delete?id=" + row.Id)
            .then((res) => {
              if (res.data > 0) {
                this.getShow();
              } else {
                this.$message.error("删除失败");
              }
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量选择字符串
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let index = 0; index < val.length; index++) {
        this.ids.push(val[index].Id);
      }
    },
    //批量删除
    handDelAdd() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("http://localhost:58518/api/DeAll?ids=" + this.ids.toString())
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getShow();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getShow();
  },
};
</script>

<style>
</style>