• Web开发：ASP.NET CORE的前端demo（纯前端）

    目录

    一、建立项目

    二、删除无用文件

    三、样式添加

    四、写一个登录页面

     五、登录主界面

    一、建立项目

    二、删除无用文件

    三、样式添加

    将你的图片资源添加在wwwroot下方，例如pics/logo.png

    四、写一个登录页面

    将Privacy.cshtml改为 Forget.cshtml ，并且在HomeController中的方法也改一下：

    1. public IActionResult Forget() //点击密码时返回视图
    2. {
    3.    return View();
    4. }

    并且在 Forget.cshtml 写下如下代码：

    <h1>忘记密码页面h1>

    然后在Index.cshtml中写下如下代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>登录页面title>
    7.     
    8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    9.     
    10.     <style>
    11.         body {
    12.             background-color: #f8f9fa;
    13.             font-size: 20px;
    14.         }
    15.  
    16.         .login-container {
    17.             display: flex;
    18.             justify-content: center;
    19.             align-items: center;
    20.             height: 100vh;
    21.         }
    22.  
    23.         .login-form {
    24.             max-width: 400px;
    25.             padding: 35px;
    26.             background-color: #fff;
    27.             border-radius: 10px;
    28.             box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    29.         }
    30.  
    31.             .login-form h2 {
    32.                 text-align: center;
    33.                 margin-bottom: 40px;
    34.             }
    35.  
    36.         .form-group label {
    37.             font-size: 22px;
    38.         }
    39.  
    40.         .form-control {
    41.             height: 40px;
    42.             font-size: 18px;
    43.             margin-bottom: 20px; /* 增加文本框的下间距 */
    44.         }
    45.  
    46.         .form-actions {
    47.             display: flex; /* 设置为 Flex 容器 */
    48.             justify-content: flex-end; /* 将子元素对齐到容器的末尾 */
    49.             align-items: center; /* 垂直居中子元素 */
    50.             margin-top: 1rem; /* 添加一些上边距以与表单字段分隔 */
    51.         }
    52.  
    53.         .btn {
    54.             /* 确保按钮和链接看起来相似，根据需要调整样式 */
    55.             padding: 0.5rem 1rem;
    56.             
    57.             color: white;
    58.             background-color: #007bff;
    59.             border: none;
    60.             border-radius: 0.25rem;
    61.             cursor: pointer;
    62.             margin:20px;
    63.         }
    64.  
    65.             .btn:hover {
    66.                 background-color: #0056b3; /* 悬停效果 */
    67.             }
    68.  
    69.         .logo {
    70.             width: 120px;
    71.             height: auto;
    72.             display: block;
    73.             margin: 0 auto;
    74.             margin-bottom: 30px;
    75.         }
    76.     style>
    77. head>
    78. <body>
    79.  
    80.     <div class="login-container">
    81.         <div class="login-form">
    82.             <img src="/pics/logo.png" alt="Logo" class="logo">
    83.             <h2>XXX管理系统h2>
    84.             <form method="post" action="/Home/Index">
    85.                 <div class="form-group">
    86.                     <label for="username">账号： label>
    87.                     <input type="text" class="form-control" id="username" placeholder="请输入您的帐号：" Name="id" >
    88.                 div>
    89.                 <div class="form-group">
    90.                     <label for="password">密码： label>
    91.                     <input type="password" class="form-control" id="password" placeholder="请输入您的密码：" Name="pwd">
    92.                 div>
    93.                 <div class="form-actions">
    94.                     
    95.                     <button type="submit" class="btn">登录button>
    96.                     <button type="submit" class="btn" onclick="window.open('/Home/Forget')">忘记密码button>
    97.                 div>
    98.             form>
    99.         div>
    100.     div>
    101.  
    102.     
    103.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">script>
    104.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">script>
    105.  
    106. body>
    107. html>

    再创建一个控制器和界面（MainController 和 Main/Index）： 

    （伪）后端 HomeController：

    1. public static bool Loginflag = false;
    2.  
    3. [HttpPost]
    4. public IActionResult Index(string id,string pwd)
    5. {
    6.     if (pwd!=null && pwd.Equals("123"))
    7.     {
    8.         Loginflag = true;
    9.         return RedirectToAction("Index", "Main");//重定向到MainController下的Index界面
    10.     }
    11.     else
    12.     {
    13.         return View();
    14.     }    
    15. }

    （伪）后端 MainController：

    1. public IActionResult Index()
    2. {
    3.     if(HomeController.Loginflag)//如果登录成功
    4.     {
    5.         return View();//打开当前界面
    6.     }
    7.     else
    8.     {
    9.         return RedirectToAction("Index","Home");//重定向到HomeController下的Index界面
    10.     }
    11. }

    效果：密码输入为123时，登录成功；点击忘记密码会跳转到忘记密码页面。

     【更好的传入方式】：封装成一个类传入

     五、登录主界面

     （伪）后端 MainController：

    1. using Microsoft.AspNetCore.Mvc;
    2. using Microsoft.AspNetCore.Mvc.RazorPages;
    3. using WebApplication1.Models;
    4.  
    5. namespace WebApplication1.Controllers
    6. {
    7.     public class MainController : Controller
    8.     {
    9.  
    10.         public IActionResult Index(int? page, QueryParameters? parameters=null)//QueryParameters类需要自主创建
    11.         {
    12.             if(HomeController.Loginflag)//如果登录成功
    13.             {
    14.                 //默认用户名
    15.                 ViewBag.UserName = "小明";
    16.                 // 获取输入框的查询数据
    17.                 string name = parameters?.Name;
    18.                 string className = parameters?.ClassName;
    19.                 int? age = parameters?.Age;
    20.                 string gender = parameters?.Gender;
    21.                 bool? under18 = parameters?.Under18;
    22.                 #region 模拟数据库查询
    23.                 var list = new List();
    24.                 list.Add(new Student { Id=1,Name="小虹",age=18,sex="女",classes="计算机1班"});
    25.                 list.Add(new Student { Id = 2, Name = "小明", age = 19, sex = "男", classes = "计算机2班" });
    26.                 list.Add(new Student { Id = 3, Name = "小华", age = 17, sex = "女", classes = "计算机3班" });
    27.                 list.Add(new Student { Id = 4, Name = "小张", age = 20, sex = "男", classes = "数学1班" });
    28.                 list.Add(new Student { Id = 5, Name = "小李", age = 18, sex = "女", classes = "物理2班" });
    29.                 list.Add(new Student { Id = 6, Name = "小王", age = 19, sex = "男", classes = "化学3班" });
    30.                 list.Add(new Student { Id = 7, Name = "小赵", age = 21, sex = "女", classes = "生物1班" });
    31.                 list.Add(new Student { Id = 8, Name = "小陈", age = 17, sex = "男", classes = "英语2班" });
    32.                 list.Add(new Student { Id = 9, Name = "小刘", age = 18, sex = "女", classes = "历史3班" });
    33.                 list.Add(new Student { Id = 10, Name = "小周", age = 19, sex = "男", classes = "地理1班" });
    34.                 list.Add(new Student { Id = 11, Name = "小吴", age = 20, sex = "女", classes = "政治2班" });
    35.                 list.Add(new Student { Id = 12, Name = "小郑", age = 17, sex = "男", classes = "语文3班" });
    36.                 list.Add(new Student { Id = 13, Name = "小孙", age = 18, sex = "女", classes = "美术1班" });
    37.                 list.Add(new Student { Id = 14, Name = "小袁", age = 19, sex = "男", classes = "音乐2班" });
    38.                 list.Add(new Student { Id = 15, Name = "小许", age = 20, sex = "女", classes = "体育3班" });
    39.                 list.Add(new Student { Id = 16, Name = "小徐", age = 21, sex = "男", classes = "信息1班" });
    40.                 #endregion
    41.                 int pageSize = 10; // 每页显示的数据量
    42.                 int pageNumber = (page ?? 1); // 当前页数，默认为第一页
    43.                 ViewBag.CurrentPage = pageNumber;
    44.                 ViewBag.TotalPages = (int)Math.Ceiling((double)list.Count / pageSize); // 计算总页数
    45.                 ViewBag.ResultList = list.Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList(); ;
    46.                 return View();//打开当前界面
    47.             }
    48.             else
    49.             {
    50.                 return RedirectToAction("Index","Home");//重定向到HomeController下的Index界面
    51.             }
    52.         }
    53.         /// 
    54.         /// 点击修改按钮
    55.         /// 
    56.         /// 
    57.         /// 
    58.         [HttpPost]
    59.         public IActionResult Index([FromBody] RetunData data)//RetunData类需要自主创建
    60.         {
    61.             int id = data.Id;
    62.             return Ok();  // 返回成功响应
    63.         }
    64.     }
    65. }

    Main/Index界面：

    1. html>
    2. <html>
    3. <head>
    4.     <title>导航栏示例title>
    5.     <style>
    6.         body {
    7.             margin: 0;
    8.             padding: 0;
    9.         }
    10.  
    11.         .navbar {
    12.             background-color: #007bff;
    13.             color: white;
    14.             padding: 10px;
    15.             margin: 0;
    16.             width: 100%;
    17.             box-sizing: border-box;
    18.         }
    19.  
    20.         .navbar-items {
    21.             list-style-type: none;
    22.             padding: 0;
    23.             margin: 0;
    24.             width:200px;
    25.             background-color: ghostwhite; /* 您可以根据需要更改背景颜色 */
    26.         }
    27.  
    28.             .navbar-items li {
    29.                 display: block; /* 设置为块级元素，使它们竖着排列 */
    30.                 padding: 10px;
    31.             }
    32.  
    33.                 .navbar-items li:hover {
    34.                     background-color: #ddd; /* 鼠标悬停时的背景颜色 */
    35.                     cursor: pointer; /* 鼠标悬停时变为手形图标 */
    36.                 }
    37.  
    38.  
    39.         th, td {
    40.             border: 1px solid #dddddd;
    41.             text-align: left;
    42.             padding: 8px;
    43.         }
    44.  
    45.         tr:nth-child(even) {
    46.             background-color: #f2f2f2;
    47.         }
    48.     style>
    49. head>
    50. <body>
    51.     <div class="navbar">欢迎您！@ViewBag.UserNamediv>
    52.     <ul class="navbar-items" style="text-align: center;">
    53.         <li><a href="#" style="color: inherit; text-decoration: none;">项目1a>li>
    54.         <li><a href="#" style="color: inherit; text-decoration: none;">项目2a>li>
    55.         <li><a href="#" style="color: inherit; text-decoration: none;">项目3a>li>
    56.         <li><a href="#" style="color: inherit; text-decoration: none;">项目4a>li>
    57.         <li><a href="#" style="color: inherit; text-decoration: none;">项目5a>li>
    58.     ul>
    59.  
    60.     <div style="text-align: center; position: absolute; left:350px; top:70px;">
    61.         <input type="text" id="nameInput" placeholder="姓名" style="margin:10px">
    62.         <input type="text" id="classInput" placeholder="班级" style="margin:10px">
    63.         <input type="text" id="ageInput" placeholder="年龄" style="margin:10px">
    64.         <select id="genderSelect" style="margin:10px">
    65.             <option value="男">男option>
    66.             <option value="女">女option>
    67.         select>
    68.         <input type="checkbox" id="under18Checkbox" style="margin:10px"> 小于18岁
    69.         <button id="refreshButton" type="button" style="background-color: greenyellow; border: none; padding: 5px 10px; cursor: pointer;">刷新查询button>
    70.         <button type="button" style="background-color: cornflowerblue; border: none; padding: 5px 10px; cursor: pointer;">新增信息button>
    71.     div>
    72.  
    73.     
    74.     <table style="margin: 20px auto;border-collapse: collapse; position: absolute;left:550px; top:130px;">
    75.         <thead>
    76.             <tr style="margin: 20px auto;">
    77.                 <th>姓名th>
    78.                 <th>班级th>
    79.                 <th>年龄th>
    80.                 <th>性别th>
    81.                 <th>操作th>
    82.             tr>
    83.         thead>
    84.         <tbody>
    85.             @foreach (var item in ViewBag.ResultList)
    86.             {
    87.                 <tr>
    88.                     <td>@item.Nametd>
    89.                     <td>@item.classestd>
    90.                     <td>@item.agetd>
    91.                     <td>@item.sextd>
    92.                     
    93.                     <td>
    94.                         <button type="button" style="background-color: orange; border: none; padding: 5px 10px; cursor: pointer;" onclick="modifyRecord('@item.Id')">修改button>
    95.                         <button type="button" style="background-color: #dc143c; border: none; padding: 5px 10px; cursor: pointer;">删除button>
    96.                     td>
    97.                 tr>
    98.             }
    99.         tbody>
    100.     table>
    101.  
    102.     
    103.     <div class="pagination" style="text-align: center;  position: absolute;left:600px; top:650px; margin:5px">
    104.         <button type="button" onclick="location.href='@Url.Action("Index", new { page = ViewBag.CurrentPage - 1 })'" @(ViewBag.CurrentPage == 1 ? "disabled" : "")>上一页button>
    105.         <span>第 @ViewBag.CurrentPage 页/共 @ViewBag.TotalPages 页 span>
    106.         <button type="button" onclick="location.href='@Url.Action("Index", new { page = ViewBag.CurrentPage + 1 })'" @(ViewBag.CurrentPage == ViewBag.TotalPages ? "disabled" : "")>下一页button>
    107.     div>
    108.  
    109.     <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    110.     <script>
    111.         // 监听按钮点击事件
    112.         $('#refreshButton').on('click', function () {
    113.             // 获取输入框和选择框的值
    114.             var name = $('#nameInput').val();
    115.             var className = $('#classInput').val();
    116.             var age = $('#ageInput').val();
    117.             var gender = $('#genderSelect').val();
    118.             var under18 = $('#under18Checkbox').is(':checked');
    119.  
    120.             // 发送Ajax请求
    121.             $.ajax({
    122.                 url: '/Main/Index', // 后端处理方法的URL
    123.                 method: 'GET', // 使用GET方法发送请求
    124.                 data: {
    125.                     name: name,
    126.                     className: className,
    127.                     age: age,
    128.                     gender: gender,
    129.                     under18: under18
    130.                 },
    131.                 success: function (response) {
    132.                     // 请求成功后的处理逻辑
    133.                     console.log('后端处理成功');
    134.                 },
    135.                 error: function (xhr, status, error) {
    136.                     // 请求失败后的处理逻辑
    137.                     console.error('后端处理失败:', error);
    138.                 }
    139.             });
    140.         });
    141.  
    142.         function modifyRecord(id) {
    143.             // 创建一个包含ID的对象（POST请求的特点）
    144.             var data = { id: id };
    145.  
    146.             // 发送POST请求
    147.             $.ajax({
    148.                 url: '/Main/Index',  // 根据你的实际路由进行修改
    149.                 type: 'POST',
    150.                 contentType: 'application/json',
    151.                 data: JSON.stringify(data),
    152.                 success: function (response) {
    153.                     // 处理成功响应
    154.                     console.log('Record modified successfully');
    155.                 },
    156.                 error: function (xhr, status, error) {
    157.                     // 处理错误响应
    158.                     console.error('Error modifying record:', error);
    159.                 }
    160.             });
    161.         }
    162.     script>
    163. body>
    164. html>

    【效果如下所示】：

    当然这只是个demo，很多功能都没有实现，只是写一下前端以及前后端是如何交互的。

  • 相关阅读:
    R语言使用rbind函数将多个dataframe数据纵向合并起来创建dataframe数据、按照行合并dataframe
    MemoryCache 缓存 实用
    nacos的服务发现详解
    Webpack5学习大纲笔记
    ROS机器人移动到指定坐标点
    【线性代数】二次型总结
    阿里巴巴最新总结「百亿级别并发设计手册」GitHub收获70K标星
    【接口测试】如何在 Eolink Apilkit 中使用 cookie ？
    perf性能分析
    【Java Web】论坛帖子添加评论
  • 原文地址：https://blog.csdn.net/m0_67412019/article/details/137840978