今天看了下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. 201621123012 《Java程序设计》第14次学习总结

    作业14-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截 ...

  2. window.onload与$(document).ready()的对比

    一.window.onload:(1)必须等待网页中所有的内容加载完毕后(包括图片)才能执行:(2)不能同时编写多个,如: window.onload = function(){ alert(&quo ...

  3. CodeChefSeries Sum （伯努利数+生成函数+FFT）

    题面 传送门 给定\(a_1,..,a_n\),定义\(f(x,k)=\sum_{i=1}^n(x+a_i)^k,g(t,k)=\sum_{x=0}^tf(x,k)\),给定\(T,K\),请你对\( ...

  4. CF666E Forensic Examination（后缀自动机+动态线段树）

    题意 给你一个串 $S$ 以及一个字符串数组 $T[1..m]$ , $q$ 次询问,每次问 $S$ 的子串 $S[p_l..p_r]$ 在 $T[l..r]$ 中的哪个串里的出现次数最多,并输出出现 ...

  5. 4，临界区 之 synchronized

    前提背景:多个并发线程共享同一个资源时,为防止这些共享资源可能出现的错误或数据不一致问题,提出了临界区的概念 临界区: 指一个用以访问共享资源的代码块,这个代码块在同一时间内只能允许一个线程访问 实现 ...

  6. js 自定义获得类class和获得id

    使用js获取类名,但是低版本浏览器不支持getElementsByClassName,所以我们就需要自定义getClassName,方便跨浏览器使用. 当然,如果采用jquery就不需要. //获取类 ...

  7. MYSQL ERROR 1049 (42000): Unknown database

    https://www.cnblogs.com/hedgehog105/p/10196566.html lower_case_table_names=2

  8. Java编码转换

    于Java当中,编码格式的转换一般较为麻烦,就我目前的经验来说,需要用到转码的环境主要是IO(无论是网络IO还是文件IO).转换方式主要有以下几种   方式一:String层面  String mes ...

  9. shell (2) 时间处理

    获取当前的时间,并输出 #!/bin/bash if [ $# -ne 1 ];then echo "input an dmesg time" exit 1 fi unix_tim ...

  10. python yield、yield from与协程

    从生成器到协程 协程是指一个过程,这个过程与调用方协作,产出由调用方提供的值.生成器的调用方可以使用 .send(...)方法发送数据,发送的数据会成为yield表达式的值.因此,生成器可以作为协程使 ...