使用Vue.js快速入門(mén)及實(shí)現(xiàn)用戶信息的增刪

ue.js是什么

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。 Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue 的一些語(yǔ)法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因?yàn)?AngularJS 是 Vue 早期開(kāi)發(fā)的靈感來(lái)源。然而，AngularJS 中存在的許多問(wèn)題，在 Vue 中已經(jīng)得到解決。AngularJS 使用雙向綁定，Vue 在不同組件間強(qiáng)制使用單向數(shù)據(jù)流，這使應(yīng)用中的數(shù)據(jù)流更加清晰易懂。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，可以讓你快速地掌握它的全部特性并投入開(kāi)發(fā)。

聲明式渲染

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。

每個(gè) Vue 應(yīng)用都是通過(guò) Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開(kāi)始的，當(dāng)創(chuàng)建一個(gè) Vue 實(shí)例時(shí)，你可以傳入一個(gè)選項(xiàng)對(duì)象。

一個(gè) Vue 應(yīng)用由一個(gè)通過(guò) new Vue 創(chuàng)建的根 Vue 實(shí)例，以及可選的嵌套的、可復(fù)用的組件樹(shù)組成。

組件我們后續(xù)會(huì)繼續(xù)講給大家聽(tīng)的，而現(xiàn)在要明白的是所有的 Vue 組件都是 Vue 實(shí)例，并且接受相同的選項(xiàng)對(duì)象即可 (一些根實(shí)例特有的選項(xiàng)除外)。

當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對(duì)象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

Vue.js 使用了基于 HTML 的模板語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 —— 雙大括號(hào)，通過(guò)使用 v-once指令，也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定。

下邊這個(gè)小例子就是我們生成的第一個(gè)Vue應(yīng)用，數(shù)據(jù)和 DOM 已經(jīng)被綁定在一起，所有的元素都是響應(yīng)式的。打開(kāi)你的瀏覽器的控制臺(tái) ，并修改 app.message的內(nèi)容，你將看到內(nèi)容也相應(yīng)地更新。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">

{{message}}
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//聲明式渲染
var app=new Vue({ //創(chuàng)建Vue對(duì)象
el:"#app", //把當(dāng)前Vue對(duì)象掛載到div標(biāo)簽上,#app是ID選擇器
data:{
message:"Hello Vue!",//message是自定義的數(shù)據(jù)
}
});
</script>
</body>
</html>

下邊這種方式也可以實(shí)現(xiàn)同樣的效果，當(dāng)vue.js文件放在頁(yè)面的下方時(shí)，這種方式在頁(yè)面刷新時(shí)不會(huì)看到{{ }}表達(dá)式的原樣。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
如果vue.js文件放在頁(yè)面的下方，在頁(yè)面刷新時(shí)會(huì)看到{{}}表達(dá)式原樣，所以使用v-cloak指令代替表達(dá)式。
在css中設(shè)置[v-cloak]{display:none}
*/
[v-cloak]{display:none;}
</style>
</head>
<body>
<div id="app" v-cloak v-html="message">
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//聲明式渲染
var app=new Vue({ //創(chuàng)建Vue對(duì)象
el:"#app", //把當(dāng)前Vue對(duì)象掛載到div標(biāo)簽上,#app是ID選擇器
data:{
message:"Hello Vue!",//message是自定義的數(shù)據(jù)
}
});
</script>
</html>

現(xiàn)在我們來(lái)簡(jiǎn)單的說(shuō)說(shuō)——Vue的構(gòu)造函數(shù)是什么?

選項(xiàng)el屬性，就是elment縮寫(xiě)，當(dāng)前Vue對(duì)象掛載到哪個(gè)標(biāo)簽上的語(yǔ)法，支持CSS選擇器或者DOM對(duì)象，一般id選擇選擇當(dāng)前的標(biāo)簽

data屬性是自定義數(shù)據(jù)。vue會(huì)把自定義的數(shù)據(jù)與HTML模板數(shù)據(jù)進(jìn)行綁定

數(shù)據(jù)的綁定方式就是{{}}，類似于AngularJS

雙向數(shù)據(jù)綁定

首先我們先解釋一下什么是雙向綁定， Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。雙向是指：HTML標(biāo)簽數(shù)據(jù)綁定到Vue對(duì)象，另外反方向數(shù)據(jù)也是綁定的。

通俗點(diǎn)說(shuō)，Vue對(duì)象會(huì)改變會(huì)直接影響到HTML標(biāo)簽的變化，而且標(biāo)簽的變化也會(huì)反過(guò)來(lái)影響Vue對(duì)象的屬性變化。

Vue中可以使用 v-model 指令在 input 輸入框中創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。

v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。這個(gè)時(shí)候就需要通過(guò) JavaScript 在組件的 data 選項(xiàng)中聲明初始值了。

將message綁定到文本框，當(dāng)更改文本框的值時(shí)，{{ message }} 中的內(nèi)容也會(huì)被更新。反之，如果改變message的值，文本框的值也會(huì)被更新。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{message}}

<input v-model="message" />
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//聲明式渲染
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue",
}
});
</script>
</html>

在默認(rèn)情況下，v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy ，這個(gè)時(shí)候就需要點(diǎn)擊一下瀏覽器任意地方實(shí)現(xiàn)數(shù)據(jù)的同步。

<div id="app">
{{message}}
<input v-model.lazy="message" />
</div>

Vue.js中的常用指令

Vue中的指令是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況)。指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到 DOM 上。

一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性。

接下來(lái)就給大家介紹幾個(gè)Vue中的常用指令：

v-if 指令

我們使用v-if來(lái)控制切換一個(gè)元素的顯示。這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來(lái)決定是否插入 p 元素。

這個(gè)例子演示了我們不僅可以綁定 DOM 文本到數(shù)據(jù)，也可以綁定 DOM 結(jié)構(gòu)到數(shù)據(jù)。

數(shù)據(jù)的seen屬性為true時(shí)，內(nèi)容會(huì)被輸出

數(shù)據(jù)的seen屬性為false時(shí)，內(nèi)容不會(huì)被輸出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//聲明式渲染
var app=new Vue({
el:"#app",
data:{
seen:true
}
});
</script>
</body>
</html>

v-else 指令

可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊,條件都不符合時(shí)渲染。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。

判斷num值是否大于22，大于則輸出apple，否則輸出bananer

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="num>22">
{{apple}}
</div>
<div v-else>
{{bananer}}
</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var app=new Vue({
el: "#app",
data:{
num:25,
apple:"蘋(píng)果很好吃！",
bananer:"香蕉也很好吃！"
}
});
</script>
</body>
</html>

v-show 指令

現(xiàn)在我們簡(jiǎn)單講講v-show，v-show指令用于根據(jù)條件展示元素的選項(xiàng)，用法也是大致一樣的。

不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性display。

值得我們注意的是，v-show 不支持 <template> 元素，也不支持v-else。所以在下邊這個(gè)例子中盡管v-show設(shè)為false，依然能展示內(nèi)容。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>綜合實(shí)例</title>
</head>
<body>
<div id="app">
<h1 v-show="ok">hello!</h1>

<template v-show="false">
<div>1111</div>
<div>2222</div>
<div>3333</div>
</template>
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
ok:true
}
})
</script>
</html>

現(xiàn)在我們來(lái)對(duì)比一下v-if和v-show有何區(qū)別吧：

v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。

相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

v-for 指令

v-for 指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表。

v-for 指令需要以 fruit in fruits 形式的特殊語(yǔ)法， fruits 是源數(shù)據(jù)數(shù)組并且 fruit 是數(shù)組元素迭代的別名。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<ol>
<li v-for="fruit in fruits">
{{ fruit.name }}
</li>
</ol>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var app=new Vue({
el: "#app",
data:{
fruits: [
{ name: '蘋(píng)果' },
{ name: '香蕉' },
{ name: '西瓜' }
]
}
});
</script>
</body>
</html>

v-bind 指令

HTML 屬性中的值應(yīng)使用 v-bind 指令。主要是用來(lái)操作元素的class列表和他的內(nèi)聯(lián)樣式。和用JS直接操作dom節(jié)點(diǎn)功能一樣，但是，要比js簡(jiǎn)單的多。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
background-color: red;
}
.b{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="myClass1" onclick="app.func()">點(diǎn)擊變化</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var app=new Vue({
el: "#app",
data:{
myColor:"red",
myWidth:200,
myHeight:200,
myClass1:"a",
func:function(){
if(this.myClass1=="a"){
this.myClass1="b";
}else{
this.myClass1="a";
}
}
}
});
</script>
</body>
</html>

v-on 指令

為了能讓用戶和你的應(yīng)用進(jìn)行互動(dòng)，我們可以用 v-on 指令綁定一個(gè)事件監(jiān)聽(tīng)器，通過(guò)它調(diào)用我們 Vue 實(shí)例中定義的方法。

在reverseMessage 方法中，當(dāng)我們更新了應(yīng)用的狀態(tài)，但沒(méi)有觸碰 DOM，因?yàn)樗械?DOM 操作都由 Vue 來(lái)處理。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div id="app">
<button v-on:click="counter+=1">點(diǎn)擊加1</button>
<p>{{counter}}</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉(zhuǎn)信息</button>
<button v-on:click="func">點(diǎn)擊彈出</button>
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
counter:0,
message: 'Hello Vue.js!'
},
//在methods中定義方法
methods:{
reverseMessage: function () {
this.message=this.message.split('').reverse().join('')
},
func:function(event){
alert("川寶寶");
}
}
})
</script>
</html>

綜合小Demo

現(xiàn)在我們已經(jīng)介紹了一些Vue.js的基礎(chǔ)知識(shí)了，結(jié)合以上知識(shí)我們可以來(lái)做個(gè)小Demo吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>綜合實(shí)例</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style type="text/css">
.table{
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<div class="form-group">
<label for="group">姓名</label>
<input type="text" v-model="person1.name">
</div>
<div class="form-group">
<label for="author">學(xué)號(hào)</label>
<input type="text" v-model="person1.num">
</div>
<div class="form-group">
<label for="price">成績(jī)</label>
<input type="text" v-model="person1.score">
</div>
<button class="btn btn-success" v-on:click="addPerson()">添加</button>
<table class="table table-bordered" class="table">
<thead>
<tr>
<th>姓名</th>
<th>學(xué)號(hào)</th>
<th>成績(jī)</th>
<th>刪除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.num}}</td>
<td>{{person.score}}</td>
<td><button class="btn btn-warning" @click="delPerson(person)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
person1:{
name: '',
num: '',
score: ''
},
people:[{
name: '張三',
num: '123456',
score: '8'
},
{
name: '李四',
num: '151515',
score: '7'
},
{
name: '王二',
num: '181818',
score: '6'
},
]
},
//在methods中定義方法
methods:{
//新增成員信息
addPerson: function () {
this.person1.id=this.people.length+1;
this.people.push(this.person1);
this.person1={};
},
//刪除成員信息
delPerson: function(person){
this.people.splice(this.people.indexOf(person),1);
}
}
})
</script>
</html>

編者按

Vue.js是數(shù)據(jù)驅(qū)動(dòng)的，無(wú)需手動(dòng)操作DOM。它通過(guò)一些特殊的HTML語(yǔ)法，將DOM和數(shù)據(jù)綁定起來(lái)。一旦你創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，當(dāng)數(shù)據(jù)變更了，DOM也會(huì)相應(yīng)地更新。如果你之前有過(guò)其他框架的使用經(jīng)驗(yàn)對(duì)于學(xué)習(xí) Vue.js 是有幫助的，但這不是必需的。最后希望這篇文章能對(duì)您學(xué)習(xí)前端開(kāi)發(fā)有所幫助。

出處：http://www.cnblogs.com/lgc-17862800193/p/7783766.html

lt;!DOCTYPE html>

<html>

<head>

</head>

<span class="loginInfo">登錄用戶：admin 姓名：管理員角色：系統(tǒng)管理員</span>

</div>

</div>

</div>

<ul>

<li>主界面使用 easyui1.3.5</li>

<li>導(dǎo)航樹(shù)使用 JQuery-zTree-v3.5.15</li>

</ul>

<ul>

<li>所有彈出框均顯示在頂級(jí)父窗口</li>

<li>修改easyui window拖動(dòng)，移動(dòng)時(shí)顯示窗口而不顯示虛線框，并限制拖動(dòng)范圍</li>

</ul>

</div>

</body>

</html>

rm-客戶管理

客戶信息管理模塊表結(jié)構(gòu)

這里主要涉及表:

t_customer 客戶表、t_customer_contact 客戶交往記錄表、t_customer_linkman 客戶聯(lián)系人表、t_customer_order 客戶訂單表、t_order_details 訂單詳情表

t_customer客戶信息表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵khnovarchar(20)可空客戶編號(hào)namevarchar(20)可空客戶姓名areavarchar(20)可空客戶所屬地區(qū)cus_managervarchar(20)可空客戶經(jīng)理levelvarchar(30)可空客戶級(jí)別mydvarchar(30)可空客戶滿意度xydvarchar(30)可空客戶信用度addressvarchar(500)可空客戶地址post_codevarchar(50)可空郵編phonevarchar(20)可空聯(lián)系電話faxvarchar(20)可空傳真web_sitevarchar(20)可空網(wǎng)址yyzzzchvarchar(50)可空營(yíng)業(yè)執(zhí)照注冊(cè)號(hào)frvarchar(20)可空法人代表zczjvarchar(20)可空注冊(cè)資金nyyevarchar(20)可空年?duì)I業(yè)額khyhvarchar(50)可空開(kāi)戶銀行khzhvarchar(50)可空開(kāi)戶賬號(hào)dsdjhvarchar(50)可空地稅登記號(hào)gsdjhvarchar(50)可空國(guó)稅登記號(hào)stateint(11)可空流失狀態(tài)is_validint(4)可空有效狀態(tài)create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間

t_customer_contact客戶交往記錄表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵cus_idint(11)可空客戶idcontact_timedatetime可空交往時(shí)間addressvarchar(500)可空交往地址overviewvarchar(100)可空地址create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間is_validint(4)可空有效狀態(tài)

t_customer_linkman客戶聯(lián)系人表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵cus_idint(11)可空客戶idlink_namevarchar(20)可空聯(lián)系人姓名sexvarchar(20)可空性別zhiweivarchar(50)可空職位office_phonevarchar(50)可空辦公電話phonevarchar(20)可空手機(jī)號(hào)is_validint(4)可空有效狀態(tài)ceate_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間

t_customer_order客戶訂單字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵cus_idint(11)可空客戶idorder_novarchar(40)可空訂單編號(hào)order_datedatetime可空下單時(shí)間addressvarchar(200)可空地址stateint(11)可空狀態(tài)create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間is_validint(4)可空有效狀態(tài)

t_order_details訂單詳情表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵order_idint(11)可空訂單idgoods_namevarchar(100)可空商品名稱goods_numint(11)可空商品數(shù)量unitvarchar(20)可空商品單位pricefloat可空單價(jià)sumfloat可空總金額is_validint(4)可空有效狀態(tài)create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間

客戶流失管理模塊表結(jié)構(gòu)

這里主要涉及表有

? t_customer_loss 客戶流失表

? t_customer_reprieve 客戶流失暫緩表

t_customer_loss客戶流失表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵cus_novarchar(40)可空客戶編號(hào)cus_namevarchar(20)可空客戶姓名cus_managervarchar(20)可空客戶經(jīng)理last_order_timedate可空最后下單時(shí)間confirm_loss_timedate可空確認(rèn)流失時(shí)間stateint(11)可空流失狀態(tài)loss_reasonvarchar(1000)可空流失原因is_validtinyint(4)可空有效狀態(tài)create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間

t_customer_reprieve客戶流失暫緩表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵loss_idint(11)可空流失idmeasurevarchar(500)可空措施is_validtinyint(4)可空有效狀態(tài)create_datedatetime可空創(chuàng)建時(shí)間update_datedatetime可空更新時(shí)間

客戶信息管理模塊實(shí)現(xiàn)

客戶信息管理查詢

客戶信息管理頁(yè)面效果

客戶信息查詢后端代碼實(shí)現(xiàn)

layui 框架通過(guò)表格展示后端表數(shù)據(jù),數(shù)據(jù)格式見(jiàn)官網(wǎng)測(cè)試數(shù)據(jù)地址。

CustomerMapper 接口定義與Sql配置

CustomerMapper .java

public interface CustomerMapper  extends BaseMapper<Customer,Integer> {
	/*
	  由于考慮到多個(gè)模塊均涉及多條件查詢
	  這里對(duì)于多條件分頁(yè)查詢方法由父接口BaseMapper定義
	*/
}

CustomerMapper .xml

    <select id="selectByParams" parameterType="com.xxxx.crm.query.CustomerQuery" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from t_customer
        <where>
            is_valid=1
            <!--
               state  流失狀態(tài)
                  0  未流失
                  1  已流失
            -->
            and state=0
            <if test="null !=cusName and cusName !=''">
                and name like concat('%',#{cusName},'%')
            </if>
            <if test="null !=cusNo and cusNo !=''">
                and khno=#{cusNo}
            </if>
            <if test="null !=level and level !=''">
                and level=#{level}
            </if>
            <if test="null !=myd and myd !=''">
                and myd=#{myd}
            </if>


        </where>
    </select>

CustomerQuery.java

在crm.query 包下創(chuàng)建CustomerQuery.java 查詢類，設(shè)置查詢條件

public class CustomerQuery extends BaseQuery {
    private String cusName;

    private String cusNo;

    private String level;
}

CustomerService 定義

CustomerService .java

@Service
public class CustomerService  extends BaseService<Customer, Integer> {
	/*
	  由于考慮到多個(gè)模塊均涉及多條件查詢
	  這里對(duì)于多條件分頁(yè)查詢方法由父類BaseService定義并實(shí)現(xiàn)
	*/
}

BaseService.java 分頁(yè)查詢方法定義與實(shí)現(xiàn)

    public Map<String, Object> queryByParamsForTable(BaseQuery baseQuery) {
        Map<String,Object> result=new HashMap<String,Object>();
        PageHelper.startPage(baseQuery.getPage(),baseQuery.getLimit());
        PageInfo<T> pageInfo=new PageInfo<T>(selectByParams(baseQuery));
        result.put("count",pageInfo.getTotal());
        result.put("data",pageInfo.getList());
        result.put("code",0);
        result.put("msg","");
        return result;
    }

CustomerController.java

@Controller
@RequestMapping("customer")
public class CustomerController extends BaseController {

    @Resource
    private CustomerService customerService;

    @Resource
    private CustomerOrderService orderService;



    @RequestMapping("index")
    public String index(){
        return "customer/customer";
    }

    @RequestMapping("list")
    @ResponseBody
    public Map<String,Object> queryCustomersByParams(CustomerQuery customerQuery){
        return customerService.queryByParamsForTable(customerQuery);
    }

客戶信息管理前端核心代碼

客戶信息管理主頁(yè)面模板

resources/views/customer目錄創(chuàng)建customer.ftl 模塊文件,模板內(nèi)容如下(模板依賴的layui文件由common.ftl 文件提供),layui表格數(shù)據(jù)展示模板文件實(shí)現(xiàn)參考該地址

customer.ftl

<!DOCTYPE html>
<html>
<head>
	<title>客戶管理</title>
	<#include "../common.ftl">
</head>
<body class="childrenBody">

<form class="layui-form" >
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="name"
						   class="layui-input
					searchVal" placeholder="客戶名" />
				</div>
				<div class="layui-input-inline">
					<input type="text" name="khno" class="layui-input
					searchVal" placeholder="客戶編號(hào)" />
				</div>
				<div class="layui-input-inline">
                    <select name="level"  id="level">
						<option value="">請(qǐng)選擇...</option>
						<option value="戰(zhàn)略合作伙伴">戰(zhàn)略合作伙伴</option>
						<option value="大客戶">大客戶</option>
						<option value="重點(diǎn)開(kāi)發(fā)客戶">重點(diǎn)開(kāi)發(fā)客戶</option>
                    </select>
				</div>
				<a class="layui-btn search_btn" data-type="reload"><i
							class="layui-icon"></i> 搜索</a>
			</div>
		</form>
	</blockquote>
	<table id="customerList" class="layui-table"  lay-filter="customers"></table>


	
	<!--操作-->
	<script id="customerListBar" type="text/html">
		<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">編輯</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">刪除</a>
	</script>


</form>
<script type="text/javascript" src="${ctx}/static/js/customer/customer.js"></script>

</body>
</html>

客戶信息管理主頁(yè)面模板核心js

static/js/customer目錄下創(chuàng)建customer.js 文件,初始化layui表格數(shù)據(jù),layui表格數(shù)據(jù)展示模板文件實(shí)現(xiàn)參考該地址

customer.js

layui.use(['table','layer',"form"],function(){
    var layer=parent.layer===undefined ? layui.layer : top.layer,
        $=layui.jquery,
        table=layui.table,
        form=layui.form;

    //客戶列表展示
    var  tableIns=table.render({
        elem: '#customerList',
        url : ctx+'/customer/list',
        cellMinWidth : 95,
        page : true,
        height : "full-125",
        limits : [10,15,20,25],
        limit : 10,
        toolbar: "#toolbarDemo",
        id : "customerListTable",
        cols : [[
            {type: "checkbox", fixed:"center"},
            {field: "id", title:'編號(hào)',fixed:"true"},
            {field: 'name', title: '客戶名',align:"center"},
            {field: 'fr', title: '法人',  align:'center'},
            {field: 'khno', title: '客戶編號(hào)', align:'center'},
            {field: 'area', title: '地區(qū)', align:'center'},
            {field: 'cusManager', title: '客戶經(jīng)理',  align:'center'},
            {field: 'myd', title: '滿意度', align:'center'},
            {field: 'level', title: '客戶級(jí)別', align:'center'},
            {field: 'xyd', title: '信用度', align:'center'},
            {field: 'address', title: '詳細(xì)地址', align:'center'},
            {field: 'postCode', title: '郵編', align:'center'},
            {field: 'phone', title: '電話', align:'center'},
            {field: 'webSite', title: '網(wǎng)站', align:'center'},
            {field: 'fax', title: '傳真', align:'center'},
            {field: 'zczj', title: '注冊(cè)資金', align:'center'},
            {field: 'yyzzzch', title: '營(yíng)業(yè)執(zhí)照', align:'center'},
            {field: 'khyh', title: '開(kāi)戶行', align:'center'},
            {field: 'khzh', title: '開(kāi)戶賬號(hào)', align:'center'},
            {field: 'gsdjh', title: '國(guó)稅', align:'center'},
            {field: 'dsdjh', title: '地稅', align:'center'},
            {field: 'createDate', title: '創(chuàng)建時(shí)間', align:'center'},
            {field: 'updateDate', title: '更新時(shí)間', align:'center'},
            {title: '操作', templet:'#customerListBar',fixed:"right",align:"center", minWidth:150}
        ]]
    });


});

客戶信息多條件查詢事件添加

? 客戶信息數(shù)據(jù)表格數(shù)據(jù)展示成功后,接下來(lái)考慮添加多條件查詢點(diǎn)擊事件,這里使用layui表格reload重載基礎(chǔ)方法實(shí)現(xiàn)，點(diǎn)擊這里參考官網(wǎng)介紹。

<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<a class="layui-btn layui-btn-normal addNews_btn" lay-event="add">
				<i class="layui-icon"></i>
				添加
			</a>
			<a class="layui-btn layui-btn-normal  " lay-event="link">
				<i class="layui-icon"></i>
				聯(lián)系人管理
			</a>
			<a class="layui-btn layui-btn-normal addNews_btn" lay-event="recode">
				<i class="layui-icon"></i>
				交往記錄
			</a>
			<a class="layui-btn layui-btn-normal addNews_btn" lay-event="order">
				<i class="layui-icon"></i>
				訂單查看
			</a>
		</div>
	</script>

customer.js 添加搜索點(diǎn)擊事件

    // 多條件搜索
    $(".search_btn").on("click",function(){
        table.reload("customerListTable",{
            page: {
                curr: 1 //重新從第 1 頁(yè)開(kāi)始
            },
            where: {
                cusName: $("input[name='name']").val(),  //客戶名
                cusNo: $("input[name='khno']").val(),  //客戶編號(hào)
                level: $("#level").val()  //客戶等級(jí)
            }
        })
    });

搜索效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-gaoeZkwl-1608711963854)(images\image-20200227215721847.png)]

客戶管理數(shù)據(jù)添加

機(jī)會(huì)管理后端添加

機(jī)會(huì)數(shù)據(jù)添加實(shí)現(xiàn)思路

/**
         * 1.參數(shù)校驗(yàn)
         *    客戶名稱 name 非空  不可重復(fù)
         *    phone 聯(lián)系電話  非空  格式符合規(guī)范
         *    法人  非空
         * 2.默認(rèn)值設(shè)置
         *     isValid  state  cteaetDate  updadteDate
         *      khno 系統(tǒng)生成 唯一  (uuid| 時(shí)間戳 | 年月日時(shí)分秒  雪花算法)
         *3.執(zhí)行添加  判斷結(jié)果
         */

機(jī)會(huì)數(shù)據(jù)添加核心代碼

@Transactional(propagation=Propagation.REQUIRED)
public void saveCustomer(Customer customer){
    checkParams(customer.getName(),customer.getPhone(),customer.getFr());
    AssertUtil.isTrue(null!=customerMapper.queryCustomerByName(customer.getName()),"該客戶已存在!");
    customer.setIsValid(1);
    customer.setState(0);
    customer.setCreateDate(new Date());
    customer.setUpdateDate(new Date());
    String khno="KH_"+new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
    customer.setKhno(khno);
    AssertUtil.isTrue(insertSelective(customer)<1,"客戶添加失敗!");
}
private void checkParams(String name, String phone, String fr) {
    AssertUtil.isTrue(StringUtils.isBlank(name),"請(qǐng)指定客戶名稱!");
    AssertUtil.isTrue(!(PhoneUtil.isMobile(phone)),"手機(jī)號(hào)格式非法！");
    AssertUtil.isTrue(StringUtils.isBlank(fr),"請(qǐng)指定公司法人!");
}

客戶管理數(shù)據(jù)添加后端頁(yè)面轉(zhuǎn)發(fā)&添加方法調(diào)用

? 對(duì)于機(jī)會(huì)數(shù)據(jù)添加與更新表單頁(yè)可以實(shí)現(xiàn)共享,這里在轉(zhuǎn)發(fā)機(jī)會(huì)數(shù)據(jù)添加與更新頁(yè)面時(shí)共用一套代碼即可(考慮更新時(shí)涉及到機(jī)會(huì)數(shù)據(jù)顯示操作，這里根據(jù)機(jī)會(huì)id查詢機(jī)會(huì)記錄并放入到請(qǐng)求域中)。

在線咨詢

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

使用Vue.js快速入門(mén)及實(shí)現(xiàn)用戶信息的增刪

ue.js是什么

Vue.js中的常用指令

編者按

rm-客戶管理

客戶信息管理模塊表結(jié)構(gòu)

客戶流失管理模塊表結(jié)構(gòu)

客戶信息管理模塊實(shí)現(xiàn)

客戶信息管理查詢

客戶信息管理頁(yè)面效果

客戶信息查詢后端代碼實(shí)現(xiàn)

CustomerMapper 接口定義與Sql配置

CustomerService 定義

CustomerController.java

客戶信息管理前端核心代碼

客戶信息管理主頁(yè)面模板

客戶信息管理主頁(yè)面模板核心js

客戶信息多條件查詢事件添加

客戶管理數(shù)據(jù)添加

機(jī)會(huì)管理后端添加

機(jī)會(huì)數(shù)據(jù)添加實(shí)現(xiàn)思路

機(jī)會(huì)數(shù)據(jù)添加核心代碼

客戶管理數(shù)據(jù)添加后端頁(yè)面轉(zhuǎn)發(fā)&添加方法調(diào)用

您的項(xiàng)目需求