文档章节

thinkjs crud练习

c
 caiyezi
发布于 2016/11/08 20:23
字数 1688
阅读 51
收藏 0

今天看了下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

 

本文转载自:http://www.cnblogs.com/vipzhou/p/5254828.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
ThinkJS 和 和 Sprite.js 服务端 服务端渲染实践

编者按:本文作者奇舞团前端开发工程师李冬杰,让我们一起学习吧! 介绍 ThinkJS 是一个基于 koa@2.0 的企业级服务端开发框架,本项目中除基本的 HTTP 服务外,还使用了定时任务和 websocke...

奇舞周刊
昨天
0
0
使用 ndb 调试你的 Node.js 项目

代码调试按照调试方式大致分为日志(Log)和断点(Breakpoint)两种办法。其中日志就是手动的在代码中增加日志打印获取过程信息来判断问题。这种方法的好处是调试简单,一个对业务熟练的工程...

ThinkJS
08/06
0
0
Node.js Web 快速开发框架 - Doodoo.js

简介 Doodoo.js -- 中文最佳实践Node.js Web快速开发框架。支持Koa.js中间件,支持模块化,插件,钩子机制,可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性...

einsqing
08/21
0
0
小程序 | 注释级微信小程序demo,助你快速切入开发

写在前面 小程序开发渐进红利期,更多开发者慕名而来,网上的学习资料也层出不穷,有点眼花缭乱的意思了。在经过一个多月的摸索式学习后,我也终于写了不算精美的一个小程序。 那为什么写这篇...

保山
08/24
0
0
吴彦文/thinkjsplus

1.安装 ThinkJS 命令 npm install -g think-cli 可以通过 thinkjs -v 查看 think-cli 的版本号,此版本号非 thinkjs 的版本号 2.创建项目 thinkjsPlus thinkjs new thinkjsPlus 创建项目时可...

吴彦文
2017/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC1155实践|区块链游戏的平行宇宙和为此而生的Enjin钱包

1 摘要 恩金(Enjin)花了大半年的时间一直在完善ERC-1155这个通证协议,毫不夸张地说,该标准是现有以太坊上最适用于游戏资产的通证标准,将主流游戏中道具涉及到的一切操作经过高度抽象之后...

HiBlock
30分钟前
1
0
Oracle发布开源的轻量级 Java 微服务框架 Helidon

近日,Oracle推出了一个新的开源框架Helidon,该项目是一个用于创建基于微服务的应用程序的Java库集合。和Payara Micro、Thorntail(之前的WildFly Swarm)、OpenLiberty、TomEE等项目一样,...

关注公众号_搜云库_每天更新
36分钟前
1
0
启动线程以及安全终止线程

启动 使用start()方法可以启动线程。 start()方法的含义是告知线程规划器线程已初始化完毕,可以分给这个线程时间片了(执行run()方法)。 安全终止线程 示例代码 import java.util.concurr...

karma123
42分钟前
1
0
Python+OpenCV 图像风格迁移(模仿名画)

现在很多人都喜欢拍照(自拍)。有限的滤镜和装饰玩多了也会腻,所以就有 APP 提供了模仿名画风格的功能,比如 prisma、versa 等,可以把你的照片变成 梵高、毕加索、蒙克 等大师的风格。 这...

crossin
47分钟前
1
0
karabiner json语法

karabiner json语法 to_if_alone 如果同时制定了to, 那么to对应的key必须是非可见字符,例如control,shift或者command, 为什么呢? If to events are specified, to events are released befo...

黄威
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部