专门做旅行用品的网站,电脑怎么直接卸载wordpress,如何做公司的网站,图文可以做网站设计吗目录
一、建立项目
二、删除无用文件
三、样式添加
四、写一个登录页面 五、登录主界面 一、建立项目 二、删除无用文件 三、样式添加
将你的图片资源添加在wwwroot下方#xff0c;例如pics/logo.png 四、写一个登录页面
将Privacy.cshtml改为 Forget.cshtml #xff0…目录
一、建立项目
二、删除无用文件
三、样式添加
四、写一个登录页面 五、登录主界面 一、建立项目 二、删除无用文件 三、样式添加
将你的图片资源添加在wwwroot下方例如pics/logo.png 四、写一个登录页面
将Privacy.cshtml改为 Forget.cshtml 并且在HomeController中的方法也改一下
public IActionResult Forget() //点击密码时返回视图
{return View();
}
并且在 Forget.cshtml 写下如下代码
h1忘记密码页面/h1
然后在Index.cshtml中写下如下代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录页面/title!-- Bootstrap CSS --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css!-- Custom styles --stylebody {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;}/style
/head
bodydiv classlogin-containerdiv classlogin-formimg src/pics/logo.png altLogo classlogoh2XXX管理系统/h2form methodpost action/Home/Indexdiv classform-grouplabel forusername账号 /labelinput typetext classform-control idusername placeholder请输入您的帐号 Nameid /divdiv classform-grouplabel forpassword密码 /labelinput typepassword classform-control idpassword placeholder请输入您的密码 Namepwd/divdiv classform-actions!-- 创建一个新的 div 作为 Flex 容器 --button typesubmit classbtn登录/buttonbutton typesubmit classbtn onclickwindow.open(/Home/Forget)忘记密码/button/div/form/div/div!-- Bootstrap JS --script srchttps://code.jquery.com/jquery-3.5.1.slim.min.js/scriptscript srchttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script/body
/html再创建一个控制器和界面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? parametersnull)//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 ListStudent();list.Add(new Student { Id1,Name小虹,age18,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班 });#endregionint 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界面}}/// summary/// 点击修改按钮/// /summary/// param namedata/param/// returns/returns[HttpPost]public IActionResult Index([FromBody] RetunData data)//RetunData类需要自主创建{int id data.Id;return Ok(); // 返回成功响应}}
}Main/Index界面 !DOCTYPE html
html
headtitle导航栏示例/titlestylebody {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;}/style
/head
bodydiv classnavbar欢迎您ViewBag.UserName/divul classnavbar-items styletext-align: center;lia href# stylecolor: inherit; text-decoration: none;项目1/a/lilia href# stylecolor: inherit; text-decoration: none;项目2/a/lilia href# stylecolor: inherit; text-decoration: none;项目3/a/lilia href# stylecolor: inherit; text-decoration: none;项目4/a/lilia href# stylecolor: inherit; text-decoration: none;项目5/a/li/uldiv styletext-align: center; position: absolute; left:350px; top:70px;input typetext idnameInput placeholder姓名 stylemargin:10pxinput typetext idclassInput placeholder班级 stylemargin:10pxinput typetext idageInput placeholder年龄 stylemargin:10pxselect idgenderSelect stylemargin:10pxoption value男男/optionoption value女女/option/selectinput typecheckbox idunder18Checkbox stylemargin:10px 小于18岁button idrefreshButton typebutton stylebackground-color: greenyellow; border: none; padding: 5px 10px; cursor: pointer;刷新查询/buttonbutton typebutton stylebackground-color: cornflowerblue; border: none; padding: 5px 10px; cursor: pointer;新增信息/button/div!-- 列表 --table stylemargin: 20px auto;border-collapse: collapse; position: absolute;left:550px; top:130px;theadtr stylemargin: 20px auto;th姓名/thth班级/thth年龄/thth性别/thth操作/th/tr/theadtbodyforeach (var item in ViewBag.ResultList){trtditem.Name/tdtditem.classes/tdtditem.age/tdtditem.sex/td!-- 继续添加更多字段 --tdbutton typebutton stylebackground-color: orange; border: none; padding: 5px 10px; cursor: pointer; onclickmodifyRecord(item.Id)修改/buttonbutton typebutton stylebackground-color: #dc143c; border: none; padding: 5px 10px; cursor: pointer;删除/button/td/tr}/tbody/table!-- 上一页/下一页按钮以及页码 --div classpagination styletext-align: center; position: absolute;left:600px; top:650px; margin:5pxbutton typebutton onclicklocation.hrefUrl.Action(Index, new { page ViewBag.CurrentPage - 1 }) (ViewBag.CurrentPage 1 ? disabled : )上一页/buttonspan第 ViewBag.CurrentPage 页/共 ViewBag.TotalPages 页 /spanbutton typebutton onclicklocation.hrefUrl.Action(Index, new { page ViewBag.CurrentPage 1 }) (ViewBag.CurrentPage ViewBag.TotalPages ? disabled : )下一页/button/divscript srchttps://code.jquery.com/jquery-3.6.0.min.js/scriptscript// 监听按钮点击事件$(#refreshButton).on(click, function () {// 获取输入框和选择框的值var name $(#nameInput).val();var className $(#classInput).val();var age $(#ageInput).val();var gender $(#genderSelect).val();var under18 $(#under18Checkbox).is(:checked);// 发送Ajax请求$.ajax({url: /Main/Index, // 后端处理方法的URLmethod: GET, // 使用GET方法发送请求data: {name: name,className: className,age: age,gender: gender,under18: under18},success: function (response) {// 请求成功后的处理逻辑console.log(后端处理成功);},error: function (xhr, status, error) {// 请求失败后的处理逻辑console.error(后端处理失败:, error);}});});function modifyRecord(id) {// 创建一个包含ID的对象POST请求的特点var data { id: id };// 发送POST请求$.ajax({url: /Main/Index, // 根据你的实际路由进行修改type: POST,contentType: application/json,data: JSON.stringify(data),success: function (response) {// 处理成功响应console.log(Record modified successfully);},error: function (xhr, status, error) {// 处理错误响应console.error(Error modifying record:, error);}});}/script
/body
/html
【效果如下所示】
当然这只是个demo很多功能都没有实现只是写一下前端以及前后端是如何交互的。
