后台管理系统项目之新增用户界面

效果展示

如何做好一个能和后端衔接好的新增界面的表单，最近学习到了一些技巧，记录下作为学习笔记

分析

1.首先

用到的是bootstrap里面提供的样式。自然要引入对应的css文件和js文件，除此之外，在状态那里我们可以看到使用的是一个开关的样式，这里使用的是css3的方法，

<div class="form-group">
<label class="col-sm-3 control-label">状态：</label>
	<div class="col-sm-9">
		<div class="switch">
			<div class="onoffswitch">
				<input type="checkbox" checked class="onoffswitch-checkbox" v-model="user.status" id="status">
				<label class="onoffswitch-label" for="status">
					<span class="onoffswitch-inner"></span>
					<span class="onoffswitch-switch"></span>
				</label>
			</div>
		</div>
	</div>
</div>

代码的重点自然是从第四行开始，onoffswitch以及onoffswitch-checkbox样式等，这些都是外部引入的css文件，具体就不在分析，直接复制粘贴就可使用，因为要和后台交互，附上id值以及先写好v-model实现值的双向绑定。

2.继续分析

这里是怎么实现的呢，这里使用到的是icheck插件 他是基于JQuery的一个插件，自然需要jQuery的js文件以及它自己的js文件。然后就是icheck的js和css。引用好之后我们就可以来使用了。他的样子就比普通的多选框好看一些，而且可以调整成和界面和谐的颜色。

<div class="form-group">
<label class="col-sm-3 control-label">角色：</label>
<div class="col-sm-9">
	<div class="checkbox checkbox-success checkbox-inline i-checks" v-for="(item,index) in roleList">
		<input name="role" type="checkbox" :id=`role${index}` :value="item.roleIds" v-model="user.roleIds">
		<label v-for="index">{{item.roleName}}</label>
	</div>
</div>

因为角色里面的内容需要从模拟后台拿到，所以通过v-for的指令让其遍历。这里值得注意的知识点是因为id属性的值我们通过v-bind来赋值，并且值是index，默认的话遍历出来从0开始，也就是第一个input多选框的id为0。但是这样有一个弊端就是之后我们如果还有别的地方需要给id赋动态值的话没有辨识。
所以用到的方法是使用间隔符，然后用$符号进行拼接index，通过F12检查就会发现id值变成了role0,role1这样就有了辨识。
然后就是js部分，icheck是需要初始化的。本来初始化我们可以直接放到js文件中

$(function(){
$('.i-checks').iCheck({
				checkboxClass:'icheckbox_square-green',
				//radioClass:'iradio_square-green'
			})
}

直接完成初始化，这里面的属性绿色就是我们所需要的。可以设置复选框的颜色以及单选框的颜色，只要进行对应属性更改即可。
但是后来经过调试发现，当我们写了ajax，模拟从后台拿到json文件并且保存遍历之后，icheck的样式就不见了。通过分析应该是ajax完成了直接渲染了而icheck的初始化还没完成。
解决的办法自然是通过vue不同的生命周期钩子函数来调用初始化函数。所以首先在method中定义了方法

Icheck:function(){
			// 同样复选框是使用了ichek 引用了其js和css后还要在我们的js里初始化
			$('.i-checks').iCheck({
				checkboxClass:'icheckbox_square-green',
				//radioClass:'iradio_square-green'
			})
		},	

那么应该在哪里调用呢，created显然不对，他执行的时候dom元素都没被加载完成，还未挂载，那么mounted可以吗？他执行的时候dom元素加载完毕了，挂载完成。但是尝试之后发现并不正确。这时候就想到，因为我们是模拟从后台拿数据，那么数据发生了变化，因为通过ajax拿到的res被保存在了data中定义的一个roleList中答案已经呼之欲出了，应该吧icheck的初始化放在updated中。当ajax请求下来了json数据后初始化。

	updated:function(){
		this.Icheck();
	}

这样我们就可以完成效果了。

3.岗位部分select2的使用

这是使用到了select2插件，它基于jQuery，同样的在官网下载好对应的js和css并引入进网页代码中即可。如何使用：

<div class="form-group">
	<label class="col-sm-3 control-label">岗位：</label>
	<div class="col-sm-9">
		<select class="form-control" name="post" multiple="true" v-model="user.postIds">
			<!-- multiple表示可以多选 -->
			<option :value="item.postId" v-for="item in postList">{{item.postName}}</option>
		</select>
	</div>
</div>

同样的使用bootstrap先把文本框和select设置好。multiple属性是该select选择框能够多选，
做完这些，我们只需要在我们的页面js中写上这样一行代码：

	$('[name="post"]').select2() //这里的目的就是把普通的多选用js的形式变成select2 比较好看

找到name为post的jQuery对象，然后直接调用select2方法，就会惊奇的发现，刚刚很丑的选择框变得好看了起来。初始的时候是底色是灰色的，文字颜色是黑色的，为了和我们的页面风格搭配。我们F12查看，在哪里调整颜色，当然会看到select2对应的css中有对应的属性，我们只需要复制对应的class选择器将其拷贝出来，放到另一个全局的css文件中，将其默认的样式覆盖掉即可、

/* 覆盖select2中的默认样式 改成绿色背景 白色文字 会好看一点 */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #1AB394;
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
}

这样就可以达到效果了。

模拟后台数据v-mode双向绑定的注意

要完成双向绑定自然需要在data中定义一个变量去接收input，select框的值。因为模拟后端数据，所以也是按照后端数据的属性值进行命名要注意的是data中定义的user对象。如果对象里面属性值是字符串或是number或是布尔亦或是数组类型的都不需要再data中再次声明，直接使用即可。都将其附上空值，

//初始化user对象 和表单双向绑定
			vm.user={
				loginName:"",
				dept:{
					deptName:"",
					deptId:""
				},
				userName:"",
				password:"",
				email:"",
				phonenumber:"",
				sex:0,
				status:false,
				postIds:[],
				roleIds:[]
			}

但是dept是一个对象，必须在data里面user对象中也进行定义。

data:{
user:{
	dept:{}
}
}

这样才不会报错才能正常进行双向绑定。
接下来就是在html中进行v-model的双向绑定了，

<form class="form-horizontal" v-model="user">
<div class="form-group">
			<label class="col-sm-3 control-label" >登录名称：</label>
			<div class="col-sm-9">
				<input type="text" name="loginName" v-model="user.loginName" class="form-control" placeholder="请输入登录名称">
			</div>
		</div>
<div class="form-group">
		<input type="hidden" name="deptId" v-model="user.dept.deptId">
		<label class="col-sm-3 control-label">部门名称：</label>
		<div class="col-sm-9">
			<input type="text" name="deptName" readonly="true" v-model="user.dept.deptName" class="form-control" placeholder="请输入部门名称">
		</div>
	</div>

以第一个第二个为例，首先，整个user绑定在的是form标签中，并且这里form的class样式form-horizontal是bootstrap里面的样式，能够让表单中文本框和input框进行一个对齐。这是一个需要记住的地方。然后只需要对应的v-model填写即可。

ajax

性别，角色，岗位我们不应该在html中进行写死，因为后序要和后台联动的时候写死就不对的。所以使用ajax模拟从后端获取到对应的json数据并且将其用v-for指令在html页面中遍历并渲染出来。在method中定义方法loadDate，当我们点击也就是add函数执行时，我们也执行loadData。

		//加载岗位
		$.ajax({
			url:"../../data/sys/posts.json",
			type:"get",
			dataType:"json",
			async:false,
			success:function(res){
				vm.postList=res;
			},
			error:function(res){
				$.modal.alertError("对不起，系统正忙请稍后再试")
			}
			
		})

以岗位为例，url属性是对应的json数据位置，以get类型进行请求，返回一个json数据，并且设置其不是异步的。因为我们还要其他路两个ajax，所以设置他们为同步的。
成功的回调函数，把结果res存放在data定义的一个空数组中备用，然后html就能够v-for进行遍历了。