项目

阅读：评论：0

项目

登录页的效果图：

这是我项目中所有的控制器：

在Home控制器中，写一个登录页的操作方法Login，返回视图，显示登录页面


@{Layout = null;
}<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HP后台</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">@Styles.Render("~/css/layui")@Styles.Render("~/css/admin")@Styles.Render("~/css/login")@Scripts.Render("~/js/layui")@Scripts.Render("~/js/vue")@Scripts.Render("~/js/axios")<style>body {background-image: url(/Content/img/loginbg.png);border:1px solid black;}.mainlogin{width:428px;height:518px;margin:0px auto;background-color:white;margin-top:100px;border-radius:10px 10px 10px 10px;}.SetBorderRadius {border-top-left-radius:10px;border-top-right-radius:10px;}.maintitle {height: 80px;line-height: 80px;background-color: #009688;}.check-Code {background-color: white;color: #ddb6b6;line-height: 50px;height: 50px;}.layui-input {line-height: 50px;height: 50px;}.layui-icon {line-height: 50px;height: 50px;}.btnLogin{margin-top:40px;}</style>
</head>
<body><div><div  class="mainlogin" id="LAY-user-login" style="display: none;">@* layadmin-user-login layadmin-user-display-show *@<div><div class="layadmin-user-login-box layadmin-user-login-header maintitle SetBorderRadius"><h2 style="color:white">HOPE物资管理系统</h2><p></p></div><div class="layadmin-user-login-box layadmin-user-login-body layui-form layadmin-user-login-main"><div class="layui-form-item inputUsername"><label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label><input type="text" v-model="users.UserTel" lay-verify="required" placeholder="用户名" class="layui-input" autocomplete="off"></div><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label><input type="password" v-model="users.UserPwd" lay-verify="required" placeholder="密码" class="layui-input" autocomplete="off"></div><div class="layui-form-item"><div class="layui-row"><div class="layui-col-xs7"><label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label><input type="text" v-model="myCode" lay-verify="required" placeholder="图形验证码" class="layui-input" autocomplete="off"></div><div class="layui-col-xs5"><div style="margin-left: 10px;">@*<img src="" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">*@<span class="check-Code" v-on:click="click">{{checkCode}}</span></div></div></div></div><div class="layui-form-item btnLogin"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit" v-on:click="login" style="height:40px;font-size:20px;border-radius:10px 10px 10px 10px;">登 录</button></div></div></div></div></div><script&fig({base: '/Content/layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块}).use('layer');//use(['index','user'])var vm = new Vue({el: '#LAY-user-login',data: {users: {},checkCode: 'XXXX',//默认验证码myCode:''//文本框输入的},methods: {login: login,//登录click: getCheckCode//验证码},created: function () {//alert('默认加载')getCheckCode();}});function login() {//if 判断验证码if (vm.$Code != vm.$data.checkCode) {layer.msg('验证码输入错误', {offset: '15px',//向下偏移15pxicon: 5//5是提示错误});return;}var users = vm.$data.users;axios.post('/home/UserLogin', users).then(res => {//vm.$data.checkCode = res.data;if (res.data==0) {layer.msg('账号或密码错误，请重新输入', {offset: '15px',//向下偏移15pxicon: 5//5是提示错误});}else {layer.msg('登录成功', {offset: '15px', icon: 1, time: 1000}, function () {//用户的角色location.href = '../home/main'; //后台主页});}})}//获取验证码function getCheckCode() {axios.post('/home/GetCheckCode', { length: '4' }).then(res => {vm.$data.checkCode = res.data;})}</script>
</body>
</html>

解释一下：

1、

引入你需要的样式文件以及js文件。这个需要在App_Start中的BundleConfig中进行配置绑定

BundleConfig中的代码如下：

using System.Web;
using System.Web.Optimization;namespace HP.Web
{public class BundleConfig{// 有关捆绑的详细信息，请访问 /?LinkId=301862public static void RegisterBundles(BundleCollection bundles){bundles.Add(new ScriptBundle("~/js/layui").Include("~/Content/layuiadmin/layui/layui.js"));bundles.Add(new ScriptBundle("~/js/axios").Include("~/Content/js/axios.min.js"));bundles.Add(new ScriptBundle("~/js/vue").Include("~/Content/js/vue.min.js"));bundles.Add(new ScriptBundle("~/js/layerwindow").Include("~/Content/js/layerwindow.js"));bundles.Add(new StyleBundle("~/css/layui").Include("~/Content/layuiadmin/layui/css/layui.css"));bundles.Add(new StyleBundle("~/css/admin").Include("~/Content/layuiadmin/style/admin.css"));bundles.Add(new StyleBundle("~/css/login").Include("~/Content/layuiadmin/style/login.css"));}}
}

解释一下：

2、验证码的实现：

这个登录界面用到了Vue以及axios

后台验证码的操作方法：

最近在背面试题中有讲到过这个StringBuilder

接下来是登录的操作方法的代码，传入users对象

BLL层的代码：

DAL代码：

登录成功之后：

会跳转到Home控制器中的Main页面中，因为不同职位的人所拥有的权限是不一样的，所以main.cshtml中会显示不同的菜单。

Main.cshtml中的代码：


@{Layout = null;
}
@using HP.Web.Models<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>物资管理系统</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">@Styles.Render("~/css/layui")@Styles.Render("~/css/admin")@Scripts.Render("~/js/layui")</head>
<body class="layui-layout-body"><div id="LAY_app"><div class="layui-layout layui-layout-admin"><div class="layui-header"><!-- 头部区域 --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item layadmin-flexible" lay-unselect><a href="javascript:;" layadmin-event="flexible" title="侧边伸缩"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li><li class="layui-nav-item layui-hide-xs" lay-unselect><a href="/" target="_blank" title="前台"><i class="layui-icon layui-icon-website"></i></a></li><li class="layui-nav-item" lay-unselect><a href="javascript:;" layadmin-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a></li><li class="layui-nav-item layui-hide-xs" lay-unselect><input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords="></li></ul><ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"><li class="layui-nav-item" lay-unselect><a lay-href="/Home/TimeIndex" layadmin-event="message" lay-text="消息中心"><i class="layui-icon layui-icon-notice"></i><!-- 如果有新消息，则显示小圆点 --><span class="layui-badge-dot"></span></a></li><li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" layadmin-event="theme"><i class="layui-icon layui-icon-theme"></i></a></li><li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" layadmin-event="note"><i class="layui-icon layui-icon-note"></i></a></li><li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" layadmin-event="fullscreen"><i class="layui-icon layui-icon-screen-full"></i></a></li><li class="layui-nav-item" lay-unselect><a href="javascript:;"><cite>@ViewBag.userName</cite></a><dl class="layui-nav-child">@*<dd><a lay-href="/Home/UserInfo">基本资料</a></dd>*@<dd><a lay-href="/Home/UpdatePwd">修改密码</a></dd><hr><dd style="text-align: center;"><a href="/Home/LogOut">退出</a></dd>@*<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>*@@*href="/Home/Login?logout=1"*@</dl></li><li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a></li><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect><a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><!-- 侧边菜单 --><div class="layui-side layui-side-menu"><div class="layui-side-scroll"><div class="layui-logo" lay-href="home/console.html"><span>系统管理员</span></div><ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">@{ List<tb_Nav> list = ViewBag.navList;}@{ List<tb_Nav> listTwo = ViewBag.navTwoList;}@for (int i = 0; i < list.Count; i++){tb_Nav navInfo = list[i];<li class="layui-nav-item"><a href="javascript:;" lay-direction="2"><i class="@navInfo.NavIcon"></i><cite>@navInfo.NavName</cite></a><dl class="layui-nav-child">@foreach (var item in listTwo.Where(p => p.ParentID == navInfo.NavID)){<dd data-name="console"><a lay-href="@item.NavUrl">@item.NavName</a></dd>}</dl></li>}</ul></div></div><!-- 页面标签 --><div class="layadmin-pagetabs" id="LAY_app_tabs"><div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div><div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div><div class="layui-icon layadmin-tabs-control layui-icon-down"><ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav"><li class="layui-nav-item" lay-unselect><a href="javascript:;"></a><dl class="layui-nav-child layui-anim-fadein"><dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd><dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd><dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd></dl></li></ul></div><div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs"><ul class="layui-tab-title" id="LAY_app_tabsheader"><li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li></ul></div></div><!-- 主体内容 --><div class="layui-body" id="LAY_app_body"><div class="layadmin-tabsbody-item layui-show"><iframe src="/news/allcount" frameborder="0" class="layadmin-iframe"></iframe></div></div><!-- 辅助元素，一般用于移动设备下遮罩 --><div class="layadmin-body-shade" layadmin-event="shade"></div></div></div><script&fig({base: '../content/layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块}).use('index');</script></body>
</html>

关于权限管理，下面看一下DAL层和BLL层的代码：

也就是这两行代码中所用到的DAL层和BLL层中的代码：

SelectNavByRoleID方法：

SelectTwoNavByRoleID中的代码：

下面是HomeController的所有代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HP.Web.Models;
using HP.Web.BLL;
using System.Text;namespace HP.Web.Controllers
{public class HomeController : Controller{readonly UserManager userManager = new UserManager();NavManager navManager = new NavManager();public ActionResult Index(){return View();}/// <summary>/// 登录页（显示）/// </summary>/// <returns></returns>public ActionResult Login()//登录页{return View();}/// <summary>/// 用户登录（数据提交）/// </summary>/// <param name="users"></param>/// <returns></returns>public int UserLogin(tb_User users){//if (Request["logout"] != null)//{//    Session.Remove("loginUser");//}int result = 0;//登录失败为0tb_User loginUser = userManager.Login(users);if (loginUser != null){Session["loginUser"] = loginUser;Session.Timeout = 60;result = 1;//成功为1}return result;}public ActionResult Main()//框架主页{//登陆人的角色tb_User user = Session["loginUser"] as tb_User;ViewBag.userName = user.UserName;//用户姓名ViewBag.userID = user.UserID;//用户IDList<tb_Nav> navList= navManager.SelectNavByRoleID(user.UserRole);//一级菜单List<tb_Nav> navTwoList = navManager.SelectTwoNavByRoleID(user.UserRole);ViewBag.navList = navList;ViewBag.navTwoList = navTwoList;return View();}/// <summary>/// 生成验证码/// </summary>/// <param name="length"></param>/// <returns></returns>public string GetCheckCode(int length = 4){string[] codes ={"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","p"};StringBuilder sb = new StringBuilder();Random random = new Random();for (int i = 0; i < length; i++){int index = random.Next(codes.Length);sb.Append(codes[index]);}return sb.ToString();}public ActionResult TimeIndex(){using (HpDBEntities1 db=new HpDBEntities1()){ViewBag.News= db.tb_News.Include("tb_User").OrderByDescending(p=>p.NewsTime).ToList();}return View(); }public ActionResult UpdatePwd(){return View();}public ActionResult LogOut(){Session.Clear();return RedirectToAction("Login");}}
}

本文发布于:2024-02-04 21:43:54，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170717095459880.html

上一篇：长春理工大学计算机技术专业第一410+经验分享

下一篇：拾起编程之前提思想

标签：项目

留言与评论（共有 0 条评论）