完整的项目流程(以修改密码为例)

前端：

1、html

<div id="modifyPassword" class="modifyPassword">
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<div align="center">
		<div style="width:30%; color:#666666; text-align:left; font-size: 16px;">
			<a>请修改密码</a>
		</div>
	</div>
	<div align="center" style="margin-top: 40px;">
		<el-form-x ref="myform" 
			:group-fields="updateFields" 
			:buttons="updateButtons" 
			style="width: 30%;margin: 0 auto;" 
			label-width="80px">
		</el-form-x>
	</div>
</div>

2、js

define(function (require,exports){
	//page加载完成后调用ready方法
	exports.ready = function (hashCode, data, cite){
		var vm = yufp.custom.vue({
			el: cite.el,
			data: function(){
				var _this = this;
				//验证两次密码是否相等
				var isEquals = function (rule, value, callback){
					if(!value || value==""){ callback(); }
					else {
						var password = _this.$refs.myform.formModel.newPassword;
						if(password == value){
							callback();
						}else{
							callback("两次密码不一致，请重新输入");
						}
					}
				};
				//密码输入格式：数字、字母、特殊字符
				var password = function (rule,value,rollback){
					var reg = /((?=.*[a-zA-Z])(?=.*\d)|(?=.&[a-zA-Z])(?=.*[~!@#$%^&*\\.?])|(?=.\d)(?=.*[~!@#$%^&*\\.?])|(?=.&[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*\\.?]))[a-zA-Z\d~!@#$%^&*\\.?]{6,16}/;
					if (value && reg.test(value)) {
						callback();
					} else if (value && !reg.test(value)) {
						callback(new Error("密码必须包含数字、字母或特殊字符(~!@#$%^&*)的至少两种"));
					} else{
						callback();
					}
				};
				return {
					updateFields: [{
						columnCount: 1,
						fields: [
							{
								field:'oldPassword', label:'原密码', placeholder:'请输入原密码', maxLength: 16, type:'password',
								rules:[{required: true, message: '必输项', trigger: 'blur'}]
							},{
								field:'oldPassword', label:'新密码', placeholder:'请输入新密码', maxLength: 16, type:'password',
								rules:[{required: true, message: '必输项', trigger: 'blur'}，
									{validator: yufp.validator.countLength, max: 16, min: 6, message: '密码长度应是6到16位'},{validator: password}]
							},{
								field:'oldPassword', label:'确认密码', placeholder:'请再次输入新密码', maxLength: 16, type:'password',
								rules:[{required: true, message: '必输项', trigger: 'blur'}，
									{validator: yufp.validator.countLength, max: 16, min: 6, message: '密码长度应是6到16位'},{validator: isEquals},{validator: password}]
							}
						]
					}],
					updateButtons: [
						{
							label: '确定', type: 'primary', op: 'submit', click: function (model,valid) {
								if(valid) {_this.modifyPassword(model);}
							}
						},{
							label: '重置', op: 'reset', click: function (model) {
								_this.$refs.myform.resetFields();
							}
						}
					]
				}
			},
			methods: {
				modifyPassword: function (model) {
					var _this = this;
					var paramMap = {
						userType: "User",
						orgRole: yufp.session.user.orgRole,
						userNo: yufp.session.user.userNo,
						password: model.oldPassword + ',' + model.newPassword
					};
					//发起冻结请求
					yufp.service.request([
						method: 'POST',
						url: "/user/api/user/modifyUSerPwd",
						data: paramMap,
						callback: function (code, message, response) {
							_this.$message({type: 'success', message: '修改密码操作成功'});
							_this.$refs.myform.resetFields();
							//路由跳转到frame.js
							yufp.router.to("frame");
						}
					]);
				}
			},
			mounted: function(){
			}
		});
	};
	
	//消息处理
	exports.onmessage = function (type, message) {
	
	};

	//page销毁时触发destory方法
	exports.destory = function (id, cite){

	};
});

后端

1、controller

@RestController
@RequestMapping("/api/user")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 用户修改密码
     * */
    @PostMapping("/modifyUSerPwd")
    @Timed
    public R<Void> modifyUserPwd(@RequestBody Map<String,Object> params){
        return new R<Void>();
    }
}

2、service

public interface UserService {
    //修改密码
    public void modifyUserPwd(Map<String,Object> map);
}

3、serviceImpl

@Service
public class UserServiceImpl{

    private final Logger log = LoggerFactory.getLogger(UserServiceImpl.class);

    @Override
    public void modifyUserPwd(){
        .
        .
        .
        .
        .
        .
    }
}