今天看了下thinkjs（v2.1.7），做了一个简单的入门demo，基于mysql数据库增删改查，详细源码如下：

页面整体展示：

会员新增：

删除：

查询：

主页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>crud测试</title>

    <link rel="stylesheet" type="text/css" href="/static/lib/jquery-easyui-1.4.3/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/static/lib/jquery-easyui-1.4.3/themes/icon.css">

    <script type="text/javascript" src="/static/lib/jquery-easyui-1.4.3/jquery.min.js"></script>

    <script type="text/javascript" src="/static/lib/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="/static/lib/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="/static/js/moment.js"></script>

    <script src="/static/lib/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>

    <script src="/static/lib/jquery-file-upload/js/jquery.iframe-transport.js"></script>

    <script src="/static/lib/jquery-file-upload/js/jquery.fileupload.js"></script>

</head>

<body>

<table id="dg" title="会员管理" style="width:100%;height:450px" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true"

       url="/index/list" toolbar="#tb" data-options="pageSize:10,pageList:[5,10,15,25,50,100]">

    <thead>

    <tr>

        <th field="cb" checkbox="true" align="center"></th>

        <th data-options="field:'id',width:100">id</th>

        <th data-options="field:'name',width:130,align:'center'">name</th>

        <th data-options="field:'pass',width:130,align:'center'">pass</th>

        <th data-options="field:'email',width:130,align:'center'">email</th>

        <th data-options="field:'image',width:130,align:'center'">image</th>

        <th data-options="field:'phone',width:130,align:'center'">phone</th>

        <th data-options="field:'addr',width:130,align:'center'">addr</th>

        <th data-options="field:'regtime',width:130,align:'center',formatter:formatReg">regtime</th>

        <th data-options="field:'birth',width:130,align:'center'">birth</th>

        <th data-options="field:'remark',width:130,align:'center'">remark</th>

        <th field="operate" width="150" align="center" data-options="formatter:formatOperate">操作</th>

    </tr>

    </thead>

</table>

<div id="tb">

    <div style="margin-top: 5px;margin-bottom: 5px;">

        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton"

           data-options="plain:true,iconCls:'icon-user_add'" plain="true">添加</a>

        <a href="javascript:delNums()" class="easyui-linkbutton"

           data-options="plain:true,iconCls:'icon-user_delete'" plain="true">删除</a>

    </div>

    <div style="margin-top: 5px;">

        <table>

            <tr>

                <td align="right">会员编号：</td>

                <td align="right"><input class="easyui-numberbox" id="s_id" size="20" style="width: 150px;"></td>

                <td align="right">手机号：</td>

                <td align="right"><input class="easyui-numberbox" id="s_phone" size="20" style="width: 150px;"></td>

                <td align="right">姓名：</td>

                <td align="right"><input class="easyui-textbox" id="s_name" size="20" style="width: 150px;"></td>

                <td align="right"><a href="javascript:searchUser()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-2012092109942'">查询</a></td>

            </tr>

        </table>

    </div>

</div>

<div id="dlg" class="easyui-dialog" style="width: 680px;height:630px;padding: 5px 5px" closed="true" buttons="#dlg-buttons" data-options="modal:true"

     overflow-y="scroll">

    <form id="addVipForm" method="post">

        <table style="margin: 5px 5px;" cellspacing="5px">

            <tr>

                <td align="right" style="width: 140px;">手机号：</td>

                <td align="left">

                    <input id="phone" name="phone" type="text" class="easyui-validatebox" data-options="required:true"

                           style="width: 150px;">

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td align="right" style="width: 140px;">姓名：</td>

                <td align="left">

                    <input id="name" type="text" name="name" class="easyui-validatebox" data-options="required:true"

                           style="width: 150px;"></span>

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td align="right" style="width: 140px;">地址：</td>

                <td align="left">

                    <input id="addr" name="addr" type="text" class="easyui-validatebox" style="width: 150px;" data-options="required:true">

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td align="right" style="width: 140px;">邮箱：</td>

                <td align="left">

                    <input id="email" type="text" name="email" class="easyui-validatebox" style="width: 150px;" data-options="required:true,validType:'email'">

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td align="right" style="width: 140px;">头像：</td>

                <td align="left">

                    <input type="file" id="file_upload"/>

                    <input type="hidden" id="file_path" name="image"/>

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td valign="top" align="left" style="width: 140px;">&nbsp;</td>

                <td align="left">

                    <img id="newImg" style="width: 100px;height: 110px;" src="/static/img/default.gif">&nbsp;<span id="errMsg" style="color: red"></span>

                </td>

                <td align="left">&nbsp;</td>

            </tr>

            <tr>

                <td align="right" style="width: 140px;">简介：</td>

                <td align="left">

                    <textarea rows="10" cols="65" id="remark" name="remark" placeholder="请简要描述您的专业经验"></textarea>

                </td>

            </tr>

        </table>

    </form>

</div>

<div id="dlg-buttons">

    <a href="javascript:save()" class="easyui-linkbutton" iconCls="icon-ok" plain="true">提交</a>

    <a href="javascript:cancel()" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">取消</a>

</div>

<script type="text/javascript">

    var url;

    jQuery("#file_upload").fileupload({

        iframe: true,

        dataType: 'json',

        url: "/index/upload",//文件上传地址，当然也可以直接写在input的data-url属性内

        done: function (e, result) {

            jQuery("#newImg").attr("src",result.result.path);

            jQuery("#file_path").val(result.result.path);

        }

    });

    function formatOperate(value, row, index){

        var del = '<a onclick="del('+row.id+')" href="javascript:void(0)">删除</a>';

        var update = '<a onclick="openUpdateDialog('+index+')" href="javascript:void(0)">修改</a>';

        return update+ "&nbsp;" + del;

    }

    function del(id){

        jQuery.messager.confirm("系统提示","您确认要删除该地区吗？",function(r){

            if(r){

                jQuery.post("/index/del",{id:id},function(result){

                    if(result.succ){

                        jQuery.messager.show({title:"提示",msg:"删除成功！"});

                        jQuery("#dg").datagrid("reload");

                    }else{

                        jQuery.messager.show({title:"提示",msg:"删除失败！"});

                    }

                },"json");

            }

        });

    }

    function formatReg(value, row, index){

        if(value)return moment(value).format("YYYY-MM-DD HH:mm:ss");

    }

    function openUserAddDialog(){

        jQuery("#addVipForm").form("reset");

        jQuery("#file_upload").attr("name","uploadFile");

        jQuery("#dlg").dialog("open").dialog("setTitle", "新增会员");

        url = "/index/add";

    }

    function save(){

        jQuery("#addVipForm").form("submit", {

            url: url,

            onSubmit: function (param) {

                if (!jQuery(this).form("validate")) {

                    return false;

                }

                jQuery("#file_upload").removeAttr("name");

                return true;

            },

            success: function (result) {   //result返回为String类型，需用eval函数处理为Object型对象再判断

                result = JSON.parse(result);

                if (result.succ) {

                    jQuery.messager.show({title:"提示",msg:"操作成功"});

                    jQuery("#addVipForm").form("reset");

                    jQuery("#dlg").dialog("close");

                    jQuery("#dg").datagrid("reload");

                } else {

                    jQuery.messager.show({title:"提示",msg:"操作失败"});

                }

            }

        });

    }

    function dispValue(row){

        jQuery("#phone").val(row.phone);

        jQuery("#name").val(row.name);

        jQuery("#addr").val(row.addr);

        jQuery("#email").val(row.email);

        jQuery("#remark").val(row.remark);

        if(row.image){

            jQuery("#image").val(row.image);

            jQuery("#newImg").attr("src",row.image);

        }

    }

    function openUpdateDialog(index){

        jQuery("#file_upload").attr("name","uploadFile");

        var row = jQuery("#dg").datagrid('getData').rows[index];

        jQuery("#dlg").dialog("open").dialog("setTitle", "修改");

        url = "/index/update?id="+row.id;

        dispValue(row);

    }

    function searchUser(){

        var s_id = jQuery("#s_id").numberbox("getValue");

        var s_phone = jQuery("#s_phone").numberbox("getValue");

        var s_name = jQuery("#s_name").textbox('getText').trim();

        jQuery("#dg").datagrid("load", {

            "id": s_id,

            "phone": s_phone,

            "name": s_name

        });

    }

    function delNums(){

        var selectedRows=jQuery("#dg").datagrid('getSelections');

        if(selectedRows.length==0){

            jQuery.messager.show({title:"提示",msg:"请选择要删除的数据！"});

            return;

        }

        var strIds=[];

        for(var i=0;i<selectedRows.length;i++){

            strIds.push(selectedRows[i].id);

        }

        var ids=strIds.join(",");

        jQuery.messager.confirm("系统提示","您确认要删除这<span style='color: red'>"+selectedRows.length+"</span>条数据吗？",function(r){

            if(r){

                jQuery.post("/index/del",{id:ids},function(result){

                    if(result.succ){

                        jQuery.messager.show({title:"提示",msg:"删除成功"});

                        jQuery("#dg").datagrid("reload");

                    }else{

                        jQuery.messager.show({title:"提示",msg:"删除失败"});

                    }

                },"json");

            }

        });

    }

</script>

</body>

</html>

index.js控制器代码：

'use strict';

import Base from './base.js';

import fs from "fs";

import path from "path";

export default class extends Base {

    /**

     * index action

     * @return {Promise} []

     */

    async indexAction() {

        //let model = this.model("user");

        //console.log(model.pk);

        //let data = await model.select();

        //console.log(data);

        //console.log(this.config("type"));

        //this.navType = "home";

        //let insertId = await model.add({last_name: "ddd1",first_name: "xxx1",userName: "xxx1", password: "yyy1"});

        //console.log(insertId);

        //let affectedRows = await model.where({id: "17"}).update({userName: "admin@thinkjs.org"});

        //console.log(affectedRows);

        //let result = await model.thenAdd({userName: "admin@thinkjs.org"}, {id: "17"});

        //let result = await model.where({userName: "admin@thinkjs.org"}).update({userName: "admin"})

        // let model = this.model("user");

        //let result = await model.where({id: ["=", 10]}).delete();

        //let sql = "select * from t_user where id=16";

        //let result = yield model.query(sql);

        //console.log(result);

        //this.assign("name","test art-template");

        return this.display();

    };

    async index2Action(){

        return this.display();

    };

    async listAction(){

        let posts = this.post();

        let whereObj = {};

        for (let prop in posts) {

            if (posts.hasOwnProperty(prop) && posts[prop] && prop != "page" && prop != "rows") {

                whereObj[prop] = posts[prop];

            }

        }

        let userModel = this.model("user");

        let data = await userModel.field("id,name,pass,email,image,phone,addr,regtime,birth,remark").where(whereObj).page(this.post("page"),this.post("rows")).countSelect();

        this.json({"total":data.count,"rows":data.data});

    };

    async delAction(){

        let userModel = this.model("user");

        let posts = this.post("id");

        let delNums = userModel.where({id: ['IN', posts]}).delete();

        if(delNums){

            this.json({"succ":true});

        }else{

            this.json({"succ":false});

        }

    };

    async addAction(){

        let userModel = this.model("user");

        let values = this.post();

        let id = userModel.add(values);

        if(id){

            this.json({"succ":true});

        }else{

            this.json({"succ":false});

        }

    };

    async uploadAction(){

        let file = think.extend({}, this.file('uploadFile'));

        let filepath = file.path;

        //文件上传后，需要将文件移动到项目其他地方，否则会在请求结束时删除掉该文件

        let uploadPath = think.RESOURCE_PATH + '/static/upload';

        think.mkdir(uploadPath);

        let basename = path.basename(filepath);

        fs.renameSync(filepath, uploadPath + '/' + basename);

        this.json({path: '/static/upload/' + basename});

    };

    async updateAction(){

        let userModel = this.model("user");

        let nums = userModel.where({id: this.get("id")}).update(this.post());

        if(nums){

            this.json({"succ":true});

        }else{

            this.json({"succ":false});

        }

    }

}

src/common/config/db.js设置：

'use strict';

/**

 * db config

 * @type {Object}

 */

export default {

  type: 'mysql',

  log_sql: true,

  log_connect: true,

  adapter: {

    mysql: {

      host: '192.168.20.132',

      port: '',

      database: 'test',

      user: 'root',

      password: 'root',

      prefix: 't_',

      encoding: 'utf8'

    },

    mongo: {

    }

  }

};

再记录下修改thinkjs模板引擎为art-template：

首先创建名为art的适配器：

thinkjs adapter template/art

执行完成后，会创建文件 src/common/adapter/template/art.js。扩展缓存类需要实现如下的方法：

其次修改src/common/config/view.js：

这样在页面中便可以直接使用art模板了。。。

源代码：https://github.com/caiya/proj_es6

thinkjs crud练习的更多相关文章

  1. 【翻译】MongoDB指南/CRUD操作（四）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...

  2. 【翻译】MongoDB指南/CRUD操作（三）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...

  3. 【翻译】MongoDB指南/CRUD操作（二）

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...

  4. 【翻译】MongoDB指南/CRUD操作（一）

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(一) 主要内容:CRUD操作简介,插入文档,查询文档. CRUD操作包括创建.读取.更新和删 ...

  5. 【原】无脑操作：express + MySQL 实现CRUD

    基于node.js的web开发框架express简单方便,很多项目中都在使用.这里结合MySQL数据库,实现最简单的CRUD操作. 开发环境: IDE:WebStorm DB:MySQL ------ ...

  6. Hibernate（4）——主键生成策略、CRUD 基础API区别的总结 和 注解的使用

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: hibernate的主键生成策略 UUID 配置的补充:hbm2ddl.auto属性用法 注解还是配置文件 h ...

  7. 学习SpringMVC——你们要的REST风格的CRUD来了

    来来来,让一下,客官,您要的REST清蒸CRUD来了,火候刚刚好,不油不腻,请慢用~~~ 如果说前面是准备调料,洗菜,切菜,摆盘,那么今天就来完整的上道菜,主要说的是基于REST风格实现数据的增删改查 ...

  8. Elasticsearch的CRUD：REST与Java API

    CRUD(Create, Retrieve, Update, Delete)是数据库系统的四种基本操作,分别表示创建.查询.更改.删除,俗称"增删改查".Elasticsearch ...

  9. ASP.NET Core Web API Cassandra CRUD 操作

    在本文中,我们将创建一个简单的 Web API 来实现对一个 “todo” 列表的 CRUD 操作,使用 Apache Cassandra 来存储数据,在这里不会创建 UI ,Web API 的测试将 ...

随机推荐

  1. Android 虚拟机访问本地服务器的地址

    http://10.0.2.2:8080/test/ 比如 localhost:8080 为 tomcat 地址,然后 test 是 tomcat 目录下 webapps 的子目录. 10.0.2.2 ...

  2. 如何使用OpenGL中的扩展

    如果你在Windows平台下开发OpenGL程序,那么系统中自带的OpenGL库就是1.1的,如果想使用1.2或者更高版本的OpenGL库,那么只能使用OpenGL扩展,在网上关于如何使用OpenGL ...

  3. linux 磁盘保留空间设置

    1.查看保留空间大小 tune2fs -l /dev/sda8  reserved blocks 2.调整保留空间大小(系统默认5%) tune2fs -m 0.5 /dev/sda8 参考链接:ht ...

  4. javap -- Java 类文件解析器

    参考文档 http://blog.chinaunix.net/uid-692788-id-2681132.html http://docs.oracle.com/javase/7/docs/techn ...

  5. esp32 blink实验

    #include<stdio.h>#include"freertos/FreeRTOS.h"#include"freertos/task.h"#in ...

  6. 题目1018：统计同成绩学生人数（hash简单应用）

    问题来源 http://ac.jobdu.com/problem.php?pid=1018 问题描述 给你n位同学的成绩,问获得某一成绩的学生有多少位. 问题分析 初见此题,有人会想到先将所有成绩存入 ...

  7. 题目1022：游船出租（hash简单应用）

    问题来源 http://ac.jobdu.com/problem.php?pid=1022 问题描述 每次输入:船号(1~100) 键值(S或E) 发生时间(小时:分钟).当船号为0时,代表一天结束: ...

  8. react-router的简单使用

    React Router是一个基于React之上的强大路由库,可以让你向应用中快速的添加视图和数据流,同时保持页面与URL间的同步. 1.安装: npm install --save react-ro ...

  9. sql2008R2新建链接服务器。

    1:用sql新建链接服务器对象: /****** Object: LinkedServer [pad] Script Date: 10/23/2018 15:47:45 ******/ EXEC ma ...

  10. form表单提交到Controller之后空值变成逗号

    首先这个错误不是我遇到的,是别人遇到来找我给帮忙调试的(我不会犯这种错误!!!) 错误非常神奇,前端页面的form表单是空的啥都没填,提交到后台之后(后台用@ModelAttribute实体类接受的) ...