thinkjs crud练习

今天看了下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: '3306',
      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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

上一期前端面试题整理答案

上期答案 1.盒子模型 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(bor...

4527
来自专栏信安之路

IAT 三连之什么是 IAT?

IAT 的全称是 ImportAddress Table。在可执行文件中使用其他 DLL 可执行文件的代码或数据,称为导入或者输入,当 PE 文件载入内存时,w...

680
来自专栏前端儿

编写高质量 JavaScript -- 知识点小记

此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。

1661
来自专栏java思维导图

总结:JDK1.5-JDK1.8各个新特性

作者:iwen-J | 链接:https://my.oschina.net/zhuqingbo0501/blog/1784693 JDK各个版本的新特性 以...

3787
来自专栏积累沉淀

【译】Java 8的新特性—终极版

声明:本文翻译自Java 8 Features Tutorial – The ULTIMATE Guide,翻译过程中发现并发编程网已经有同学翻译过了:...

19510
来自专栏Java大联盟

23种设计模式详解(五)

933
来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

2335
来自专栏社区的朋友们

Unity 游戏的 String interning 优化

通常情况下,我们难以注意到运行着的 Unity 程序内 String 的实例化情况。这些字符串的创建,销毁的时机是否合理,是否存在有重复 ,冗余 ,低效 以及泄...

1010
来自专栏阿杜的世界

【译】Java 8的新特性—终极版1. 简介2. Java语言的新特性3. Java编译器的新特性4. Java官方库的新特性5. 新的Java工具6. JVM的新特性7. 结论8. 参考资料

前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级。在Java Code Geeks上已经有很多介绍Java 8新特性的文章,...

734
来自专栏陈纪庚

vue.js响应式原理解析与实现—实现v-model与{{}}指令

上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天,我们就...

751

扫码关注云+社区