微信小程序_(校園視)開發用戶註冊登錄

時間 2019-12-11

標籤微信程序開發用戶註冊登錄简体版

原文原文鏈接

　　微信小程序_(校園視)　　開發用戶註冊登錄　　傳送門 html

　　微信小程序_(校園視)　　開發上傳視頻業務　　傳送門 java

　　微信小程序_(校園視)　　開發視頻的展現頁-上　　傳送門 mysql

　　微信小程序_(校園視)　　開發視頻的展現頁-下　　傳送門 web

用戶註冊界面redis

<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>

page {
    background-color: whitesmoke;
}

.login-img {
    width: 750rpx;
}

/*表單內容*/
.inputView {
    background-color: white;
    line-height: 45px;
}

/*輸入框*/
.nameImage, .keyImage {
    margin-left: 22px;
    width: 20px;
    height: 20px;
}

.loginLabel {
    margin: 15px 15px 15px 10px;
    color: gray;
    font-size: 15px;
}

.inputText {
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}

/*按鈕*/
.loginBtn {
    width: 80%;
    margin-top: 35px;
}

.goLoginBtn {
    width: 80%;
    margin-top: 15px;
}

{
  "pages":[
    "pages/userRegist/regist",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "校園視",
    "navigationBarTextStyle":"black"
  }
}

app.json

配置項目工程文件spring

package com.imooc;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

import tk.mybatis.spring.annotation.MapperScan;

@SpringBootApplication
@ComponentScan(basePackages= {"com.imooc"})
public class Application {
    
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
    
}

Application.java

package com.imooc.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {
    
    @RequestMapping("/hello")
    public String Hello() {
        return "Hello Spring Boot~";
    }
    
}

HelloWorldController.java

數據庫表設計sql

八個表數據庫

　　users用戶表apache

　　user_fans用戶粉絲表json

　　video視頻表

　　users_like_videos用戶關注表

　　user_report用戶回覆表

　　bgm背景音樂表

　　用戶留言表

　　用戶關係表

使用SpringBoot版mybatis逆向生成工具生成數據庫中表

package com.wx.mybatis.utils;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;


public class GeneratorDisplay {

    public void generator() throws Exception{

        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        //指定 逆向工程配置文件
        File configFile = new File("generatorConfig.xml"); 
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config,
                callback, warnings);
        myBatisGenerator.generate(null);

    } 
    
    public static void main(String[] args) throws Exception {
        try {
            GeneratorDisplay generatorSqlmap = new GeneratorDisplay();
            generatorSqlmap.generator();
        } catch (Exception e) {
            e.printStackTrace();
        }
        
    }
}

GeneratorDisplay.java

<?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="MysqlContext" targetRuntime="MyBatis3Simple" defaultModelType="flat">
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>

        <plugin type="tk.mybatis.mapper.generator.MapperPlugin">
            <property name="mappers" value="com.wx.utils.MyMapper"/>
        </plugin>

        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/wx-video-dev"
                        userId="root"
                        password="123456">
        </jdbcConnection>

        <!-- 對應生成的pojo所在包 -->
        <javaModelGenerator targetPackage="com.wx.pojo" targetProject="src/main/java"/>

        <!-- 對應生成的mapper所在目錄 -->
        <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources"/>

        <!-- 配置mapper對應的java映射 -->
        <javaClientGenerator targetPackage="com.wx.mapper" targetProject="src/main/java" 
        type="XMLMAPPER"/>


        <table tableName="bgm"></table>
        <table tableName="comments"></table>
        <table tableName="search_records"></table>
        <table tableName="users"></table>
        <table tableName="users_fans"></table>
        <table tableName="users_like_videos"></table>
        <table tableName="users_report"></table>
        <table tableName="videos"></table> 
         
    </context>
</generatorConfiguration>

generatorConfig.xml

開發註冊用戶的接口

　　IMoocJSONResult.java做爲數據的傳參，MD5Utils.java對密碼做爲MD5的加密

　　在mini-api層建立RegistLoginController.java接收regist請求

　　用戶註冊請求RegistLoginController.java

@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 = userService.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);
            userService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用戶名已經存在，請從新輸入");
        }
        
        return IMoocJSONResult.ok();
    }

　　用戶註冊接口UserService.java

public interface UserService {

    //判斷用戶名是否存在
    public boolean queryUsernameIsExist(String username);
    
    //用戶註冊
    public void saveUser(Users user);

}

　　實現用戶註冊接口UserServiceImpl

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public boolean queryUsernameIsExist(String username) {
        
        Users user = new Users();
        user.setUsername(username);
        
        Users result = userMapper.selectOne(user);
        
        return result==null?false:true;
    }

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveUser(Users user) {
        
        String userId = sid.nextShort();
        user.setId(userId);

        userMapper.insert(user);    
    }

package com.imooc.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.imooc.pojo.Users;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

@RestController
public class RegistLoginController {
    
    @Autowired
    private UserService userService;
    
    @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 = userService.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);
            userService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用戶名已經存在，請從新輸入");
        }
        
        return IMoocJSONResult.ok();
    }
    
}

RegistLoginController.java

package com.imooc.service;

import com.imooc.pojo.Users;

public interface UserService {

    //判斷用戶名是否存在
    public boolean queryUsernameIsExist(String username);
    
    //用戶註冊
    public void saveUser(Users user);

}

UserService.java

package com.imooc.service;

import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UsersMapper userMapper;
    
    @Autowired
    private Sid sid;
    
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public boolean queryUsernameIsExist(String username) {
        
        Users user = new Users();
        user.setUsername(username);
        
        Users result = userMapper.selectOne(user);
        
        return result==null?false:true;
    }

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveUser(Users user) {
        
        String userId = sid.nextShort();
        user.setId(userId);

        userMapper.insert(user);    
    }

}

UserServiceImpl.java

swagger2的使用與接口配置

　　在common層pom.xml中配置swagger2

        <!-- 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>

package com.imooc;

import java.util.ArrayList;
import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.ParameterBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.schema.ModelRef;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.service.Parameter;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;


@Configuration
@EnableSwagger2
public class Swagger2 {

    /**
     * @Description:swagger2的配置文件，這裏能夠配置swagger2的一些基本的內容，好比掃描的包等等
     */
    @Bean
    public Docket createRestApi() {
        
        return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select()
                .apis(RequestHandlerSelectors.basePackage("com.imooc.controller"))
                .paths(PathSelectors.any()).build();
    }

    /**
     * @Description: 構建 api文檔的信息
     */
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                // 設置頁面標題
                .title("使用swagger2構建短視頻後端api接口文檔")
                // 設置聯繫人
                .contact(new Contact("校園視-羅韋武  吉桂言", "https://www.cnblogs.com/1138720556Gary/", "1138720556@qq.com"))
                // 描述
                .description("歡迎訪問短視頻接口文檔，這裏是描述信息")
                // 定義版本號
                .version("1.0").build();
    }
}

Swagger2.java

package com.imooc.pojo;

import javax.persistence.*;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;

@ApiModel(value="用戶對象",description="這是用戶對象")
public class Users {
    
    @ApiModelProperty(hidden=true)
    @Id
    private String id;

    @ApiModelProperty(value="用戶名",name="username",example="imoocuser",required=true)
    private String username;

    @ApiModelProperty(value="密碼",name="password",example="123456",required=true)
    private String password;

    @ApiModelProperty(hidden=true)
    @Column(name = "face_image")
    private String faceImage;

    private String nickname;

    //粉絲
    @ApiModelProperty(hidden=true)
    @Column(name = "fans_counts")
    private Integer fansCounts;

    //收到的讚美
    @ApiModelProperty(hidden=true)    
    @Column(name = "receive_like_counts")
    private Integer receiveLikeCounts;

    //我關注的總人數
    @ApiModelProperty(hidden=true)
    @Column(name = "follow_counts")
    private Integer followCounts;

    /**
     * @return id
     */
    public String getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(String id) {
        this.id = id;
    }

    /**
     * @return username
     */
    public String getUsername() {
        return username;
    }

    /**
     * @param username
     */
    public void setUsername(String username) {
        this.username = username;
    }

    /**
     * @return password
     */
    public String getPassword() {
        return password;
    }

    /**
     * @param password
     */
    public void setPassword(String password) {
        this.password = password;
    }

    /**
     * @return face_image
     */
    public String getFaceImage() {
        return faceImage;
    }

    /**
     * @param faceImage
     */
    public void setFaceImage(String faceImage) {
        this.faceImage = faceImage;
    }

    /**
     * @return nickname
     */
    public String getNickname() {
        return nickname;
    }

    /**
     * @param nickname
     */
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    /**
     * @return fans_counts
     */
    public Integer getFansCounts() {
        return fansCounts;
    }

    /**
     * @param fansCounts
     */
    public void setFansCounts(Integer fansCounts) {
        this.fansCounts = fansCounts;
    }

    /**
     * @return receive_like_counts
     */
    public Integer getReceiveLikeCounts() {
        return receiveLikeCounts;
    }

    /**
     * @param receiveLikeCounts
     */
    public void setReceiveLikeCounts(Integer receiveLikeCounts) {
        this.receiveLikeCounts = receiveLikeCounts;
    }

    /**
     * @return follow_counts
     */
    public Integer getFollowCounts() {
        return followCounts;
    }

    /**
     * @param followCounts
     */
    public void setFollowCounts(Integer followCounts) {
        this.followCounts = followCounts;
    }
}

User.java

package com.imooc;

import java.util.ArrayList;
import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.ParameterBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.schema.ModelRef;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.service.Parameter;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;


@Configuration
@EnableSwagger2
public class Swagger2 {

    /**
     * @Description:swagger2的配置文件，這裏能夠配置swagger2的一些基本的內容，好比掃描的包等等
     */
    @Bean
    public Docket createRestApi() {
        
        return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select()
                .apis(RequestHandlerSelectors.basePackage("com.imooc.controller"))
                .paths(PathSelectors.any()).build();
    }

    /**
     * @Description: 構建 api文檔的信息
     */
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                // 設置頁面標題
                .title("使用swagger2構建短視頻後端api接口文檔")
                // 設置聯繫人
                .contact(new Contact("校園視-羅韋武  吉桂言", "https://www.cnblogs.com/1138720556Gary/", "1138720556@qq.com"))
                // 描述
                .description("歡迎訪問短視頻接口文檔，這裏是描述信息")
                // 定義版本號
                .version("1.0").build();
    }
}

Swagger2.java

小程序註冊於後端聯調用

　　小程序端經過app.js得到url地址

//app.js
App({
  serverUrl:"http://192.168.1.110:8081",
  userInfo:null
})

　　小程序端點擊註冊，調用doRegist()函數

            <view>
                <button class="loginBtn" type="primary" form-type='submit'>註冊</button>
            </view>

Page({
  data: {

  },

  doRegist:function(e){
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;

    //簡單驗證
    if(username.length==0||password.length==0){
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon:'none',
        duration:3000
      })
    }else{
      var serverUrl = app.serverUrl;
      wx.request({
        url: serverUrl + '/regist',
        method:"POST",
        data:{
          username: username,
          password: password
        },
        header:{
          'content-type':'application/json'//默認值
        },
        success:function(res){
          console.log(res.data);
          var status = res.data.status;
          if(status == 200){
            wx.showToast({
              title: "用戶註冊成功~！！！",
              icon: 'none',
              duration: 3000
            }),
              app.userInfo = res.data.data;
          }else if(status == 500){
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }

  }

})

<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>

regist.wxml

const app = getApp()

Page({
  data: {

  },

  doRegist:function(e){
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;

    //簡單驗證
    if(username.length==0||password.length==0){
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon:'none',
        duration:3000
      })
    }else{
      var serverUrl = app.serverUrl;
      wx.request({
        url: serverUrl + '/regist',
        method:"POST",
        data:{
          username: username,
          password: password
        },
        header:{
          'content-type':'application/json'//默認值
        },
        success:function(res){
          console.log(res.data);
          var status = res.data.status;
          if(status == 200){
            wx.showToast({
              title: "用戶註冊成功~！！！",
              icon: 'none',
              duration: 3000
            }),
              app.userInfo = res.data.data;
          }else if(status == 500){
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }

  }

})

regist.js

{
  "pages":[
    "pages/userRegist/regist",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "校園視",
    "navigationBarTextStyle":"black"
  },
  "debug":true
}

app.json

//app.js
App({
  serverUrl:"http://192.168.1.110:8081",
  userInfo:null
})

app.js

小程序用戶登錄

　　小程序端頁面編寫

　　後端springboot接口controller

　　service-更具用戶名密碼查詢用戶是否存在

　　Swagger2的api配置

　　小程序登錄JS與後端聯調

　　小程序後端用戶登錄邏輯

@ApiOperation(value="用戶登陸", notes="用戶登陸的接口")
    @PostMapping("/login")
    public IMoocJSONResult login(@RequestBody Users user) throws Exception {
        String username = user.getUsername();
        String password = user.getPassword();
        
        
        // 1. 判斷用戶名和密碼必須不爲空
        if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {
            return IMoocJSONResult.ok("用戶名或密碼不能爲空");
        }
        
        // 2. 判斷用戶是否存在
        Users userResult = userService.queryUserForLogin(username, 
                MD5Utils.getMD5Str(user.getPassword()));
        
        // 3. 返回
        if (userResult != null) {
            userResult.setPassword("");
            return IMoocJSONResult.ok(userResult);
        } else {
            return IMoocJSONResult.errorMsg("用戶名或密碼不正確, 請重試");
        }
    }

　　小程序端點擊登錄調用doLogin()函數

<form bindsubmit='doLogin'>
            <!--帳號-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">帳號</label>
                <input name="username" value='imooc' 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" value='imooc' class="inputText" password="true" placeholder="請輸入密碼" />
            </view>

            <!--按鈕-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>登陸</button>
            </view>

            <view>
                <button class="goRegistBtn" type="warn" bindtap="goRegistPage">沒有帳號？點擊註冊</button>
            </view>
        </form>

// 登陸  
  doLogin: function (e) {
    var me = this;
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;
    // 簡單驗證
    if (username.length == 0 || password.length == 0) {
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon: 'none',
        duration: 3000
      })
    } else {
      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '請等待...',
      });
      // 調用後端
      wx.request({
        url: serverUrl + '/login',
        method: "POST",
        data: {
          username: username,
          password: password
        },
        header: {
          'content-type': 'application/json' // 默認值
        },
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          if (res.data.status == 200) {
            // 登陸成功跳轉 
            wx.showToast({
              title: '登陸成功',
              icon: 'success',
              duration: 2000
            });
            // app.userInfo = res.data.data;
            // fixme 修改原有的全局對象爲本地緩存
            app.setGlobalUserInfo(res.data.data);
            // 頁面跳轉

            var redirectUrl = me.redirectUrl;
            if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
              wx.redirectTo({
                url: redirectUrl,
              })
            } else {
              wx.redirectTo({
                url: '../mine/mine',
              })
            }
            
          } else if (res.data.status == 500) {
            // 失敗彈出框
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }

<view>
    <view class="login-icon">
        <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doLogin'>
            <!--帳號-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">帳號</label>
                <input name="username" value='Gary' 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" value='123456' class="inputText" password="true" placeholder="請輸入密碼" />
            </view>

            <!--按鈕-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>登陸</button>
            </view>

            <view>
                <button class="goRegistBtn" type="warn" bindtap="goRegistPage">沒有帳號？點擊註冊</button>
            </view>
        </form>
    </view>
</view>

const app = getApp()

Page({
  data: {
  },

  onLoad: function (params) {
    var me = this;
    var redirectUrl = params.redirectUrl;
    // debugger;
    if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
      redirectUrl = redirectUrl.replace(/#/g, "?");
      redirectUrl = redirectUrl.replace(/@/g, "=");

      me.redirectUrl = redirectUrl;
    }
  },

  // 登陸  
  doLogin: function (e) {
    var me = this;
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;
    // 簡單驗證
    if (username.length == 0 || password.length == 0) {
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon: 'none',
        duration: 3000
      })
    } else {
      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '請等待...',
      });
      // 調用後端
      wx.request({
        url: serverUrl + '/login',
        method: "POST",
        data: {
          username: username,
          password: password
        },
        header: {
          'content-type': 'application/json' // 默認值
        },
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          if (res.data.status == 200) {
            // 登陸成功跳轉 
            wx.showToast({
              title: '登陸成功',
              icon: 'success',
              duration: 2000
            });
            // app.userInfo = res.data.data;
            // fixme 修改原有的全局對象爲本地緩存
            app.setGlobalUserInfo(res.data.data);
            // 頁面跳轉

            var redirectUrl = me.redirectUrl;
            if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
              wx.redirectTo({
                url: redirectUrl,
              })
            } 
            else {
              wx.redirectTo({
                url: '../mine/mine',
              })
            }
           
          } else if (res.data.status == 500) {
            // 失敗彈出框
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }
  },

  goRegistPage:function() {
    wx.redirectTo({
      url: '../userRegist/regist',
    })
  }
})

package com.imooc.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.imooc.pojo.Users;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶註冊登陸的接口",tags= {"註冊和登陸的controller"})
public class RegistLoginController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶註冊",notes="用戶註冊的接口")
    @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 = userService.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);
            userService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用戶名已經存在，請從新輸入");
        }
        user.setPassword("");
        return IMoocJSONResult.ok(user);
    }
    
    @ApiOperation(value="用戶登陸", notes="用戶登陸的接口")
    @PostMapping("/login")
    public IMoocJSONResult login(@RequestBody Users user) throws Exception {
        String username = user.getUsername();
        String password = user.getPassword();
        
        
        // 1. 判斷用戶名和密碼必須不爲空
        if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {
            return IMoocJSONResult.ok("用戶名或密碼不能爲空");
        }
        
        // 2. 判斷用戶是否存在
        Users userResult = userService.queryUserForLogin(username, 
                MD5Utils.getMD5Str(user.getPassword()));
        
        // 3. 返回
        if (userResult != null) {
            userResult.setPassword("");
            return IMoocJSONResult.ok(userResult);
        } else {
            return IMoocJSONResult.errorMsg("用戶名或密碼不正確, 請重試");
        }
    }
    
}

RegistLoginController.java

package com.imooc.service;

import com.imooc.pojo.Users;

public interface UserService {

    //判斷用戶名是否存在
    public boolean queryUsernameIsExist(String username);
    
    //用戶註冊
    public void saveUser(Users user);

    public Users queryUserForLogin(String username, String password);
    
}

UserService.java

package com.imooc.service;

import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;

import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UsersMapper userMapper;
    
    @Autowired
    private Sid sid;
    

    
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public boolean queryUsernameIsExist(String username) {
        
        Users user = new Users();
        user.setUsername(username);
        
        Users result = userMapper.selectOne(user);
        
        return result==null?false:true;
    }

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveUser(Users user) {
        
        String userId = sid.nextShort();
        user.setId(userId);

        userMapper.insert(user);    
    }

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public Users queryUserForLogin(String username, String password) {
        Example userExample = new Example(Users.class);
        Criteria criteria = userExample.createCriteria();
        criteria.andEqualTo("username", username);
        criteria.andEqualTo("password", password);
        Users result = userMapper.selectOneByExample(userExample);
        
        return result;
    }

    
}

UserServiceImpl.java

添加頁面的跳轉

　　登錄頁面跳轉到註冊頁面點擊按鈕觸發goRegistPage()函數

            <view>
                <button class="goRegistBtn" type="warn" bindtap="goRegistPage">沒有帳號？點擊註冊</button>
            </view>

  goRegistPage:function() {
    wx.redirectTo({
      url: '../userRegist/regist',
    })
  }

　　登錄頁面跳轉到註冊頁面點擊按鈕觸發goLoginPage函數

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

   goLoginPage: function () {
    wx.redirectTo({
      url: '../userLogin/login',
    })
  }

<view>
    <view class="login-icon">
        <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doLogin'>
            <!--帳號-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">帳號</label>
                <input name="username" value='Gary' 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" value='123456' class="inputText" password="true" placeholder="請輸入密碼" />
            </view>

            <!--按鈕-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>登陸</button>
            </view>

            <view>
                <button class="goRegistBtn" type="warn" bindtap="goRegistPage">沒有帳號？點擊註冊</button>
            </view>
        </form>
    </view>
</view>

<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>

regist.wxml

const app = getApp()

Page({
  data: {
  },

  onLoad: function (params) {
    var me = this;
    var redirectUrl = params.redirectUrl;
    // debugger;
    if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
      redirectUrl = redirectUrl.replace(/#/g, "?");
      redirectUrl = redirectUrl.replace(/@/g, "=");

      me.redirectUrl = redirectUrl;
    }
  },

  // 登陸  
  doLogin: function (e) {
    var me = this;
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;
    // 簡單驗證
    if (username.length == 0 || password.length == 0) {
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon: 'none',
        duration: 3000
      })
    } else {
      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '請等待...',
      });
      // 調用後端
      wx.request({
        url: serverUrl + '/login',
        method: "POST",
        data: {
          username: username,
          password: password
        },
        header: {
          'content-type': 'application/json' // 默認值
        },
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          if (res.data.status == 200) {
            // 登陸成功跳轉 
            wx.showToast({
              title: '登陸成功',
              icon: 'success',
              duration: 2000
            });
            // app.userInfo = res.data.data;
            // fixme 修改原有的全局對象爲本地緩存
            app.setGlobalUserInfo(res.data.data);
            // 頁面跳轉

            var redirectUrl = me.redirectUrl;
            if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
              wx.redirectTo({
                url: redirectUrl,
              })
            } 
            else {
              wx.redirectTo({
                url: '../mine/mine',
              })
            }
           
          } else if (res.data.status == 500) {
            // 失敗彈出框
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }
  },

  goRegistPage:function() {
    wx.redirectTo({
      url: '../userRegist/regist',
    })
  }
})

const app = getApp()

Page({
  data: {

  },

  doRegist:function(e){
    var formObject = e.detail.value;
    var username = formObject.username;
    var password = formObject.password;

    //簡單驗證
    if(username.length==0||password.length==0){
      wx.showToast({
        title: '用戶名或密碼不能爲空',
        icon:'none',
        duration:3000
      })
    }else{
      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '請等待...',
      });
      wx.request({
        url: serverUrl + '/regist',
        method:"POST",
        data:{
          username: username,
          password: password
        },
        header:{
          'content-type':'application/json'//默認值
        },
        success:function(res){
          console.log(res.data);
          wx.hideLoading();
          var status = res.data.status;
          if(status == 200){
            wx.showToast({
              title: "用戶註冊成功~！！！",
              icon: 'none',
              duration: 3000
            }),
              app.userInfo = res.data.data;
          }else if(status == 500){
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000
            })
          }
        }
      })
    }

  },

   goLoginPage: function () {
    wx.redirectTo({
      url: '../userLogin/login',
    })
  }

})

regist.js

無狀態session

　　Redis-session好處

　　用戶信息存儲到redis緩存中，造成無狀態會話

　　便於擴展，當單題應用拓展成集羣會至關方便

　　便於權限驗證

　　在虛擬機中配置好redis後【192.168.1.110:6379】

　　在Redis Desktop Manager中配置去進行Redis服務測試連接

　　在imooc-videos-dev-common/pom.xml中引入redis依賴

    <!-- 引入 redis 依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
            <version>1.8.7.RELEASE</version>
        </dependency>

############################################################
#
# REDIS \u914d\u7f6e
#
############################################################

spring.redis.database=1

spring.redis.host=192.168.1.110

spring.redis.port=6379

spring.redis.password=imooc

spring.redis.pool.max-active=1000

spring.redis.pool.max-wait=-1

spring.redis.pool.max-idle=10

spring.redis.pool.min-idle=2

spring.redis.timeout=0


############################################################
spring.datasource.url=jdbc:mysql://localhost:3306/wx-video-dev
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.druid.initial-size=1
spring.datasource.druid.min-idle=1
spring.datasource.druid.max-active=20
spring.datasource.druid.test-on-borrow=true
spring.datasource.druid.stat-view-servlet.allow=true


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

mapper.mappers=com.imooc.utils.MyMapper
mapper.not-empty=false
mapper.identity=MYSQL

pagehelper.helperDialect=mysql
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql


spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=1000Mb

############################################################
#
# Server 
#
############################################################

server.port=8081

############################################################
# Server 
############################################################
# tomcat
server.tomcat.uri-encoding=UTF-8

application.properties

　　在註冊成功時生成一個無狀態session

@RestController
@Api(value="用戶註冊登陸的接口",tags= {"註冊和登陸的controller"})
public class RegistLoginController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶註冊",notes="用戶註冊的接口")
    @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 = userService.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);
            userService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用戶名已經存在，請從新輸入");
        }
        user.setPassword("");
        
        //生成一個無狀態session
        String uniqueToken = UUID.randomUUID().toString();
        redis.set(USER_REDIS_SESSION + ":" + user.getId(), uniqueToken, 1000 * 60 * 30);
        UsersVO userVO = new UsersVO();
        BeanUtils.copyProperties(user, userVO);
        userVO.setUserToken(uniqueToken);
        
        return IMoocJSONResult.ok(userVO);
    }

　　將生成無狀態session方法單獨抽離出來成setUserRedisSessionToken(User userModel)

    public UsersVO setUserRedisSessionToken(Users userModel) {
        //生成一個無狀態session
        String uniqueToken = UUID.randomUUID().toString();
        redis.set(USER_REDIS_SESSION + ":" + userModel.getId(), uniqueToken, 1000 * 60 * 30);
        UsersVO userVO = new UsersVO();
        BeanUtils.copyProperties(userModel, userVO);
        userVO.setUserToken(uniqueToken);
        
        return userVO;
    }

　　在小程序端註冊一個用戶

　　能夠在Redis Desktop Manager中得到一個新的user-redis-session【無狀態session】

　　在登錄的地方也添加UsersVO userVO = setUserRedisSessionToken(user)方法

@ApiOperation(value="用戶登陸", notes="用戶登陸的接口")
    @PostMapping("/login")
    public IMoocJSONResult login(@RequestBody Users user) throws Exception {
        String username = user.getUsername();
        String password = user.getPassword();
        
        
        // 1. 判斷用戶名和密碼必須不爲空
        if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {
            return IMoocJSONResult.ok("用戶名或密碼不能爲空");
        }
        
        // 2. 判斷用戶是否存在
        Users userResult = userService.queryUserForLogin(username, 
                MD5Utils.getMD5Str(user.getPassword()));
        
        // 3. 返回
        if (userResult != null) {
            userResult.setPassword("");
            UsersVO userVO = setUserRedisSessionToken(userResult);
            return IMoocJSONResult.ok(userVO);
        } else {
            return IMoocJSONResult.errorMsg("用戶名或密碼不正確, 請重試");
        }
    }

　　在前臺登錄後，能夠看到登錄用戶userToken是相同的【無狀態session】

微信小程序中添加"個人"我的信息頁面

　　在小程序app.json中對頁面進行註冊

 "pages":[
    "pages/mine/mine",
    "pages/userLogin/login",
    "pages/userRegist/regist",
    "pages/index/index"
  ],

<view>

  <view class='container'>

    <block wx:if="{{isMe}}">
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
    </block>
    <block wx:if="{{!isMe}}">
      <image src="{{faceUrl}}" class="face"></image>
    </block>
    <label class='nickname'>{{nickname}}</label>

    
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

</view>

<view class="line"></view>

mine.wxml

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
  
  }

})

mine.js

開發註銷接口

　　在RegistLoginController.java中添加用戶註銷接口

    @ApiOperation(value="用戶註銷", notes="用戶註銷的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/logout")
    public IMoocJSONResult logout(String userId) throws Exception {
        
            redis.del(USER_REDIS_SESSION + ":" +userId);
            return IMoocJSONResult.errorMsg("註銷成功！！！");
    }

　　在Swagger UI中測試該接口

package com.imooc.controller;

import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶註冊登陸的接口",tags= {"註冊和登陸的controller"})
public class RegistLoginController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶註冊",notes="用戶註冊的接口")
    @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 = userService.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);
            userService.saveUser(user);
        }else {
            return IMoocJSONResult.errorMsg("用戶名已經存在，請從新輸入");
        }
        user.setPassword("");
        
        UsersVO userVO = setUserRedisSessionToken(user);
        
        return IMoocJSONResult.ok(userVO);
    }
    
    public UsersVO setUserRedisSessionToken(Users userModel) {
        //生成一個無狀態session
        String uniqueToken = UUID.randomUUID().toString();
        redis.set(USER_REDIS_SESSION + ":" + userModel.getId(), uniqueToken, 1000 * 60 * 30);
        UsersVO userVO = new UsersVO();
        BeanUtils.copyProperties(userModel, userVO);
        userVO.setUserToken(uniqueToken);
        
        return userVO;
    }
    
    @ApiOperation(value="用戶登陸", notes="用戶登陸的接口")
    @PostMapping("/login")
    public IMoocJSONResult login(@RequestBody Users user) throws Exception {
        String username = user.getUsername();
        String password = user.getPassword();
        
        
        // 1. 判斷用戶名和密碼必須不爲空
        if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {
            return IMoocJSONResult.ok("用戶名或密碼不能爲空");
        }
        
        // 2. 判斷用戶是否存在
        Users userResult = userService.queryUserForLogin(username, 
                MD5Utils.getMD5Str(user.getPassword()));
        
        // 3. 返回
        if (userResult != null) {
            userResult.setPassword("");
            UsersVO userVO = setUserRedisSessionToken(userResult);
            return IMoocJSONResult.ok(userVO);
        } else {
            return IMoocJSONResult.errorMsg("用戶名或密碼不正確, 請重試");
        }
    }
    

    
    @ApiOperation(value="用戶註銷", notes="用戶註銷的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/logout")
    public IMoocJSONResult logout(String userId) throws Exception {
        
            redis.del(USER_REDIS_SESSION + ":" +userId);
            return IMoocJSONResult.errorMsg("註銷成功！！！");
    }
    
}

RegistLoginController.java

小程序端編寫註銷的邏輯

　　在mine.js中編寫logout()登出方法

 logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 登陸成功跳轉 
          //wx.showToast({
          //  title: '登陸成功',
          //  icon: 'success',
          //  duration: 2000
          //});
        }
      }
    })
  }

<view>

  <view class='container'>

    <block wx:if="{{isMe}}">
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
    </block>
    <block wx:if="{{!isMe}}">
      <image src="{{faceUrl}}" class="face"></image>
    </block>
    <label class='nickname'>{{nickname}}</label>

    
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

</view>

<view class="line"></view>

mine.wxml

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
  
  },

  logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 登陸成功跳轉 
          //wx.showToast({
          //  title: '登陸成功',
          //  icon: 'success',
          //  duration: 2000
          //});
        }
      }
    })
  }

})

mine.js

　　完善用戶註銷，當接收到200碼時，提示用戶註銷成功，清除小程序全局對象，實現頁面的跳轉

success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 註銷成功 
          wx.showToast({
             title: '註銷成功',
             icon: 'success',
             duration: 2000
            });
          //清除全局用戶對象
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: '../userLogin/login',
          })
        }
      }

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
  
  },

  logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 註銷成功 
          wx.showToast({
             title: '註銷成功',
             icon: 'success',
             duration: 2000
            });
          //清除全局用戶對象
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: '../userLogin/login',
          })
        }
      }
    })
  }

})

mine.js

用戶頭像上傳

　　用戶上傳頭像接口

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            return IMoocJSONResult.ok();
    }
    
}

　　微信小程序中上傳用戶頭像邏輯

　　點擊頭像觸發uploadVideo()函數

      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>

changeFace:function(){
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success:function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        wx.showLoading({
          title: '上傳中...',
        })

        var serverUrl = app.serverUrl;
        wx.uploadFile({
          url: serverUrl+'/user/uploadFace?userId='+app.userInfo.id, 
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'application/json' // 默認值
          },
          success: function (res) {
            var data = res.data
            console.log(data);
            wx.hideLoading();
            wx.showToast({
              title: '上傳成功',
              icon:"success"
            })
          }
        })

      }
    })
  }

<view>

  <view class='container'>
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>

    <label class='nickname'>{{nickname}}</label>
        
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

</view>

<view class="line"></view>

mine.wxml

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
  
  },

  logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 註銷成功 
          wx.showToast({
             title: '註銷成功',
             icon: 'success',
             duration: 2000
            });
          //清除全局用戶對象
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: '../userLogin/login',
          })
        }
      }
    })
  },

  changeFace:function(){
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success:function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        wx.showLoading({
          title: '上傳中...',
        })

        var serverUrl = app.serverUrl;
        wx.uploadFile({
          url: serverUrl+'/user/uploadFace?userId='+app.userInfo.id, 
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'application/json' // 默認值
          },
          success: function (res) {
            var data = res.data
            console.log(data);
            wx.hideLoading();
            wx.showToast({
              title: '上傳成功',
              icon:"success"
            })
          }
        })

      }
    })
  }

})

mine.js

package com.imooc.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
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 org.springframework.web.multipart.MultipartFile;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            return IMoocJSONResult.ok();
    }
    
}

UserController.java

　　上傳頭像後更新到數據庫

        Users user = new Users();
        user.setId(userId);
        user.setFaceImage(uploadPathDB);
        userService.updateUserInfo(user);

package com.imooc.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
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 org.springframework.web.multipart.MultipartFile;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }else {
                    return IMoocJSONResult.errorMsg("上傳出錯...");
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return IMoocJSONResult.errorMsg("上傳出錯...");
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            Users user = new Users();
            user.setId(userId);
            user.setFaceImage(uploadPathDB);
            userService.updateUserInfo(user);
            
            return IMoocJSONResult.ok();
    }
    
}

UserController.java

Springboot靜態資源配置，顯示圖片

　　添加WebMvcConfig.java做爲設定虛擬路徑的類繼承WebMvcConfig，並重寫addResourceHandlers(ResourceHandlerRegistry registry)方法

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("file:F:/imooc-video-gary/");
    }

　　此時訪問http://localhost:8081/190502AYNKPFRDD4/face/路徑去查看用戶上傳的圖片

　　爲讓Swagger UI靜態資源路徑也是訪問正確，再添加靜態資源路徑目錄classpath:/META-INF/resources/

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/META-INF/resources/")
                .addResourceLocations("file:F:/imooc-video-gary/");
    }

package com.imooc;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/META-INF/resources/")
                .addResourceLocations("file:F:/imooc-video-gary/");
    }

    
    
}

WebMvcConfig.java

小程序展現頭像

　　編寫小程序端用戶上傳頭像成功回調函數

 success: function (res) {
            var data = JSON.parse(res.data);
            console.log(data);
            wx.hideLoading();
            if(data.status == 200){
              wx.showToast({
                title: '上傳成功',
                icon: "success"
              });

              var imageUrl = data.data;
              me.setData({
                faceUrl: serverUrl+imageUrl
              });

            } else if (data.status == 500){
              wx.showToast({
                title: data.msg
              });
            }
          }

package com.imooc.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
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 org.springframework.web.multipart.MultipartFile;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }else {
                    return IMoocJSONResult.errorMsg("上傳出錯...");
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return IMoocJSONResult.errorMsg("上傳出錯...");
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            Users user = new Users();
            user.setId(userId);
            user.setFaceImage(uploadPathDB);
            userService.updateUserInfo(user);
            
            return IMoocJSONResult.ok(uploadPathDB);
    }
    
}

UserController.java

<view>

  <view class='container'>
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>

    <label class='nickname'>{{nickname}}</label>
        
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

</view>

<view class="line"></view>

mine.wxml

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
  
  },

  logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 註銷成功 
          wx.showToast({
             title: '註銷成功',
             icon: 'success',
             duration: 2000
            });
          //清除全局用戶對象
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: '../userLogin/login',
          })
        }
      }
    })
  },

  changeFace:function(){
    var me = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success:function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        wx.showLoading({
          title: '上傳中...',
        })

        var serverUrl = app.serverUrl;
        wx.uploadFile({
          url: serverUrl+'/user/uploadFace?userId='+app.userInfo.id, 
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'application/json' // 默認值
          },
          success: function (res) {
            var data = JSON.parse(res.data);
            console.log(data);
            wx.hideLoading();
            if(data.status == 200){
              wx.showToast({
                title: '上傳成功',
                icon: "success"
              });

              var imageUrl = data.data;
              me.setData({
                faceUrl: serverUrl+imageUrl
              });

            } else if (data.status == 500){
              wx.showToast({
                title: data.msg
              });
            }
          }
        })

      }
    })
  }

})

mine.js

查詢用戶

　　查詢用戶接口

@ApiOperation(value="查詢用戶信息", notes="查詢用戶信息的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/query")
    public IMoocJSONResult query(String userId) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            Users  userInfo = userService.queryUserInfo(userId);
            UsersVO userVO = new UsersVO();
            BeanUtils.copyProperties(userInfo, userVO);
            
            return IMoocJSONResult.ok(userVO);
    }

package com.imooc.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
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 org.springframework.web.multipart.MultipartFile;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }else {
                    return IMoocJSONResult.errorMsg("上傳出錯...");
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return IMoocJSONResult.errorMsg("上傳出錯...");
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            Users user = new Users();
            user.setId(userId);
            user.setFaceImage(uploadPathDB);
            userService.updateUserInfo(user);
            
            return IMoocJSONResult.ok(uploadPathDB);
    }
    
    @ApiOperation(value="查詢用戶信息", notes="查詢用戶信息的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/query")
    public IMoocJSONResult query(String userId) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            Users  userInfo = userService.queryUserInfo(userId);
            UsersVO userVO = new UsersVO();
            BeanUtils.copyProperties(userInfo, userVO);
            
            return IMoocJSONResult.ok(userVO);
    }
    
}

UserController.java

　　在小程序中顯示我的信息

    <label class='nickname'>{{nickname}}</label>
        
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

　　編寫onLoad()方法，頁面加載完畢調用onLoad()

 onLoad: function (params) {
      var me = this;
      var user = app.userInfo;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/user/query?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          var userInfo= res.data.data;
          var faceUrl = "../resource/images/noneface.png";
          if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
            faceUrl = serverUrl + userInfo.faceImage;
          }

          me.setData({
            faceUrl: faceUrl,
            fansCounts: userInfo.fansCounts,
            followCounts: userInfo.followCounts,
            receiveLikeCounts: userInfo.receiveLikeCounts,
            nickname: userInfo.nickname
          });
        } 
      }
    })
  },

package com.imooc.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
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 org.springframework.web.multipart.MultipartFile;

import com.imooc.pojo.Users;
import com.imooc.pojp.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用戶相關業務的接口",tags= {"用戶相關業務的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
    
    @Autowired
    private UserService userService;
    
    @ApiOperation(value="用戶上傳頭像", notes="用戶上傳頭像的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/uploadFace")
    public IMoocJSONResult uploadFace(String userId,
            @RequestParam("file") MultipartFile[] files) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            //文件保存命名空間
            String fileSpace = "F:/imooc-video-gary";
            //保存到數據庫中的相對路徑
            String uploadPathDB = "/" + userId + "/face";
            
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
            
            try {
                if( files != null && files.length>0 ) {

                    
                    String fileName = files[0].getOriginalFilename();
                    if(StringUtils.isNoneBlank(fileName)) {
                        //文件上傳的最終保存路徑
                        String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
                        //設置數據庫保存的路徑
                        uploadPathDB += ("/" + fileName);
                        
                        File outFile = new File(finalFacePath);
                        if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
                            //建立父文件夾
                            outFile.getParentFile().mkdirs();
                        }
                        
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = files[0].getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                    
                }else {
                    return IMoocJSONResult.errorMsg("上傳出錯...");
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return IMoocJSONResult.errorMsg("上傳出錯...");
            }finally {
                if(fileOutputStream != null) {
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            
            Users user = new Users();
            user.setId(userId);
            user.setFaceImage(uploadPathDB);
            userService.updateUserInfo(user);
            
            return IMoocJSONResult.ok(uploadPathDB);
    }
    
    @ApiOperation(value="查詢用戶信息", notes="查詢用戶信息的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,
    dataType="String" ,paramType="query")
    @PostMapping("/query")
    public IMoocJSONResult query(String userId) throws Exception {
        
            if(StringUtils.isBlank(userId)) {
                return IMoocJSONResult.errorMsg("用戶id不能爲空...");
            }
        
            Users  userInfo = userService.queryUserInfo(userId);
            UsersVO userVO = new UsersVO();
            BeanUtils.copyProperties(userInfo, userVO);
            
            return IMoocJSONResult.ok(userVO);
    }
    
}

UserController.java

<view>

  <view class='container'>
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>

    <label class='nickname'>{{nickname}}</label>
        
      <button size='mini' class='primary' bindtap='uploadVideo'> 上傳做品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>註銷</button>

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>

</view>

<view class="line"></view>

mine.wxml

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },

  onLoad: function (params) {
      var me = this;
      var user = app.userInfo;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/user/query?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          var userInfo= res.data.data;
          var faceUrl = "../resource/images/noneface.png";
          if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
            faceUrl = serverUrl + userInfo.faceImage;
          }

          me.setData({
            faceUrl: faceUrl,
            fansCounts: userInfo.fansCounts,
            followCounts: userInfo.followCounts,
            receiveLikeCounts: userInfo.receiveLikeCounts,
            nickname: userInfo.nickname
          });
        } 
      }
    })
  },

  logout:function(params){
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待...',
    });
    // 調用後端
    wx.request({
      url: serverUrl + '/logout?userId='+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 註銷成功 
          wx.showToast({
             title: '註銷成功',
             icon: 'success',
             duration: 2000
            });
          //清除全局用戶對象
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: '../userLogin/login',
          })
        }
      }
    })
  },

  changeFace:function(){
    var me = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success:function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        wx.showLoading({
          title: '上傳中...',
        })

        var serverUrl = app.serverUrl;
        wx.uploadFile({
          url: serverUrl+'/user/uploadFace?userId='+app.userInfo.id, 
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'application/json' // 默認值
          },
          success: function (res) {
            var data = JSON.parse(res.data);
            console.log(data);
            wx.hideLoading();
            if(data.status == 200){
              wx.showToast({
                title: '上傳成功',
                icon: "success"
              });

              var imageUrl = data.data;
              me.setData({
                faceUrl: serverUrl+imageUrl
              });

            } else if (data.status == 500){
              wx.showToast({
                title: data.msg
              });
            }
          }
        })

      }
    })
  }

})