今天看了下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="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',100">id</th> <th data-options="field:'name',130,align:'center'">name</th> <th data-options="field:'pass',130,align:'center'">pass</th> <th data-options="field:'email',130,align:'center'">email</th> <th data-options="field:'image',130,align:'center'">image</th> <th data-options="field:'phone',130,align:'center'">phone</th> <th data-options="field:'addr',130,align:'center'">addr</th> <th data-options="field:'regtime',130,align:'center',formatter:formatReg">regtime</th> <th data-options="field:'birth',130,align:'center'">birth</th> <th data-options="field:'remark',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=" 150px;"></td> <td align="right">手机号：</td> <td align="right"><input class="easyui-numberbox" id="s_phone" size="20" style=" 150px;"></td> <td align="right">姓名：</td> <td align="right"><input class="easyui-textbox" id="s_name" size="20" style=" 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=" 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=" 140px;">手机号：</td> <td align="left"> <input id="phone" name="phone" type="text" class="easyui-validatebox" data-options="required:true" style=" 150px;"> </td> <td align="left"> </td> </tr> <tr> <td align="right" style=" 140px;">姓名：</td> <td align="left"> <input id="name" type="text" name="name" class="easyui-validatebox" data-options="required:true" style=" 150px;"></span> </td> <td align="left"> </td> </tr> <tr> <td align="right" style=" 140px;">地址：</td> <td align="left"> <input id="addr" name="addr" type="text" class="easyui-validatebox" style=" 150px;" data-options="required:true"> </td> <td align="left"> </td> </tr> <tr> <td align="right" style=" 140px;">邮箱：</td> <td align="left"> <input id="email" type="text" name="email" class="easyui-validatebox" style=" 150px;" data-options="required:true,validType:'email'"> </td> <td align="left"> </td> </tr> <tr> <td align="right" style=" 140px;">头像：</td> <td align="left"> <input type="file" id="file_upload"/> <input type="hidden" id="file_path" name="image"/> </td> <td align="left"> </td> </tr> <tr> <td valign="top" align="left" style=" 140px;"> </td> <td align="left"> <img id="newImg" style=" 100px;height: 110px;" src="/static/img/default.gif"> <span id="errMsg" style="color: red"></span> </td> <td align="left"> </td> </tr> <tr> <td align="right" style=" 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+ " " + 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模板了。。。