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

View 层  --  以国家为例

1. 显示 数据库的 table

页面效果

对应代码：

      <table id="dg" title="国家信息" class="easyui-datagrid" style="100%;height:0px"
             toolbar="#toolbar" fitColumns="true" sortName="CODE" sortOrder="asc"
             data-options="rownumbers:true,singleSelect:true,pagination:true,pageSize:10"
             >
           <thead>
               <tr>
                   <th field="CODE" width="50" sortable="true">国家编码</th>
                   <th field="NAME_ZH" width="50">中文简称</th>
                   <th field="NAME_ZH_FULL" width="50">中文全称</th>
                   <th field="NAME_EN" width="50">英文简称</th>
                   <th field="NAME_EN_FULL" width="50">英文全称</th>
                   <th field="REMARK" width="50">备注</th>
               </tr>
           </thead>
       </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="width: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>

3.

添加和修改弹出框的实现

<div id="dlg" class="easyui-dialog" style="width: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="width:90px">保存</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
      </div>

4.

页面 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>

注意上面代码中的 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 的定义

 var base=require('../../controllers/base/index.js');
 // var filters=require('../filters');

 module.exports= function(app){
   /*运输任务管理首页*/
   app.all("/base/country",  base.country.index);
   app.all("/base/country/save",  base.country.save);
   app.all("/base/country/delete",  base.country.delete);
   app.all("/base/country/search",  base.country.getList);
   app.all("/base/country/update",  base.country.update);
   app.all("/base/country/getList",  base.country.getList);

 }

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

3. controller 的实现

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

废话不说上代码

 var models = require("../../models");
 var utils = require("../../lib/utils");

 // Copyright 2014 www.satanrabbit.com. All Rights Reserved.
 /**
 * @fileoverview  controller 基础数据 国家信息管理
 * @author satanrabbit@qq.com
 */
 /*==============================================================*/
 /* Table: "t_country"                                           */
 /*==============================================================*/
 /*
 drop table "t_country" cascade constraints;
 create global temporary table "t_country"
 (
    "code"               VARCHAR2(20)         not null,
    "name_zh"            varchar2(50)         not null,
    "name_zh_full"       VARCHAR2(200),
    "name_en"            VARCHAR2(50)         not null,
    "name_en_full"       vARCHAR2(200),
    "remark"             varchar2(200),
    constraint PK_T_COUNTRY primary key ("code")
 );

 comment on table "t_country" is
 '基础信息维护，国家';

 comment on column "t_country"."code" is
 '国家代码，主键';

 comment on column "t_country"."name_zh" is
 '国家中文简称';

 comment on column "t_country"."name_zh_full" is
 '国家中文全称';

 comment on column "t_country"."name_en" is
 '国家英文简称';

 comment on column "t_country"."name_en_full" is
 '国家英文全称';

 comment on column "t_country"."remark" is
 '备注';
 */

 /**
  * 基础数据管理--国家首页
  * @param {Object} req request
  * @param {Object} res response
  */
 exports.index=function(req,res){
   res.render('base/country/index.ejs');
 }

 /**
  *  基础数据管理--国家新建
  * @param {Object} req request
  * @param {Object} res response
  */
 exports.save=function(req,res){
   var country = new Country(req);
   // console.log(country);
   models.baseCountry.saveCountry(country,function(err){
     if(err){
       // res.send(err);
       utils.sendHJ(res,{result:"fail",msg:"保存失败！"});
     }else{
       // res.send(err);
       utils.sendHJ(res,{result:"success",msg:"保存成功！"});
     }
   });
 }

 /**
  *  基础数据管理--国家删除
  * @param {Object} req request
  * @param {Object} res response
  */
 exports.delete=function(req,res){
   var id = req.param("id");
   console.log("-----" + id);
   models.baseCountry.deleteCountry(id,function(err,results){
     if(err){
       // res.send(err);
       utils.sendHJ(res,{result:"fail",msg:"删除失败！"});
     }else{
       // res.send("aha:" + err);
       utils.sendHJ(res,{result:"success",msg:"删除成功！"});
     }
   });
 }

 /**
  *  基础数据管理--国家修改
  * @param {Object} req request
  * @param {Object} res response
  */
 exports.update=function(req,res){
   var country = new Country(req);
   console.log(country);
   models.baseCountry.updateCountry(country,function(err){
     if(err){
       // res.send(err);
       utils.sendHJ(res,{result:"fail",msg:"保存失败！"});
     }else{
       // res.send(err);
       utils.sendHJ(res,{result:"success",msg:"保存成功！"});
     }
   });
 }

 /**
  *  基础数据管理--查询所有，以及根据条件进行查询
  * @param {Object} req request
  * @param {Object} res response
  */
 exports.getList=function(req,res){
   var country = new Country(req);
   // console.log(country);

 //page  和 pageSize 暂时没有用处，分页通过前台的js控制
   var page=0,pageSize=10,sorter="code",order="desc",type=0;
   if(req.param("sorter")&&utils.trim(req.param("sorter"))!=""){
     sorter=utils.trim(req.param("sorter"));
   }
   if(req.param("order")&&utils.trim(req.param("order"))!=""){
     order=utils.trim(req.param("order"));
   }
   //真正的处理查询功能在model 中实现，controller 中只是调用
   models.baseCountry.getList(country,page,pageSize,sorter,order,function(err,rows){
     if(err){
       res.send(500,{error:err});
     }else{
       var str = JSON.stringify(rows);
       //由于尝试 直接查询 条数后 传值出现问题，故在util中新增方法，直接根据json返回条数信息，
       var total = utils.getTotalFromOneJson(str);
       console.log(total);
       utils.sendHJ(res,{total:total,rows:rows});
     }
   });
 }

 //构建pojo，将前台传入的大写，转化为小写。并获得所有参数值
 var Country = function(req){
   if(req.param('ID')&&utils.trim(req.param('ID'))!=""){
     this.id=utils.trim(req.param('ID'));
   }else{
     this.id = "";
   }
   if(req.param('CODE')&&utils.trim(req.param('CODE'))!=""){
     this.code=utils.trim(req.param('CODE'));
   }else{
     this.code = "";
   }
   if(req.param('NAME_ZH')&&utils.trim(req.param('NAME_ZH'))!=""){
     this.name_zh=(utils.trim(req.param('NAME_ZH')));
   }else{
     this.name_zh = "";
   }
   if(req.param('NAME_ZH_FULL')&&utils.trim(req.param('NAME_ZH_FULL'))!=""){
     this.name_zh_full=utils.trim(req.param('NAME_ZH_FULL'));
   }else{
     this.name_zh_full = "";
   }
   if(req.param('NAME_EN')&&utils.trim(req.param('NAME_EN'))!=""){
     this.name_en=utils.trim(req.param('NAME_EN'));
   }else{
     this.name_en = "";
   }
   if(req.param('NAME_EN_FULL')&&utils.trim(req.param('NAME_EN_FULL'))!=""){
     this.name_en_full=utils.trim(req.param('NAME_EN_FULL'));
   }else{
     this.name_en_full = "";
   }
   if(req.param('REMARK')&&utils.trim(req.param('REMARK'))!=""){
     this.remark=utils.trim(req.param('REMARK'));
   }else{
     this.remark = "";
   }
   console.log(this.name_en);
 }

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

4. model 层的定义和实现

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

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

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

model层代码样板：

 var config=require("../oracleConfig.json");
 var oracle = require("../oracleConn");

 exports.saveCountry = function(country,cb){

   oracle.connect(config, function(err, connection) {
     if (err) {
         console.log(err);
     } else {
       console.log(country + "---" + country.code);
       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],
       // 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"],
          function(err,results) {
           console.log(err);
           if (err) {
             console.log(err);
             cb(err);
           } else {
             // country.bookID = results.insertId;
             console.log(results);
             cb(err, results);
           }
           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
           connection.close();
       });
      }
   });
 }

 // 根据传入的id 来进行删除，此处的id 不一定字段名 是id ，只是表示主键的意思
 exports.deleteCountry = function(id,cb){

   oracle.connect(config, function(err, connection) {
     if (err) {
         console.log(err);
     } else {
       connection.execute("delete from t_base_country where id=:1 ", [id],
          function(err,results) {
           console.log(err);
           if (err) {
             console.log(err);
             cb(err);
           } else {
             // country.bookID = results.insertId;
             console.log(results);
             cb(err, results);
           }
           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
           connection.close();
       });
      }
   });
 }

 exports.updateCountry = function(country,cb){

   oracle.connect(config, function(err, connection) {
     if (err) {
         console.log(err);
     } else {
       console.log(country + "---" + country.code);
       // 执行sql语句
       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],
          function(err,results) {
           console.log(err);
           if (err) {
             // console.log(err);
             cb(err);
           } else {
             // country.bookID = results.insertId;
             // console.log(results);
             console.log(country.id);
             cb(err, results);
           }
           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
           connection.close();
       });
      }
   });
 }

 exports.getList = function(country,page,pageSize,sorter,order,cb){
   var whereStr=" where 1=1 ";
   //构造where 条件sql
   if(country.code!=null && country.code!=""){
      whereStr += " and code like '%"+country.code + "%'";
   }
   if(country.name_zh!=null && country.name_zh!=""){
      whereStr += " and (name_zh like '%"+country.name_zh + "%' or name_zh_full like '%"+country.name_zh + "%' ) ";
   }
   if(country.name_en!=null && country.name_en!=""){
      whereStr += " and (name_en like '%"+country.name_en + "%' or name_en_full like '%"+country.name_en + "%') ";
   }

   if(order!="desc"){
     order="asc";
   }

   if(sorter!=""){
     whereStr+= " order by " + sorter + " " + order;
   }

   var selectSql = " SELECT * FROM t_base_country " + whereStr;
   // SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A WHERE ROWNUM <= 40)WHERE RN >= 21
   // var selectSql=" select * from ( select A.*,rownum rn  from ("+comSql + ") A where rownum<="+ (page+1)*pageSize +")where rn>="+(page*pageSize+1);

   console.log(selectSql);
   // 进行连接
   oracle.connect(config, function(err, connection) {
     if (err) {
       console.log("connection faild");
       console.log(err);
     } else {
       console.log("connection success");
       connection.execute(selectSql,[],function(err,results){
           if(err){
             cb(err);
           }else{
             cb(err,results);
           }
           //链接最好在 执行 sql 之后立马结束，不要再execute之外结束
         connection.close();
       });
     }
   });
 }

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

最终  入口处，这么调用：

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

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