项目搭建
1.打开vs点击文件-新建项目
点击Visual c# 选择ASP.NET Web应用程序(.NET Framework)
点击MVC然后确定
2.连接数据库
右键点击添加-新建项
3.layui模块引入
首先在layui官网下载我们layui的源码 gitee官网下载地址 layui官网下载地址
将下载好的layui加入我们的项目中,一般放在conten文件下
在有要使用layui的页面引入layui.js以及layui的css文件
登录模块
逻辑流程
用户在登录界面输入用户名和密码跳转到对应的Controller的方法体中。
在方法体中接受用户提交过来的用户名密码。
用拿到的用户名和密码去数据库中匹配查找相应的对象,如果查找匹配到了说明用户名和密码都正确。
密码用户名正确我们就保存该用户session并跳转到相应的界面,如果错误那么就登录失败我们给用户返回相应页面并给予提示。
核心代码:
前端
@model OA.Models.Staff
@{
Layout = null;
}
<!DOCTYPE html>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<style type="text/css">
.div-position{
position:relative;
}
.i-position{
position:absolute;
left:0;
z-index:5;
margin:10px;
font-size:20px;
color:darkblue;
}
</style>
</head>
<body>
<form class="layui-form" action="~/Home/Login" method="post" style="margin:0 auto; width:400px;height:200px;margin-top:80px">
<div style="text-align:center " class=""><h1>OA管理系统</h1></div><br />
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline div-position" id="inputdiv">
<i class="layui-icon layui-icon-username i-position"></i>
<input id="yi" type="text" name="No" required lay-verify="required" placeholder="请输入标题" style="padding-left:30px; width:200px" autocomplete="off" class="layui-input ">
@Html.ValidationMessageFor(u => u.No)
</div>
</div>
<div class="layui-form-item" >
<label class="layui-form-label">密码</label>
<div class="layui-input-inline div-position" id="inputdiv">
<i class="layui-icon layui-icon-password i-position"></i>
<input type="password" id="yi" name="Password" required lay-verify="required" placeholder="请输入密码" style="padding-left:30px;width:200px" autocomplete="off" class="layui-input">
@Html.ValidationMessageFor(u=>u.Password)
</div>
</div>
<div style="width: 300px;text-align: right; height: 30px;">
<a href="#">忘记密码?</a>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
@Html.ValidationSummary(true)
</div>
</div>
</form>
</body>
</html>
后端代码
//登录页面
public ActionResult Login()
{
return View();
}
//登录
[HttpPost] // [HttpPost]//只允许post请求进来
public ActionResult Login(Staff u)
{
if (ModelState.IsValid && MvUser(u.Password, u.No))
{
return Content("<script>alert('登陆成功');window.location.href='Index'</script>");
}
ModelState.AddModelError("", "账号或密码错误");
return View();
}
private bool MvUser(string password, string No)
{
var u = (from p in db.Staff where p.Password == password && p.No == No select p).FirstOrDefault();
if (u == null)
{
return false;
}
else
{
Session["ST"] = u;
Session["Name"] = u.Name;
Session["No"] = u.No;
Session["Id"] = u.Id;
Session["staff"] = u;
FormsAuthentication.SetAuthCookie(No, false);
return true;
}
}
个人信息查询
用户登录成功后点击个人资料查询按钮,返回查询资料的弹框,并通过ViewBag查找当前用户登录对象,将当前用户的原始信息返回给弹框页面展示
后端代码
//查看个人信息
public ActionResult show()
{
var id = Session["Id"];
ViewBag.s = db.Staff.Find(id);
return View();
}
前端代码
<body>
<div style="width:350px;margin:0 auto">
<table border="1" cellspacing="0" >
<tr>
<td>主键:</td>
<td>@ViewBag.s.Id</td>
</tr>
<tr>
<td>员工编号:</td>
<td>@ViewBag.s.No</td>
</tr>
<tr>
<td>员工姓名</td>
<td>@ViewBag.s.Name</td>
</tr>
<tr>
<td>性别</td>
<td>@(ViewBag.s.Sex==true?'男':'女')</td>
</tr>
<tr>
<td>出生日期</td>
<td>@ViewBag.s.BirthDay</td>
</tr>
<tr>
<td>籍贯</td>
<td>@ViewBag.s.NativePlace</td>
</tr>
<tr>
<td>现在居住地址</td>
<td>@ViewBag.s.Address</td>
</tr>
<tr>
<td>系统登录密码</td>
<td>@ViewBag.s.Password</td>
</tr>
<tr>
<td>邮箱</td>
<td>@ViewBag.s.Email</td>
</tr>
<tr>
<td>联系电话</td>
<td>@ViewBag.s.Tel</td>
</tr>
<tr>
<td>工作状态</td>
<td>@ViewBag.s.Status</td>
</tr>
<tr>
<td>创建时间</td>
<td>@ViewBag.s.CreateTime</td>
</tr>
<tr>
<td>修改时间</td>
<td>@ViewBag.s.UpdateTime</td>
</tr>
<tr>
<td>职位ID</td>
<td>@ViewBag.s.JobId</td>
</tr>
<tr>
<td>所属机构ID</td>
<td>@ViewBag.s.OrgID</td>
</tr>
<tr>
<td>是否HSE管理人员组</td>
<td>@(ViewBag.s.IsHSEGroup==true?'是':'否')</td>
</tr>
</table>
</div>
</body>
弹框代码
//个人信息查询
function show() {
layer.open({
type: 2,
content: "/Home/show",
area: ['460px', '330px'],
title: "个人信息"
});
layer.close();
}
修改密码
在弹出的模态框中要有当前用户的个人信息,修改后将数据提交到后端
后端接收修改后的信息,并根据id查找到要修改的对象,将查找的对象字段用接收到的信息进行赋值修改
后端代码
//修改
public ActionResult UpdatePwds()
{
return View();
}
public ActionResult UpdatePwd(string oldPwd, string newPwd)
{
var result = "";
var Id = Session["Id"];
Staff staff = db.Staff.Find(Id);
if (oldPwd != staff.Password)
{
result = "你输入都原始密码错误";
}
else
{
staff.Password = newPwd;
int changes = db.SaveChanges();
if (changes > 0)
{
result = "密码修改成功";
}
else
{
result = "密码修改失败";
}
}
return Content(result);
}
前端代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UpdatePwds</title>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Content/layui/layui.js"></script>
</head>
<body>
<div id="updatePwd">
<form class="layui-form" action="#">
<div class="layui-form-item" style="width: 350px; margin: 10px auto;">
<label class="layui-form-label">用户名/工号</label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入用户名/工号"
autocomplete="off" class="layui-input" value="@Session["No"]" readonly="readonly">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">原始密码</label>
<div class="layui-input-inline">
<input type="password" name="oldPwd" required lay-verify="required" placeholder="请输入原始密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">新密码</label>
<div class="layui-input-inline">
<input type="password" name="newPwd" required lay-verify="required" placeholder="请输入新密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-inline">
<input type="password" name="conPwd" required lay-verify="required" placeholder="请输入确认密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto;">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="UpdatePwd" lay-filter="UpdatePwd">
保存
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script>
layui.use('form', function () {
var form = layui.form;
//提交
form.on('submit(UpdatePwd)', function (data) {
layer.msg(JSON.stringify(data.field)); //data.field表单提交数据
//判断二次输入的密码是否一致
if (data.field.newPwd != data.field.conPwd) {
layer.alert("二次输入的密码不一致");
return false;
}
$.ajax({
type: "post",
url: "/Home/UpdatePwd",
async: true,
data: {
oldPwd: data.field.oldPwd,
newPwd: data.field.newPwd
},
success: function (data) { //data请求成功后台返回的数据
layer.alert(data);
if (data == "密码修改成功") {
layer.close();//关闭指定的模态框
}
}
});
return false;
});
});
</script>
弹框代码
//修改密码模态框
function ModifyPassword() {
index = layer.open({
type: 2,
content: "/Home/UpdatePwds",
area: ['460px', '330px'],
title: "修改密码"
});
layer.close();
}
退出
点击退出按钮后,自动退出当前登录用户,回到登录界面
后端代码
//退出
public ActionResult Logon()
{
Session.Abandon();
FormsAuthentication.SignOut();
return RedirectToAction("Login");
}
职位管理模块
展示所有职位
逻辑流程
用户点击职位管理,跳转相应页面。
页面中的js代码请求对应controllers的方法体并返回数据。
在对应的表中查出所有的职位信息,并将数据整理按照前端要求返回。
后端代码
OSMSEntities db = new OSMSEntities();
// GET: Job
public ActionResult JobView()
{
return View();
}
/// <summary>
/// 分页
/// </summary>
/// <returns></returns>
public ActionResult Index(string name ,int page,int limit,string Code)
{
using (OSMSEntities db = new OSMSEntities())
{
//var jobList = from a in db.Job
// select a;
//if (!string.IsNullOrEmpty(name) ||!string.IsNullOrEmpty(Code))//筛选
//{
// jobList = jobList.Where(x => x.Name.Contains(name) && x.Code.Contains(Code));
//}
List<Job> jobList = db.Job.ToList();//查询所有数据
if ((name != null && name.Trim() != "") && (Code != null && Code.Trim() != ""))
{
jobList = jobList.Where(j => j.Name.Equals(name) && j.Code.Equals(Code)).ToList();
}
else if (name != null && name.Trim() != "")
{
jobList = jobList.Where(j => j.Name.Equals(name)).ToList();
}
else if (Code != null && Code.Trim() != "")
{
jobList = jobList.Where(j => j.Code.Equals(Code)).ToList();
}
//分页
//每页10 1页 1-10条 2页 11到20条 3页 21到30条 skip跳过数据的条数,take获取数据的条数
List<Job> pageJob = jobList.OrderBy(j => j.Id).Skip(limit * (page - 1)).Take(limit).ToList();
//创建一个Json对象
var jsonData = new
{
code = 0,
msg = "",
count = jobList.Count(),//总数据条数
data=pageJob,//返回的数据
};
return Json(jsonData,JsonRequestBehavior.AllowGet);
}
}
前端代码
<!--头部工具栏-->
<div>
<script type="text/html" id="barDemo">
<div>
职位名称:
<input type="text" name="name" id="name" style="width:200px;" value="" required lay-verify="required" placeholder="请输入职位名称" autocomplete="off" class="layui-input layui-input-inline">
职位代码:
<input type="text" name="Code" id="Code" style="width:200px;" value="" required lay-verify="required" placeholder="请输入职位代码" autocomplete="off" class="layui-input layui-input-inline">
<div class="layui-btn-group">
<button class="layui-btn" onclick="Search();" lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i></button>
<button class="layui-btn layui-btn-normal" onclick="AddEdit();" lay-event="add">
<i class="layui-icon layui-icon-addition"></i>
添加
</button>
</div>
</div>
</script>
<!--表格-->
<table id="demo" lay-filter="test"></table>
<!--单元格工具栏-->
<script type="text/html" id="tooEventDemo">
{{# if(d.IsDel == false){}}
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
{{# }}}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<!-- 支持任意的 laytpl 语法,如: -->
</script>
<script>
function Search() {
//表格数据重载方法
tableIndex.reload({
where: {
name: $("#name").val(),
Code: $("#Code").val(),
},
//where : { Code: $("#Code").val() },
//设定异步数据接口的额外参数
page:
{
curr: 1 //重新从第 1 页开始
}
});
}
</script>
js代码
layui.use('table', function () {
var table = layui.table;
tableIndex = table.render({
elem: '#demo'
, height: 400
, toolbar: '#barDemo'
, url: '/Job/Index' //数据接口
, page: true //开启分页
, limit: 10
, limits: [5, 10, 15, 20]
, cols: [[ //表头
{ field: 'Id', title: 'ID', width: "33%", sort: true, fixed: 'left' }
, {
field: 'Name', title: '职位名称', width: '33%', templet: function (d) {
if (d.IsDel == true) {
return "<span style='color:red;'>" + d.Name + "</span>";
} else {
return d.Name;
}
}
}
, { field: 'Code', title: '职位代码', width: "33%", templet: "<div><a href='#' class='layui-table-link'>{{=d.Code}}</a></div>" }
, {
field: 'UpdateTime', title: '修改时间', width: "33%", templet: function
(d) {
return ChangeDateFormat(d.UpdateTime);
}
},
{
field: 'CreateTime', title: '创建时间', width: "33%", templet: function
(d) {
return ChangeDateFormat(d.CreateTime);
}
},
{ title: '操作', width: '20%', fixed: 'right', templet: '#tooEventDemo' }
]]
});
//添加
//修改
//删除
//日期格式转换
function ChangeDateFormat(time) {
if (time != null) {
var date = new Date(parseInt(time.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
return "";
}
});
添加职位
逻辑流程
用户点击添加职位,返回弹框页面。
用户输入要添加的职位信息点击提交给后端
后端接收到用户提交的信息用接收到的用户信息创建生成对应表的对象
将生成的对象进行添加
添加完成后进行保存操作
后端代码
//添加
public ActionResult AddJob()
{
Job job = new Job();
job.Id = Guid.NewGuid();
job.Name = Request["Name"];
job.Code = Request["Code"];
job.CreateTime = DateTime.Now;
job.IsDel = false;
db.Job.Add(job);
if (db.SaveChanges()>0)
{
return Content("<script>alert('添加成功!');window.location.href='JobView';</script>");
}
else
{
return Content("添加失败");
}
}
前端代码
<!--添加-->
<div style="display:none" id="AddJob">
<form class="layui-form" action="/Job/AddJob" method="post">
<div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">职位名称:</label>
<div class="layui-input-block">
<input type="text" name="Name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">职位代码:</label>
<div class="layui-input-block">
<input type="text" name="Code" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto;">
<div class="layui-input-block">
<button type="submit" class="layui-btn" onclick="AddEdit()" lay-submit="UpdatePwd" lay-filter="UpdatePwd">
保存
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
弹出框代码
<script>
//添加
function AddEdit() {
layer.open({
title: '添加职位',
type: 1,
area: ['450px', '300px'],
content: $("#AddJob").html()
});
}
</script>
js代码
//触发头部工具事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'AddJob':
layer.msg('添加');
//添加
layur.use('form', function (data) {
var form = layui.form;
$.ajax({
type: "post",
url: "/Job/AddJob",
async: true,
data: {
Name: data.field.Name,
Code: data.field.Code
},
success: function (data) { //data请求成功后台返回的数据
layer.alert(data);
if (data == "添加成功") {
layer.close();//关闭指定的模态框
}
}
});
});
break;
};
});
修改职位信息
逻辑流程
用户点击要修改的职位修改按钮,返回修改职位的弹框,并通过id查找当前用户要修改的职位对象,将当前职位原始信息返回给弹框页面展示
在展示原始职位信息的表单弹框页进行修改并将修改后的信息提交到后端。
后端接收修改后的信息,并根据id查找到要修改的对象,将查找的对象字段用接收到的信息进行赋值修改。
保存修改操作
后端代码
//编辑
public ActionResult Detail(Guid jobId)
{
Job job = db.Job.Find(jobId);
return View(job);
}
[HttpPost]
public ActionResult UpdateJob(Job job)
{
job保存的是页面传过来的数据
Job job1 = db.Job.Find(job.Id);//通过id查询需要修改的数据
job1.Name = job.Name;//重新给职位赋值
job1.Code = job.Code;
job1.UpdateTime = job.UpdateTime;
if (db.SaveChanges()>0)
{
return Content("success");
}
else
{
return Content("error");
}
}
前端代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Detail</title>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Content/layui/layui.js"></script>
</head>
<body>
<div id="updatePwd">
<form class="layui-form" action="#">
<div class="layui-form-item" style="width: 350px; margin: 10px auto;">
<label class="layui-form-label">职位名称:</label>
<div class="layui-input-inline">
<input type="text" name="Id" value="@Model.Id" style="display:none" />
<input type="text" name="Name" required lay-verify="required"
autocomplete="off" class="layui-input" value="@Model.Name" >
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
<label class="layui-form-label">职位编号:</label>
<div class="layui-input-inline">
<input type="password" name="Code" required lay-verify="required" value="@Model.Code"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="width: 350px; margin: 10px auto;">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="UpdatePwd">
保存
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script>
//Demo
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(UpdatePwd)', function (data) {
$.ajax({
type: "post",
data: data.field,//将表单数据发送给后台
url: "/Job/UpdateJob",
asycn: true,
success: function (data) {
if (data == 'success') {//修改成功
//关闭模态框,刷新页面数据
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
}
});
return false;
});
});
</script>
<script src="~/Content/Job.js"></script>
js代码
//触发单元格事件
table.on('tool(test)', function (obj) { // 注:test 是 table 原始标签的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('确定删除吗?' + data.Name, function (Index) {
obj.del(); // 删除对应行(tr)的 DOM 结构,并更新缓存
//写后台删除
$.ajax({
type: "get",
url: "/Job/Del?jobId=" + data.Id,
async: true,
success: function (data) {
if (data == 'success') {
layer.alert("删除成功!");
table.reloadData('demo', {//id是table的Id
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
});
}
}
});
});
}
else if (layEvent === 'edit') { //编辑
index= layer.open({
title: '修改职位',
type: 2,
area: ['450px', '300px'],
content: '/Job/Detail?jobId=' + data.Id,
end: function () {
table.reloadData('demo', {//id是table的Id
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
});
}
});
}
});
删除职位
逻辑流程
用户点击要删除的职位按钮,弹出确认要删除的弹框
如果用户点击确认那么就将要删除的职位id发送给后端,如果点击取消关闭弹框即可
后端接收到后在数据中去相应的表中查找要删除的对象
找到要删除的对象后用remove的方法将对象删除
保存删除操作,重定向到原路由
后端代码
//删除
public ActionResult Del(Guid jobId)
{
using (OSMSEntities db = new OSMSEntities())
{
Job job = db.Job.Find(jobId);
db.Job.Remove(job);
if (db.SaveChanges()>0)
{
return Content("success");
}
else
{
return Content("erro");
}
}
}
js代码
table.on('tool(test)', function (obj) { // 注:test 是 table 原始标签的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('确定删除吗?' + data.Name, function (Index) {
obj.del(); // 删除对应行(tr)的 DOM 结构,并更新缓存
//写后台删除
$.ajax({
type: "get",
url: "/Job/Del?jobId=" + data.Id,
async: true,
success: function (data) {
if (data == 'success') {
layer.alert("删除成功!");
table.reloadData('demo', {//id是table的Id
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
});
}
}
});
});
}
//编辑
//日期转换
});