Web开发：ASP.NET CORE的前端demo（纯前端）
目录
一、建立项目
二、删除无用文件
三、样式添加
四、写一个登录页面
五、登录主界面
一、建立项目
二、删除无用文件
三、样式添加
将你的图片资源添加在wwwroot下方，例如pics/logo.png
四、写一个登录页面
将Privacy.cshtml改为 Forget.cshtml ，并且在HomeController中的方法也改一下：
public IActionResult Forget() //点击密码时返回视图
{
return View();
}
并且在 Forget.cshtml 写下如下代码：
忘记密码页面
然后在Index.cshtml中写下如下代码
登录页面
body {
background-color: #f8f9fa;
font-size: 20px;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
max-width: 400px;
padding: 35px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.login-form h2 {
text-align: center;
margin-bottom: 40px;
}
.form-group label {
font-size: 22px;
}
.form-control {
height: 40px;
font-size: 18px;
margin-bottom: 20px; /* 增加文本框的下间距 */
}
.form-actions {
display: flex; /* 设置为 Flex 容器 */
justify-content: flex-end; /* 将子元素对齐到容器的末尾 */
align-items: center; /* 垂直居中子元素 */
margin-top: 1rem; /* 添加一些上边距以与表单字段分隔 */
}
.btn {
/* 确保按钮和链接看起来相似，根据需要调整样式 */
padding: 0.5rem 1rem;
color: white;
background-color: #007bff;
border: none;
border-radius: 0.25rem;
cursor: pointer;
margin:20px;
}
.btn:hover {
background-color: #0056b3; /* 悬停效果 */
}
.logo {
width: 120px;
height: auto;
display: block;
margin: 0 auto;
margin-bottom: 30px;
}
XXX管理系统
账号：
密码：
登录
忘记密码
再创建一个控制器和界面（MainController 和 Main/Index）：
（伪）后端 HomeController：
public static bool Loginflag = false;
[HttpPost]
public IActionResult Index(string id,string pwd)
{
if (pwd!=null && pwd.Equals("123"))
{
Loginflag = true;
return RedirectToAction("Index", "Main");//重定向到MainController下的Index界面
}
else
{
return View();
}
}
（伪）后端 MainController：
public IActionResult Index()
{
if(HomeController.Loginflag)//如果登录成功
{
return View();//打开当前界面
}
else
{
return RedirectToAction("Index","Home");//重定向到HomeController下的Index界面
}
}
效果：密码输入为123时，登录成功；点击忘记密码会跳转到忘记密码页面。
【更好的传入方式】：封装成一个类传入
五、登录主界面
（伪）后端 MainController：
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class MainController : Controller
{
public IActionResult Index(int? page, QueryParameters? parameters=null)//QueryParameters类需要自主创建
{
if(HomeController.Loginflag)//如果登录成功
{
//默认用户名
ViewBag.UserName = "小明";
// 获取输入框的查询数据
string name = parameters?.Name;
string className = parameters?.ClassName;
int? age = parameters?.Age;
string gender = parameters?.Gender;
bool? under18 = parameters?.Under18;
#region 模拟数据库查询
var list = new List();
list.Add(new Student { Id=1,Name="小虹",age=18,sex="女",classes="计算机1班"});
list.Add(new Student { Id = 2, Name = "小明", age = 19, sex = "男", classes = "计算机2班" });
list.Add(new Student { Id = 3, Name = "小华", age = 17, sex = "女", classes = "计算机3班" });
list.Add(new Student { Id = 4, Name = "小张", age = 20, sex = "男", classes = "数学1班" });
list.Add(new Student { Id = 5, Name = "小李", age = 18, sex = "女", classes = "物理2班" });
list.Add(new Student { Id = 6, Name = "小王", age = 19, sex = "男", classes = "化学3班" });
list.Add(new Student { Id = 7, Name = "小赵", age = 21, sex = "女", classes = "生物1班" });
list.Add(new Student { Id = 8, Name = "小陈", age = 17, sex = "男", classes = "英语2班" });
list.Add(new Student { Id = 9, Name = "小刘", age = 18, sex = "女", classes = "历史3班" });
list.Add(new Student { Id = 10, Name = "小周", age = 19, sex = "男", classes = "地理1班" });
list.Add(new Student { Id = 11, Name = "小吴", age = 20, sex = "女", classes = "政治2班" });
list.Add(new Student { Id = 12, Name = "小郑", age = 17, sex = "男", classes = "语文3班" });
list.Add(new Student { Id = 13, Name = "小孙", age = 18, sex = "女", classes = "美术1班" });
list.Add(new Student { Id = 14, Name = "小袁", age = 19, sex = "男", classes = "音乐2班" });
list.Add(new Student { Id = 15, Name = "小许", age = 20, sex = "女", classes = "体育3班" });
list.Add(new Student { Id = 16, Name = "小徐", age = 21, sex = "男", classes = "信息1班" });
#endregion
int pageSize = 10; // 每页显示的数据量
int pageNumber = (page ?? 1); // 当前页数，默认为第一页
ViewBag.CurrentPage = pageNumber;
ViewBag.TotalPages = (int)Math.Ceiling((double)list.Count / pageSize); // 计算总页数
ViewBag.ResultList = list.Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList(); ;
return View();//打开当前界面
}
else
{
return RedirectToAction("Index","Home");//重定向到HomeController下的Index界面
}
}
///
/// 点击修改按钮
///
///
///
[HttpPost]
public IActionResult Index([FromBody] RetunData data)//RetunData类需要自主创建
{
int id = data.Id;
return Ok(); // 返回成功响应
}
}
}
Main/Index界面：
导航栏示例
body {
margin: 0;
padding: 0;
}
.navbar {
background-color: #007bff;
color: white;
padding: 10px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.navbar-items {
list-style-type: none;
padding: 0;
margin: 0;
width:200px;
background-color: ghostwhite; /* 您可以根据需要更改背景颜色 */
}
.navbar-items li {
display: block; /* 设置为块级元素，使它们竖着排列 */
padding: 10px;
}
.navbar-items li:hover {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
cursor: pointer; /* 鼠标悬停时变为手形图标 */
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
欢迎您！@ViewBag.UserName
- 项目1
- 项目2
- 项目3
- 项目4
- 项目5
| 姓名 | 班级 | 年龄 | 性别 | 操作 |
|---|---|---|---|---|
| @item.Name | @item.classes | @item.age | @item.sex | 修改 删除 |
【效果如下所示】：
当然这只是个demo，很多功能都没有实现，只是写一下前端以及前后端是如何交互的。
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
