> # ♻️ 资源
> **大小:** 2.39MB
> **文档链接:**[**https://www.yuque.com/sxbn/ks/100010180**](https://www.yuque.com/sxbn/ks/100010180)
> **➡️ 资源下载:**[**https://download.csdn.net/download/s1t16/87347589**](https://download.csdn.net/download/s1t16/87347589)
> **注:更多内容可关注微信公众号【神仙别闹】,如当前文章或代码侵犯了您的权益,请私信作者删除!**
> ![qrcode_for_gh_d52056803b9a_344.jpg](https://cdn.nlark.com/yuque/0/2023/jpeg/2469055/1692147256036-49ec7e0c-5434-4963-b805-47e7295c9cbc.jpeg#averageHue=%23a3a3a3&clientId=u8fb96484-770e-4&from=paste&height=140&id=u237e511a&originHeight=344&originWidth=344&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=8270&status=done&style=none&taskId=ud96bf5f7-fe85-4848-b9c2-82251181297&title=&width=140.1999969482422)
# 基于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 项目展示
![daeaf4a1eeb8fe2f3c35c98c9a1ecd4d.png](https://cdn.nlark.com/yuque/0/2024/png/2469055/1705110723381-5e667f49-231a-4d0b-92ef-e45839ac3ec2.png#averageHue=%23807f7e&clientId=ua943cfb5-d99a-4&from=paste&height=578&id=u437d72f8&originHeight=722&originWidth=1283&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=181071&status=done&style=none&taskId=u4612e8b8-cb48-479c-bd06-7ae9f3a53e4&title=&width=1026.4)![5c6a3a78e223cd4f5636f76abea6d425.png](https://cdn.nlark.com/yuque/0/2024/png/2469055/1705110723433-4bc52df6-c03e-46a0-bd4b-d621199c9e24.png#averageHue=%23f4f2f2&clientId=ua943cfb5-d99a-4&from=paste&height=578&id=u7fc0483b&originHeight=722&originWidth=1283&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=183865&status=done&style=none&taskId=u27f8c1c5-4f1d-482e-9db1-aec4fb3710c&title=&width=1026.4)
## 2.3 如何运行此项目
1.下载本项目
下载之后修改todos-Server/DBConnection.cs路径下的数据库配置文件,且自行导入sql文件/todos-Server/todoList.sql
2.安装前端依赖/运行前端
```python
cd todos-fe
npm install # 安装前端依赖
npm run serve # 运行前端项目
```
3.安装服务端依赖
```python
cd todos-Server
dotnet restore # 安装服务端依赖
dotnet run # 运行服务端项目
```
# 三、实验内容
## 3.1 数据库相关
### 数据表结构
```sql
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文件
```java
// 连接数据库
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语句
### 新建待办事项
```c
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);
```
### 获取待办事项
```c
string sql = "SELECT * FROM todoList.items ORDER BY id DESC LIMIT " + (page - 1) * size + "," + size;
```
### 完成事项
```c
string sql = "UPDATE todoList.items SET isComplete=\"true\", overTime=\""
+ DateTime.Now.ToString ("yyyy-MM-dd HH:mm:ss") + "\""
+ "WHERE id=" + id;
```
### 删除事项
```c
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
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 属性访问。
##### 复杂请求
那么很显�
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
详情介绍:https://www.yuque.com/sxbn/ks/100010180 基于ASP.NET Core API 和 VUE实现的ToDoList(待办事项),前后端分离实现
资源推荐
资源详情
资源评论
收起资源包目录
100010180-基于ASP.NET+MySQL实现待办任务清单系统.zip (37个子文件)
todolist-asp
todos-fe
babel.config.js 220B
.eslintrc.js 5KB
src
App.vue 919B
main.js 157B
utils
request.js 303B
api.js 594B
tool.js 0B
components
ItemTable.vue 5KB
InsertForm.vue 3KB
element.js 481B
package.json 970B
public
favicon.ico 4KB
index.html 568B
package-lock.json 427KB
.gitignore 214B
README.md 320B
screenshot
翻页操作.png 387KB
新增事项+数据显示.png 381KB
完成事项.png 381KB
分页查询接口.png 28KB
新增待办事项.png 361KB
空白无数据.png 354KB
LICENSE 1KB
todos-Server
.vscode
tasks.json 1KB
launch.json 1KB
appsettings.Development.json 159B
DBConnection.cs 862B
todoList.sql 3KB
Startup.cs 2KB
Properties
launchSettings.json 765B
Program.cs 694B
apiDocs - 接口文档.html 153KB
Controllers
todosController.cs 2KB
appsettings.json 182B
Models
TodoItem.cs 6KB
todos-Server.csproj 524B
README.md 10KB
共 37 条
- 1
资源评论
- m0_655583042023-12-04感谢资源主的分享,很值得参考学习,资源价值较高,支持!
神仙别闹
- 粉丝: 2636
- 资源: 7567
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功