微信小程序_(校园视)开发用户注册登陆

 

 

 

　　微信小程序_(校园视)　　开发用户注册登陆　　传送门 

　　微信小程序_(校园视)　　开发上传视频业务　　传送门 

　　微信小程序_(校园视)　　开发视频的展示页-上　　传送门 

　　微信小程序_(校园视)　　开发视频的展示页-下　　传送门 

 

 

用户注册界面

 

<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>
register.wxml

 

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;
}
register.wxss

 

{
  "pages":[
    "pages/userRegist/regist",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "校园视",
    "navigationBarTextStyle":"black"
  }
}
app.json

 

 

配置项目工程文件

 

 

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

 

数据库表设计

　　

八个表

　　users用户表

 

 　　user_fans用户粉丝表

 

　　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>

 

　　register.js中处理小程序注册请求消息

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>

 

　　login.js中处理登陆请求

// 登录  
  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>
login.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',
    })
  }
})
login.js

 

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>
login.wxml

 

<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',
    })
  }
})
login.js

 

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
              });
            }
          }
        })

      }
    })
  }

})
mine.js

 

posted @ 2019-04-13 16:16  Cynical丶Gary  阅读(1290)  评论(0)  编辑  收藏  举报