仿抖音短视频项目笔记（二）开发用户登录注册与用户信息

一、短视频基础项目初始化

使用微信开发者工具创建小程序项目：

项目 - > 新建项目 - > 配置项目：项目名称为 imooc-video-dev

在AppID 项填入自己在微信公众平台申请的 AppID号，选择不使用云服务。

注释 app.wxss 中的全局配置 .container

删除不需要的目录： logs 、utils

配置全局的标题：

在 app.json 中添加全局统一的标题配置，这要就不需要每个页面进行单独的配置了

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

二、用户注册页面

1、用户注册页面的开发：

步骤：

第一步：
       复制前端图片资源： resource /images /目录下有图片资源
       将该目录resource资源拷贝到小程序的pages/目录下
第二步：
       将注册页面的样式 userRegist 目录资源从 imooc_dsp/pages/目录下拷贝到项目的 pages/目录下
第三步：
       保存，自动加载资源；
第四步：
       删除userRegist 目录下的 regist.js 文件中的代码，后面自己根据课程进度进行手敲；
       保留页面 regist.wxml ，不作修改；
第五步：
       修改 app.json 中的 pages 中加载的第一个页面目录路径

2、调整regist.wxml 注册页面的图片引用路径：导入的路径使用，采用相对路径的方式

3、注册页面的结构：

banner图片
账号、密码的输入框
按钮：注册按钮、返回登录按钮

form表单项，包含：2、3两部分

注册页代码：

<view>
    <view class="login-icon">
        <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doRegist'>
            <!--账号-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">账号</label>
                <input name="username" class="inputText" placeholder="请输入账号"/>
            </view>
            
            <view class="line"></view>

            <!--密码-->
            <view class="inputView">
                <image class="keyImage" src="../resource/images/password.png"></image>
                <label class="loginLabel">密码</label>
                <input name="password" class="inputText" password="true" placeholder="请输入密码"/>
            </view>

            <!--按钮-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>注册</button>
            </view>

            <view>
                <button class="goLoginBtn" type="warn" bindtap="goLoginPage">返回登录</button>
            </view>
        </form>
    </view>
</view>

注意：账号和密码分别有两个标识图片，分别为 username.png、password.png ，对应pages/images/目录下的两张图片，以相对路径导入

三、SpringBoot聚合工程

1、架构介绍

imooc(imooc-root/ imooc-parent) 工程模块依赖关系：

dao：数据层
pojo: 实体类
common：工具类
api ：接口层
service：服务层
web 层

2、搭建Springboot 分层项目

2.1 创建子父类聚合工程
idea中：File -> Project -> Maven
创建imooc-videos-dev父工程，包类型为pom包

2.2 创建 common 依赖管理公共模块

idea中： File -> Module -> Maven 创建 imooc-videos-dev-common 子工程；引入依赖配置：
如下：

1.排除springboot默认的logback日志框架 
2.引入log4j日志依赖 、引入spring aop依赖 、
3.资源配置 、阿里开源数据源、mybatis 、pagehelper 、
4.apache 工具类 -->commons : codes、lang3、io
5.swagger2 配置 -->swagger2、swagger-ui
6.引入 redis 依赖 、引入zookeeper、httpclient、

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
            <exclusions>
                <!-- 排除springboot默认的logback日志框架 -->
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- 引入log4j日志依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
            <version>1.3.8.RELEASE</version>
        </dependency>

        <!-- apache 工具类 -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.11</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
            <version>1.3.2</version>
        </dependency>

        <!-- swagger2 配置 -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.4.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.4.0</version>
        </dependency>

        <!-- 引入spring aop依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

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

        <!-- 资源配置 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

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

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--<version>5.1.41</version>-->
            <version>8.0.13</version>
        </dependency>

        <!-- 阿里开源数据源 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency>
        <!--&lt;!&ndash;mapper &ndash;&gt;-->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
            <version>1.2.4</version>
        </dependency>
        <!--&lt;!&ndash;pagehelper &ndash;&gt;-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

    </dependencies>

2.3 创建 pojo 模型工程：

idea中： File -> Module -> Maven 创建 imooc-videos-dev-pojo 子工程；引入依赖配置：
不需要重复添加依赖到 pojo 工程的 pom.xml 中，只需要添加对 common 工程的依赖即可实现导入

        <dependency>
            <groupId>com.imooc</groupId>
            <artifactId>imooc-videos-dev-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

2.4 创建 mapper 持久层工程：

idea中： File -> Module -> Maven 创建 imooc-videos-dev-mapper 子工程；引入依赖配置：
不需要重复添加依赖到 mapper工程的 pom.xml 中，只需要添加对 pojo工程的依赖即可实现导入

        <dependency>
            <groupId>com.imooc</groupId>
            <artifactId>imooc-videos-dev-pojo</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

2.5 创建 service 业务层工程

idea中： File -> Module -> Maven 创建 imooc-videos-dev-service 子工程；引入依赖配置：
不需要重复添加依赖到 service工程的 pom.xml 中，只需要添加对 mapper工程的依赖即可实现导入

        <dependency>
            <groupId>com.imooc</groupId>
            <artifactId>imooc-videos-dev-mapper</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

2.6 创建 dev-api 控制层工程

idea中： File -> Module -> springboot 创建 imooc-videos-dev-api子工程；引入依赖配置：
不需要重复添加依赖到 api工程的 pom.xml 中，只需要添加对 service工程的依赖即可实现导入

                <dependency>
			<groupId>com.imooc</groupId>
			<artifactId>imooc-videos-dev-service</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>

配置application.yml 文件：


spring:
  http:
    multipart:
      maxFileSize: 100Mb
      maxRequestSize: 1000Mb
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3333/aiicp-gxzx?useUnicode=true&characterEncoding=utf-8&useSSL=false&autoReconnect=true&serverTimezone=UTC
    username: root
    password: root
    druid:
      initial-size: 1
      min-idle: 1
      max-active: 20
      test-on-borrow: true
      stat-view-servlet:
        allow: true

# 文件上传配置

############################################################
#
# mybatis 配置
#
############################################################
# mybatis 配置
mybatis:
  type-aliases-packag: com.imooc.pojo
  mapper-locations: classpath:mapper/*.xml
# \u901a\u7528 Mapper \u914d\u7f6e
mapper:
  mappers: com.imooc.utils.MyMapper
  not-empty: false
  identity: MYSQL
#  分页插件配置
pagehelper:
  helperDialect: mysql
  supportMethodsArguments: true
  params=count: countSql



############################################################
#
# Server 服务端相关配置
#
############################################################
# 配置api端口号
server:
  port: 8081

############################################################
# Server - tomcat 相关常用配置
############################################################
# tomcat 的URI编码
#server:
#  tomcat:
#    uri-encoding: UTF-8

2.7 创建控制器

创建控制器进行接口测试：

@RestController
public class HelloController {

    @Transactional
    public void sta(){

    }

    @RequestMapping("/hello")
    public String helloworld(){
        return "hello world";
    }
}

启动springboot 工程：

@SpringBootApplication
@ComponentScan(basePackages = {"com.imooc"})
public class Bootstrap {

	public static void main(String[] args) {
		SpringApplication.run(Bootstrap.class, args);
	}
}

四、使用mybatis逆向生成工具

使用 mybatis 逆向工程生成 model（javabean）、mapper(dao)、xml （映射文件）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>

  <context id="DB2Tables" targetRuntime="MyBatis3">
  
<!-- 去掉全部的注释 -->
	<commentGenerator>
        <property name="suppressAllComments" value="true" />
    </commentGenerator>
  
  
<!-- 在此处修改数据库连接属性,以及逆向工程要实现连接的数据库 -->
    <jdbcConnection driverClass="com.mysql.jdbc.Driver"
        connectionURL="jdbc:mysql://49.***.197.**:3306/imooc-video-dev"
        userId="***"
        password="*****">
    </jdbcConnection>

    <javaTypeResolver >
      <property name="forceBigDecimals" value="false" />
    </javaTypeResolver>

    <javaModelGenerator targetPackage="com.imooc.pojo" targetProject=".\src">
      <property name="enableSubPackages" value="true" />
      <property name="trimStrings" value="true" />
    </javaModelGenerator>

    <sqlMapGenerator targetPackage="com.imooc.mapper"  targetProject=".\src">
      <property name="enableSubPackages" value="true" />
    </sqlMapGenerator>

    <javaClientGenerator type="XMLMAPPER" targetPackage="resource.mapper"  targetProject=".\src">
      <property name="enableSubPackages" value="true" />
    </javaClientGenerator>


<!-- 设置要实现逆向工程的表名:tableName="tie"  ,  并且设置其生成的类的类名:domainObjectName="Tie" -->
    <table tableName="bgm" ></table>
    <table tableName="users" ></table>
    <table tableName="comments" ></table>
    <table tableName="search_records"  ></table>
    <table tableName="users_fans" ></table>
    <table tableName="users_like_videos"  ></table>
    <table tableName="users_report"  ></table>
    <table tableName="videos"  ></table>

  </context>
</generatorConfiguration>

将生成的model 实体类放到pojo工程目录下
将生成的mapper（dao）类放到mapper工程目录下
将生成的xml 映射文件放到 resource/mapper目录下

五、开发注册用户的接口

1、引入常用工具类

响应数据封装类、MD5加密工具类、通用Mapper类

package com.imooc.utils;

/**
 * @Description: 自定义响应数据结构
 * 				这个类是提供给门户，ios，安卓，微信商城用的
 * 				门户接受此类数据后需要使用本类的方法转换成对于的数据类型格式（类，或者list）
 * 				其他自行处理
 * 				200：表示成功
 * 				500：表示错误，错误信息在msg字段中
 * 				501：bean验证错误，不管多少个错误都以map形式返回
 * 				502：拦截器拦截到用户token出错
 * 				555：异常抛出信息
 */
public class IMoocJSONResult {

    // 响应业务状态
    private Integer status;

    // 响应消息
    private String msg;

    // 响应中的数据
    private Object data;
    
    private String ok;	// 不使用

    public static IMoocJSONResult build(Integer status, String msg, Object data) {
        return new IMoocJSONResult(status, msg, data);
    }

    public static IMoocJSONResult ok(Object data) {
        return new IMoocJSONResult(data);
    }

    public static IMoocJSONResult ok() {
        return new IMoocJSONResult(null);
    }
    
    public static IMoocJSONResult errorMsg(String msg) {
        return new IMoocJSONResult(500, msg, null);
    }
    
    public static IMoocJSONResult errorMap(Object data) {
        return new IMoocJSONResult(501, "error", data);
    }
    
    public static IMoocJSONResult errorTokenMsg(String msg) {
        return new IMoocJSONResult(502, msg, null);
    }
    
    public static IMoocJSONResult errorException(String msg) {
        return new IMoocJSONResult(555, msg, null);
    }

    public IMoocJSONResult() {

    }

    public IMoocJSONResult(Integer status, String msg, Object data) {
        this.status = status;
        this.msg = msg;
        this.data = data;
    }

    public IMoocJSONResult(Object data) {
        this.status = 200;
        this.msg = "OK";
        this.data = data;
    }

    public Boolean isOK() {
        return this.status == 200;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

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

	public String getOk() {
		return ok;
	}

	public void setOk(String ok) {
		this.ok = ok;
	}

}

public class MD5Utils {

	/**
	 * @Description: 对字符串进行md5加密
	 */
	public static String getMD5Str(String strValue) throws Exception {
		MessageDigest md5 = MessageDigest.getInstance("MD5");
		String newstr = Base64.encodeBase64String(md5.digest(strValue.getBytes()));
		return newstr;
	}

	public static void main(String[] args) {
		try {
			String md5 = getMD5Str("imooc");
			System.out.println(md5);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

public interface MyMapper<T> extends Mapper<T>, MySqlMapper<T> {
    //TODO
    //FIXME 特别注意，该接口不能被扫描到，否则会出错
}

2、定义创建注册接口类

2.1 接口开发：

mini-api下创建 RegistLoginController.java 类：

接口业务逻辑：判断注册用户名存在与否，若存在返回“用户名已使用”提示；不存在则将注册信息写入到数据库。

@RestController
public class RegistLoginController {

    @Autowired
    private UsersService usersService;

    @PostMapping("/regist")
    public IMoocJSONResult regist(@RequestBody Users user) throws Exception {

        // 1.判断用户名和密码必须不为空空
        if(StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())){
            return IMoocJSONResult.errorMsg("用户名和密码不能为空");
        }

        // 2. 判断用户名是否存在
        boolean usernameIsExist = usersService.queryUsernameIsExist(user.getUsername());

        // 3.保存用户，注册信息
        if (!usernameIsExist){
            user.setNickname(user.getUsername());
            user.setPassword(MD5Utils.getMD5Str(user.getPassword()));
            user.setFansCounts(0);
            user.setReceiveLikeCounts(0);
            user.setFollowCounts(0);
            usersService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用户名已经存在，请换一个再试");
        }

        return IMoocJSONResult.ok();
    }
}

2.2 业务接口： UsersService.java

/**
 * @ClassName UsersService
 * @Description TODO
 * @Author wushaopei
 * @Date 2020/2/8 14:16
 * @Version 1.0
 */
@Service
public interface UsersService {

    /**
     *  查询当前用户是否存在
     */
    public boolean queryUsernameIsExist(String username);

    /*
    *   新增一个用户
    * */
    public void saveUser(Users users);

}

2.3 业务实现类： UsersServiceImpl.java

package com.imooc.service.impl;

import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;
import com.imooc.service.UsersService;
import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;

/**
 * @ClassName UsersServiceImpl
 * @Description TODO
 * @Author wushaopei
 * @Date 2020/2/8 14:19
 * @Version 1.0
 */
public class UsersServiceImpl implements UsersService {

    @Autowired
    private UsersMapper usersMapper;

    @Autowired
    private Sid sid;

    @Override
    public boolean queryUsernameIsExist(String username) {
        // 根据用户名查询用户信息，返回值为0.说明用户不存在
        Users users = new Users();
        users.setUsername(username);

        Users result = usersMapper.selectOne(users);

        return result == null ? false : true;
    }

    @Override
    public void saveUser(Users users) {
        // 使用工具类创建全部唯一Id作为用户id
        String userId = sid.nextShort();
        users.setId(userId);
        usersMapper.insert(users);
    }
}

通过调用持久层 UsersMapper.java 对数据库进行增删改查操作，该持久层 UsersMapper.java继承通用Mapper类MyMapper.java类，可使用通用的方法进行操作DB.

public interface UsersMapper extends MyMapper<Users>{

.................
}

鮀城小帅

发布了222 篇原创文章 · 获赞 60 · 访问量 4万+

私信关注