文档章节

thinkjs crud练习

c
 caiyezi
发布于 2016/11/08 20:23
字数 1688
阅读 50
收藏 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
西安
程序员
使用 ndb 调试你的 Node.js 项目

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

ThinkJS
08/06
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
20天时间,一个人怎么搞定这个后台管理项目

经过20天的沟通与开发,一个新项目终于成功交付了。目前产品运行良好,与客户的远程合作还算顺利,进度把握的也很好,算是比较成功的一次接包经历。现在给大家把从平台接包、开发、沟通、测试...

面包奶油巧克力
2017/10/27
0
0
ThinkJS 3 正式版发布,Node.js Web 框架

ThinkJS 是一款拥抱未来的 Node.js Web 框架,致力于集成项目最佳实践,规范项目让企业级团队开发变得更加简单,更加高效。我们的 Github 地址是:https://github.com/thinkjs/thinkjs 欢迎大...

welefen
2017/09/04
4.5K
35
ThinkJS 2.1:支持 TypeScript,性能提升 90%

Thinkjs 2.0 是第一个全面支持使用 ES6/7 特性开发的 Node.js 框架,于 2015.10.30 正式发布。使用 ES6 里的*/yield 或者 ES7 里的 async/await 可以很好的解决异步嵌套的问题,借助 Babel ...

welefen
2016/01/15
3K
12

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
23分钟前
6
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
30分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
40分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
48分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部