1.搭建一个前后端分离的注册页面uniapp+springboot

一、实验要求 1. 实验目的

使用uniapp的开发用户注册模块。

2. 实验内容

使用uniapp开发一个用户注册功能模块，注册内容包括:用户名、姓名、密码。

3. 要求:

1、用户名不能重复
2、密码需要重复输入2次，且长度8-12位之间
3、用户点击注册按钮后，向后台发送http post请求,根据后台返回的结果给用户进行相关提示。如果后台返回成功则跳转到首页；如果返回失败，则提示失败原因。

二、准备工作 1. 数据库准备

表结构
数据库的版本

2. 后台环境搭建

敲重点这里比较复杂

① 创建项目

新建项目
下一步，点击完成
添加依赖 pom.xml



    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.4.2
         
    
    com.znb
    Logistics_management
    0.0.1-SNAPSHOT
    Logistics_management
    Demo project for Spring Boot
    
        11
    
    


        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            org.springframework.boot
            spring-boot-configuration-processor
            true
        

        
            org.projectlombok
            lombok
            true
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.4
        

        
        
            tk.mybatis
            mapper-spring-boot-starter
            2.0.4
        

        
        
            mysql
            mysql-connector-java
        

        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.3
        
        
        
            commons-fileupload
            commons-fileupload
            1.3.1
        
        
        
            com.alibaba
            fastjson
            1.2.28
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

配置数据连接

server:
  port: 80 #项目启动访问端口
spring:
  application:
    name: goods
  datasource: #连接数据库配置
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
    # url=jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
    username: root
    password: 2550
  servlet:
    multipart: #文件上传配置
      max-file-size: 10MB
      max-request-size: 50MB

3. 前端页面的准备

新建项目
配置页面信息 pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/register/register"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/home.png",
				"selectedIconPath": "static/home-active.png"
			},
			{
				"text": "注册",
				"pagePath": "pages/register/register",
				"iconPath": "static/member.png",
				"selectedIconPath": "static/member-active.png"
			}
		]
	}
}

三、实施和测试 1. 后端接口的测试

目录结构
User

package com.znb.estatemanagement.domain;

import javax.persistence.Id;
import javax.persistence.Table;
import java.io.Serializable;


@Table(name="user")
public class User implements Serializable {
    @Id
    private String username;
    private String password;


    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

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

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

UserDao

package com.znb.estatemanagement.dao;

import com.znb.estatemanagement.domain.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;

@Repository
public interface UserDao extends Mapper {
}

UserService

package com.znb.estatemanagement.service;

import com.znb.estatemanagement.domain.User;


public interface UserService {
    
    Boolean addUser(User user);

}

UserServiceImpl

package com.znb.estatemanagement.service.Impl;

import com.znb.estatemanagement.dao.UserDao;
import com.znb.estatemanagement.domain.User;
import com.znb.estatemanagement.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    UserDao userDao;

    @Override
    public Boolean addUser(User user) {
        int insert = userDao.insert(user);
        return true;
    }
}

UserController

package com.znb.estatemanagement.controller;

import com.znb.estatemanagement.domain.User;
import com.znb.estatemanagement.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;


@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;


    
    @RequestMapping("/add")
    public String add(@RequestParam("username") String username,
                      @RequestParam("password") String password){
        User user = new User(username,password);
        System.out.println(username);
        System.out.println(password);
        Boolean aBoolean = userService.addUser(user);
        System.out.println(aBoolean);
        return "success";
    }
}

测试页面




    
    Title


    首页
    百度
    
        用户名：

        密码：

测试

输入账号密码点击提交

2. 前端页面的数据获取

index.vue

3. 测试

运行
两次密码不一致

插入重复数据
正确插入，跳转至首页

1.搭建一个前后端分离的注册页面uniapp+springboot

首页

Java相关栏目本月热门文章