如何使用ssm实现基于ssm的宠物医院管理系统的设计与实现+vue

    package com.controller;
    
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.Calendar;
    import java.util.Map;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.Date;
    import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    
    import com.utils.ValidatorUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.format.annotation.DateTimeFormat;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import com.baomidou.mybatisplus.mapper.EntityWrapper;
    import com.baomidou.mybatisplus.mapper.Wrapper;
    import com.annotation.IgnoreAuth;
    
    import com.entity.ChongwuxinxiEntity;
    import com.entity.view.ChongwuxinxiView;
    
    import com.service.ChongwuxinxiService;
    import com.service.TokenService;
    import com.utils.PageUtils;
    import com.utils.R;
    import com.utils.MD5Util;
    import com.utils.MPUtil;
    import com.utils.CommonUtil;
    
    
    /** * 宠物信息
     * 后端接口
     * @author 
     * @email 
     * @date 2021-04-15 20:04:19
     */
    @RestController
    @RequestMapping("/chongwuxinxi")
    public class ChongwuxinxiController {
    @Autowired
    private ChongwuxinxiService chongwuxinxiService;
    
    
    
    /** * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ChongwuxinxiEntity chongwuxinxi, 
    		HttpServletRequest request){
    
        EntityWrapper<ChongwuxinxiEntity> ew = new EntityWrapper<ChongwuxinxiEntity>();
    		PageUtils page = chongwuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, chongwuxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    /** * 前端列表
     */
    	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ChongwuxinxiEntity chongwuxinxi, HttpServletRequest request){
        EntityWrapper<ChongwuxinxiEntity> ew = new EntityWrapper<ChongwuxinxiEntity>();
    		PageUtils page = chongwuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, chongwuxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    	/** * 列表
     */
    @RequestMapping("/lists")
    public R list( ChongwuxinxiEntity chongwuxinxi){
       	EntityWrapper<ChongwuxinxiEntity> ew = new EntityWrapper<ChongwuxinxiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( chongwuxinxi, "chongwuxinxi")); 
        return R.ok().put("data", chongwuxinxiService.selectListView(ew));
    }
    
    	 /** * 查询
     */
    @RequestMapping("/query")
    public R query(ChongwuxinxiEntity chongwuxinxi){
        EntityWrapper< ChongwuxinxiEntity> ew = new EntityWrapper< ChongwuxinxiEntity>();
     		ew.allEq(MPUtil.allEQMapPre( chongwuxinxi, "chongwuxinxi")); 
    		ChongwuxinxiView chongwuxinxiView =  chongwuxinxiService.selectView(ew);
    		return R.ok("查询宠物信息成功").put("data", chongwuxinxiView);
    }
    	
    /** * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        ChongwuxinxiEntity chongwuxinxi = chongwuxinxiService.selectById(id);
    		chongwuxinxi.setClicknum(chongwuxinxi.getClicknum()+1);
    		chongwuxinxi.setClicktime(new Date());
    		chongwuxinxiService.updateById(chongwuxinxi);
        return R.ok().put("data", chongwuxinxi);
    }
    
    /** * 前端详情
     */
    	@IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        ChongwuxinxiEntity chongwuxinxi = chongwuxinxiService.selectById(id);
    		chongwuxinxi.setClicknum(chongwuxinxi.getClicknum()+1);
    		chongwuxinxi.setClicktime(new Date());
    		chongwuxinxiService.updateById(chongwuxinxi);
        return R.ok().put("data", chongwuxinxi);
    }
    
    
    
    
    /** * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody ChongwuxinxiEntity chongwuxinxi, HttpServletRequest request){
    	chongwuxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(chongwuxinxi);
    
        chongwuxinxiService.insert(chongwuxinxi);
        return R.ok();
    }
    
    /** * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody ChongwuxinxiEntity chongwuxinxi, HttpServletRequest request){
    	chongwuxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(chongwuxinxi);
    
        chongwuxinxiService.insert(chongwuxinxi);
        return R.ok();
    }
    
    /** * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ChongwuxinxiEntity chongwuxinxi, HttpServletRequest request){
        //ValidatorUtils.validateEntity(chongwuxinxi);
        chongwuxinxiService.updateById(chongwuxinxi);//全部更新
        return R.ok();
    }
    
    
    /** * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        chongwuxinxiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /** * 提醒接口
     */
    	@RequestMapping("/remind/{columnName}/{type}")
    	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
    						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    		map.put("column", columnName);
    		map.put("type", type);
    		
    		if(type.equals("2")) {
    			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    			Calendar c = Calendar.getInstance();
    			Date remindStartDate = null;
    			Date remindEndDate = null;
    			if(map.get("remindstart")!=null) {
    				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
    				c.setTime(new Date()); 
    				c.add(Calendar.DAY_OF_MONTH,remindStart);
    				remindStartDate = c.getTime();
    				map.put("remindstart", sdf.format(remindStartDate));
    			}
    			if(map.get("remindend")!=null) {
    				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
    				c.setTime(new Date());
    				c.add(Calendar.DAY_OF_MONTH,remindEnd);
    				remindEndDate = c.getTime();
    				map.put("remindend", sdf.format(remindEndDate));
    			}
    		}
    		
    		Wrapper<ChongwuxinxiEntity> wrapper = new EntityWrapper<ChongwuxinxiEntity>();
    		if(map.get("remindstart")!=null) {
    			wrapper.ge(columnName, map.get("remindstart"));
    		}
    		if(map.get("remindend")!=null) {
    			wrapper.le(columnName, map.get("remindend"));
    		}
    
    
    		int count = chongwuxinxiService.selectCount(wrapper);
    		return R.ok().put("count", count);
    	}
    	
    	/** * 前端智能排序
     */
    	@IgnoreAuth
    @RequestMapping("/autoSort")
    public R autoSort(@RequestParam Map<String, Object> params,ChongwuxinxiEntity chongwuxinxi, HttpServletRequest request,String pre){
        EntityWrapper<ChongwuxinxiEntity> ew = new EntityWrapper<ChongwuxinxiEntity>();
        Map<String, Object> newMap = new HashMap<String, Object>();
        Map<String, Object> param = new HashMap<String, Object>();
    		Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
    		while (it.hasNext()) {
    			Map.Entry<String, Object> entry = it.next();
    			String key = entry.getKey();
    			String newKey = entry.getKey();
    			if (pre.endsWith(".")) {
    				newMap.put(pre + newKey, entry.getValue());
    			} else if (StringUtils.isEmpty(pre)) {
    				newMap.put(newKey, entry.getValue());
    			} else {
    				newMap.put(pre + "." + newKey, entry.getValue());
    			}
    		}
    		params.put("sort", "clicknum");
        
        params.put("order", "desc");
    		PageUtils page = chongwuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, chongwuxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    
    }

    package com.controller;
    
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.Calendar;
    import java.util.Map;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.Date;
    import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    
    import com.utils.ValidatorUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.format.annotation.DateTimeFormat;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import com.baomidou.mybatisplus.mapper.EntityWrapper;
    import com.baomidou.mybatisplus.mapper.Wrapper;
    import com.annotation.IgnoreAuth;
    
    import com.entity.GuahaoyuyueEntity;
    import com.entity.view.GuahaoyuyueView;
    
    import com.service.GuahaoyuyueService;
    import com.service.TokenService;
    import com.utils.PageUtils;
    import com.utils.R;
    import com.utils.MD5Util;
    import com.utils.MPUtil;
    import com.utils.CommonUtil;
    
    
    /** * 挂号预约
     * 后端接口
     * @author 
     * @email 
     * @date 2021-04-15 20:04:19
     */
    @RestController
    @RequestMapping("/guahaoyuyue")
    public class GuahaoyuyueController {
    @Autowired
    private GuahaoyuyueService guahaoyuyueService;
    
    
    
    /** * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,GuahaoyuyueEntity guahaoyuyue, 
    		HttpServletRequest request){
    
        EntityWrapper<GuahaoyuyueEntity> ew = new EntityWrapper<GuahaoyuyueEntity>();
    		PageUtils page = guahaoyuyueService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, guahaoyuyue), params), params));
        return R.ok().put("data", page);
    }
    
    /** * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,GuahaoyuyueEntity guahaoyuyue, HttpServletRequest request){
        EntityWrapper<GuahaoyuyueEntity> ew = new EntityWrapper<GuahaoyuyueEntity>();
    		PageUtils page = guahaoyuyueService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, guahaoyuyue), params), params));
        return R.ok().put("data", page);
    }
    
    	/** * 列表
     */
    @RequestMapping("/lists")
    public R list( GuahaoyuyueEntity guahaoyuyue){
       	EntityWrapper<GuahaoyuyueEntity> ew = new EntityWrapper<GuahaoyuyueEntity>();
      	ew.allEq(MPUtil.allEQMapPre( guahaoyuyue, "guahaoyuyue")); 
        return R.ok().put("data", guahaoyuyueService.selectListView(ew));
    }
    
    	 /** * 查询
     */
    @RequestMapping("/query")
    public R query(GuahaoyuyueEntity guahaoyuyue){
        EntityWrapper< GuahaoyuyueEntity> ew = new EntityWrapper< GuahaoyuyueEntity>();
     		ew.allEq(MPUtil.allEQMapPre( guahaoyuyue, "guahaoyuyue")); 
    		GuahaoyuyueView guahaoyuyueView =  guahaoyuyueService.selectView(ew);
    		return R.ok("查询挂号预约成功").put("data", guahaoyuyueView);
    }
    	
    /** * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        GuahaoyuyueEntity guahaoyuyue = guahaoyuyueService.selectById(id);
        return R.ok().put("data", guahaoyuyue);
    }
    
    /** * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        GuahaoyuyueEntity guahaoyuyue = guahaoyuyueService.selectById(id);
        return R.ok().put("data", guahaoyuyue);
    }
    
    
    
    
    /** * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody GuahaoyuyueEntity guahaoyuyue, HttpServletRequest request){
    	guahaoyuyue.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(guahaoyuyue);
    
        guahaoyuyueService.insert(guahaoyuyue);
        return R.ok();
    }
    
    /** * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody GuahaoyuyueEntity guahaoyuyue, HttpServletRequest request){
    	guahaoyuyue.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(guahaoyuyue);
    
        guahaoyuyueService.insert(guahaoyuyue);
        return R.ok();
    }
    
    /** * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody GuahaoyuyueEntity guahaoyuyue, HttpServletRequest request){
        //ValidatorUtils.validateEntity(guahaoyuyue);
        guahaoyuyueService.updateById(guahaoyuyue);//全部更新
        return R.ok();
    }
    
    
    /** * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        guahaoyuyueService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /** * 提醒接口
     */
    	@RequestMapping("/remind/{columnName}/{type}")
    	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
    						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    		map.put("column", columnName);
    		map.put("type", type);
    		
    		if(type.equals("2")) {
    			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    			Calendar c = Calendar.getInstance();
    			Date remindStartDate = null;
    			Date remindEndDate = null;
    			if(map.get("remindstart")!=null) {
    				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
    				c.setTime(new Date()); 
    				c.add(Calendar.DAY_OF_MONTH,remindStart);
    				remindStartDate = c.getTime();
    				map.put("remindstart", sdf.format(remindStartDate));
    			}
    			if(map.get("remindend")!=null) {
    				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
    				c.setTime(new Date());
    				c.add(Calendar.DAY_OF_MONTH,remindEnd);
    				remindEndDate = c.getTime();
    				map.put("remindend", sdf.format(remindEndDate));
    			}
    		}
    		
    		Wrapper<GuahaoyuyueEntity> wrapper = new EntityWrapper<GuahaoyuyueEntity>();
    		if(map.get("remindstart")!=null) {
    			wrapper.ge(columnName, map.get("remindstart"));
    		}
    		if(map.get("remindend")!=null) {
    			wrapper.le(columnName, map.get("remindend"));
    		}
    
    
    		int count = guahaoyuyueService.selectCount(wrapper);
    		return R.ok().put("count", count);
    	}
    	
    
    
    }

    package com.controller;
    
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.Calendar;
    import java.util.Map;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.Date;
    import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    
    import com.utils.ValidatorUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.format.annotation.DateTimeFormat;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import com.baomidou.mybatisplus.mapper.EntityWrapper;
    import com.baomidou.mybatisplus.mapper.Wrapper;
    import com.annotation.IgnoreAuth;
    
    import com.entity.YishengxinxiEntity;
    import com.entity.view.YishengxinxiView;
    
    import com.service.YishengxinxiService;
    import com.service.TokenService;
    import com.utils.PageUtils;
    import com.utils.R;
    import com.utils.MD5Util;
    import com.utils.MPUtil;
    import com.utils.CommonUtil;
    
    
    /** * 医生信息
     * 后端接口
     * @author 
     * @email 
     * @date 2021-04-15 20:04:19
     */
    @RestController
    @RequestMapping("/yishengxinxi")
    public class YishengxinxiController {
    @Autowired
    private YishengxinxiService yishengxinxiService;
    
    
    
    /** * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,YishengxinxiEntity yishengxinxi, 
    		HttpServletRequest request){
    
        EntityWrapper<YishengxinxiEntity> ew = new EntityWrapper<YishengxinxiEntity>();
    		PageUtils page = yishengxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yishengxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    /** * 前端列表
     */
    	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,YishengxinxiEntity yishengxinxi, HttpServletRequest request){
        EntityWrapper<YishengxinxiEntity> ew = new EntityWrapper<YishengxinxiEntity>();
    		PageUtils page = yishengxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yishengxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    	/** * 列表
     */
    @RequestMapping("/lists")
    public R list( YishengxinxiEntity yishengxinxi){
       	EntityWrapper<YishengxinxiEntity> ew = new EntityWrapper<YishengxinxiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( yishengxinxi, "yishengxinxi")); 
        return R.ok().put("data", yishengxinxiService.selectListView(ew));
    }
    
    	 /** * 查询
     */
    @RequestMapping("/query")
    public R query(YishengxinxiEntity yishengxinxi){
        EntityWrapper< YishengxinxiEntity> ew = new EntityWrapper< YishengxinxiEntity>();
     		ew.allEq(MPUtil.allEQMapPre( yishengxinxi, "yishengxinxi")); 
    		YishengxinxiView yishengxinxiView =  yishengxinxiService.selectView(ew);
    		return R.ok("查询医生信息成功").put("data", yishengxinxiView);
    }
    	
    /** * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        YishengxinxiEntity yishengxinxi = yishengxinxiService.selectById(id);
        return R.ok().put("data", yishengxinxi);
    }
    
    /** * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        YishengxinxiEntity yishengxinxi = yishengxinxiService.selectById(id);
        return R.ok().put("data", yishengxinxi);
    }
    
    
    
    
    /** * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody YishengxinxiEntity yishengxinxi, HttpServletRequest request){
    	yishengxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yishengxinxi);
    
        yishengxinxiService.insert(yishengxinxi);
        return R.ok();
    }
    
    /** * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody YishengxinxiEntity yishengxinxi, HttpServletRequest request){
    	yishengxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yishengxinxi);
    
        yishengxinxiService.insert(yishengxinxi);
        return R.ok();
    }
    
    /** * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody YishengxinxiEntity yishengxinxi, HttpServletRequest request){
        //ValidatorUtils.validateEntity(yishengxinxi);
        yishengxinxiService.updateById(yishengxinxi);//全部更新
        return R.ok();
    }
    
    
    /** * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        yishengxinxiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /** * 提醒接口
     */
    	@RequestMapping("/remind/{columnName}/{type}")
    	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
    						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    		map.put("column", columnName);
    		map.put("type", type);
    		
    		if(type.equals("2")) {
    			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    			Calendar c = Calendar.getInstance();
    			Date remindStartDate = null;
    			Date remindEndDate = null;
    			if(map.get("remindstart")!=null) {
    				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
    				c.setTime(new Date()); 
    				c.add(Calendar.DAY_OF_MONTH,remindStart);
    				remindStartDate = c.getTime();
    				map.put("remindstart", sdf.format(remindStartDate));
    			}
    			if(map.get("remindend")!=null) {
    				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
    				c.setTime(new Date());
    				c.add(Calendar.DAY_OF_MONTH,remindEnd);
    				remindEndDate = c.getTime();
    				map.put("remindend", sdf.format(remindEndDate));
    			}
    		}
    		
    		Wrapper<YishengxinxiEntity> wrapper = new EntityWrapper<YishengxinxiEntity>();
    		if(map.get("remindstart")!=null) {
    			wrapper.ge(columnName, map.get("remindstart"));
    		}
    		if(map.get("remindend")!=null) {
    			wrapper.le(columnName, map.get("remindend"));
    		}
    
    
    		int count = yishengxinxiService.selectCount(wrapper);
    		return R.ok().put("count", count);
    	}
    	
    
    
    }

    <template>
      <div>
    <div class="container">
      <div class="login-form" style="backgroundColor:rgba(255, 255, 255, 1);borderRadius:10px">
        <h1 class="h1" style="color:rgba(131, 138, 182, 1);fontSize:28px;">宠物医院管理系统注册</h1>
    		<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">用户名</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.yonghuming" class="input" type="text" placeholder="用户名">
    			   </div>
    			 </div> -->
    			<el-form-item label="用户名" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.yonghuming" autocomplete="off" placeholder="用户名"  />
    			</el-form-item>
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">密码</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
    			   </div>
    			 </div> -->
    			<el-form-item label="密码" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
    			</el-form-item>
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">姓名</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.xingming" class="input" type="text" placeholder="姓名">
    			   </div>
    			 </div> -->
    			<el-form-item label="姓名" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名"  />
    			</el-form-item>
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">年龄</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.nianling" class="input" type="text" placeholder="年龄">
    			   </div>
    			 </div> -->
    			<el-form-item label="年龄" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.nianling" autocomplete="off" placeholder="年龄"  />
    			</el-form-item>
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">手机</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
    			   </div>
    			 </div> -->
    			<el-form-item label="手机" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机"  />
    			</el-form-item>
    			<!-- <div v-if="tableName=='yonghu'" class="input-group">
    			   <div class="label">邮箱</div>
    			   <div class="input-container">
    			     <input v-model="ruleForm.youxiang" class="input" type="text" placeholder="邮箱">
    			   </div>
    			 </div> -->
    			<el-form-item label="邮箱" class="input" v-if="tableName=='yonghu'">
    			  <el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱"  />
    			</el-form-item>
    			<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
    				<el-button class="btn" type="primary" @click="login()">注册</el-button>
    				<el-button class="btn close" type="primary" @click="close()">取消</el-button>
    			</div>
    		</el-form>
      </div>
      <!-- <div class="nk-navigation">
        <a href="#">
          <div @click="login()">注册</div>
        </a>
      </div> -->
    </div>
      </div>
    </template>
    <script>
    export default {
      data() {
    return {
      ruleForm: {
      },
      tableName:"",
      rules: {}
    };
      },
      mounted(){
    let table = this.$storage.get("loginTable");
    this.tableName = table;
      },
      methods: {
    // 获取uuid
    getUUID () {
      return new Date().getTime();
    },
    close(){
    	this.$router.push({ path: "/login" });
    },
    // 注册
    login() {
      if((!this.ruleForm.yonghuming) && `yonghu` == this.tableName){
        this.$message.error(`用户名不能为空`);
        return
      }
      if((!this.ruleForm.mima) && `yonghu` == this.tableName){
        this.$message.error(`密码不能为空`);
        return
      }
      if((!this.ruleForm.xingming) && `yonghu` == this.tableName){
        this.$message.error(`姓名不能为空`);
        return
      }
      if(`yonghu` == this.tableName && this.ruleForm.nianling&&(!this.$validate.isIntNumer(this.ruleForm.nianling))){
        this.$message.error(`年龄应输入整数`);
        return
      }
      if(`yonghu` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
        this.$message.error(`手机应输入手机格式`);
        return
      }
      if(`yonghu` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
        this.$message.error(`邮箱应输入邮件格式`);
        return
      }
      this.$http({
        url: `${this.tableName}/register`,
        method: "post",
        data:this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "注册成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$router.replace({ path: "/login" });
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
      }
    };
    </script>
    <style lang="scss" scoped>
    	.el-radio__input.is-checked .el-radio__inner {
    		border-color: #00c292;
    		background: #00c292;
    	}
    
    	.el-radio__input.is-checked .el-radio__inner {
    		border-color: #00c292;
    		background: #00c292;
    	}
    
    	.el-radio__input.is-checked .el-radio__inner {
    		border-color: #00c292;
    		background: #00c292;
    	}
    
    	.el-radio__input.is-checked+.el-radio__label {
    		color: #00c292;
    	}
    
    	.el-radio__input.is-checked+.el-radio__label {
    		color: #00c292;
    	}
    
    	.el-radio__input.is-checked+.el-radio__label {
    		color: #00c292;
    	}
    
    	.h1 {
    		margin-top: 10px;
    	}
    
    	body {
    		padding: 0;
    		margin: 0;
    	}
    
    	// .container {
     //    min-height: 100vh;
     //    text-align: center;
     //    // background-color: #00c292;
     //    padding-top: 20vh;
     //    background-image: url(../assets/img/bg.jpg);
     //    background-size: 100% 100%;
     //    opacity: 0.9;
     //  }
    
    	// .login-form:before {
    	// 	vertical-align: middle;
    	// 	display: inline-block;
    	// }
    
    	// .login-form {
    	// 	max-width: 500px;
    	// 	padding: 20px 0;
    	// 	width: 80%;
    	// 	position: relative;
    	// 	margin: 0 auto;
    
    	// 	.label {
    	// 		min-width: 60px;
    	// 	}
    
    	// 	.input-group {
    	// 		max-width: 500px;
    	// 		padding: 20px 0;
    	// 		width: 80%;
    	// 		position: relative;
    	// 		margin: 0 auto;
    	// 		display: flex;
    	// 		align-items: center;
    
    	// 		.input-container {
    	// 			display: inline-block;
    	// 			width: 100%;
    	// 			text-align: left;
    	// 			margin-left: 10px;
    	// 		}
    
    	// 		.icon {
    	// 			width: 30px;
    	// 			height: 30px;
    	// 		}
    
    	// 		.input {
    	// 			position: relative;
    	// 			z-index: 2;
    	// 			float: left;
    	// 			width: 100%;
    	// 			margin-bottom: 0;
    	// 			box-shadow: none;
    	// 			border-top: 0px solid #ccc;
    	// 			border-left: 0px solid #ccc;
    	// 			border-right: 0px solid #ccc;
    	// 			border-bottom: 1px solid #ccc;
    	// 			padding: 0px;
    	// 			resize: none;
    	// 			border-radius: 0px;
    	// 			display: block;
    	// 			width: 100%;
    	// 			height: 34px;
    	// 			padding: 6px 12px;
    	// 			font-size: 14px;
    	// 			line-height: 1.42857143;
    	// 			color: #555;
    	// 			background-color: #fff;
    	// 		}
    
    	// 	}
    	// }
    
    	.nk-navigation {
    		margin-top: 15px;
    
    		a {
    			display: inline-block;
    			color: #fff;
    			background: rgba(255, 255, 255, .2);
    			width: 100px;
    			height: 50px;
    			border-radius: 30px;
    			text-align: center;
    			display: flex;
    			align-items: center;
    			margin: 0 auto;
    			justify-content: center;
    			padding: 0 20px;
    		}
    
    		.icon {
    			margin-left: 10px;
    			width: 30px;
    			height: 30px;
    		}
    	}
    
    	.register-container {
    		margin-top: 10px;
    
    		a {
    			display: inline-block;
    			color: #fff;
    			max-width: 500px;
    			height: 50px;
    			border-radius: 30px;
    			text-align: center;
    			display: flex;
    			align-items: center;
    			margin: 0 auto;
    			justify-content: center;
    			padding: 0 20px;
    
    			div {
    				margin-left: 10px;
    			}
    		}
    	}
    	
    	.container {
    		background-image: url("http://codegen.caihongy.cn/20210105/bf5686918faa4f68a9b7634e35a058d7.jpg");
    		height: 100vh;
    		background-position: center center;
    		background-size: cover;
    		background-repeat: no-repeat;
    	
    		.login-form {
    			right: 50%;
    			top: 50%;
    			height: auto;
    			transform: translate3d(50%, -50%, 0);
    			border-radius: 10px;
    			background-color: rgba(255,255,255,.5);
    			width: 420px;
    			padding: 30px 30px 40px 30px;
    			font-size: 14px;
    			font-weight: 500;
    			
    			.h1 {
    				margin: 0;
    				text-align: center;
    				line-height: 54px;
    			    font-size: 24px;
    			    color: #000;
    			}
    				
    			.rgs-form {
    				display: flex;
    				flex-direction: column;
    				justify-content: center;
    				align-items: center;
    				
    				.input {
    					width: 100%;
    					
    					& /deep/ .el-form-item__label {
    						line-height: 38px;
    						color: rgba(131, 138, 182, 1);
    						font-size: #606266;
    					}
    					
    					& /deep/ .el-input__inner {
    						height: 38px;
    						color: rgba(131, 138, 182, 1);
    						font-size: 14px;
    						border-width: 1px;
    						border-style: solid;
    						border-color: rgba(236, 236, 255, 1);
    						border-radius: 4px;
    						background-color: #fff;
    					}
    				}
    				
    				.btn {
    					margin: 0 10px;
    					width: 88px;
    					height: 44px;
    					color: #fff;
    					font-size: 14px;
    					border-width: 0px;
    					border-style: solid;
    					border-color: #409EFF;
    					border-radius: 4px;
    					background-color: rgba(84, 88, 179, 1);
    				}
    
    				.close {
    					margin: 0 10px;
    					width: 88px;
    					height: 44px;
    					color: #409EFF;
    					font-size: 14px;
    					border-width: 1px;
    					border-style: solid;
    					border-color: #409EFF;
    					border-radius: 4px;
    					background-color: #FFF;
    				}
    
    			}
    		}
    	}
    </style>