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