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 条评论
登录 后参与评论

相关文章

来自专栏V站

PHP实现检测客户端是否使用代理服务器及其匿名级别

REMOTE_ADDR 是你的客户端跟你的服务器“握手”时候的IP。如果使用了“匿名代理”,REMOTE_ADDR将显示代理服务器的IP。

22312
来自专栏简书专栏

利用Python发送email

引入smtplib和email.mime.text.MIMEText两个库可以完成发送邮件的功能 代码逻辑顺序:初始化邮箱服务——>使用用户名和密码登录邮箱—...

792
来自专栏Python

三、请求库之requests模块

 一 介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) ...

2067
来自专栏Python绿色通道

Python爬虫系列:用邮件来通知爬虫异常状况

如果Python爬虫发生了故障,希望第一时间来通知自己,这个时候可以通过email来向自己报告。

1065
来自专栏DeveWork

代码实现 WordPress 反垃圾评论功能

垃圾评论,垃圾评论,你是哥心中的“恨”。每次打开后台看到上面工具栏的评论气泡出现了数字(表示有评论),打开一看却是什么“儿童服装”……除了WordPress 官...

1.3K10
来自专栏黑白安全

快速入门xss 判断网站是否存在xss漏洞

XSS全称跨站脚本攻击,用户浏览网页时,嵌入的Script代码被执行,从而达到攻击用户的目的,常见漏洞页面,网站搜索页面,留言板。

5773
来自专栏Youngxj

.htaccess文件用法收集整理

1655
来自专栏九彩拼盘的叨叨叨

jQuery 复制表单 Bug 及修复

当 jQuery 复制表单时,会漏复制 textarea 和 select 的值。更详细的描述见 http://bugs.jquery.com/ticket/3...

381
来自专栏PHP技术大全

快速找出网站中可能存在的XSS漏洞实践(一)

笔者最近在慕课录制了一套XSS跨站漏洞 加强Web安全视频教程,课程当中有讲到XSS的挖掘方式,所以在录制课程之前需要做大量实践案例,最近视频已经录制完成,准备...

1135
来自专栏PHP技术大全

手工找出网站中可能存在的XSS漏洞

笔者最近在慕课录制了一套XSS跨站漏洞 加强Web安全视频教程,课程当中有讲到XSS的挖掘方式,所以在录制课程之前需要做大量实践案例,最近视频已经录制完成,准备...

1172

扫码关注云+社区