NET&Web前端-大三-员工疫情管理

简介: NET&Web前端-大三-员工疫情管理

语言和环境

1. 实现语言:C#语言。

2. 环境要求:Visual Studio 2017 + SQL Server 2014 或以上版本。

3. 实现技术:ASP.NET MVC+EF(100 分)或 ASP.NET+三层+EF(90 分)。

4. 功能要求:不得使用支架模板生成控制器和视图,不得使用第三方工具生成实体类、持久层代码, 否则不得分。

素材




image.png



实现功能

本系统要求对员工疫情信息进行管理,具体实现功能如下:

1. 员工疫情信息首页,显示员工疫情信息列表。如图 1 所示。

image.png


image.png

要求如下:

(1)当前状态:根据员工状态显示不同颜色的通行码图片,状态为 0(已打过疫苗)则显示绿码,

状态为 1(感冒状态)则显示黄码,状态为 2(从危险地区回来)则显示红码。

(2)录入时间:按照 XXXX 年 XX 月 XX 日的格式显示录入时间

2. 点击“录入员工疫情信息”,录入员工的疫情状态,如图 2 所示

image.png


image.png

要求如下:

(1)使用单选按钮录入性别信息。

(2)当前状态下拉框中分为三种不同的状态:“已接种疫苗”,“感冒状态”,“从危险地区回来”。

(3)MVC 中录入时间使用日期控件实现输入

(4)点击“添加”按钮,需进行表单验证,其中,姓名、家庭地址、录入时间必须输入,如图 3 所

示;添加成功后跳转到员工疫情信息列表页面

image.png


image.png

(5)点击取消返回到员工疫情信息列表页面


数据库设计

1. 创建数据库(ManageDB)。

2. 创建员工信息表(tb_user),信息表结构见表 1。

image.png


image.png

具体要求及推荐实现步骤

1. 按以上数据库要求建库、建表,并添加测试数据至少 5 条,如图 4 所示。

image.png


image.png

2. 搭建系统框架


(1)正确创建项目(MVC 或者 ASP.NET)。

(2)创建实体数据模型。

(3)创建控制器、视图(或者三层)。

3. 首页数据的展示

(1)当前状态:根据员工状态显示不同颜色的通行码图片,状态为 0(已打过疫苗)则显示绿码,状态

为 1(感冒状态)则显示黄码,状态为 2(从危险地区回来)则显示红码。

(2)录入时间:按照 XXXX 年 XX 月 XX 日的格式显示录入时间

(3)MVC 模式表格标题采用模型注解方式展示

4. 录入员工疫情信息:

(1)使用单选按钮录入性别信息。

(2)当前状态下拉框中分为三种不同的状态:“已接种疫苗”,“感冒状态”,“从危险地区回来”。

(3)MVC 中录入时间使用日期控件实现输入,可使用模型注解中的数据类型实现

(4)点击“添加”按钮,需进行表单验证,其中,姓名、家庭地址和录入时间必须输入;MVC 模式采用

模型注解方式实现验证;添加成功后跳转到员工疫情信息列表页面

(5)点击取消返回到员工疫情信息列表页面

image.png

数据库创建

创建数据库-这里使用的是Navicat

image.png

创建tb_user表,这里的id一定要点上主键以及标识,钥匙代表主键,标识代表自增。

image.png

image.png


添加check约束


image.png

添加数据

image.png

建表sql

CREATE TABLE [dbo].[tb_user] (
[id] int NOT NULL IDENTITY(1,1) ,
[Name] varchar(20) NULL ,
[Gender] varchar(10) NULL ,
[Address] varchar(70) NULL ,
[Status] int NOT NULL ,
[UpdateTime] date NOT NULL 
)
GO
DBCC CHECKIDENT(N'[dbo].[tb_user]', RESEED, 8)
GO
-- ----------------------------
-- Records of tb_user
-- ----------------------------
SET IDENTITY_INSERT [dbo].[tb_user] ON
GO
INSERT INTO [dbo].[tb_user] ([id], [Name], [Gender], [Address], [Status], [UpdateTime]) VALUES (N'1', N'张三', N'男', N'***省***市***街道', N'0', N'2021-08-21');
GO
INSERT INTO [dbo].[tb_user] ([id], [Name], [Gender], [Address], [Status], [UpdateTime]) VALUES (N'5', N'李四', N'女', N'***省***市***街道', N'1', N'2021-08-22');
GO
INSERT INTO [dbo].[tb_user] ([id], [Name], [Gender], [Address], [Status], [UpdateTime]) VALUES (N'6', N'王五', N'男', N'***省***市***街道', N'2', N'2021-08-23');
GO
INSERT INTO [dbo].[tb_user] ([id], [Name], [Gender], [Address], [Status], [UpdateTime]) VALUES (N'7', N'赵六', N'男', N'***省***市***街道', N'1', N'2021-08-20');
GO
INSERT INTO [dbo].[tb_user] ([id], [Name], [Gender], [Address], [Status], [UpdateTime]) VALUES (N'8', N'钱七', N'男', N'***省***市***街道', N'0', N'2021-08-21');
GO
SET IDENTITY_INSERT [dbo].[tb_user] OFF
GO
-- ----------------------------
-- Indexes structure for table tb_user
-- ----------------------------
-- ----------------------------
-- Primary Key structure for table [dbo].[tb_user]
-- ----------------------------
ALTER TABLE [dbo].[tb_user] ADD PRIMARY KEY ([id])
GO
-- ----------------------------
-- Checks structure for table [dbo].[tb_user]
-- ----------------------------
ALTER TABLE [dbo].[tb_user] ADD CHECK (([Status]=(0) OR [Status]=(1) OR [Status]=(2)))
GO


项目创建

image.png

image.png



引入EF


image.png


新建sqlserver数据库链接

image.png


image.png



引入单表


image.png


引入完毕


image.png


编码

需要使用的对象【ManageDBEntities】


image.png


创建控制器


image.png


引入命名空间以及使用EF进行数据查询。


image.png


添加视图



image.png


image.png


遍历视图以及生成样式

@{
    ViewBag.Title = "Index";
}
<h2>员工疫情状态信息</h2>
<a>录入员工疫情信息</a>
<table class="table table-bordered">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>家庭地址</th>
        <th>当前状态</th>
        <th>录入时间</th>
    </tr>
    @foreach (var item in ViewBag.list)
    {
        <tr>
            <td>@item.id</td>
            <td>@item.Name</td>
            <td>@item.Gender</td>
            <td>@item.Address</td>
            <td>@item.Status</td>
            <td>@item.UpdateTime.ToString("yyyy年MM月dd日")</td>
        </tr>
    }
</table>


image.png


修改显示图片

引入三张状态图片


image.png


编码处理


@{
    ViewBag.Title = "Index";
}
<h2>员工疫情状态信息</h2>
<a>录入员工疫情信息</a>
<table class="table table-bordered">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>家庭地址</th>
        <th>当前状态</th>
        <th>录入时间</th>
    </tr>
    @foreach (var item in ViewBag.list)
    {
        <tr>
            <td>@item.id</td>
            <td>@item.Name</td>
            <td>@item.Gender</td>
            <td>@item.Address</td>
            <td>
                @if (item.Status == 0)
                {
                    <img src="~/img/green.png" width="30"/>
                }
                else if (item.Status == 1)
                {
                    <img src="~/img/yellow.png" width="30"/>
                }
                else
                {
                    <img src="~/img/red.png" width="30"/>
                }
            </td>
            <td>@item.UpdateTime.ToString("yyyy年MM月dd日")</td>
        </tr>
    }
</table>


image.png


添加页面与添加函数编码

/// <summary>
/// 添加页面
/// </summary>
/// <returns></returns>
public ActionResult AddInfoPage() {
    return View();
}
/// <summary>
/// 添加函数
/// </summary>
/// <param name="tb"></param>
/// <returns></returns>
public ActionResult AddInfo(tb_user tb) {
    using (ManageDBEntities db = new ManageDBEntities())
    {
        db.tb_user.Add(tb);
        db.SaveChanges();
    }
    return Redirect("~/Manage/Index");
}

添加页面视图


image.png


视图编码

@{
    ViewBag.Title = "AddInfoPage";
}
<h2>员工疫情信息录入</h2>
<hr/>
<form action="~/Manage/AddInfo" method="get">
    <table width="500">
        <tr>
            <td>姓名</td>
            <td><input type="text" class="form-control" name="Name" required/></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" value="男" name="Gender" />男
                <input type="radio" value="女" name="Gender" />女
            </td>
        </tr>
        <tr>
            <td>家庭地址</td>
            <td>
                <input type="text" name="Address" class="form-control" required/>
            </td>
        </tr>
        <tr>
            <td>当前状态</td>
            <td>
                <select name="Status" class="form-control" required>
                    <option>已接种疫苗</option>
                    <option>感冒状态</option>
                    <option>从危险地区回来</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>录入时间</td>
            <td>
                <input type="date" name="UpdateTime" class="form-control" required/>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" class="btn btn-default"/>
                <a href="~/Manage/Index">取消</a>
            </td>
        </tr>
    </table>
</form>


image.png


信息添加测试

image.png


添加成功

image.png


非空提示


image.png


完毕。

相关文章
|
25天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
38 3
|
10天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
22天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
26天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
25 3
|
26天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
37 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
56 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
27天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
42 0
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
184 0
|
2月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
162 0
下一篇
无影云桌面