SqlSugar简单使用记录（四）TodoList实战

握风
477 阅读1分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

系列文章链接
SqlSugar简单使用记录（一）
SqlSugar简单使用记录（二）
SqlSugar简单使用记录（三）TodoList实战

接上文，开始弄前端页面了

这里使用bootstrap4随便写了一个简单点的，UI不是专业的，凑合用即可，请勿吐槽哈

打开Pages目录下Index.cshtml文件，除了第一行@page外，全部删除掉
然后创建如下结构

@page

<div>
    <h1 class="p-4">My TodoList</h1>
    <div id="fromData">
        <div class="form-group">
            <label >标题：</label>
            <input type="text" class="form-control" name="Title">
        </div>

        <div class="form-group">
            <label>内容：</label>
            <textarea class="form-control" rows="3" name="Content"></textarea>
        </div>
        <button class="btn btn-primary add_todo">添加</button>
    </div>
    <table class="table mt-4">
        <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>内容</th>
                <th>创建时间</th>
                <th>已完成？</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="todolist"></tbody>
    </table>
</div>

<stript>
    $(function(){
    
    });
</script>

@page，就是使用模板文件
接下来，将Pages/Shared/_Layout.cshtml文件打开，将 header标签内容全部注销，保持页面清爽些

这里虽然不要模板页的header信息，但是还是要它的结构样式，还有样式文件、js文件引用的

去jsview官网下载jsview.js文件 image.png 将文件放到wwwroot文件夹下，然后可以拖拽的方式引入到_Layout.cshtml或Index.cshtml的头部或者Head标签内

image.png

这里就不花时间介绍jsview了，感兴趣可以去官网学习一下，MVVM的思想，跟VUE一样，这里只使用下模板渲染，如果不打算深入，可以不用去官网专门学了，我这里简单使用一下，都能看明白！

既然是模板渲染，肯定需要模板了

<script type="text/x-jsrender" id="todolistTmpl">
    <tr>
        <td>{{:#index+1}}</td>
        <td>{{>title}}</td>
        <td>{{>content}}</td>
        <td class="text-">{{>createTime}}</td>
        <td class="{{if isFinish}}text-success{{else}}text-secondary{{/if}}">{{>isFinish.toString().toUpperCase()}}</td>
        <td>
            <button class="btn btn-info edit_todo">编辑</button>
            <button class="btn btn-success ml-2 mr-2 finish_todo">完成</button>
            <button class="btn btn-warning del_todo">删除</button>
        </td>
    </tr>
</script>

看双大括号语法是不是跟vue挺像的，里面可以写判断语句，可以进行值处理（简单处理，复杂的逻辑可以单独拿出来写）

语法{{:data}}和{{>data}}区别其实很简单，前者当字符串解析，后者可以解析html标签（兼容性更好）

如果要写复杂的值处理逻辑，只能用冒号，可以将方法名写到冒号前面，然后在js中写具体逻辑

除了正常模板，当查询数据为空时，还需要一个空模板

<script type="text/x-jsrender" id="nodataTmpl">
    <tr style="height:120px;text-align:center">
        <td colspan="6" style="line-height:120px;color:#666;font-size:18px">暂无相关数据</td>
    </tr>
</script>

注：模板标签建议写在所有标签上面，或者单独文件中

下面开始写ajax向api请求数据了

这里其实跟前后端分离差不多写法，前端ajax + 页面布局，后端负责api书写，但是技术上分离，人员不分离，写起来其实效率更高些

<script>
    $(function () {
        $.get("/api/todolist/getlist", function (data) {
            if(data.length > 0)
                $("#todolist").html($.templates("#todolistTmpl").render(data));
            else
                $("#todolist").html($.templates("#nodataTmpl"));
        });
    });
</script>

很简单的语法，将数据塞到模板中，再把模板塞到jQuery对象中即可，如果没有数据，那直接把空模板塞进去渲染即可

这里贴一下Index.cshtml文件整体内容吧

@page

<script src="~/jsrender.js"></script>

<script type="text/x-jsrender" id="nodataTmpl">
    <tr style="height:120px;text-align:center">
        <td colspan="6" style="line-height:120px;color:#666;font-size:18px">暂无相关数据</td>
    </tr>
</script>

<script type="text/x-jsrender" id="todolistTmpl">
    <tr>
        <td>{{:#index+1}}</td>
        <td>{{>title}}</td>
        <td>{{>content}}</td>
        <td class="text-">{{>createTime}}</td>
        <td class="{{if isFinish}}text-success{{else}}text-secondary{{/if}}">{{>isFinish.toString().toUpperCase()}}</td>
        <td>
            <button class="btn btn-info edit_todo">编辑</button>
            <button class="btn btn-success ml-2 mr-2 finish_todo">完成</button>
            <button class="btn btn-warning del_todo">删除</button>
        </td>
    </tr>
</script>

<div>
    <h1 class="p-4">My TodoList</h1>
    <div id="fromData">
        <div class="form-group">
            <label >标题：</label>
            <input type="text" class="form-control" name="Title">
        </div>

        <div class="form-group">
            <label>内容：</label>
            <textarea class="form-control" rows="3" name="Content"></textarea>
        </div>
        <button class="btn btn-primary add_todo">添加</button>
    </div>
    <table class="table table-hover table-bordered mt-4">
        <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>内容</th>
                <th>创建时间</th>
                <th>已完成？</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="todolist"></tbody>
    </table>
</div>

<script>
    $(function () {
        $.get("/api/todolist/getlist", function (data) {
            if (data.length > 0)
                $("#todolist").html($.templates("#todolistTmpl").render(data));
            else
                $("#todolist").html($.templates("#nodataTmpl"));
        });
    });
</script>

ok，直接运行项目

image.png

页面出来了
新增TodoList

思路：写一个新增方法，获取表单数据，将数据发送到api并执行保存，然后再次到页面进行刷新页面

一步一步来

先把页面逻辑搞定

技巧：这个后面还会用到（例如编辑时保存），所以可以抽出来写个方法（fromData），然后需要时，随时调用即可
同样，页面数据获取也是重复调用，也可以拎出来写（query），渲染模板方法拿出来（render）

页面js最终修改成如下

<script>
    $(function () {
        //进入页面先调用一下getlist，请求数据渲染页面
        query();
        
        //保存按钮事件，保存，成功后再次getlist
        $(".add_todo").on("click", function () {
            var data = fromData("#fromData");
            $.post("/api/todolist/save",
                { "": JSON.stringify(data) },
                function (res) {
                    query();
            })
        });

        //方法：请求数据
        function query() {
            $.get("/api/todolist/getlist", function (result) {
                render(result);
            });
        }
        //方法：渲染模板
        function render(data) {
            if(data.length>0)
                $("#todolist").html($.templates("#todolistTmpl").render(data));
            else
                $("#todolist").html($.templates("#nodataTmpl"));
        };
        //方法：获取表单数据
        function fromData(from) {
            var data = {};
            $(`${from} .form-control`).each((k, v) => {
                data[$(v).attr("name")] = $(v).val();
            });
            return data;
        };
    });
</script>

完善api 保存方法

/// <summary>
/// 新增
/// </summary>
/// <returns></returns>
[HttpPost]
public TodoList Save([FromForm] string str)
{
    var model = Newtonsoft.Json.JsonConvert.DeserializeObject<TodoList>(str);
    model.CreateTime = DateTime.Now;
    return db.Insertable(model).ExecuteReturnEntity();
}

Insertable为新增方法，ExecuteReturnEntity可以返回新增后的对象
运行项目，开始测试使用下新增

image.png 问题出现，新增是没啥大毛病，添加成功后，应该把表单清空
js中写一个清空表单方法，然后再保存成功后调用一下即可

function restFrom(from) {
    $(`${from} .from-control`).each((k, v) => {
        $(v).val("");
    });
};

image.png

再测试新增功能，完美运行

本篇先写到这里，下面会一次性把删除、修改、完成等功能搞定！

循循渐进，逐步推进！

avatar
文章
阅读
粉丝