Vue添加 小知识

  1. EF数据迁移可以防止注入
  2. 在表多的时候用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="#">&laquo;</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="#">&raquo;</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">
                            &times;
                        </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>

 

上一篇:实现带条件查询


下一篇:ASP.NET使用参数化查询