Vue类型 API+Vs Code 的分页+查询+单删+批量删除
一、API后台操作
1、跨域
两个引用
using System.Web.Http; using System.Web.Http.Cors;
配置方式
//全局跨域 config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
2、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)); } } }
二、Vue --Vs Code 前台操作
1、登录操作
<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>
2、分页显示查询
<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>
待续......
