一、首先,先新建一个项目,选择空的WebApi项目
然后,我们在Models创建一个类,用EF在前端搭建一个表(我的这个表名是叫Staff)
public class Staff
{
[Key]
[Required]
public int Ids { get; set; }
public string Name { get; set; }
public string Pwd { get; set; }
public string NikeName { get; set; }
}
在创建一个类,用来连接数据库(我的是Staffcontext)
public class StaffContext : DbContext
{
public StaffContext() : base("StaffContext") { }
public DbSet<Staff> Staff { get; set; }
}
我们在web.config里面插入
<connectionStrings>
<add name="StaffContext" connectionString="Data Source=.;Initial Catalog=Staff;Persist Security Info=True;User ID=sa;Password=123;MultipleActiveResultSets=True;" providerName="System.Data.SqlClient" />
</connectionStrings>
插入后就可以用程序包管理控制台来创建数据库表格了
首先输入 : Enable-Migrations
运行完毕后输入 : Add-Migration 注: Name随便起名字
运行完毕后输入: Update-Database
这样就搭建完毕了
二、我们在Controllers文件夹里创建一个HomeControllers的控制器
注:App_Start中的WebApiConfig.cs中只留一句话
// Web API 路由
config.MapHttpAttributeRoutes();
然后我们就可以在这里面写逻辑了
[RoutePrefix("api/Home")] //定位到这个控制器
public class HomeController : ApiController
{
Staff[] Staff = new Staff[]
{
new Staff{Ids=1,Name="zhangsan",Pwd="123",NikeName="张三" },
new Staff{Ids=2,Name="lisi",Pwd="123",NikeName="李四"}
};
[Route("")]
public IEnumerable<Staff> getall() //查询全部数据
{
StaffContext se = new StaffContext();
IEnumerable<Staff> sf = se.Staff.AsEnumerable();
return sf;
}
[Route("{ids:int}")] //从前端接收一个int类型的ids进行查询
public IHttpActionResult get(int ids)
{
StaffContext se = new StaffContext();
var s = se.Staff.FirstOrDefault(r => r.Ids == ids);
if (s == null)
{
return NotFound();
}
else
{
return Ok(s);
}
}
[Route("~/api/{Name}/Staff")] //从前端接收一个Name进行查询删除
[HttpGet] //得到数据发送请求
public void delete(string name)
{
using (StaffContext se = new StaffContext())
{
Staff s = se.Staff.Where(r => r.Name == name).FirstOrDefault();
se.Staff.Remove(s);
se.SaveChanges();
}
}
[Route("{Names}/{Pwds}/{NikeNames}")] //从前端接收三个参数,添加到数据库表格内
[HttpGet] //得到数据发送请求
public void post(string Names, string Pwds, string NikeNames)
{
StaffContext se = new StaffContext();
Staff s = new Staff { Name = Names, Pwd = Pwds, NikeName = NikeNames };
se.Staff.Add(s);
se.SaveChanges();
}
[Route("~/api/{uname:string}/Staff/{unick}/{upwd}")] //从前端接收三个参数进行修改,第一个uname为查询参数,后两个为要修改的参数
[HttpGet] //得到数据发送请求
public void update(string unick, string uname, string upwd)
{
StaffContext se = new StaffContext();
Staff s = se.Staff.FirstOrDefault(r => r.Name == uname);
s.NikeName = unick;
s.Pwd = upwd;
se.SaveChanges();
}
}
三、在前端搭建,在随意一个地方添加个HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul id="ul"></ul>
<input type="text" id="txt" />
<input type="button" value="查找" id="find" />
<h1 id="h1"></h1>
<input type="text" id="txt2" />
<input type="button" value="删除" id="dele" /><br /><br />
用户名:<input type="text" id="Names" /><br />
密码:<input type="text" id="Pwds" /><br />
昵称:<input type="text" id="NikeNames" />
<input type="button" value="添加" id="insert" /><br /><br />
请输入您要修改的人的用户名:<input type="text" id="uname" /><br />
请输入您要修改的人的昵称:<input type="text" id="unick" /><br />
请输入您要修改的人的密码:<input type="text" id="upwd" />
<input type="button" id="update" value="修改" />
</body>
</html>
<script src="jquery1.11.1.min.js"></script>
<script>
load();
function load() {
$.getJSON("api/Home")
.done(function (data) {
$.each(data, function (key, item) {
$("#ul").append($("<li>", { text: item.Name + "-" + item.Pwd + "-" + item.NikeName }))
})
})
}
$("#find").click(function () {
$.getJSON("api/Home/" + $("#txt").val())
.done(function (data) {
$("#h1").html(data.Name + "--" + data.NikeName)
})
.fail(function (jqXHR, Status, err) {
$("#h1").html("Error" + err)
})
})
$("#dele").click(function () {
$.getJSON("api/" + $("#txt2").val() + "/Staff")
.done(function () {
alert("删除成功!")
window.location = location;
})
})
$("#insert").click(function () {
$.getJSON("api/Home/" + $("#Names").val() + "/" + $("#Pwds").val() + "/" + $("#NikeNames").val())
.done(function () {
alert("添加成功!")
window.location = location;
})
})
$("#update").click(function () {
$.getJSON("api/" + $("#uname").val() + "/Staff" + $("#unick").val() + "/" + $("#upwd").val())
.done(function () {
alert("修改成功!")
window.location = location;
})
})
</script>