锋迷商城用户注册登录前端实现

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>注册</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="stylesheet" href="static/css/amazeui.css" /><link href="static/css/dlstyle.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="static/css/bootstrap.min.css" /></head><body><div class="login-boxtitle" style="height: 100px;"><div class="logoBig"><img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;"></div></div><div class="login-banner" style="background: rgb(142,213,21);"><div class="login-main"><div class="login-banner-bg"><span></span><img width="400"  src="static/images/act2.png" /></div><div class="login-box" id="container"><h3 class="title">用户注册</h3><h5 :style="colorStyle">{{tips}}</h5><div class="clear"></div><div class="login-form" style="background: none;"><form><div class="user-name"><label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label><input type="text"   v-model="user.username" placeholder="邮箱/手机/用户名" @keyup="checkRegistInfo"></div><div class="user-pass" style="margin-top: 15px;"><label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label><input type="password"  v-model="user.password" placeholder="请输入密码" @keyup="checkRegistInfo"></div><div class="user-pass" style="margin-top: 15px;"><label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label><input type="password"   v-model="user.repassword" placeholder="请再次输入密码" @keyup="checkRegistInfo"></div></form></div><div class="login-links"><br /></div><div class="am-cf"><input type="submit" name="" @click="doRegist" value="提交注册" class="am-btn am-btn-primary am-btn-sm"></div><div class="partner"></div></div></div></div><div class="footer "><div class="footer-hd "></div><div class="footer-bd "><p><a href="# ">联系我们</a><a href="# ">网站地图</a></p></div></div><script type="text/javascript" src="static/js/vue.js"></script><script type="text/javascript" src="static/js/axios.min.js"></script><script>var baseUrl="http://localhost:8080/";var vm=new Vue({el:"#container",data:{user:{username:"",password:"",repassword:"",},tips:"",colorStyle:"color:red",isRight:false},methods:{doRegist(){if(vm.isRight){var url=baseUrl+"user/regist";axios({method:"post",url:url,data:vm.user}).then((res)=>{var vo=res.data;if(vo.code==10000){vm.tips="注册成功";vm.colorStyle="color:green";setTimeout(function(){window.location.href="login.html";},2000)}else{vm.tips="注册失败";}});}else{vm.tips="请输入正确信息";}},checkRegistInfo(){if(vm.user.username==""){vm.tips="请输入账号";vm.isRight=false;}else if(vm.user.username.length<3||vm.user.username.length>20){vm.tips="账号长度必须为3-20个字符";vm.isRight=false;}else{if(vm.user.password==""){vm.tips="请输入密码";vm.isRight=false;}else if(vm.user.password.length<3||vm.user.password.length>20){vm.tips="密码长度必须为3-20个字符";vm.isRight=false;}else{if(vm.user.reusername==""){vm.tips="请再次输入密码";vm.isRight=false;}else if(vm.user.repassword!=vm.user.password&&vm.user.repassword.length>0){vm.tips="两次输入密码不一致";vm.isRight=false;}else{vm.tips="";vm.isRight=true;}}}}}});</script></body></html>

@ApiOperation("用户注册接口")@ApiImplicitParams({@ApiImplicitParam(dataType = "string",name = "username",value="用户注册账号",required = true),@ApiImplicitParam(dataType = "string",name = "password",value="用户注册密码",required = true)})@PostMapping( "/regist")public ResultVO regist(@RequestBody Users user){return userService.userRegist(user.getUsername(), user.getPassword());}

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>登录</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="stylesheet" href="static/css/amazeui.css" /><link href="static/css/dlstyle.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="static/css/bootstrap.min.css" /> </head><body><div class="login-boxtitle" style="height: 100px;"><div class="logoBig"><img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;"></div></div><div class="login-banner"><div class="login-main" ><div class="login-banner-bg"><span></span><img src="static/images/big.jpg" /></div><div class="login-box" style="margin-top: 20px;" id="container"><h3 class="title">登录商城</h3><h5 :style="colorStyle" id="tips">{{tips}}</h5><div class="clear"></div><div class="login-form"  style="background: none; margin-top: 15px;"><form><div class="user-name"  style="margin-top: 20px;"><label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label><input type="text" v-model="username" id="userName" placeholder="邮箱/手机/用户名" @keyup="checkInfo"></div><div class="user-pass"  style="margin-top: 20px;"><label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label><input type="password" v-model="password" id="userPwd" placeholder="请输入密码" @keyup="checkInfo"></div></form></div><div class="login-links" ><label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label><a href="#" class="am-fr">忘记密码</a><br /></div><div class="am-cf"><input type="submit" id="submitBtn" @click="doSubmit" value="登 录" class="am-btn am-btn-primary am-btn-sm"></div><div class="am-cf"><input type="button" onclick="javascript:window.location.href='register.html'" value="注 册" class="am-btn am-btn-default am-btn-sm"></div><div class="partner"></div></div></div></div><div class="footer "><div class="footer-hd "></div><div class="footer-bd "><p><a href="# ">联系我们</a><a href="# ">网站地图</a></p></div></div><script type="text/javascript" src="static/js/vue.js"></script><script type="text/javascript" src="static/js/axios.min.js"></script><script type="text/javascript" src="static/js/jquery-1.9.min.js"></script><script type="text/javascript" src="static/js/cookie_utils.js"></script><script type="text/javascript">/*$("#submitBtn").click(function(){//1.接收账号和密码var name=$("#userName").val();var pwd=$("#userPwd").val();//2.进行数据的合法性校验if(name.length<3||name.length>20){$("#tips").html("<label style='color:red'>账号长度必须为3-20个字符</label>")}else{if(pwd.length<3||pwd.length>16){$("#tips").html("<label style='color:red'>密码长度必须为3-16个字符</label>")}else{$.get("http://localhost:8080/user/login",{username:name,password:pwd},function(res){console.log(res);if(res.code==10000){var userInfo=res.data;//document.cookie="username="+userInfo.username;//document.cookie="userImg"+userInfo.userImg;setCookieValue("username",userInfo.username);setCookieValue("userimg",userInfo.userImg);window.location.href="index.html";}else{$("#tips").html("<label style='color:red'>"+res.msg+"</label>");}},"json")}    }});*/var baseUrl="http://localhost:8080/";var vm=new Vue({el:"#container",data:{username:"",password:"",tips:"",colorStyle:"color:red",isRight:false},methods:{doSubmit(){if(vm.isRight){var url=baseUrl+"user/login";axios.get(url,{    params:{username:vm.username,password:vm.password,}}).then((res)=>{var vo=res.data;if(vo.code=10000){window.location.href="index.html";}else{vm.tips="账号或密码错误";}});}else{vm.tips="请正确输入账号和密码";}},checkInfo(){if(vm.username==""){vm.tips="请输入账号";vm.isRight=false;}else if(vm.username.length<3||vm.username.length>20){vm.tips="账号长度必须为3-20个字符";vm.isRight=false;}else{if(vm.password==""){vm.tips="请输入密码";vm.isRight=false;}else if(vm.password.length<3||vm.password.length>20){vm.tips="密码长度必须为3-20个字符";vm.isRight=false;}else{vm.tips="";vm.isRight=true;}}}}})</script></body></html>

import com.qfedu.fmmall.entity.Users;
import com.qfedu.fmmall.service.UserService;
import com.qfedu.fmmall.vo.ResultVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;@ResponseBody
@Controller
@RequestMapping("/user")
@Api(value="提供用户的登录和注册接口",tags="用户管理")
@CrossOrigin
public class UserController {@Resourceprivate UserService userService;@ApiOperation("用户登录接口")@ApiImplicitParams({@ApiImplicitParam(dataType = "string",name = "username",value="用户登录账号",required = true),@ApiImplicitParam(dataType = "string",name = "password",value="用户登录密码",required = true)})@RequestMapping(value = "/login",method= RequestMethod.GET)public ResultVO login(@RequestParam("username") String name,@RequestParam(value="password") String pwd){ResultVO resultVO = userService.checkLogin(name, pwd);return resultVO;}@ApiOperation("用户注册接口")@ApiImplicitParams({@ApiImplicitParam(dataType = "string",name = "username",value="用户注册账号",required = true),@ApiImplicitParam(dataType = "string",name = "password",value="用户注册密码",required = true)})@PostMapping( "/regist")public ResultVO regist(@RequestBody Users user){return userService.userRegist(user.getUsername(), user.getPassword());}
}

锋迷商城用户注册登录前端实现相关推荐

锋迷商城项目介绍（一）
锋迷商城项目介绍项目模块一.用户管理二.首页功能实现三.商品详情四.购物车五.收货地址管理六.提交订单七.用户中心八.订单管理九.评价管理十.中心首页数据显示项目介绍一.项目 ...
毕业设计学习锋迷商城的的笔记（自己设计并手写后台商品管理，分类管理，用户，地址管理系统，订单管理，微信支付（内网穿透））
文章目录自己添加的后端管理页面视频演示效果论文地址后台代码视频实现讲解思路 1. 商品管理 2.商品分类管理 3.商品地址管理 4.权限管理系统权限管理系统文章地址 5.订单管理 5.1 6 ...
毕业设计学习锋迷商城笔记
文章目录自己添加的后端管理页面视频演示效果 1. 商品管理 2.商品分类管理 3.商品地址管理 4.用户中心管理 4. 用户权限管理 5.订单管理 6.商品品牌管理锋迷商城项目 1.通过Mave ...
《锋迷商城》——首页：轮播图
<锋迷商城>系列项目链接: <一> 项目搭建链接: <二>数据库的创建链接: <三>业务流程设计链接: <四>业务流程实现:用户管理 ...
Java电商《锋迷商城》分布式笔记
目录⼀.锋迷商城在互联⽹环境下存在的问题 1.1 ⾼并发带来的服务器访问压⼒问题 1.2 ⾼并发带来的业务处理问题 1.3 系统迭代带来的架构问题 1.4 业务实现问题 1.5 如何解决以上问题? ...
锋迷商城项目数据库设计（四）
锋迷商城项目数据库设计一.用户表 users 二.用户地址表 user_addr 三.登录历史表 user_login_history 四.轮播图 index_img 五.商品分类 category ...
《锋迷商城》——用户认证
<锋迷商城>系列项目链接: <一> 项目搭建链接: <二>数据库的创建链接: <三>业务流程设计链接: <四>业务流程实现:用户管理 ...
锋迷商城学习--SpringBoot篇
一.项目整合与部署存在的问题 1.1 SSM手动整合存在的问题 SSM整合步骤多.配置繁琐项目进行服务器部署步骤繁琐 1.2 如何简化这些繁琐的配置和部署步骤? SpringBoot就是一个可以简化 ...
锋迷商城整合tkMapper
在mapper子模块pom.xml文件中添加依赖 <dependency><groupId>tk.mybatis</groupId><artifactId&g ...

锋迷商城用户注册登录前端实现

锋迷商城用户注册登录前端实现相关推荐

最新文章

热门文章

锋迷商城 用户注册登录前端实现

锋迷商城 用户注册登录前端实现相关推荐

最新文章

热门文章

锋迷商城用户注册登录前端实现

锋迷商城用户注册登录前端实现相关推荐