增加日志页面

2019 年 9 月 13 日,过了一个猿宵节,花了一天多增加了一个日志页面,在本博客的左边心情栏进入。

前言

因为看到大神SaltyLeo的文章,觉得 3D 滚动的随笔页面还不错,就打算自己写一个,这个功能在 github 上也有源码,但是我在使用的过程中发现,这个数据源是写了一个 js 文件,以提供静态的 json 数据。于是我就想能够自己动态添加就好了,于是自己写了一个后端程序,后端管理日志的页面,然后这个页面能够动态获取 api 的数据。实现了在随处写写心情、日志的功能。下面写写实现的过程。

技术栈

  • 后端:提供 api,提供增删改查的功能

    1. .net WebAPI ; framework4.6
    2. sqlsugar:充当 ORM 连接数据库
    3. mysql 5.7.27
    4. swagger
  • 后端管理页面:对数据进行增删改查的操作

    1. html + css + js
    2. layui ;版本信息:2.5.5
    3. ajax
  • 日志页面

  • 实用工具

    1. vs2017
    2. vs code
    3. Navicat Premium
    4. chrome
  • 部署环境

    • 1C2G1M 服务器(Windows)
    • Nginx
    • node.js + git 部署

后端提供 API

后端使用了.net WebApi 的 MVC 的分层模式,分别是逻辑层,数据层,控制器,我再加了一个公共方法类的 Common 层,方便自己维护,或者以后添加新功能。创建项目很简单,这里不再赘述,着重讲使用sqlsugar的一些心得,迫于在.net 中使用 EF 太庞大,虽然使用起来很方便,然而我需要的功能不要难么多,所以我选择了比较精小强悍的sqlsugar,性能也不错,使用也方便。sqlsugar 官网有很详尽的文档可以参考。

  1. 引用:在引用sqlsugar的时候请注意本地.net framework 版本相对应,引用方法:在类库中右击引用,选择 管理 NugGet 程序包 如图所示:引用sqlsugar

  2. 建立连接数据库上下文,可以直接参考官网的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    SqlSugarClient db = new SqlSugarClient(
    new ConnectionConfig()
    {
    ConnectionString = "server=.;uid=sa;pwd=@jhl85661501;database=SqlSugar4XTest",
    DbType = DbType.SqlServer,//设置数据库类型
    IsAutoCloseConnection = true,//自动释放数据务,如果存在事务,在事务结束后释放
    InitKeyType = InitKeyType.Attribute //从实体特性中读取主键自增列信息
    });

    但我为了让后期有扩展和可维护的空间,我专门为连接上下文的类进行了简单封装处理,连接数据库的字符串写在网站的we.config文件中;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    public  class DBContextHelper
    {
    // 读取数据库连接字符串
    internal static string DbConnectionString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
    internal static DbType DbType = DbType.MySql;

    public static SqlSugarClient CurrentDbContext
    {
    get
    {
    return DbContextRepository.DbContext;
    }
    }

    public static SimpleClient SimpleContext
    {
    get
    {
    return DbContextRepository.SimpleContext;
    }
    }

    private static DBContextRepository DbContextRepository
    {
    get
    {
    return new DBContextRepository(DbType, DbConnectionString);
    }
    }
  3. 使用连接上下文:在具体写逻辑的时候可以看sqlsugar官网的 demo,使用 linq 或者 lambda 样式写都没问题,随你的便(开心就好 😂)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     // 在一个类中先定义db
    private SqlSugarClient db = DBContextHelper.CurrentDbContext;
    public ResultModel GetMoodList()
    {
    var list = db.Queryable<log>().Where(t => t.isdelete == false).OrderBy("createtime desc").ToList();
    var data = list.MapToList<log, logDto>();
    ResultModel response = new ResultModel();
    response.data = data;
    return response;
    }
  4. 使用接口管理工具 Swagger 进行 api 的测试管理,也是通过 NUgget 管理工具直接引入项目中,就可以直接打开熟悉的 api 管理页面了。swagger

日志管理界面

日志管理界面,使用的是layui的表格(包含分页功能)、form,弹出层等组建,官网的教程写的很详细,这里就不贴代码了。主要想说的是,因为 layui 动态表格分页功能是GET请求的方式,而且对返回的数据格式、字段有一定要求,比如code=0等,这些,需要注意。我在这里花费了比较大量的时间;因为个人需要的功能比较单一,就没有封装Ajax请求后端的方法,就是用了原生的方法,这里使用的比较多的坑点。始终相信:兵来将挡,水来土掩,总会解决的。

给一张效果图:

后端管理界面

日志页面

这里只需要去GitHub 下载源码,引入相应的jscss文件,加载好数据,就能够有 3D 翻转的炫酷效果,当然,因为原生的是加载quotes.js文件中的静态数据,而我是需要获取 api 的数据,所以进行了一番魔改,style.css文件也相应的改了一点,但是改动不多。

这里贴上效果图:

效果图

这里贴上主要的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>FuJiaTian | 日志</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
/>
<link
href="https://fonts.googleapis.com/css?family=Play:400,700"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<section id="info">
<header>
<hgroup>
<h1>FuJiaTian</h1>
<h2>愿这里是福家田园</h2>
</hgroup>
<a target="_blank" href="https://www.fujiatian.com">田园野望者</a>
</header>
<aside>
<p>
Quotes:
<a href="http://www.fujiatian.com/" target="_blank"
>www.fujiatian.com</a
>
</p>
</aside>
</section>
<section class="quotes"></section>
<script src="js/jquery.min.js"></script>
<script src="js/foldscroll.js"></script>
<script src="js/quotes.js"></script>
<script type="text/javascript">
$(function() {
var ua = navigator.userAgent;

var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;

//判断

if (isMobile) {
$("#info").css("display", "none");
}
$.ajax({
//请求方式
type: "GET",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "你的api接口地址",
//数据,json字符串
// data: JSON.stringify(list),
//请求成功
success: function(res) {
getFoldscroll(res.data);
},

//请求失败,包含具体的错误信息

error: function(e) {
getFoldscroll(quotes);
}
});
});
// Call the foldscroll plugin
function getFoldscroll(data) {
var limit = 15;
var $container = $(".quotes");
for (var i = 0, n = Math.min(limit, data.length); i < n; i++) {
$container.append(
"<article>" +
"<p>" +
data[i].quote +
"</p>" +
"<em>" +
data[i].author +
"</em> <br />" +
"<cite>" +
data[i].createtime +
"</cite>" +
"</article>"
);
$container.foldscroll({
perspective: 900,
margin: "220px"
});
}
}
</script>
</body>
</html>

总结与待解决的问题

通过这次自己做小项目,也发现了自己的一些问题,比如form表单的请求方式(如actionmethod都不是很熟悉,也算是自己查漏补缺了。目前也只是能够使用的阶段,还没到完成的地步。希望共勉吧

  1. .net WebApi前后端分离跨域问题,但是这个问题通过某度google搜索,已经暂时解决了,解决办法是在WebApiConfig.cs文件中添加一下代码config.EnableCors(new EnableCorsAttribute("*", "*", "*"));,如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    public static class WebApiConfig
    {
    public static void Register(HttpConfiguration config)
    {
    // Web API 配置和服务
    // Web API 路由
    config.MapHttpAttributeRoutes();
    // 解决跨域问题
    config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
    config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
    );

    }
    }
  2. 未解决的神奇 Bug:Failed to load resource: the server responded with a status of 401 (Unauthorized),现在在IIS服务器上都没解决,但是我另辟蹊径在nginx部署上了代码。没有这个问题。

    bug

  3. 不知道是服务器原因,还是.net代码的问题,或者是form表单post请求的问题,返回的时候导致会出现服务器错误的问题,但是数据已经正确提交到数据库了(目前已经满足了个人需求了)。

  4. .net WebApi返回的时间带大写字母T的问题,还没解决,网上查过的方法(修改WebApiConfig.cs)已经尝试过了,不管用。

  5. (完)

您的打赏,是我创作的动力,谢谢支持。
0%