springboot+uniapp实现简单注册登录

---

前言

简单学了springboot后想做一个小demo，本文记录一下从头开始新建一个项目，包括前端，后端，java连接数据库进行相关操作，UUID等，有什么写错的地方望大佬指正

后端

新建springboot项目

File->New->Project

导入相关依赖（可以不选，后面复制我的）Finsh

打开pom.xml文件，

   <modelVersion>4.0.0</modelVersion>
    <groupId>com</groupId>
    <artifactId>NowToDo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>NowToDo</name>
    <description>NowToDo</description>

这些根据你的项目实际情况更改，其他cv大法，主要是<dependencies>标签里的代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com</groupId>
    <artifactId>NowToDo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>NowToDo</name>
    <description>NowToDo</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.vaadin.external.google</groupId>
            <artifactId>android-json</artifactId>
            <version>0.0.20131108.vaadin1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>net.minidev</groupId>
            <artifactId>json-smart</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.13</version>
        </dependency>

    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
                <version>2.3.7.RELEASE</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.QuestionnaireApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>true</filtering>
            </resource>
        </resources>
    </build>

</project>

下载依赖，需要提前下载并配置好Maven，否则无法运行

大概要写的类
CrosConfig

package com.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

配置数据库

application.properties

server.tomcat.relaxedQueryChars=<,>, [,\,],^,`,{,|,}
# 应用名称
spring.application.name=questionnaire

# 应用服务 WEB 访问端口
server.port=8088
# 数据库驱动：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=defaultDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/数据库?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
# 数据库用户名&密码：
spring.datasource.username=用户名
spring.datasource.password=密码



mybatis.type-aliases-package=com.pojo
mybatis.mapper-locations=classpath:mybatis/*.xml

建表，写对应类

新建数据库，简单写个user表

pojo->User类
类的属性名称要和数据库的名称对应

package com.pojo;

import java.util.Date;

public class User {

    private String account;
    private String password;
    private String phone;
    private String Email;
    private String name;
    private String nickname;
    private Date   come_time;
    private Date   birth_time;
    private String userID;


    public User(String userID ,String account,String password,String nickname){
        this.userID=userID;
        this.account = account;
        this.password=password;
        this.nickname=nickname;
    }


    public User(){

    }


    public String getUserID() {
        return userID;
    }

    public void setUserID(String userID) {
        this.userID = userID;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getEmail() {
        return Email;
    }

    public void setEmail(String email) {
        Email = email;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public Date getCome_time() {
        return come_time;
    }

    public void setCome_time(Date come_time) {
        this.come_time = come_time;
    }

    public Date getBirth_time() {
        return birth_time;
    }

    public void setBirth_time(Date birth_time) {
        this.birth_time = birth_time;
    }

    public String getAccount() {
        return account;
    }
}

写接口，写对应xml文件

dao->Userdao

package com.dao;

import com.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;


@Mapper
@Repository
public interface Userdao {
//    通过账号判断用户是否已经注册
    int getUserNumberByAccount(@Param("account") String account);

//    通过账户密码获取用户信息，验证用户是否存在
    User getBypassword(@Param("account") String account,
                       @Param("password") String password);
//    创建用户
    void createUser(User user);
//    更改密码
    void updatePassword(@Param("account") String account, @Param("Newpassword") String Newpassword);
//    确认密码
    int configCount(@Param("OriginalPassword") String OriginalPassword,@Param("id") String id);
}

resources->mybatis->User.xml
<mapper namespace=“com.dao.Userdao”>这里要和Userdao类的路径对应

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.Userdao">

        <select id="getUserNumberByAccount" resultType="int">
            select count(*) from USER where account=#{account};
        </select>

    <select id="getBypassword" resultType="User">
        select * from user
        where account=#{account} and password=#{password};
    </select>


    <insert id="createUser" parameterType="User" >
        insert into user(userID,account,password,come_time,nickname)
            value (#{userID},#{account},#{password},NOW(),#{nickname})
    </insert>



    <update id="updatePassword" >
        update user set password=#{Newpassword} where account=#{account}
    </update>
</mapper>

封装返回信息，封装UUID

pojo->WebResult
返回给前端的消息

package com.pojo;

public class WebResult<T> {
//    数据
    private T data;

//    状态码
//        ERROR(-1, "失败"),
//        SUCCESS(0, "成功");
    private int code;

//    返回消息
    private String message;

    public WebResult() {
    }

    public WebResult(T data) {
        this.data = data;
    }

//成功
    public void success() {
        this.code = 1;
        message ="成功";

    }
//出错
    public void error() {
        this.code =-1;
        message = "出错";

    }
//成功,携带信息
    public void success(String message) {
        this.code = 1;
        this.message = message;

    }
//失败,携带信息
    public void error(String message) {
        this.code =-1;
        this.message = message;
    }


    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

}

IDSet 随机生成8位不重复的字符串

package com.pojo;

import java.util.UUID;

public class IDSet {

    public static String[] chars = new String[] { "a", "b", "c", "d", "e", "f",
            "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s",
            "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5",
            "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I",
            "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
            "W", "X", "Y", "Z" };



    public static String getShortUuid() {
        StringBuilder shortBuffer = new StringBuilder();
        String uuid = UUID.randomUUID().toString().replace("-", "");
        for (int i = 0; i < 8; i++) {
            String str = uuid.substring(i * 4, i * 4 + 4);
            int x = Integer.parseInt(str, 16);
            shortBuffer.append(chars[x % 0x3E]);
        }
        return shortBuffer.toString();
    }

}

Service层

service->UserOP

package com.service;

import com.dao.Userdao;
import com.pojo.IDSet;
import com.pojo.User;
import com.pojo.WebResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserOP {

    @Autowired
    Userdao userdao;

    /*输入账号密码进行登录
    account：账号
    password：密码
    账号不存在，未注册：webResult.setCode(-2);
    账号存在，密码错误 webResult.setCode(-1);
    账号存在，密码正确 webResult.setCode(1);
    * */
    public WebResult UserLogin(String account , String password){

        WebResult webResult =new WebResult();
        try {
            int count =userdao.getUserNumberByAccount(account);

//           账号不存在
            if(count==0){
                System.out.println("账号不存在");
                webResult.setCode(-2);
                webResult.setMessage("账号不存在");
            }
            else {

                User user= userdao.getBypassword(account,password);
                if(user==null){
                    System.out.println(account+"密码错误");
                    webResult.error("密码错误");
                }
                else{
                    webResult.success("登录成功");
                    System.out.println(account+"登录成功");
                }
            }

        }
        catch (Exception ignored){
            webResult.error("访问数据库出错");
            System.out.println("访问数据库出错");
        }

        return webResult;

    }


    /*用户注册
    account：账号
    password：密码
    账号已存在 code = -1;
    账号不存在 注册成功 code = 1;
             注册失败 code = -1 程序提示报错

    * */
    public WebResult userRegister(String username ,String password){
//        System.out.println(username);
//        System.out.println(password);
        WebResult webResult = new WebResult();
        try{
            int  userCount  = userdao.getUserNumberByAccount(username);

            if(userCount==0){
                System.out.println("此账号为新用户");

                User user =new User(IDSet.getShortUuid(),username,password,"小月亮"+IDSet.getShortUuid());

                userdao.createUser(user);

                webResult.success("账号注册成功");
            }
            else{
                webResult.error(username+"账号已被注册");
                System.out.println(username+"账号已被注册");
            }
        }  
        catch (Exception exception){
            webResult.error("访问数据库出错");
            System.out.println("数据库查询出错");
        }
        return webResult;
    }

    public WebResult changePassword(String account ,String password){
        WebResult webResult = new WebResult();
        try {
            userdao.updatePassword(account,password);
            webResult.success("修改密码成功");
        }
        catch (Exception exception){
            webResult.error("访问数据库出错");
            System.out.println("数据库查询出错");
        }
        return webResult;
    }

}

Control层

web->UserController

package com.web;



import com.pojo.WebResult;
import com.service.UserOP;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;


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

    @Autowired
    private UserOP userOP;

    @RequestMapping("/login")
    public WebResult login(@RequestBody HashMap<String, String> map) {

        return userOP.UserLogin(map.get("account"), map.get("password"));

    }


    @RequestMapping("/userRegister")
    public WebResult userRegister(@RequestBody HashMap<String ,String> map){

        return userOP.userRegister(map.get("account"), map.get("password"));
    }


    @RequestMapping("/forgetPassword")
    public WebResult forgetPassword(@RequestBody HashMap<String ,String> map){

        return userOP.changePassword(map.get("account"), map.get("password"));
    }
}

前端

前端使用HbuilderX，uniapp和vue语法很像，我就直接开干了，主要的是js的代码，用vue做web项目的时候简单改一下就行了，下面的只是我写（copy）的一个例子，前端各位可以随意发挥

下载插件

仔仔-登录注册模板

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages++
		{
			"path": "pages/todos/todos",
			"style": {
			"navigationBarTitleText": "首页",//顶部样式
			"navigationBarBackgroundColor":"#007AFF",
			"enablePullDownRefresh": false,
			"navigationStyle": "default",
			"navigationStyle": "custom"//设置自定义导航栏
			}
		}
		,{
			"path" : "pages/rank/rank",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "排名",
				"navigationBarBackgroundColor":"#007AFF",
				"enablePullDownRefresh": false
			}
			
		}
		,{
			"path" : "pages/statistics/statistics",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "统计",
				"navigationBarBackgroundColor":"#007AFF",
				"enablePullDownRefresh": false
			}
			
		}
		,{
			"path" : "pages/mydata/mydata",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "个人中心",
				"navigationBarBackgroundColor":"#007AFF",
				"enablePullDownRefresh": false
			}
			
		},
		{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/register/index",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/checking/index",
			"style": {
				"navigationBarTitleText": ""
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#ffffff",
		"backgroundColor": "#ffffff"
	},
	"tabBar":{
			"color":"#999",
			"selectedColor":"#00b783",
			"borderStyle":"#fff",
			"backgroundColor":"white",
			"list":[
				{
					"pagePath":"pages/todos/todos",
					"text":"首页",
					"iconPath":"static/tabBar/home.png",
					"selectedIconPath":"static/tabBar/home-active.png"
				},
				{
					"pagePath":"pages/rank/rank",
					"text":"排名",
					"iconPath":"static/tabBar/rank.png",
					"selectedIconPath":"static/tabBar/rank-active.png"
				},
				{
					"pagePath":"pages/statistics/statistics",
					"text":"统计",
					"iconPath":"static/tabBar/statistics.png",
					"selectedIconPath":"static/tabBar/statistics-active.png"
				},
				
				{
					"pagePath":"pages/mydata/mydata",
					"text":"个人中心",
					"iconPath":"static/tabBar/my.png",
					"selectedIconPath":"static/tabBar/my-active.png"
				}
				
			]
			
	}

	
}

login->index.vue

<template>
	<view class="zai-box">
		<image src="../../static/login/login.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">LOGO区域</view>
		<view class="zai-form">
			<input class="zai-input" maxlength="11" v-model="account" placeholder="请输入账号" />
			<input class="zai-input" v-model="password" password placeholder="请输入密码"/>
			<navigator url="../checking/index" hover-class="none" class="zai-label">忘记密码？</navigator>
			<button class="zai-btn" @click="login()">立即登录</button>
			<navigator url="../register/index" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
		</view>
	</view>
</template>
<script>
	import setting from '../../common/setting.js'
	
	export default {
		data() {
			return {
				account:'',
				password:''
			}
		},
		// onLoad(){
		// 	if(!store.state.hasLogin){
		// 		uni.showToast({
		// 			icon: 'none',
		// 			title: '请登录'
		// 		});
		// 	}
		// },
		
		methods: {
			login(){
				var re=/^[0-9]*$/

				if ((this.account.length !=11 )|| (!re.test(this.account))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位账号'
					});
					return;
				}
				else if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				else{
					
					uni.request({
						method: 'POST',
						url: setting.url+'/user/login',
						data:{
							account:this.account,
							password:this.password,
						},
						success(res) {
							console.log(res)
							if(res.statusCode==200){
								
								if(res.data.code==-2){
									uni.showToast({
									icon:'none',
									title:'该账号未注册'
									})
								}
								else if(res.data.code==-1){
									uni.showToast({
									icon:'none',
									title:'密码或者账号错误'
									})
								}
								else{
									// store.commit('setUesrInfo',res.data);
									// uni.setStorage({
									// 	key:'uesrInfo',
									// 	data:res.data
									// })
									uni.showToast({
									icon:'none',
									title:'登录成功'
									})
									uni.reLaunch({
										url:'../todos/todos'
									})
								}
								
							}
							else{
								uni.showToast({
								icon:'none',
								title:'网络错误'
								})
							}
						}
					})
				}
				
			}
	},
	}
</script>

<style>
	.zai-box{
		padding: 0 100upx;
		position: relative;
	}
	.zai-logo{
		width: 100%;
		width: 100%;
		height: 310upx;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 300upx;
	}
	.zai-input{
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
</style>

register->index.vue

<template>
	<view class="zai-box">
		<image src="../../static/login/register.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">LOGO区域</view>
		<view class="zai-form">
			<input class="zai-input" maxlength="11" v-model="username"  placeholder="请输入手机号" />
			<input class="zai-input" v-model="password" password placeholder="请输入密码"/>
			<input class="zai-input"  v-model="confirmpassword" password placeholder="请再输入一次密码"/>
			<button class="zai-btn" @click="register()">立即注册</button>
			<view   class="zai-label"><text @click="toLogin()">已有账号，点此去登录.</text></view>
		</view>
	</view>
</template>

<script>
	import setting from '../../common/setting.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmpassword: ''
			}
		},
		methods: {
			register(){
				var re=/^[0-9]*$/
				if ((this.username.length !=11 )|| (!re.test(this.username))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位手机号'
					});
					return;
				}
				else if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				else if(this.password!=this.confirmpassword){
					uni.showToast({
						icon:'none',
						title:'两次密码输入不一致'
					});
				}
				else{
					uni.request({
						method: 'post',
						url: setting.url+'/user/userRegister',
						data:{
							account:this.username,
							password:this.password,
						},
						success(res) {
							console.log(res.data)
							if(res.data.code==-1){
								uni.showToast({
									icon:'none',
									title:'此账号已被注册，请更换手机号'
								});
							}
							else{
								
								uni.showToast({
								icon:'none',
								title:'账号注册成功，已登录'
								})
								uni.reLaunch({
									url:'../todos/todos'
								})
							}
							
						}
					
					})
				}
			},
			toLogin(){
				uni.reLaunch({
					url:'../login/index'
				})
			}
		}
	}
</script>

<style>
	.zai-box{
		padding: 0 100upx;
		position: relative;
	}
	.zai-logo{
		width: 100%;
		width: 100%;
		height: 310upx;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 300upx;
	}
	.zai-input{
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 60upx;
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
</style>

checking->index.vue

<template>
	<view class="zai-box">
		<image src="../../static/login/register.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">LOGO区域</view>
		<view class="zai-form">
			<input class="zai-input" v-model="username" maxlength="11" placeholder="请输入手机号码" />
			<view class="zai-input-btn">
				<input class="zai-input" maxlength="6" placeholder="验证码"/>
				<view class="zai-checking" @click="checking" v-if="state===false">获取验证码</view>
				<view class="zai-checking zai-time" v-if="state===true">倒计时{{ currentTime }}s</view>
			</view>
			<input class="zai-input" v-model="password" maxlength="16" password placeholder="请输入新的密码"/>
			<input class="zai-input" v-model="confirmpassword" maxlength="16"  password placeholder="请确认密码"/>
			<button class="zai-btn" @click="changePassword()">修改密码并登录</button>
			<view   class="zai-label"><text @click="toLogin()">已有账号，点此去登录.</text></view>
		</view>
	</view>
</template>

<script>
	import setting from '../../common/setting.js'
	
	export default {
		data() {
			return {
				
				state: false,		//是否开启倒计时
				totalTime: 60,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				username: '',
				password: '',
				confirmpassword: ''
			}
		},
		onLoad() {
	
		},
		methods: {
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				//开始倒计时
				this.state = true;
				//执行倒计时
				this.checkingTime();
			},
			checkingTime(){
				let that = this;
				//判断是否开启
				if(this.state){
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if(this.currentTime > 0 && this.recordingTime <= this.totalTime){
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					}else{
						//时间已完成，还原相关变量
						this.state = false;		//关闭倒计时
						this.recordingTime = 0;	//记录时间为0
						this.currentTime = this.totalTime;	//显示时间为总时间
					}
				}else{
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			toLogin(){
				uni.reLaunch({
					url:'../login/index'
				})
			},
			changePassword(){
				var re=/^[0-9]*$/
				if ((this.username.length !=11 )|| (!re.test(this.username))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位手机号'
					});
					return;
				}
				else if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				else if(this.password!=this.confirmpassword){
					uni.showToast({
						icon:'none',
						title:'两次密码输入不一致'
					});
				}
				else{
					uni.request({
						method: 'post',
						url: setting.url+'/user/forgetPassword',
						data:{
							account:this.username,
							password:this.password,
						},
						success(res) {
							console.log(res.data)
							if(res.data.code==-1){
								uni.showToast({
									icon:'none',
									title:'此账号已被注册，请更换手机号'
								});
							}
							else{
								
								uni.showToast({
								icon:'none',
								title:'账号注册成功，已登录'
								})
								uni.reLaunch({
									url:'../todos/todos'
								})
							}
							
						}
					
					})
				}
			}
		}
	}
</script>

<style>
	.zai-box{
		padding: 0 100upx;
		position: relative;
	}
	.zai-logo{
		width: 100%;
		width: 100%;
		height: 310upx;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 300upx;
	}
	.zai-input{
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 60upx;
	}
	.zai-btn:after{
		border: 0;
	}
	
	/*验证码输入框*/
	.zai-input-btn{
		position: relative;
	}
	.zai-input-btn .zai-input{
		padding-right: 260upx;
	}
	.zai-checking{
		position: absolute;
		right: 0;
		top: 0;
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 110upx;
		font-size: 36upx;
		margin-left: auto;
		margin-right: auto;
		padding-left: 28upx;
		padding-right: 28upx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2.55555556;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		padding-top: 2upx;
		padding-bottom: 2upx;
	}
	.zai-checking.zai-time{
		background: #a7b6d0;
	}
	
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
</style>

common->setting,js
与后端url和端口对应

export default {
	// url:'http://192.168.1.178:5000'
	url:'http://127.0.0.1:8088',
}

结果

注册


登录