使用Vue.js快速入門及實現用戶信息的增刪

ue.js是什么

Vue.js 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。 Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

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

聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。

每個 Vue 應用都是通過 Vue 函數創建一個新的 Vue 實例開始的，當創建一個 Vue 實例時，你可以傳入一個選項對象。

一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。

組件我們后續會繼續講給大家聽的，而現在要明白的是所有的 Vue 組件都是 Vue 實例，并且接受相同的選項對象即可 (一些根實例特有的選項除外)。

當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。

數據綁定最常見的形式就是使用 —— 雙大括號，通過使用 v-once指令，也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但這會影響到該節點上所有的數據綁定。

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

<!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({ //創建Vue對象
el:"#app", //把當前Vue對象掛載到div標簽上,#app是ID選擇器
data:{
message:"Hello Vue!",//message是自定義的數據
}
});
</script>
</body>
</html>

下邊這種方式也可以實現同樣的效果，當vue.js文件放在頁面的下方時，這種方式在頁面刷新時不會看到{{ }}表達式的原樣。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
如果vue.js文件放在頁面的下方，在頁面刷新時會看到{{}}表達式原樣，所以使用v-cloak指令代替表達式。
在css中設置[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({ //創建Vue對象
el:"#app", //把當前Vue對象掛載到div標簽上,#app是ID選擇器
data:{
message:"Hello Vue!",//message是自定義的數據
}
});
</script>
</html>

現在我們來簡單的說說——Vue的構造函數是什么?

選項el屬性，就是elment縮寫，當前Vue對象掛載到哪個標簽上的語法，支持CSS選擇器或者DOM對象，一般id選擇選擇當前的標簽

data屬性是自定義數據。vue會把自定義的數據與HTML模板數據進行綁定

數據的綁定方式就是{{}}，類似于AngularJS

雙向數據綁定

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

通俗點說，Vue對象會改變會直接影響到HTML標簽的變化，而且標簽的變化也會反過來影響Vue對象的屬性變化。

Vue中可以使用 v-model 指令在 input 輸入框中創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。因為它會選擇 Vue 實例數據來作為具體的值。這個時候就需要通過 JavaScript 在組件的 data 選項中聲明初始值了。

將message綁定到文本框，當更改文本框的值時，{{ message }} 中的內容也會被更新。反之，如果改變message的值，文本框的值也會被更新。

<!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>

在默認情況下，v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，這個時候就需要點擊一下瀏覽器任意地方實現數據的同步。

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

Vue.js中的常用指令

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

一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應式地更新 HTML 屬性。

接下來就給大家介紹幾個Vue中的常用指令：

v-if 指令

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

這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據。

數據的seen屬性為true時，內容會被輸出

數據的seen屬性為false時，內容不會被輸出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p v-if="seen">現在你看到我了</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 添加一個 "else" 塊,條件都不符合時渲染。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

判斷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:"蘋果很好吃！",
bananer:"香蕉也很好吃！"
}
});
</script>
</body>
</html>

v-show 指令

現在我們簡單講講v-show，v-show指令用于根據條件展示元素的選項，用法也是大致一樣的。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>綜合實例</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>

現在我們來對比一下v-if和v-show有何區別吧：

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

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

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

v-for 指令

v-for 指令可以綁定數組的數據來渲染一個項目列表。

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

<!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: '蘋果' },
{ name: '香蕉' },
{ name: '西瓜' }
]
}
});
</script>
</body>
</html>

v-bind 指令

HTML 屬性中的值應使用 v-bind 指令。主要是用來操作元素的class列表和他的內聯樣式。和用JS直接操作dom節點功能一樣，但是，要比js簡單的多。

<!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()">點擊變化</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 指令

為了能讓用戶和你的應用進行互動，我們可以用 v-on 指令綁定一個事件監聽器，通過它調用我們 Vue 實例中定義的方法。

在reverseMessage 方法中，當我們更新了應用的狀態，但沒有觸碰 DOM，因為所有的 DOM 操作都由 Vue 來處理。

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

<div id="app">
<button v-on:click="counter+=1">點擊加1</button>
<p>{{counter}}</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉信息</button>
<button v-on:click="func">點擊彈出</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

現在我們已經介紹了一些Vue.js的基礎知識了，結合以上知識我們可以來做個小Demo吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>綜合實例</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">學號</label>
<input type="text" v-model="person1.num">
</div>
<div class="form-group">
<label for="price">成績</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>學號</th>
<th>成績</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是數據驅動的，無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，當數據變更了，DOM也會相應地更新。如果你之前有過其他框架的使用經驗對于學習 Vue.js 是有幫助的，但這不是必需的。最后希望這篇文章能對您學習前端開發有所幫助。

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

lt;!DOCTYPE html>

<html>

<head>

<title>后臺管理系統模板</title>

</head>

<a href="#"><span class="northTitle">后臺管理系統模板</span></a>

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

</div>

</div>

</div>

<ul>

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

<li>導航樹使用 JQuery-zTree-v3.5.15</li>

</ul>

<ul>

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

<li>修改easyui window拖動，移動時顯示窗口而不顯示虛線框，并限制拖動范圍</li>

</ul>

</div>

</body>

</html>

rm-客戶管理

客戶信息管理模塊表結構

這里主要涉及表:

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

t_customer客戶信息表字段字段類型字段限制字段描述主鍵idint(11)自增id主鍵khnovarchar(20)可空客戶編號namevarchar(20)可空客戶姓名areavarchar(20)可空客戶所屬地區cus_managervarchar(20)可空客戶經理levelvarchar(30)可空客戶級別mydvarchar(30)可空客戶滿意度xydvarchar(30)可空客戶信用度addressvarchar(500)可空客戶地址post_codevarchar(50)可空郵編phonevarchar(20)可空聯系電話faxvarchar(20)可空傳真web_sitevarchar(20)可空網址yyzzzchvarchar(50)可空營業執照注冊號frvarchar(20)可空法人代表zczjvarchar(20)可空注冊資金nyyevarchar(20)可空年營業額khyhvarchar(50)可空開戶銀行khzhvarchar(50)可空開戶賬號dsdjhvarchar(50)可空地稅登記號gsdjhvarchar(50)可空國稅登記號stateint(11)可空流失狀態is_validint(4)可空有效狀態create_datedatetime可空創建時間update_datedatetime可空更新時間

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

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

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

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

客戶流失管理模塊表結構

這里主要涉及表有

? t_customer_loss 客戶流失表

? t_customer_reprieve 客戶流失暫緩表

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

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

客戶信息管理模塊實現

客戶信息管理查詢

客戶信息管理頁面效果

客戶信息查詢后端代碼實現

layui 框架通過表格展示后端表數據,數據格式見官網測試數據地址。

CustomerMapper 接口定義與Sql配置

CustomerMapper .java

public interface CustomerMapper  extends BaseMapper<Customer,Integer> {
	/*
	  由于考慮到多個模塊均涉及多條件查詢
	  這里對于多條件分頁查詢方法由父接口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  流失狀態
                  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 包下創建CustomerQuery.java 查詢類，設置查詢條件

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> {
	/*
	  由于考慮到多個模塊均涉及多條件查詢
	  這里對于多條件分頁查詢方法由父類BaseService定義并實現
	*/
}

BaseService.java 分頁查詢方法定義與實現

    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);
    }

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

客戶信息管理主頁面模板

resources/views/customer目錄創建customer.ftl 模塊文件,模板內容如下(模板依賴的layui文件由common.ftl 文件提供),layui表格數據展示模板文件實現參考該地址

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="客戶編號" />
				</div>
				<div class="layui-input-inline">
                    <select name="level"  id="level">
						<option value="">請選擇...</option>
						<option value="戰略合作伙伴">戰略合作伙伴</option>
						<option value="大客戶">大客戶</option>
						<option value="重點開發客戶">重點開發客戶</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>

客戶信息管理主頁面模板核心js

static/js/customer目錄下創建customer.js 文件,初始化layui表格數據,layui表格數據展示模板文件實現參考該地址

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:'編號',fixed:"true"},
            {field: 'name', title: '客戶名',align:"center"},
            {field: 'fr', title: '法人',  align:'center'},
            {field: 'khno', title: '客戶編號', align:'center'},
            {field: 'area', title: '地區', align:'center'},
            {field: 'cusManager', title: '客戶經理',  align:'center'},
            {field: 'myd', title: '滿意度', align:'center'},
            {field: 'level', title: '客戶級別', align:'center'},
            {field: 'xyd', title: '信用度', align:'center'},
            {field: 'address', title: '詳細地址', align:'center'},
            {field: 'postCode', title: '郵編', align:'center'},
            {field: 'phone', title: '電話', align:'center'},
            {field: 'webSite', title: '網站', align:'center'},
            {field: 'fax', title: '傳真', align:'center'},
            {field: 'zczj', title: '注冊資金', align:'center'},
            {field: 'yyzzzch', title: '營業執照', align:'center'},
            {field: 'khyh', title: '開戶行', align:'center'},
            {field: 'khzh', title: '開戶賬號', align:'center'},
            {field: 'gsdjh', title: '國稅', align:'center'},
            {field: 'dsdjh', title: '地稅', align:'center'},
            {field: 'createDate', title: '創建時間', align:'center'},
            {field: 'updateDate', title: '更新時間', align:'center'},
            {title: '操作', templet:'#customerListBar',fixed:"right",align:"center", minWidth:150}
        ]]
    });


});

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

? 客戶信息數據表格數據展示成功后,接下來考慮添加多條件查詢點擊事件,這里使用layui表格reload重載基礎方法實現，點擊這里參考官網介紹。

<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>
				聯系人管理
			</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 添加搜索點擊事件

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

搜索效果

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

客戶管理數據添加

機會管理后端添加

機會數據添加實現思路

/**
         * 1.參數校驗
         *    客戶名稱 name 非空  不可重復
         *    phone 聯系電話  非空  格式符合規范
         *    法人  非空
         * 2.默認值設置
         *     isValid  state  cteaetDate  updadteDate
         *      khno 系統生成 唯一  (uuid| 時間戳 | 年月日時分秒  雪花算法)
         *3.執行添加  判斷結果
         */

機會數據添加核心代碼

@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),"請指定客戶名稱!");
    AssertUtil.isTrue(!(PhoneUtil.isMobile(phone)),"手機號格式非法！");
    AssertUtil.isTrue(StringUtils.isBlank(fr),"請指定公司法人!");
}

客戶管理數據添加后端頁面轉發&添加方法調用

? 對于機會數據添加與更新表單頁可以實現共享,這里在轉發機會數據添加與更新頁面時共用一套代碼即可(考慮更新時涉及到機會數據顯示操作，這里根據機會id查詢機會記錄并放入到請求域中)。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用Vue.js快速入門及實現用戶信息的增刪

ue.js是什么

Vue.js中的常用指令

編者按

rm-客戶管理

客戶信息管理模塊表結構

客戶流失管理模塊表結構

客戶信息管理模塊實現

客戶信息管理查詢

客戶信息管理頁面效果

客戶信息查詢后端代碼實現

CustomerMapper 接口定義與Sql配置

CustomerService 定義

CustomerController.java

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

客戶信息管理主頁面模板

客戶信息管理主頁面模板核心js

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

客戶管理數據添加

機會管理后端添加

機會數據添加實現思路

機會數據添加核心代碼

客戶管理數據添加后端頁面轉發&添加方法調用

您的項目需求