微信小程序_(校园视)开发用户注册登陆
发布时间：2021-08-29 09:12:41作者：顺晟科技点击：
微信小程序_(校园视) 开发用户注册登陆 传送门
微信小程序_(校园视) 开发上传视频业务 传送门
微信小程序_(校园视) 开发视频的展示页-上 传送门
微信小程序_(校园视) 开发视频的展示页-下 传送门
用户注册界面
<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.ｉｎｓｅｒｔ(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.ｉｎｓｅｒｔ(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()).ｓｅｌｅｃｔ()
.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()).ｓｅｌｅｃｔ()
.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.ｒｅｐｌａｃｅ(/#/g, "?");
redirectUrl = redirectUrl.ｒｅｐｌａｃｅ(/@/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.ｉｎｓｅｒｔ(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.ｒｅｐｌａｃｅ(/#/g, "?");
redirectUrl = redirectUrl.ｒｅｐｌａｃｅ(/@/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-8application.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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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 ｏｕｔｆｉｌｅ = new File(finalFacePath);
if(ｏｕｔｆｉｌｅ.getParentFile()!=null || !ｏｕｔｆｉｌｅ.getParentFile().isDirectory()) {
//创建父文件夹
ｏｕｔｆｉｌｅ.getParentFile().mkdirs();
}
fileOutputStream = new FileOutputStream(ｏｕｔｆｉｌｅ);
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
- 上一篇 : 微信小程序 简易搜索功能实现
- 下一篇 : 微信小程序之js的全局调用
