CAT XQX ---- 增删改查架构说明 1

View 层 -- 以国家为例

1. 显示数据库的 table

页面效果

对应代码：

 1      <table id="dg" title="国家信息" class="easyui-datagrid" style="100%;height:0px"
 2             toolbar="#toolbar" fitColumns="true" sortName="CODE" sortOrder="asc"
 3             data-options="rownumbers:true,singleSelect:true,pagination:true,pageSize:10"
 4             >
 5           <thead>
 6               <tr>
 7                   <th field="CODE" width="50" sortable="true">国家编码</th>
 8                   <th field="NAME_ZH" width="50">中文简称</th>
 9                   <th field="NAME_ZH_FULL" width="50">中文全称</th>
10                   <th field="NAME_EN" width="50">英文简称</th>
11                   <th field="NAME_EN_FULL" width="50">英文全称</th>
12                   <th field="REMARK" width="50">备注</th>
13               </tr>
14           </thead>
15       </table>

2. 增删改查条件的添加

<div id="toolbar">
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newObj()">添加国家</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editObj()">编辑</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteObj()">删除</a>
          
           <table class='f-tb' style="auto;">
              <tr>
                <td class="no-bd-t">
                  国家编码：
                  <input type="text" class='easyui-validatebox' id="key_code" name="key_code" data-options="prompt:'请输入国家编码'">
                </td>
                <td class="no-bd-t">
                  <div class="datagrid-btn-separator"></div>
                </td>
                <td class="no-bd-t">
                  中文简称：
                  <input type="text" class='easyui-validatebox'  id="key_name_zh" name="key_name_zh" data-options="prompt:'支持部分查询'">
                </td>
                <td class="no-bd-t">
                  <div class="datagrid-btn-separator"></div>
                </td>
                <td class="no-bd-t">
                  英文简称：
                  <input type="text" class='easyui-validatebox'  id="key_name_en" name="key_name_en" data-options="prompt:'支持部分查询'">
                </td>
                <td class="no-bd-t">
                  <div class="datagrid-btn-separator"></div>
                </td>
                <td class="no-bd-t">
                  <a href="javascript:;"  id="search-btn" class="easyui-linkbutton" onclick="searchObj()" iconCls="icon-search" data-options="plain:true">查询</a>
                </td>
                <td class="no-bd-t">
                  <div class="datagrid-btn-separator"></div>
                </td>
                <td class="no-bd-t">
                  <a href="javascript:;"  id="clear-btn" class="easyui-linkbutton" onclick="clearObj()" iconCls="icon-delete" data-options="plain:true">清空查询条件</a>
                </td>
                <td class="no-bd-t">
                  <div class="datagrid-btn-separator"></div>
                </td>
              </tr>
            </table>
      </div>

View Code

添加和修改弹出框的实现

<div id="dlg" class="easyui-dialog" style="400px;height:350px;padding:10px 20px"
              closed="true" buttons="#dlg-buttons">
          <div class="ftitle">国家信息</div>
          <form id="fm" method="post" novalidate>
              <div class="fitem" style="display:none;">
                  <label>国家编码：</label>
                  <input name="ID" class="easyui-textbox" >
              </div>
              <div class="fitem">
                  <label>国家编码：</label>
                  <input name="CODE" class="easyui-textbox" required="true">
              </div>
              <div class="fitem">
                  <label>中文简称:</label>
                  <input name="NAME_ZH" class="easyui-textbox" required="true">
              </div>
              <div class="fitem">
                  <label>中文全称:</label>
                  <input name="NAME_ZH_FULL" class="easyui-textbox" >
              </div>
              <div class="fitem">
                  <label>英文简称:</label>
                  <input name="NAME_EN" class="easyui-textbox" required="true">
              </div>
              <div class="fitem">
                  <label>英文全称:</label>
                  <input name="NAME_EN_FULL" class="easyui-textbox">
              </div>
              <div class="fitem">
                  <label>备注:</label>
                  <input name="REMARK" class="easyui-textbox">
              </div>
          </form>
      </div>
      <div id="dlg-buttons">
          <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveObj()" style="90px">保存</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="90px">取消</a>
      </div>

View Code

页面 js 控制代码：

增删改查的方法已经封装到下面的js 中，页面只需简单调用即可

<script type="text/javascript" src="/js/common.js"></script>

<script type="text/javascript">
          var url ;
          function newObj(){
              url = '/base/country/save';
              newModel('添加国家',url);
          }
         
          function editObj(){
              url = '/base/country/update';
              editModel(url,"ID");
          }
          function saveObj(){
              saveModel(url);
          }
          function deleteObj(){
              url = '/base/country/delete';
              deleteModel(url,"ID");
          }
          function searchObj(){
              $("#dg").datagrid(
                {
                    url : "/base/country/search?CODE="+encodeURI($("#key_code").val())+"&NAME_ZH="+encodeURI($("#key_name_zh").val())+"&NAME_EN="+encodeURI($("#key_name_en").val())
                });  
              $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('load');  
          }
          function clearObj(){
              $("#key_code").val('') ;
              $("#key_name_zh").val('');
              $("#key_name_en").val('');
          }

          $(function(){
              $('#dg').datagrid({loadFilter:pagerFilter,url:"/base/country/getList"}).datagrid('load');
          });
      </script>

View Code

注意上面代码中的 url 一定要先赋值 ，再引用，下面的也一样。因为赋值影响的是下次向后台传递的 url。主要区别在新增和修改处，感兴趣的同学可以试一下，直接写到方法里面。看看有啥影响。

5. 查询条件的设置与效果

function searchObj(){
              $("#dg").datagrid(
                {
                    url : "/base/country/search?CODE="+encodeURI($("#key_code").val())+"&NAME_ZH="+encodeURI($("#key_name_zh").val())+"&NAME_EN="+encodeURI($("#key_name_en").val())
                });  
              $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('load');  
          }

说明：

1. 关键字定义 key_XXXXXX
2. 目前后台传向前台的变量名称均为大写，所以在填充这些地方的 input ，或者表格中需要将 filedName 与后台一致

二、 router 的定义

 1 var base=require('../../controllers/base/index.js');
 2 // var filters=require('../filters');
 3 
 4 module.exports= function(app){
 5   /*运输任务管理首页*/ 
 6   app.all("/base/country",  base.country.index);
 7   app.all("/base/country/save",  base.country.save);
 8   app.all("/base/country/delete",  base.country.delete);
 9   app.all("/base/country/search",  base.country.getList);
10   app.all("/base/country/update",  base.country.update);
11   app.all("/base/country/getList",  base.country.getList);
12 
13 }

我一个模块的 router 都定义在一个文件中方便管理：稍后给出整个项目的文件夹划分

3. controller 的实现

controller 中的方法，是在router 中跳转时，使用的

废话不说上代码

  1 var models = require("../../models");
  2 var utils = require("../../lib/utils");
  3 
  4 // Copyright 2014 www.satanrabbit.com. All Rights Reserved.
  5 /**
  6 * @fileoverview  controller 基础数据 国家信息管理
  7 * @author satanrabbit@qq.com
  8 */
  9 /*==============================================================*/
 10 /* Table: "t_country"                                           */
 11 /*==============================================================*/
 12 /*
 13 drop table "t_country" cascade constraints;
 14 create global temporary table "t_country" 
 15 (
 16    "code"               VARCHAR2(20)         not null,
 17    "name_zh"            varchar2(50)         not null,
 18    "name_zh_full"       VARCHAR2(200),
 19    "name_en"            VARCHAR2(50)         not null,
 20    "name_en_full"       vARCHAR2(200),
 21    "remark"             varchar2(200),
 22    constraint PK_T_COUNTRY primary key ("code")
 23 );
 24 
 25 comment on table "t_country" is
 26 '基础信息维护，国家';
 27 
 28 comment on column "t_country"."code" is
 29 '国家代码，主键';
 30 
 31 comment on column "t_country"."name_zh" is
 32 '国家中文简称';
 33 
 34 comment on column "t_country"."name_zh_full" is
 35 '国家中文全称';
 36 
 37 comment on column "t_country"."name_en" is
 38 '国家英文简称';
 39 
 40 comment on column "t_country"."name_en_full" is
 41 '国家英文全称';
 42 
 43 comment on column "t_country"."remark" is
 44 '备注';
 45 */
 46 
 47 
 48 /**
 49  * 基础数据管理--国家首页
 50  * @param {Object} req request
 51  * @param {Object} res response
 52  */
 53 exports.index=function(req,res){
 54   res.render('base/country/index.ejs');
 55 }
 56 
 57 /**
 58  *  基础数据管理--国家新建
 59  * @param {Object} req request
 60  * @param {Object} res response
 61  */
 62 exports.save=function(req,res){
 63   var country = new Country(req);
 64   // console.log(country);
 65   models.baseCountry.saveCountry(country,function(err){
 66     if(err){
 67       // res.send(err);
 68       utils.sendHJ(res,{result:"fail",msg:"保存失败！"});
 69     }else{
 70       // res.send(err);
 71       utils.sendHJ(res,{result:"success",msg:"保存成功！"});
 72     }
 73   });
 74 }
 75 
 76 /**
 77  *  基础数据管理--国家删除
 78  * @param {Object} req request
 79  * @param {Object} res response
 80  */
 81 exports.delete=function(req,res){
 82   var id = req.param("id");
 83   console.log("-----" + id);
 84   models.baseCountry.deleteCountry(id,function(err,results){
 85     if(err){
 86       // res.send(err);
 87       utils.sendHJ(res,{result:"fail",msg:"删除失败！"});
 88     }else{
 89       // res.send("aha:" + err);
 90       utils.sendHJ(res,{result:"success",msg:"删除成功！"});
 91     }
 92   });
 93 }
 94 
 95 
 96 /**
 97  *  基础数据管理--国家修改
 98  * @param {Object} req request
 99  * @param {Object} res response
100  */
101 exports.update=function(req,res){
102   var country = new Country(req);
103   console.log(country);
104   models.baseCountry.updateCountry(country,function(err){
105     if(err){
106       // res.send(err);
107       utils.sendHJ(res,{result:"fail",msg:"保存失败！"});
108     }else{
109       // res.send(err);
110       utils.sendHJ(res,{result:"success",msg:"保存成功！"});
111     }
112   });
113 }
114 
115 
116 
117 /**
118  *  基础数据管理--查询所有，以及根据条件进行查询
119  * @param {Object} req request
120  * @param {Object} res response
121  */
122 exports.getList=function(req,res){
123   var country = new Country(req);
124   // console.log(country);
125 
126 //page  和 pageSize 暂时没有用处，分页通过前台的js控制
127   var page=0,pageSize=10,sorter="code",order="desc",type=0;
128   if(req.param("sorter")&&utils.trim(req.param("sorter"))!=""){
129     sorter=utils.trim(req.param("sorter"));
130   }
131   if(req.param("order")&&utils.trim(req.param("order"))!=""){
132     order=utils.trim(req.param("order"));
133   }
134   //真正的处理查询功能在model 中实现，controller 中只是调用
135   models.baseCountry.getList(country,page,pageSize,sorter,order,function(err,rows){
136     if(err){
137       res.send(500,{error:err});
138     }else{
139       var str = JSON.stringify(rows);
140       //由于尝试 直接查询 条数后 传值出现问题，故在util中新增方法，直接根据json返回条数信息，
141       var total = utils.getTotalFromOneJson(str);
142       console.log(total);
143       utils.sendHJ(res,{total:total,rows:rows});
144     }
145   });
146 }
147 
148 //构建pojo，将前台传入的大写，转化为小写。并获得所有参数值
149 var Country = function(req){
150   if(req.param('ID')&&utils.trim(req.param('ID'))!=""){
151     this.id=utils.trim(req.param('ID'));
152   }else{
153     this.id = "";
154   }
155   if(req.param('CODE')&&utils.trim(req.param('CODE'))!=""){
156     this.code=utils.trim(req.param('CODE'));
157   }else{
158     this.code = "";
159   }
160   if(req.param('NAME_ZH')&&utils.trim(req.param('NAME_ZH'))!=""){
161     this.name_zh=(utils.trim(req.param('NAME_ZH')));
162   }else{
163     this.name_zh = "";
164   }
165   if(req.param('NAME_ZH_FULL')&&utils.trim(req.param('NAME_ZH_FULL'))!=""){
166     this.name_zh_full=utils.trim(req.param('NAME_ZH_FULL'));
167   }else{
168     this.name_zh_full = "";
169   }
170   if(req.param('NAME_EN')&&utils.trim(req.param('NAME_EN'))!=""){
171     this.name_en=utils.trim(req.param('NAME_EN'));
172   }else{
173     this.name_en = "";
174   }
175   if(req.param('NAME_EN_FULL')&&utils.trim(req.param('NAME_EN_FULL'))!=""){
176     this.name_en_full=utils.trim(req.param('NAME_EN_FULL'));
177   }else{
178     this.name_en_full = "";
179   }
180   if(req.param('REMARK')&&utils.trim(req.param('REMARK'))!=""){
181     this.remark=utils.trim(req.param('REMARK'));
182   }else{
183     this.remark = "";
184   }
185   console.log(this.name_en);
186 }

View Code

代码中有注释，应该看的差不多了。

4. model 层的定义和实现

我在model 层中，每一个模块都建一个文件夹，然后有一个index.js 在这个里面在最外层的index 文件中。声明所有的该模块下的 model，然后可以通过（模块名+model名）.方法名 的方式进行调用

你看，外层的index.js 的代码： baseCountry = base+ country 模块名+model 名。。。。。。。。

exports.baseCountry=require("./base/country.js");

model层代码样板：

  1 var config=require("../oracleConfig.json");
  2 var oracle = require("../oracleConn");
  3 
  4 exports.saveCountry = function(country,cb){
  5   
  6   oracle.connect(config, function(err, connection) {
  7     if (err) {
  8         console.log(err);
  9     } else {
 10       console.log(country + "---" + country.code);
 11       connection.execute("INSERT INTO t_base_country(code,name_zh,name_zh_full,name_en,name_en_full,remark)  values(:1,:2,:3,:4,:5,:6) ", [country.code,country.name_zh,country.name_zh_full,country.name_en,country.name_en_full,country.remark],
 12       // connection.execute("INSERT INTO t_base_country(code,name_zh,name_zh_full,name_en,name_en_full,remark)  values(:1,:2,:3,:4,:5,:6) ", ["12","121","1212","1212","1212","1212"],
 13          function(err,results) {
 14           console.log(err);
 15           if (err) {
 16             console.log(err);
 17             cb(err);
 18           } else {
 19             // country.bookID = results.insertId;
 20             console.log(results);
 21             cb(err, results);
 22           }
 23           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
 24           connection.close();
 25       });
 26      }
 27   });
 28 }
 29 
 30 // 根据传入的id 来进行删除，此处的id 不一定字段名 是id ，只是表示主键的意思
 31 exports.deleteCountry = function(id,cb){
 32   
 33   oracle.connect(config, function(err, connection) {
 34     if (err) {
 35         console.log(err);
 36     } else {
 37       connection.execute("delete from t_base_country where id=:1 ", [id],
 38          function(err,results) {
 39           console.log(err);
 40           if (err) {
 41             console.log(err);
 42             cb(err);
 43           } else {
 44             // country.bookID = results.insertId;
 45             console.log(results);
 46             cb(err, results);
 47           }
 48           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
 49           connection.close();
 50       });
 51      }
 52   });
 53 }
 54 
 55 
 56 exports.updateCountry = function(country,cb){
 57   
 58   oracle.connect(config, function(err, connection) {
 59     if (err) {
 60         console.log(err);
 61     } else {
 62       console.log(country + "---" + country.code);
 63       // 执行sql语句
 64       connection.execute("update t_base_country set code=:1,name_zh=:2,name_zh_full=:3,name_en=:4,name_en_full=:5,remark=:6 where id=:7  ", [country.code,country.name_zh,country.name_zh_full,country.name_en,country.name_en_full,country.remark,country.id],
 65          function(err,results) {
 66           console.log(err);
 67           if (err) {
 68             // console.log(err);
 69             cb(err);
 70           } else {
 71             // country.bookID = results.insertId;
 72             // console.log(results);
 73             console.log(country.id);
 74             cb(err, results);
 75           }
 76           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
 77           connection.close();
 78       });
 79      }
 80   });
 81 }
 82 
 83 
 84 exports.getList = function(country,page,pageSize,sorter,order,cb){
 85   var whereStr=" where 1=1 ";
 86   //构造where 条件sql
 87   if(country.code!=null && country.code!=""){
 88      whereStr += " and code like '%"+country.code + "%'";
 89   }
 90   if(country.name_zh!=null && country.name_zh!=""){
 91      whereStr += " and (name_zh like '%"+country.name_zh + "%' or name_zh_full like '%"+country.name_zh + "%' ) ";
 92   }
 93   if(country.name_en!=null && country.name_en!=""){
 94      whereStr += " and (name_en like '%"+country.name_en + "%' or name_en_full like '%"+country.name_en + "%') ";
 95   }
 96 
 97   if(order!="desc"){
 98     order="asc";
 99   }
100 
101   if(sorter!=""){
102     whereStr+= " order by " + sorter + " " + order;
103   }
104   
105   var selectSql = " SELECT * FROM t_base_country " + whereStr;
106   // SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A WHERE ROWNUM <= 40)WHERE RN >= 21
107   // var selectSql=" select * from ( select A.*,rownum rn  from ("+comSql + ") A where rownum<="+ (page+1)*pageSize +")where rn>="+(page*pageSize+1);
108   
109   console.log(selectSql);
110   // 进行连接
111   oracle.connect(config, function(err, connection) {
112     if (err) {
113       console.log("connection faild");
114       console.log(err);
115     } else {
116       console.log("connection success");
117       connection.execute(selectSql,[],function(err,results){
118           if(err){
119             cb(err);
120           }else{
121             cb(err,results);
122           }
123           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
124         connection.close();
125       });
126     }
127   });
128 }

View Code

好了，至此，已经连成一条线了。

最终入口处，这么调用：

<li class="fs">
   <a href="/base/country" target="center_frame">国家</a>
</li>

额。。。。写个说明太费劲了，有啥不明白的再问吧。如果觉得后，可以参考，有好的建议，请及时提出，共同进步。