今天看了下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. mysql on duplicate key update 和 insert ignore into

    on duplicate key update <insert id="insert" parameterType="Plan"> insert i ...

  2. python列表重复判断

    import random import string n = 0; while n<10: str_source = string.ascii_letters + string.digits ...

  3. dataframe 转为list

    首先使用np.array()函数把DataFrame转化为np.ndarray(),再利用tolist()函数把np.ndarray()转为list.

  4. 升级Linux中的JAVA版本

    首先查看本机中的JAVA版本 如何需要卸载掉现有的JAVA版本的话,可以使用rpm -qa | grep java 和 rpm -e xxx --nodeps进行卸载 登录到JAVA官方下载界面,提供 ...

  5. docker部署sftp

    一. 按照我博客中搭建sftp的方法做一个docker镜像 这种方法可用,但不是最好的,待改进.可参照另一篇博客:设置多用户不同权限的sftp服务器搭建 1. dockerfile文件如下,当前目录假 ...

  6. python 简单爬虫（beatifulsoup)

    ---恢复内容开始--- python爬虫学习从0开始 第一次学习了python语法,迫不及待的来开始python的项目.首先接触了爬虫,是一个简单爬虫.个人感觉python非常简洁,相比起java或 ...

  7. unicode 转换成中文

    unicode 转换成中文 + (NSString *)replaceUnicode:(NSString *)unicodeStr { NSString *tempStr1 = [unicodeStr ...

  8. 【医学影像】《Identifying Medical Diagnoses and Treatable Diseases by Image-Based Deep Learning》论文笔记

    这篇论文的作者是张康教授为首的团队,联合国内外众多医院及科研机构,合力完成,最后发表在cell上,实至名归. 从方法的角度上来说,与上一篇博客中的论文很相似,采用的都是InceptionV3模型,同时 ...

  9. FreeRTOS-03中断测试

    根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 portDISABLE_INTERRUPTS(); /*关中断*/portENABLE_ ...

  10. odoo 二次开发的一些原理

    一:self是什么 目前新版的Odoo中使用到的self,是对  游标cr.用户ID.模型.上下文.记录集.缓存  的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...