基于ASP.NET+MySQL实现待办任务清单系统

基于ASP.NET的ToDoList的设计与实现

一、前言

1.1 实验目的

使学生综合使用所学过的ASP.NET网络编程知识,掌握网络环境程序设计的基本概念;结合实际的操作和设计,巩固课堂学习内容,掌握网络环境编程的特点、原理和技术;将理论与实际相结合,应用现有的网络编程软件,结合数据库管理系统软件,规范、科学地完成一个小型网站的设计与实现。在此基础上强化学生的实践意识、提高其实际动手能力和创新能力。

1.2 设备与环境

软件环境

  1. ASP.NET Core v3.1
  2. Mysql v8.x
  3. VUE v2.x
  4. Element-UI
  5. git/github
  6. NodeJS/npm
  7. Dotnet

开发环境

  1. Macbook(苹果系统)
  2. vscode(安装c#插件)

开发环境也可以使用Windows系统,此项目开发时我用的mac环境~

二、项目内容

2.1 项目简介

基于ASP.NET Core API 和 VUE实现的ToDoList(待办事项),前后端分离实现(使用RESTFUL规范)

2.2 项目展示

2.3 如何运行此项目

1.下载本项目

下载之后修改todos-Server/DBConnection.cs路径下的数据库配置文件,且自行导入sql文件/todos-Server/todoList.sql

2.安装前端依赖/运行前端

复制代码
cd todos-fe
npm install # 安装前端依赖
npm run serve # 运行前端项目

3.安装服务端依赖

复制代码
cd todos-Server
dotnet restore # 安装服务端依赖
dotnet run # 运行服务端项目

三、实验内容

3.1 数据库相关

数据表结构

复制代码
CREATE TABLE `items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '待办事项内容',
  `createTime` datetime NOT NULL COMMENT '创建时间',
  `overTime` datetime DEFAULT NULL COMMENT '实际完成时间',
  `expectTime` datetime DEFAULT NULL COMMENT '预期完成时间',
  `isComplete` enum('true','false') CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT 'false' COMMENT '完成状态',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

数据库操作代码单例封装

详情代码参考/todos-Server/DBConnection.cs文件

复制代码
// 连接数据库
string connstring =
    "Server=127.0.0.1;" +
    "Database=todoList;" +
    "User ID=root;" +
    "Password=123456789;";
connection = new MySqlConnection(connstring);
connection.Open();
// 数据库操作关键语句
DBConnection db = DBConnection.Instance ();
if (db.IsConnect ()) { // 连接数据库
  try {
    string sql = "DELETE FROM todoList.items WHERE id=" + id;
    MySqlCommand cmd = new MySqlCommand (sql, db.Connection);
    MySqlDataReader rdr = cmd.ExecuteReader ();
    rdr.Close ();
  } catch (Exception ex) {
    Console.WriteLine (ex.ToString ());
  }
}

3.2 接口Sql语句

新建待办事项

复制代码
string sql = "INSERT INTO todoList.items (title,expectTime,createTime) VALUES (\"" +
            title + "\",\"" +
            expectTime.ToString ("yyyy-MM-dd HH:mm:ss") + "\",\"" +
            DateTime.Now.ToString ("yyyy-MM-dd HH:mm:ss") + "\")";
          Console.WriteLine ("sql is => " + sql);

获取待办事项

复制代码
string sql = "SELECT * FROM todoList.items ORDER BY id DESC LIMIT " + (page - 1) * size + "," + size;

完成事项

复制代码
string sql = "UPDATE todoList.items SET isComplete=\"true\", overTime=\""
            + DateTime.Now.ToString ("yyyy-MM-dd HH:mm:ss") + "\""
            + "WHERE id=" + id;

删除事项

复制代码
string sql = "DELETE FROM todoList.items WHERE id=" + id;

3.3 难点重点

前后端分离导致的跨域问题

因为浏览器出于安全考虑,有同源策略。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。

那么是出于什么安全考虑才会引入这种机制呢? 其实主要是用来防止 CSRF 攻击的。简单点说,CSRF 攻击是利用用户的登录态发起恶意请求。

也就是说,没有同源策略的情况下,A 网站可以被任意其他来源的 Ajax 访问到内容。如果你当前 A 网站还存在登录态,那么对方就可以通过 Ajax 获得你的任何信息。当然跨域并不能完全阻止 CSRF。

然后我们来考虑一个问题,请求跨域了,那么请求到底发出去没有? 请求必然是发出去了,但是浏览器拦截了响应。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不会。因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。

解决方法: CORS

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

浏览器会自动进行 CORS 通信,实现 CORS 通信的关键是后端。只要后端实现了 CORS,就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。

复制代码
C#中通过中间件CORS解决,具体代码如下:
// Startup.cs文件
  
public void ConfigureServices(IServiceCollection services) {
  services.AddCors(option=>option.AddPolicy("cors", policy => policy.AllowAnyHeader().
  AllowAnyMethod().AllowCredentials().WithOrigins(new []{"http://127.0.0.1:8080"})));
}
  
public void Configure() {
  app.UseCors("cors");
}

虽然设置 CORS 和前端没什么关系,但是通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求。

简单请求

以 Ajax 为例,当满足以下条件时,会触发简单请求

使用下列方法之一:

  • GET
  • HEAD
  • POST

Content-Type 的值仅限于下列三者之一:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器; XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

复杂请求

那么很显然,不符合以上条件的请求就肯定是复杂请求了。

对于复杂请求来说,首先会发起一个预检请求,该请求是 option 方法的,通过该请求来知道服务端是否允许跨域请求。

数据列表分页

复制代码
// 服务端使用sql的limit语法进行分页处理
string sql = "SELECT * FROM todoList.items ORDER BY id DESC LIMIT " + (page - 1) * size + "," + size;
// sql is => SELECT * FROM todoList.items ORDER BY id DESC LIMIT 0,20

api接口获取列表时传入page和pageSize

分页api

前端使用分页组件

服务端返回实例

复制代码
{
    "sum": 3,
    "list": [
        {
            "id": 3,
            "title": "完成前端内容",
            "isComplete": false,
            "createTime": "2019-12-24T16:31:39",
            "overTime": null,
            "expectTime": "2019-12-24T14:31:30"
        },
        // ...
    ]
}

四、实验感悟

经过两周的ASP.NET课程设计,学习了csharp编写服务端代码,更加深入理解了语言的想通性,ASP.NET和NodeJS中有很多相似的概念,比如中间件,控制器,模型等。经过学习C#,感受到了C#作为一门优秀的静态类型语言相比于JavaScript的强势优点,更完善的代码提示和函数跳转等,感受到了JS转typeScript的必要性,使用静态类型语言可以减少代码编写过程中由于粗心造成的BUG,减少拍错时间等。还有,这次课设和同学交流了一些,强烈建议学校课设能使用git工具进行项目管理,从大一到大四,课设皆通过github托管,到大四的时候,将收获颇多。计算机系的课设文档也建议由word转向markdown编写,能很快的提高效率,并且markdown是毕业工作之后的必备能力之一。

相关推荐
程序员岳焱1 小时前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
麦兜*1 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
大只鹅2 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
梦在深巷、2 小时前
MySQL/MariaDB数据库主从复制之基于二进制日志的方式
linux·数据库·mysql·mariadb
IT_10242 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
bobz9653 小时前
动态规划
后端
stark张宇3 小时前
VMware 虚拟机装 Linux Centos 7.9 保姆级教程(附资源包)
linux·后端
Johny_Zhao3 小时前
Ubuntu系统安装部署Pandawiki智能知识库
linux·mysql·网络安全·信息安全·云计算·shell·yum源·系统运维·itsm·pandawiki
祁思妙想4 小时前
八股学习(三)---MySQL
数据库·学习·mysql