使用Dapper.net+c#+javascript+html5写一个问题记录的页面

向上的车轮

于 2024-09-27 20:24:35 发布

阅读量329

点赞数 2

分类专栏：笔记文章标签： .net c# javascript

本文链接：https://blog.csdn.net/ChailangCompany/article/details/142601707

版权

笔记专栏收录该内容

240 篇文章 5 订阅

订阅专栏

要创建一个使用Dapper.net、C#、JavaScript和HTML5的问题记录小系统，我们需要从设计数据库模型开始，然后逐步实现后端API接口和前端页面。以下是一个简化的步骤和代码示例，用于指导如何构建这样的系统。

1. 设计数据库模型

首先，我们需要设计一个数据库模型来存储问题记录。这里假设我们有一个名为Questions的表，包含字段Id（主键）、Title（标题）、Description（描述）和CreatedAt（创建时间）。

CREATE TABLE Questions (
    Id INT IDENTITY(1,1) PRIMARY KEY,
    Title NVARCHAR(255) NOT NULL,
    Description TEXT NOT NULL,
    CreatedAt DATETIME NOT NULL
);

2. 创建C#后端项目并引入Dapper.net

使用Visual Studio或.NET CLI创建一个ASP.NET Core Web API项目，并通过NuGet安装Dapper库。

安装Dapper:

Install-Package Dapper

3. 实现后端API接口

在ASP.NET Core项目中，我们需要创建控制器来处理问题的增删改查操作。以下是一个简化的QuestionsController示例：

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using Dapper;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("[controller]")]
public class QuestionsController : ControllerBase
{
    private readonly string _connectionString = "YourConnectionStringHere";

    [HttpGet]
    public IActionResult GetQuestions()
    {
        using (var connection = new SqlConnection(_connectionString))
        {
            var sql = "SELECT * FROM Questions";
            var questions = connection.Query<Question>(sql).ToList();
            return Ok(questions);
        }
    }

    // 其他API方法（POST, PUT, DELETE）类似实现...

    // 示例Question类
    public class Question
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime CreatedAt { get; set; }
    }
}

4. 创建HTML5前端页面

在前端，我们可以使用HTML5和JavaScript（可能还有AJAX）来构建用户界面和交互逻辑。这里不展示完整的HTML页面，但提供一个基本的AJAX调用示例，用于从后端获取问题列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问题记录系统</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'http://localhost:5000/questions',
                type: 'GET',
                success: function(data) {
                    var questions = $('#questions');
                    questions.empty(); // 清空现有问题
                    data.forEach(function(question) {
                        questions.append('<div>' + question.Title + '</div>');
                    });
                },
                error: function() {
                    alert('无法加载问题列表！');
                }
            });
        });
    </script>
</head>
<body>
    <div id="questions"></div>
</body>
</html>