当前位置：首页 > news >正文

C#WebMVCLayui实战之《新闻管理系统》（适合初学者）

news 2025/6/6 10:50:04

注明：来自某站的老师，我自己看自己学，写一些自己的想法和见解。

新闻管理系统

一、登录界面（用session检测防止直接输入网址进入缓存检测）

注册界面（通过随机数生成验证码验证码验证登录并写入数据库）

管理员登录界面（通过特定账号进入并且可以添加删除用户退出后自动清除session）

用户登录后新闻列表展示（可以编辑删除）

点击标题后跳转界面

编辑功能实现

发布新闻

具体代码实现解释和实现

打开sql-新建数据库-新建表

1.Member（ID标识规范改成是 Name是新闻发布者名 InsertDate系统插入时间默认值或绑定改为getdate（））-点左上角保存设置表名字

2.News（Title新闻标题 Text新闻内容ntext为长文本 MemberID默认改为0 MemberName（新闻作者）关联Member发布者名称）

打开VS

C# windows web ASP.NET WEB应用程序（.net Framework）（往下拉）-空 mvc点上 https不要

右键Models添加新项选择数据ADO.net实体数据模型（名称改为NewsDBModel）选择来自数据库的EF设计器-选择数据源和连接到数据库（测试连接）下一步把表勾上-完成（Models就生成了CS文件）

NewsDBEntities1 : DbContext访问数据库用的代码

《《《《《《《《《《对于Models的设计》》》》》》》》》》》》》》》》》》》

Models（Models（数据） Controllers把数据放到Views显示）下新建类IProvider （用于对数据库增删改查）然后改为

public interface IProvider<T>where T:class{

//查询所有记录

List<T> Select();

//插入一条记录

int Insert(T t);

//更新一条记录

int Update(T t);

//删除一条记录

int Delete(T t);

}

因为一个类只能对一个表操作所以两个表需要用两个类进行操作（两个类分别对应两个表的操作类）

新建类

using System.Web;在接口要引用

public class MeberProvider:IProvider<Member>{

此时点提示生成接口功能

}

public class NewsProvider:IProvider<News>{

此时点提示生成接口功能

}

然后将数据库映射进类（MeberProvider和NewsProvider） private NewsDBEntities1 db = new NewsDBEntities1(); 用db操作，NewsDBEntities1为之前生成的实体类名

《以下操作仅在NewsProvider中操作》

将类里Select方法改成return db.News.ToList(); (这个操作是在NewsProvider中操作)

将类里Insert方法改为

public int Insert(Member t)

{

if (t == null) return 0;

db.Member.Add(t);

int count = db.SaveChanges();

return count;

}

public int Update(News t)

{

if (t == null) return 0;

var model = db.News.ToList().FirstOrDefault(item => item.ID == t.ID); （是否item的id全等于t的id）

if (model == null) return 0; （如果没找着就代表数据没变化）

model.Title = t.Title; （否则更改数据 Title和Text是数据库原有的列）

model.Text = t.Text;

int count = db.SaveChanges(); （更改的时候必须调用这个函数才能更改数据！！！！！！！！）

return count;

}

（MeberProvider里只需要update model.Password = t.Password;）

删除功能

public int Delete(News t)

{

if (t == null) return 0;

var model = db.News.ToList().FirstOrDefault(item => item.ID == t.ID);

if (model == null) return 0;

db.News.Remove(model);

int count = db.SaveChanges(); （更改的时候必须调用这个函数才能更改数据！！！！！！！！）

return count;

}

《以下是对Controllers进行操作》

右键Controllers新建控制器空名字为NewsController.cs（会在view中自动生成一个空的News文件）！！！！！！！！

using System.Web.Mvc;

public class NewsController : Controller

{

}记得要要继承

在NewsController.cs加一个登录页面

public ActionResult Login()

{

return View();

} 选中Login（）右键添加视图 mvc5视图确定

然后在APP_Start中选用把action改为Login controller="News"

《以下是登录页面设计》

搜索layui管理系统登录页面模板_墨鱼部落格

https://www.moyublog.com/search-0-31518.html

右键查看页面源代码然后找到 <li class="remove_frame"><a href="http://netdisk.moyublog.com/code_demo/cyjpf1b6ksodg/index.html" title="移除框架"></a></li>

然后打开网页查看源代码复制

ViewBag.Title = "Login";

}

记住这个不要动

https://www.layui.site/下载layui的框架

在项目中新建文件夹JS,css css放在css里面 js放入js里面对JS进行右键现有项添加

(!!!!!!!!!!!!最初新建MVC项目可以找到Scripts要的css文件在哪!!!!!!!!!!!!!)

页面中的固有元素在layout中设置

添加背景图（新建文件夹把图片放入）

body {

background-image: url('../../Images/背景图.jpeg');

background-position: 14px 14px;

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

}

《登录按钮设置》

在控制器里加方法验证账号密码

public ActionResult CheekUser()

{

string username = Request["username"].ToString();

string password = Request["password"].ToString();

MeberProvider meberProvider = new MeberProvider();

var model = meberProvider.Select().FirstOrDefault(t=>t.Name==username && t.Password==password);

if(model!=null)

{

return Content("登录成功");

}

else {

return Content("登录失败");

}

在login.cshtml

$(function () {

$("#submit").click(function () { //获取提交数据要加# <button class="layui-btn layui-btn-bypercent-left btn" id="submit" type="button">登录</button>根据这个来的submit

$.ajax({

url: '/News/CheekUser', //控制器方法

type: 'post',

data: {

'username': $('#username').val(), ！！！！！！！！！！！！！获取数据都要加＃

'password': $(#'password').val(),

success: function(message){

if(message = "登录成功") { 如果传过来的message为登录成功则跳转页面

location.href = '/News/Index';

}

else{

var text = alert("用户密码错误");

document.write(text);

location.href = '/News/Login';

}

});

</script>

添加index视图

《设计index界面》

将layout界面改成用layui的类

@RenderBody()

</div>

找首页模板方法https://www.layui.site/demo/layout-admin.html?from=demo 右键查看源代码然后进行复制太强了！

用原页面的英文复制在源代码里ctrl+f找到需要替代的如果不知道删除的东西是哪块代码就查看源代码然后用鼠标放上面查找

将layui.site模板加入页面对应位置

添加数据库数据：进入数据库加数据对News表的text加入新闻消息 title加入新闻标题 InsertDate不用写因为数据库写了getdate（）会自动获取时间 MemberID写1 MemberName写admin

显示数据

进入Controllers的Index（）

public ActionResult Index()

{

List<News> news = new NewsProvider().Select();

return View(news);

}

返回news给前端 <<<<<<<控制器里返回的东西可以在前端使用>>>>>>

前端设计

<tbody>

@foreach (刘一帆的课程设计.Models.News news in Model)

{

<tr>

<td>@news.MemberName</td>

<td>@news.InsertDate</td>

<td>@news.Title</td>

<td>

@Html.ActionLink("删除", "DeleteNews", new{ID = news.ID}, new { onclick = "return confirm('是否确认删除')" }) （点击删除的时候提交到DeleteNews方法并且弹出提示框）

@Html.ActionLink("编辑", "EditeNews", new { ID = news.ID }, new { onclick = "return confirm('是否确认编辑')" }) 用ID查找就是为了防止所定位的数据过长系统无法定位

</td>

</tr>

}

</tbody>

后端设计

public ActionResult DeleteNews(int ID)

{

var newsProvider = new NewsProvider();

var model = newsProvider.Select().FirstOrDefault(item => item.ID == ID);

if (model != null)

{

newsProvider.Delete(model);

}

return RedirectToAction("Index");

}

编辑功能设计

public ActionResult EditeNews(int ID)

{

var newsProvider = new NewsProvider();

var model = newsProvider.Select().FirstOrDefault(item => item.ID == ID);

if (model != null)

{

return View(model); 向页面传入model

}

return RedirectToAction("Index");

}

新建页面在控制器中选中EditNews方法右键生成视图确定

在主页设计跳转可以实现这几个功能每个页面都要设置让它固定在左边

创建视图方法进入Controllers创建方法然后右键创建视图

把登录的用户名反馈给页面在登录成功的地方加入

public ActionResult CheekUser()

{

string username = Request["username"].ToString();

string password = Request["password"].ToString();

MeberProvider meberProvider = new MeberProvider();

var model = meberProvider.Select().FirstOrDefault(t => t.Name == username && t.Password == password);

if (model != null)

{

Session["username"] = model.Name;

Session["userId"] = model.ID;

return Content("登录成功");

}

else

{

return Content("登录失败");

}

前端中加入value='@Session["userName"]'

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - 新闻管理系统</title>

</head>

<body>

@RenderBody()

</div>

</body>

</html>

通过引入layui.css

if (Session["userName"] == null) return View("Login"); 在有返回视图的控制器方法中加入这句话可以让其在没有userName的情况下无法访问视图

@Html.ActionLink("编辑", "EditeMember", new { ID = member.ID }, new { onclick = "return confirm('是否确认编辑')" }) 编辑用户还未写

EF-使用EF更新实体类（手动更新数据库后需要重新更新实体类）

数据库搭建代码：

CREATE TABLE [dbo].[News] (
    [ID]         INT            IDENTITY (1, 1) NOT NULL,
    [Title]      NVARCHAR (256) NOT NULL,
    [Text]       NTEXT          NOT NULL,
    [InsertDate] DATETIME       CONSTRAINT [DF_News_InsertDate] DEFAULT (getdate()) NOT NULL,
    [MemberID]   INT            CONSTRAINT [DF_News_MemberID] DEFAULT ((0)) NOT NULL,
    [MemberName] NVARCHAR (50) NOT NULL,
    CONSTRAINT [PK_News] PRIMARY KEY CLUSTERED ([ID] ASC)
);
CREATE TABLE [dbo].[Member] (
    [ID]         INT           IDENTITY (1, 1) NOT NULL,
    [Name]       NVARCHAR (50) NOT NULL,
    [Password]   NVARCHAR (50) NOT NULL,
    [InsertDate] DATETIME      CONSTRAINT [DF_Member_InsertDate] DEFAULT (getdate()) NOT NULL,
    CONSTRAINT [PK_Member] PRIMARY KEY CLUSTERED ([ID] ASC)
);
CREATE TABLE [dbo].[Manager] (
    [ID]         INT           IDENTITY (1, 1) NOT NULL,
    [Name]       NVARCHAR (50) NOT NULL,
    [Password]   NVARCHAR (50) NOT NULL,
);