使用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

客户信息多条件查询事件添加

客户管理数据添加

机会管理后端添加

机会数据添加实现思路

机会数据添加核心代码

客户管理数据添加后端页面转发&添加方法调用

您的项目需求