【net6】一文跑通前后端以及数据库，简单的天气系统管理（保姆入门）

一、前言

使用Vue3为前端，.net6为后端，连接postgreSQL数据库，连通前后端与数据库，实现最基础的天气管理系统的增删改查。

二、内容

目录

一、前言

二、内容

2.1 后端部分

2.1.1 在VS里面使用此模板创建项目

2.1.2 安装下列依赖包

2.1.3 目录展示

2.1.3.1 控制层代码

2.1.3.2 实体类代码

2.1.3.3 接口代码

2.1.3.4 接口实现代码

2.1.3.5 配置相关代码

2.2 数据库部分

2.3 前端部分

2.3.1 通过Vite安装Vue

2.3.2 页面代码部分

2.3.3 页面接口部分

2.4 实现

三、总结

---

2.1 后端部分

2.1.1 在VS里面使用此模板创建项目

此模板实现了基本的控制器,记住使用.net6创建

2.1.2 安装下列依赖包

第一个是ORM框架，第二个是连接数据库所需要的包，第三个是已有的包不用管，第四个是可以帮助后端字段名与数据库字段映射匹配的包

<Project Sdk="Microsoft.NET.Sdk.Web"><PropertyGroup><TargetFramework>net6.0</TargetFramework><Nullable>enable</Nullable><ImplicitUsings>enable</ImplicitUsings></PropertyGroup><ItemGroup><PackageReference Include="Dapper" Version="2.1.66" /><PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="6.0.3" /><PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" /><PackageReference Include="System.ComponentModel.Annotations" Version="5.0.0" /></ItemGroup></Project>

2.1.3 目录展示

2.1.3.1 控制层代码

using Microsoft.AspNetCore.Mvc;
using WebApi.Models;
using WebApi.Repositories;namespace WebApi.Controllers
{[ApiController][Route("[controller]")]public class WeatherForecastController : ControllerBase{private readonly IWeatherRepository _repository;public WeatherForecastController(IWeatherRepository repository){_repository = repository;}// 获取全部天气预报数据[HttpGet("getWeather", Name = "GetWeatherForecast")]public async Task<ActionResult<IEnumerable<WeatherForecast>>> Get(){try{var data = await _repository.GetAllAsync();Console.WriteLine($"数据库获取列表如下{data}");return Ok(data);}catch (Exception ex){return StatusCode(500, new { error = "获取数据失败", message = ex.Message });}}// 根据 ID 获取天气预报数据[HttpGet("getWeatherById/{id}", Name = "GetWeatherForecastById")]public async Task<ActionResult<WeatherForecast>> Get(int id){try{var weatherForecast = await _repository.GetByIdAsync(id);if (weatherForecast == null){return NotFound(new { message = $"ID {id} 不存在" });}return Ok(weatherForecast);}catch (Exception ex){return StatusCode(500, new { error = "获取数据失败", message = ex.Message });}}// 添加天气预报数据[HttpPost("addWeather", Name = "AddWeatherForecast")]public async Task<ActionResult<WeatherForecast>> Post([FromBody] WeatherForecast weatherForecast){if (weatherForecast == null || !ModelState.IsValid){return BadRequest(new { message = "数据无效" });}try{await _repository.AddAsync(weatherForecast);return CreatedAtAction(nameof(Get), new { id = weatherForecast.Id }, weatherForecast);}catch (Exception ex){return StatusCode(500, new { error = "添加数据失败", message = ex.Message });}}// 更新天气预报数据[HttpPut("updateWeatherById/{id}", Name = "UpdateWeatherForecast")]public async Task<ActionResult> Put(int id, [FromBody] WeatherForecast weatherForecast){if (weatherForecast == null || !ModelState.IsValid){return BadRequest(new { message = "数据无效" });}if (id != weatherForecast.Id){return BadRequest(new { message = "ID 不匹配" });}try{var updated = await _repository.UpdateAsync(weatherForecast);if (!updated){return NotFound(new { message = $"ID {id} 不存在" });}return Ok(new { message = "更新成功" });}catch (Exception ex){return StatusCode(500, new { error = "更新数据失败", message = ex.Message });}}// 删除天气预报数据[HttpDelete("deleteWeatherById/{id}", Name = "DeleteWeatherForecast")]public async Task<ActionResult> Delete(int id){try{var deleted = await _repository.DeleteAsync(id);if (!deleted){return NotFound(new { message = $"ID {id} 不存在" });}return Ok(new { message = "删除成功" });}catch (Exception ex){return StatusCode(500, new { error = "删除数据失败", message = ex.Message });}}}
}

2.1.3.2 实体类代码

前端小写字母，映射到后端需要使用JsonPropertyName保证映射的准确，后端tempC需要使用Column来映射数据库的temp_c

using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json.Serialization;namespace WebApi.Models
{public class WeatherForecast{[JsonPropertyName("id")]public int? Id { get; set; }[JsonPropertyName("city")]public string? City { get; set; }[JsonPropertyName("tempC")][Column("temp_c")]public int TempC { get; set; }[JsonPropertyName("date")]public DateTime Date { get; set; }[JsonPropertyName("description")]public string? Description { get; set; }}
}

2.1.3.3 接口代码

using System.Collections.Generic;
using System.Threading.Tasks;
using WebApi.Models;namespace WebApi.Repositories
{public interface IWeatherRepository{Task<IEnumerable<WeatherForecast>> GetAllAsync();Task<WeatherForecast> GetByIdAsync(int id);Task AddAsync(WeatherForecast forecast);Task<bool> UpdateAsync(WeatherForecast forecast);Task<bool> DeleteAsync(int id);}
}

2.1.3.4 接口实现代码

@是占位符，这些值会在查询执行时替换掉相应的占位符。

using WebApi.Models;
using Npgsql;
using Dapper;namespace WebApi.Repositories
{public class WeatherRepository : IWeatherRepository{private readonly NpgsqlConnection _connection;public WeatherRepository(NpgsqlConnection connection){_connection = connection;}public async Task<IEnumerable<WeatherForecast>> GetAllAsync(){const string sql = "SELECT * FROM weather ORDER BY id ASC";return await _connection.QueryAsync<WeatherForecast>(sql);}public async Task<WeatherForecast> GetByIdAsync(int id){const string sql = "SELECT * FROM weather WHERE id = @Id";return await _connection.QueryFirstOrDefaultAsync<WeatherForecast>(sql, new { Id = id });}public async Task AddAsync(WeatherForecast forecast){const string sql = @"INSERT INTO weather (city, temp_c, date, description)VALUES (@City, @TempC, @Date, @Description)RETURNING id";var id = await _connection.ExecuteScalarAsync<int>(sql, forecast);forecast.Id = id;}public async Task<bool> UpdateAsync(WeatherForecast forecast){const string sql = @"UPDATE weatherSET city = @City, temp_c = @TempC, date = @Date, description = @DescriptionWHERE id = @Id";var rowsAffected = await _connection.ExecuteAsync(sql, forecast);return rowsAffected > 0;}public async Task<bool> DeleteAsync(int id){const string sql = "DELETE FROM weather WHERE id = @Id";var rowsAffected = await _connection.ExecuteAsync(sql, new { Id = id });return rowsAffected > 0;}}
}

2.1.3.5 配置相关代码

包含数据库配置，swagger文档配置，字段映射配置等

public static class StringExtensions
{public static string ToSnakeCase(this string str){return string.Concat(str.Select((c, i) => i > 0 && char.IsUpper(c) ? "_" + c : c.ToString())).ToLower();}
}

using Microsoft.OpenApi.Models;
using Npgsql;
using Dapper;
using WebApi.Repositories;using System.ComponentModel.DataAnnotations.Schema;
using WebApi.Models;// 自定义类型映射器（支持 ColumnAttribute + 智能命名转换）
var typeMapper = new CustomPropertyTypeMap(typeof(WeatherForecast),(type, columnName) =>{// 1. 先尝试通过 [Column("xxx")] 显式匹配var propWithAttribute = type.GetProperties().FirstOrDefault(prop =>{var attribute = prop.GetCustomAttributes(false).OfType<ColumnAttribute>().FirstOrDefault();return attribute?.Name == columnName;});if (propWithAttribute != null)return propWithAttribute;// 2. 再尝试智能匹配（PascalCase -> snake_case）
#pragma warning disable CS8603 // 可能返回 null 引用。return type.GetProperties().FirstOrDefault(prop =>string.Equals(prop.Name.ToSnakeCase(), columnName, StringComparison.OrdinalIgnoreCase));
#pragma warning restore CS8603 // 可能返回 null 引用。});SqlMapper.SetTypeMap(typeof(WeatherForecast), typeMapper);var builder = WebApplication.CreateBuilder(args);// 1. 添加服务配置
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(c =>
{c.CustomOperationIds(e =>e.ActionDescriptor.AttributeRouteInfo?.Name?? $"{e.ActionDescriptor.RouteValues["controller"]}_{e.ActionDescriptor.RouteValues["action"]}");c.SwaggerDoc("v1", new OpenApiInfo{Title = "Weather API",Version = "v1",Description = "天气预报接口文档",Contact = new OpenApiContact { Name = "开发者", Email = "dev@example.com" }});
});// 2. 添加数据库连接服务（推荐使用配置文件）
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection")?? "Host=localhost;Port=5432;Database=gzcDB;Username=postgres;Password=123456";builder.Services.AddSingleton<NpgsqlConnection>(sp =>new NpgsqlConnection(connectionString));// 3. 添加 Dapper 仓储服务
builder.Services.AddScoped<IWeatherRepository, WeatherRepository>();// 4. 添加跨域策略
builder.Services.AddCors(options => {options.AddPolicy("AllowAll", policy => {policy.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();});
});var app = builder.Build();// 5. 添加中间件
app.UseSwagger();
app.UseSwaggerUI(c =>
{c.SwaggerEndpoint("/swagger/v1/swagger.json", "Weather API v1");c.DisplayOperationId();
});app.UseHttpsRedirection();
app.UseAuthorization();
app.UseCors("AllowAll");// 6. 添加 API 路由
app.MapControllers();
app.Run();

2.2 数据库部分

1. 安装PGSQL数据库

网上安装教程很详细，去官网安装即可

2. 打开pgAdmin

要启动数据库不然会报错connection timeout expired

 3. 打开pgAdmin使用查询工具建表

CREATE TABLE weather (id SERIAL PRIMARY KEY,city TEXT,temp_c INTEGER NOT NULL,date TIMESTAMP NOT NULL,  -- 包含时间部分（如 "2025-06-01 14:30:00"）description TEXT
);

2.3 前端部分

2.3.1 通过Vite安装Vue

可参考其他博主的教程：vue3 + vite 安装配置及项目创建_vite安装-CSDN博客

2.3.2 页面代码部分

如图所示,创建项目完后可以贴上代码

<script setup>
import { ref, onMounted } from 'vue'
import * as weatherApi from '../api/weather'// 当前操作的数据对象
const weatherForecast = ref({id: null,city: '',tempC: '', date: '',description: ''
})// 搜索用的 id
const searchId = ref('')// 存储列表数据
const weatherList = ref([])// 页面加载完成后自动执行
onMounted(async () => {await loadAll()
})// 加载所有天气信息
async function loadAll() {try {const data = await weatherApi.getWeather();weatherList.value = data.map(item => ({...item,date: formatDate(item.date)}));} catch (err) {console.error('加载天气数据失败', err);}
}
function handleEdit(item) {weatherForecast.value = {...item,date: formatDate(item.date)};
}function formatDate(dateStr) {if (!dateStr) return '';const date = new Date(dateStr);const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;
}// 根据 ID 查询
async function getById() {if (!searchId.value) return alert('请输入 ID')try {const data = await weatherApi.getWeatherById(searchId.value)if (data) {weatherForecast.value = {...data,date: formatDate(data.date)};} else {alert('未找到该记录')}} catch (err) {alert('获取失败')}
}// 添加天气
async function add() {if (!weatherForecast.value.city || !weatherForecast.value.tempC) {alert('请填写城市和温度')return}try {const res = await weatherApi.addWeather({...weatherForecast.value,date: formatDate(weatherForecast.value.date)})alert('添加成功')loadAll()resetForm()} catch (err) {alert('添加失败')}
}// 更新天气
async function update() {if (!weatherForecast.value.id) {alert('请选择要更新的记录')return}try {await weatherApi.updateWeatherById(weatherForecast.value.id, weatherForecast.value)alert('更新成功')loadAll()} catch (err) {alert('更新失败')}
}// 删除天气
async function remove(id) {if (confirm('确定删除？')) {try {await weatherApi.deleteWeatherById(id)alert('删除成功')loadAll()} catch (err) {alert('删除失败')}}
}// 表单重置
function resetForm() {weatherForecast.value = {id: null,city: '',tempC: 0,date: formatDate(new Date()),description: ''}
}
</script><template><div class="weather-container"><h2>🌤️ 天气预报管理系统</h2><!-- 查询 --><div class="input-group"><input v-model="searchId" placeholder="输入ID" /><button @click="getById">🔍 查询</button></div><!-- 表单 --><div class="form"><div class="form-row"><label>城市：</label><input v-model="weatherForecast.city" /></div><div class="form-row"><label>温度：</label><input v-model.number="weatherForecast.tempC" /></div><div class="form-row"><label>日期：</label><input type="date" v-model="weatherForecast.date" /></div><div class="form-row"><label>描述：</label><input v-model="weatherForecast.description" /></div><div class="form-actions"><button @click="add">➕ 添加</button><button @click="update">🔄 更新</button></div></div><!-- 数据展示 --><div class="list"><table><thead><tr><th>ID</th><th>城市</th><th>温度</th><th>日期</th><th>描述</th><th>操作</th></tr></thead><tbody><tr v-for="item in weatherList" :key="item.id"> <!-- 使用 item.id --><td>{{ item.id }}</td><td>{{ item.city }}</td><td>{{ item.tempC }} ℃</td><td>{{ item.date }}</td><td>{{ item.description }}</td><td><button @click="handleEdit(item)">Edit</button><button @click="remove(item.id)">Delete</button> <!-- 使用 item.id --></td></tr></tbody></table></div></div>
</template><style scoped>
.weather-container {max-width: 800px;margin: 20px auto;padding: 20px;border-radius: 8px;background-color: #f9f9f9;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}.input-group {display: flex;gap: 10px;margin-bottom: 20px;
}.input-group input {flex: 1;padding: 8px;font-size: 14px;
}.input-group button {padding: 8px 16px;background-color: #007bff;color: white;border: none;cursor: pointer;border-radius: 4px;
}.form .form-row {display: flex;align-items: center;margin-bottom: 10px;
}.form .form-row label {width: 80px;font-weight: bold;
}.form .form-row input {flex: 1;padding: 8px;font-size: 14px;
}.form-actions {margin-top: 15px;
}.form-actions button {margin-right: 10px;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}.form-actions button:nth-child(1) {background-color: #28a745;color: white;
}.form-actions button:nth-child(2) {background-color: #ffc107;color: black;
}.list table {width: 100%;border-collapse: collapse;margin-top: 20px;
}.list th,
.list td {padding: 12px;text-align: left;border-bottom: 1px solid #ddd;
}.list th {background-color: #007bff;color: white;
}.list button {margin-right: 5px;padding: 6px 10px;border: none;border-radius: 4px;cursor: pointer;
}.list button:nth-child(1) {background-color: #007bff;color: white;
}.list button:nth-child(2) {background-color: #dc3545;color: white;
}
</style>

2.3.3 页面接口部分

import axios from 'axios';
// 定义统一的 API 前缀
const API_PREFIX = '/api/WeatherForecast';export async function getWeather() {try {const res = await axios.get(`${API_PREFIX}/getWeather`);console.log(res.data);return res.data;} catch (err) {return await Promise.reject(err);}
}export async function getWeatherById(id) {try {const res = await axios.get(`${API_PREFIX}/getWeatherById/${id}`);console.log(res.data);return res.data;} catch (err) {return await Promise.reject(err);}
}export async function addWeather(weatherForecast) {try {const res = await axios.post(`${API_PREFIX}/addWeather`, weatherForecast);console.log(res.data);return res.data;} catch (err) {return await Promise.reject(err);}
}export async function updateWeatherById(id, weatherForecast) {try {const res = await axios.put(`${API_PREFIX}/updateWeatherById/${id}`, weatherForecast);console.log(res.data);return res.data;} catch (err) {return await Promise.reject(err);}
}export async function deleteWeatherById(id) {try {const res = await axios.delete(`${API_PREFIX}/deleteWeatherById/${id}`);console.log(res.data);return res.data;} catch (err) {return await Promise.reject(err);}
}

2.4 实现

截几张图，可以自己跑通后试试

三、总结

我们通过此小项目，跑通前端后端数据库，为将来更深入的学习奠定基础