Vue添加 小知识
作者：互联网
- EF数据迁移可以防止注入
- 在表多的时候用EF迁移比较繁琐，可以使用sql语句来写或者使用存储过程
一、dal层
/// <summary>
/// 用户管理-添加
/// </summary>
///
/// <param name="info"></param>
/// <returns></returns>
public int AddUserInfo(UserInfo info)
{
try
{
//db.UserInfos.Add(info);
//return db.SaveChanges();
//不防sql注入
//return db.Database.ExecuteSqlCommand($"insert into UserInfo values('{info.Uname}','{info.Upwd}','{info.Udell}','{info.Usex}','{info.Ueim}','{info.Utim}')");
//防止sql注入
SqlParameter[] sqls =
{
new SqlParameter("@Uname",info.Uname),
new SqlParameter("@Upwd",info.Upwd),
new SqlParameter("@Udell",info.Udell),
new SqlParameter("@Usex",info.Usex),
new SqlParameter("@Ueim",info.Ueim),
new SqlParameter("@Utim",info.Utim)
};
return db.Database.ExecuteSqlCommand("insert into UserInfo values(@Uname,@Upwd,@Udell,@Usex,@Ueim,@Utim)",sqls);
}
catch (Exception)
{
throw;
}
}
二、bll层
/// <summary>
/// 用户管理-添加
/// </summary>
/// <param name="info"></param>
/// <returns></returns>
public int AddUserInfo(UserInfo info)
{
return dal.AddUserInfo(info);
}
三、控制器
/// <summary>
/// 用户管理-添加
/// </summary>
/// <param name="info"></param>
/// <returns></returns>
[HttpPost]
public ActionResult AddUserInfo(UserInfo info)
{
ResponseModel responseModel = new ResponseModel();
var result = commerceBll.AddUserInfo(info);
if(result>0)
{
responseModel.Code = (int)ResponseType.Success;
responseModel.Data = "";
responseModel.Msg = ResponseText.Success;
}
else
{
responseModel.Code = (int)ResponseType.Fail;
responseModel.Data = "";
responseModel.Msg = ResponseText.Fail;
}
return Json(responseModel,JsonRequestBehavior.DenyGet);
}
四、视图
@{
ViewBag.Title = "Index";
Layout = null;
}
<h2></h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电商后台管理系统</title>
<!---代码中实际部分可以抽取出来 Start--------->
<link href="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="/Content/bootstrap/jquery-1.10.2.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.js"></script>
<script src="/Content/bootstrap/js/moment-with-locales.js"></script>
<script src="/Content/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="/Scripts/vue.js"></script>
<script src="/Scripts/axios.js"></script>
@*<script type="text/javascript">
$(function () {
$("#ModifyTime").datetimepicker({
format: 'yyyy-mm-dd hh:00:00', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
})
});
</script>*@
<!----代码中实际部分可以抽取出来 End----------->
</head>
<body class="container-fruit">
<div id="app">
<!---上下文检索项 Start-->
<div class="row-fruit">
<div class="form-inline pull-left">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#AddUser">
<span class="glyphicon glyphicon-plus">新增</span>
</button>
<select class="form-control">
<option value="1">True</option>
<option value="2">False</option>
</select>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">批量逻辑删除</span>
</button>
</div>
<div class="form-inline pull-right">
<input type="text" class="form-control pull-left" id="name" placeholder="请输入用户名" v-model="uname">
<button type="button" class="btn btn-default pull-left" v-on:click="show">
<span class="glyphicon glyphicon-search" >检索</span>
</button>
</div>
</div>
<!---上下文检索项 End-->
<!----表格开始 Start-->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>用户名</th>
<th>是否逻辑删除</th>
<th>性别</th>
<th>邮箱</th>
<th>修改时间</th>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" /></td>
<td>{{item.Uname}}</td>
<td><span class="glyphicon glyphicon-remove"></span></td>
<td>{{item.Usex?"女":"男"}}</td>
<td>{{item.Ueim}}</td>
<td>{{item.Utim}}</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">编辑</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove">删除</span>
</button>
</td>
</tr>
@*<tr>
<td><input type="checkbox" /></td>
<td>郭靖</td>
<td>
<span class="glyphicon glyphicon-ok"></span>
</td>
<td>男</td>
<td>GuoJing@163.com</td>
<td>2020-07-05</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">编辑</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove">删除</span>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>杨过</td>
<td><span class="glyphicon glyphicon-remove"></span></td>
<td>男</td>
<td>YangGuo@163.com</td>
<td>2020-07-05</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">编辑</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove">删除</span>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>小龙女</td>
<td><span class="glyphicon glyphicon-remove"></span></td>
<td>女</td>
<td>Beautifual@163.com</td>
<td>2020-07-05</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">编辑</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove">删除</span>
</button>
</td>
</tr>*@
</tbody>
</table>
<!----表格开始 End-->
<!----分页 Start-->
<ul class="pagination" style="float:right;margin:0">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<!----分页 End-->
<!-----新增模态框 Start 实际开发中可以提取,可以不提取 Start-->
<div class="modal fade" id="AddUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加用户
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="UserName" class="col-sm-3 control-label">用户名:</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="userData.Uname" id="UserName" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="Password" class="col-sm-3 control-label">密码:</label>
<div class="col-sm-9">
<input type="password" class="form-control" v-model="userData.Upwd" id="Password" placeholder="请输入密码:">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label ">是否逻辑删除:</label>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="Is_Delete" v-model="userData.Udell" id="Is_Delete1" value="1" > 是
</label>
<label class="radio-inline">
<input type="radio" name="Is_Delete" v-model="userData.Udell" id="Is_Delete2" value="2"> 否
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label ">性别:</label>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="Gender" v-model="userData.Usex" id="Gender1" value="1" >女
</label>
<label class="radio-inline">
<input type="radio" name="Gender" v-model="userData.Usex" id="Gender2" value="2"> 男
</label>
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">邮箱:</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="userData.Ueim" id="Email" placeholder="请输入邮箱">
</div>
</div>
<!---时间控件样式可以调整 Start 可以换成 97DatePicker Start 有兼容性问题-->
<div class="form-group">
<label for="ModifyTime" class="col-sm-3 control-label">编辑时间:</label>
<!--指定 date标记-->
<div class="col-sm-9">
<input type="date" class="form-control" v-model="userData.Utim" id="ModifyTime">
</div>
</div>
<!---时间控件样式可以调整 Start 可以换成 97DatePicker End 有兼容性问题-->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary" v-on:click="handleSubmit">
添加
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
<!----------------新增模态框 End 实际开发中可以提取，可以不提取 End-->
</body>
</html>
<script>
let app = new Vue({
el: "#app",
data() {
return {
//表单对象
userData: {
Uname: "",
Upwd: "",
Udell: "1",
Usex: "0",
Ueim: "",
Utim: ""
},
list: [],
totalcount: 0,
totalpage: 0,
pageindex: 1,
pagesize: 10,
uname:''
}
},
methods: {
handleSubmit() {
axios.post('/Commerce/AddUserInfo', this.userData).then(res => {
if (res.data.Code == 1) {
alert(res.data.Msg);
location.reload();
}
else {
alert(res.data.Msg)
}
})
},
show() {
axios.get('/Commerce/PageUserInfo', {
paroms: {
uname: this.uname,
pageindex: this.pageindex,
pagesize: this.pagesize
}
}).then(res => {
this.list = res.data.pagedata;
this.totalcount = res.data.totalcount;
this.totalpage = res.data.totalpage;
})
}
},
created: function () {
this.show();
}
})
</script>
标签：info,Vue,res,知识,添加,responseModel,new,data,SqlParameter 来源： https://www.cnblogs.com/li0536/p/15158777.html