html心情日志页面,增加日志页面

最新推荐文章于 2024-06-26 09:52:40 发布

weixin_39633252

最新推荐文章于 2024-06-26 09:52:40 发布

阅读量1.2k

点赞数

文章标签： html心情日志页面

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

前言

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

技术栈后端：提供 api，提供增删改查的功能

.net WebAPI ； framework4.6

sqlsugar：充当 ORM 连接数据库

mysql 5.7.27

后端管理页面：对数据进行增删改查的操作

html + css + js

layui ；版本信息：2.5.5

ajax

日志页面

参考源码

html + css +js +ajax 魔改

实用工具

vs2017

vs code

Navicat Premium

chrome

部署环境

1C2G1M 服务器(Windows)

Nginx

node.js + git 部署

后端提供 API

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

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

建立连接数据库上下文，可以直接参考官网的代码：

8SqlSugarClient db = new SqlSugarClient(

new ConnectionConfig()

{

ConnectionString = "server=.;uid=sa;pwd=@jhl85661501;database=SqlSugar4XTest",

DbType = DbType.SqlServer,//设置数据库类型

IsAutoCloseConnection = true,//自动释放数据务，如果存在事务，在事务结束后释放

InitKeyType = InitKeyType.Attribute //从实体特性中读取主键自增列信息

});

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

29public 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);

}

使用连接上下文：在具体写逻辑的时候可以看sqlsugar官网的 demo，使用 linq 或者 lambda 样式写都没问题，随你的便(开心就好 😂)

10// 在一个类中先定义db

private SqlSugarClient db = DBContextHelper.CurrentDbContext;

public ResultModel GetMoodList()

{

var list = db.Queryable().Where(t => t.isdelete == false).OrderBy("createtime desc").ToList();

var data = list.MapToList();

ResultModel response = new ResultModel();

response.data = data;

return response;

}

使用接口管理工具 Swagger 进行 api 的测试管理，也是通过 NUgget 管理工具直接引入项目中，就可以直接打开熟悉的 api 管理页面了。

日志管理界面

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

给一张效果图：

日志页面

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

这里贴上效果图：

这里贴上主要的代码：

100

101

FuJiaTian | 日志

name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"

href="https://fonts.googleapis.com/css?family=Play:400,700"

rel="stylesheet"

type="text/css"

FuJiaTian

愿这里是福家田园

田园野望者

Quotes:

>www.fujiatian.com

$(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(

"" +

" +

data[i].quote +

" +

"" +

data[i].author +

"
" +

"" +

data[i].createtime +

"" +

);

$container.foldscroll({

perspective: 900,

margin: "220px"

});

}

总结与待解决的问题

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

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

17public 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 }

);

}

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

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

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

(完)