一个简单的日志记录的网页
前端：vue.js element ui
后端: asp.net core webapi 数据库：sqlsever orm框架 ：dapper
文章目录
前言
闲着没事用网页写个日志记录
提示：以下是本篇文章正文内容，下面案例可供参考
数据库的内容
一个表记录日期和每天内容，表注意要有主键哦GUid格式
代码如下（示例）：
go
if exists(select * from sysdatabases where name='FgzLog')
drop database FgzLog
go
create database FgzLog
go
use FgzLog
go
--日志表
create table Log_Info(
Id uniqueidentifier primary key default(newid()),
CreateTime datetime default(getdate()) ,
UpdateTime datetime default(getdate()),
LogContext varchar(max)
)
go
--insert into Log_Info(LogContext) values('今天啥也没干')
select * from Log_Info
前端实现
主要要到elementUI 的日期主键
给每个日期加了vue的点击事件
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
#TexTare{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<el-calendar>
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''" v-on:click="open(data)">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<!---模态框-->
<el-dialog
title="日志记录"
:visible.sync="dialogVisible"
width="500px"
hight="500px">
<textarea id="TexTare" v-model="message"></textarea>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" v-on:click="ConfirmAdd">确 定</el-button>
</span>
</el-dialog>
</div>
<script>
let vm=new Vue({
el:'#app',
data: {
dialogVisible: false,
message:"",
value:""
}, methods: {
open(value){
vm.value=value;
console.log(value);
this.dialogVisible=true;
axios.get("http://localhost:51360/api/Log", {params: {
context: '',
time: value.day
}}).then(Response=>{
console.log(Response.data);
vm.message=Response.data;
}).catch(error => {
console.log(error);
})
},
ConfirmAdd(){
axios.get("http://localhost:51360/api/Log", {params: {
context:vm.message,
time: vm.value.day
}}).then(Response=>{
console.log(Response.data);
vm.message=Response.data;
this.dialogVisible=false;
}).catch(error => {
console.log(error);
})
}
}
})
</script>
</body>
</html>
后端（相对重点）
数据库连接配置
connectionString（appsettings.json里面）连接的字符串大家自己在配置文件里面写哦
依赖注入和连接配置在startup类里面配置
services.AddScoped(typeof(IDapperExHelper<>), typeof(DapperExHelper<>));
services.AddDbcontext(Configuration.GetConnectionString(“connectionString”));
public static class DBContext
{
private readonly static IDbConnection _dbConnection = new SqlConnection();
public static IDbConnection DbConnection { get {
if(string.IsNullOrEmpty(_dbConnection.ConnectionString))
_dbConnection.ConnectionString= ConnectionString;
return _dbConnection;
} }
private static string _connectionString;
public static string ConnectionString
{
get => _connectionString;
set => _connectionString = value;
}
public static void AddDbcontext(this IServiceCollection services, string connectionString)
{
ConnectionString = connectionString;
//这里没有用到一次写好下次复制哈哈
services.AddScoped<IDapperHelper, DapperHelper>();
}
}
dapper扩展方法的封装
public class DapperExHelper<T> : IDapperExHelper<T> where T : BaseModel,new()
{
public T Get(decimal id)
{
return DBContext.DbConnection.Get<T>(id);
}
public IEnumerable<T> GetAll()
{
return DBContext.DbConnection.GetAll<T>();
}
public long Insert(T t)
{
return DBContext.DbConnection.Insert<T>(t);
}
public bool Update(T t)
{
return DBContext.DbConnection.Update<T>(t);
}
public bool Delete(T t)
{
return DBContext.DbConnection.Delete<T>(t);
}
public bool DeleteAll(T t)
{
return DBContext.DbConnection.DeleteAll<T>();
}
实体模型
public class BaseModel
{
// 主键叫Id的话这里可以不用加key
[Key]
public Guid Id { get; set; }
}
//这里是数据库表的名字dapper会默认查全部给表名加s该特效可以锁表名
[Table("Log_Info")]
public class LogInfo : BaseModel
{
public DateTime CreateTime { get; set; } = DateTime.Now;
public DateTime UpdateTime { get; set; } = DateTime.Now;
public string LogContext { get; set; }
}
跨域
MyAllowSpecificOrigins是这个字符串取一个有点意义的名字即可
builder.WithOrigins里面以数组形式配置允许请求的地址
#region 跨域
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins(“http://localhost:51360”, “http://localhost:5000”)
.AllowAnyHeader()
.AllowAnyMethod()
.AllowAnyOrigin();
});
});
#endregion
app.UseCors(MyAllowSpecificOrigins);
控制器代码
namespace Log.Controllers
{
// Web API 配置和服务 跨域
[EnableCors(PolicyName = "_myAllowSpecificOrigins")]
[Route("api/[controller]")]
[ApiController]
public class LogController : ControllerBase
{
private readonly IDapperExHelper<LogInfo> _dapperExHelper ;
public LogController(IDapperExHelper<LogInfo> dapperExHelper)
{
_dapperExHelper = dapperExHelper;
}
[HttpGet]
public string LogAddOrEditOrSee(string context, DateTime time)
{
string result = "帅气的你还什么都没写哦";
IEnumerable<LogInfo> logInfos = _dapperExHelper.GetAll();
try
{
if (!string.IsNullOrEmpty(time.ToString()))
{
LogInfo logInfoOne = logInfos.Where(x => x.CreateTime.ToString("yyyy-MM-dd") == time.ToString("yyyy-MM-dd")).FirstOrDefault();
if (logInfoOne != null) result = logInfoOne.LogContext;
if (!string.IsNullOrEmpty(context) && !string.IsNullOrEmpty(time.ToString()))
{
if (logInfoOne == null)
{
//没有数据添加
var logInfo = new LogInfo
{
Id = Guid.NewGuid(),
CreateTime = time,
LogContext = context
};
_dapperExHelper.Insert(logInfo);
}
else
{
//有数据修改
logInfoOne.LogContext = context;
logInfoOne.UpdateTime = DateTime.Now;
_dapperExHelper.Update(logInfoOne);
}
result = context;
}
}
}
catch (Exception e)
{
result = "瞎几把搞报错：" + e.Message;
}
return result;
}
}
}
效果图
这是默认打开的样子
这就是里面的记录的样子了
总结
一个简单的例子，做的不是很好，还有很多优化的地方，不足之处也可以在评论里面指出来，源码可以加我发你，（路人甲为什么不用git？）哈哈接机加好友 QQ：3115995059备注来意
4019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
