1.登录功能后端实现

1.1 创建数据库db_jianyue ,创建表t_user并自行添几个数据

user表.png

1.2 IDEA中新建jianyue-api项目

jianyue.png

1.3 添加pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.soft1721</groupId>
    <artifactId>jianyue-api</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>jianyue-api</name>
    <description>JianYue API project</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.39</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.6</version>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.8.0.RELEASE</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

1.4 application.properties文件

## 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/db_jianyue?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=Root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#指定实体类映射的包
mybatis.type-aliases-package=com.soft1721.jianyue.api.entity

#swagger配置
swagger.enabled=true
swagger.title=jianyue  api project
swagger.description=Starter for swagger 2.x
swagger.license=Apache License, Version 2.0
swagger.licenseUrl=https://www.apache.org/licenses/LICENSE-2.0.html
swagger.termsOfServiceUrl=https://github.com/dyc87112/spring-boot-starter-swagger
swagger.contact.name=wxy
swagger.contact.url=//www.greatytc.com/u/feefa6f6349c
swagger.contact.email=2324407028@qq.com
swagger.base-package=com.soft1721.jianyue.api.controller
swagger.base-path=/**
swagger.exclude-path=/error, /ops/**

1.5 entity包User.java实体类

package com.soft1721.jianyue.api.entity;

import lombok.Data;

import java.util.Date;

@Data
public class User {
    private Integer id;
    private String mobile;
    private String password;
    private String nickname;
    private String token;
    private Short status;
    private Date regtime;
    private String avatar;
}

1.6 entity包下dto子包UserDTO.java数据传输对象类

package com.soft1721.jianyue.api.entity.dto;

import lombok.Data;

@Data
public class UserDTO {
    private String mobile;
    private String password;
}

1.7 until包下几个工具类

until.png

• MsgConst

package com.soft1721.jianyue.api.util;

public class MsgConst {
    public static final String SUCCESS = "请求成功";
    public static final String USER_ID_NO_FOUND = "id不存在";
    public static final String USER_MOBILE_NO_FOUND = "手机号不存在";
    public static final String PASSWORD_ERROR = "密码错误";
    public static final String USER_STATUS_ERROR = "账号异常";
    public static final String MOBILE_EXIST = "手机号已被注册";
    public static final String VERIFYCODE_ERROR = "验证码错误";
    public static final String FOLLOWED = "已关注";
    public static final String NO_FOLLOWED = "取消关注";
    public static final String LIKE = "已喜欢";
    public static final String NO_LIKE = "取消喜欢";

}

• ResponseResult

package com.soft1721.jianyue.api.util;

import lombok.Data;

/**
 * 封装统一的响应体
 * 调用 ResponseResult.success() 或 ResponseResult.success(Object data),
 * 不需要返回数据时调用前者, 需要返回数据时调用后者
 */
@Data
public class ResponseResult {
    private int code;
    private String msg;
    private Object data;

    public static ResponseResult error(int code, String msg) {
        ResponseResult responseResult = new ResponseResult();
        responseResult.setCode(code);
        responseResult.setMsg(msg);
        return responseResult;
    }

    public static ResponseResult success() {
        ResponseResult responseResult = new ResponseResult();
        responseResult.setCode(StatusConst.SUCCESS);
        responseResult.setMsg(MsgConst.SUCCESS);
        return responseResult;
    }

    public static ResponseResult success(Object data) {
        ResponseResult responseResult = new ResponseResult();
        responseResult.setCode(StatusConst.SUCCESS);
        responseResult.setMsg(MsgConst.SUCCESS);
        responseResult.setData(data);
        return responseResult;
    }
}

• StausConst

package com.soft1721.jianyue.api.util;

public class StatusConst {
    public static final int SUCCESS = 0;
    public static final int USER_ID_NOT_FOUND = 1;
    public static final int USER_MOBILE_NOT_FOUND = 2;
    public static final int PASSWORD_ERROR = 3;
    public static final int USER_STATUS_ERROR = 4;
    public static final int MOBILE_EXIST = 5;
    public static final int VERIFYCODE_ERROR = 6;
}

• StringUtil

package com.soft1721.jianyue.api.util;

import java.io.UnsupportedEncodingException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Base64;
import java.util.Date;
import java.util.UUID;

public class StringUtil {
    public static String getDateString(Date date) {
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return df.format(date);
    }

    public static String getBase64Encoder(String srcString) {
        String resultStr = "";
        try {
            resultStr = Base64.getEncoder().encodeToString(srcString.getBytes("utf-8"));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return resultStr;
    }

    public static String getBase64Decoder(String srcString) {
        byte[] bytes = Base64.getDecoder().decode(srcString);
        return new String(bytes);
    }


    public static String getUUIDString() {
        return UUID.randomUUID().toString();
    }
}

1.8 mapper包UserMapper.java接口

package com.soft1721.jianyue.api.mapper;

import com.soft1721.jianyue.api.entity.User;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

public interface UserMapper {
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "mobile", column = "mobile"),
            @Result(property = "password", column = "password"),
            @Result(property = "nickname", column = "nickname"),
            @Result(property = "avatar", column = "avatar"),
            @Result(property = "status", column = "status"),
            @Result(property = "regtime", column = "regtime"),
            @Result(property = "token", column = "token")
    })
    @Select("SELECT * FROM t_user WHERE mobile = #{mobile} ")
    User getUserByMobile(String mobile);

    @Update("UPDATE t_user SET password=#{password},nickname=#{nickname},avatar=#{avatar},status=#{status},token=#{token} WHERE id =#{id}")
    void update(User user);
}

1.9 service包UserService.java接口

package com.soft1721.jianyue.api.service;

import com.soft1721.jianyue.api.entity.User;
import com.soft1721.jianyue.api.entity.dto.UserDTO;

public interface UserService {

    /**
     * 根据手机号获取用户信息
     *
     * @param mobile
     * @return
     */
    User getUserByMobile(String mobile);

    /**
     * 登录方法
     *
     * @param userDTO
     * @return boolean
     */
    int signIn(UserDTO userDTO);
}

1.10 service下impl子包UserServiceImpl.java实现类

package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.User;
import com.soft1721.jianyue.api.entity.dto.UserDTO;
import com.soft1721.jianyue.api.mapper.UserMapper;
import com.soft1721.jianyue.api.service.UserService;
import com.soft1721.jianyue.api.util.StatusConst;
import com.soft1721.jianyue.api.util.StringUtil;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;

    @Override
    public User getUserByMobile(String mobile) {
        return userMapper.getUserByMobile(mobile);
    }

    @Override
    public int signIn(UserDTO userDTO) {
        User user = userMapper.getUserByMobile(userDTO.getMobile());
        //手机号存在
        if (user != null) {
            //密码正确
            if (userDTO.getPassword().equals(user.getPassword())) {
                //账号正常
                if (user.getStatus() == 1) {
                    user.setToken(StringUtil.getUUIDString());
                    userMapper.update(user);
                    return StatusConst.SUCCESS;
                } else {  //账号异常
                    return StatusConst.USER_STATUS_ERROR;
                }
            } else {  //密码错误
                return StatusConst.PASSWORD_ERROR;
            }
        } else {  //手机号不存在
            return StatusConst.USER_MOBILE_NOT_FOUND;
        }
    }
}

1.11 单元测试类

package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.User;
import com.soft1721.jianyue.api.entity.dto.UserDTO;
import com.soft1721.jianyue.api.service.UserService;
import com.soft1721.jianyue.api.util.StatusConst;
import com.soft1721.jianyue.api.util.StringUtil;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import javax.annotation.Resource;

import static org.junit.Assert.assertEquals;


@RunWith(SpringRunner.class)
@SpringBootTest
public class UserServiceImplTest {
    @Resource
    private UserService userService;

    @Test
    public void getUserByMobile() {
        User user = userService.getUserByMobile("13988889999");
        System.out.println(user);
    }

    @Test
    public void signIn() {
        UserDTO loginUser = new UserDTO();
        loginUser.setMobile("13951905171");
        String base64Pass = StringUtil.getBase64Encoder("111");
        loginUser.setPassword(base64Pass);
        int status = userService.signIn(loginUser);
        assertEquals(StatusConst.SUCCESS, status);
    }
}

1.12 controller包下UserController

package com.soft1721.jianyue.api.controller;

import com.soft1721.jianyue.api.entity.User;
import com.soft1721.jianyue.api.entity.dto.UserDTO;
import com.soft1721.jianyue.api.service.UserService;
import com.soft1721.jianyue.api.util.ResponseResult;
import com.soft1721.jianyue.api.util.MsgConst;
import com.soft1721.jianyue.api.util.StatusConst;
import com.soft1721.jianyue.api.util.StringUtil;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

@RestController
@RequestMapping(value = "/api/user")
public class UserController {
    @Resource
    private UserService userService;

    @PostMapping(value = "/sign_in")
    public ResponseResult signIn(@RequestBody UserDTO userDTO) {
        System.out.println(userDTO);
        User user = userService.getUserByMobile(userDTO.getMobile());
        if (user == null) {
            return ResponseResult.error(StatusConst.USER_MOBILE_NOT_FOUND, MsgConst.USER_MOBILE_NO_FOUND);
        } else {
            //手机号存在，将明文密码转成Base64密文后进行登录
            userDTO.setPassword(StringUtil.getBase64Encoder(userDTO.getPassword()));
            int status = userService.signIn(userDTO);
            if (status == StatusConst.SUCCESS) {
                return ResponseResult.success(user);
            } else if (status == StatusConst.PASSWORD_ERROR) {
                return ResponseResult.error(status, MsgConst.PASSWORD_ERROR);
            } else {
                return ResponseResult.error(status, MsgConst.USER_STATUS_ERROR);
            }
        }
    }
}

1.13 config包下跨域配置类

package com.soft1721.jianyue.api.config;

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

@Configuration
public class WebMvcConfigurer extends WebMvcConfigurerAdapter {
    //跨域配置
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        }
    }

1.14 启动主类

package com.soft1721.jianyue.api;

import com.spring4all.swagger.EnableSwagger2Doc;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.soft1721.jianyue.api.mapper")
@EnableSwagger2Doc
public class JianyueApiApplication {

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

1.15 运行swagger页面http://localhost:8080/swagger-ui.html，测试登录功能

sign_in.png

200OK.png

2.登录功能前端实现

2.1 在HBuilderX中创建uni-app类型的项目，选择默认模板即可

然后建目录结构，如图所示：

目录.png

• commons目录放置一些全局配置函数
• components目录放置封装的组件
• pages目录放置页面文件
• static目录放置图片资源
• style目录放置全局样式文件

2.2 pages目录的各个子目录里分别放相应的vue文件

子页面.png

2.3 配置pages.json文件如下：

{
    "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "文章",
                //允许下拉刷新
                "enablePullDownRefresh": true
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息"
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/signin/signin",
            "style": {}
        },
        {
            "path": "pages/write/write",
            "style": {}
        },
        {
            "path": "pages/info/info",
            "style": {}
        },
        {
            "path": "pages/setting/setting",
            "style": {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        // "navigationBarTitleText" : "简阅",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color": "#707070",
        "selectedColor": "#DE533A",
        "list": [{
                "pagePath": "pages/index/index",
                "text": "文章",
                "iconPath": "static/nav1.png",
                "selectedIconPath": "static/nav1-a.png"
            },
            {
                "pagePath": "pages/message/message",
                "text": "消息",
                "iconPath": "static/nav2.png",
                "selectedIconPath": "static/nav2-a.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/nav3.png",
                "selectedIconPath": "static/nav3-a.png"
            }
        ]
    }
}

2.4 style目录新建style.css全局样式表

* {
    font-size: 14pt;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.list {
    display: flex;
    flex-direction: column;
}

.list-item {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.green-btn {
    background-color: rgb(26, 173, 25);
    color: #fff;
}

2.5 App.vue文件中引入全局样式表

<style>
 @import 'style/style.css';
</style>

2.6 my.vue

<template>
    <view class="container">
        <!-- 顶部头像和昵称区域，纵向排列 -->
        <view class="top">
            <view class="avatar-box">
                <image
                    src="../../static/default.png"
                    mode="scaleToFill"
                    class="avatar"
                    v-if="!storageData.login">
                    </image>
                <image
                    :src="storageData.avatar"
                    mode="scaleToFill"
                    class="avatar"
                    v-if="storageData.login"
                ></image>
            </view>
            <view class="info-box">
                <navigator url="../signin/signin" v-if="!storageData.login">点击登录</navigator>
                <text v-if="storageData.login">{{ storageData.nickname }}</text>
                <navigator url="../setting/setting" v-if="storageData.login">
                    <text class="setting-txt">个人设置</text>
                </navigator>
            </view>
        </view>
        
        <!-- 中间文章数量、好友数量、消息数量等统计区域，横向排列 -->
        <view class="center" v-if="storageData.login">
            <view class="info">
                <text class="title">{{articleCount}}</text>
                <text>文章</text>
            </view>
            <view class="info">
                <text class="title">{{followCount}}</text>
                <text>关注</text>
            </view>
            <view class="info">
                <text class="title">{{messageCount}}</text>
                <text>消息</text>
            </view>
            <view class="info">
                <text class="title">{{integral}}</text>
                <text>积分</text>
            </view>
        </view>
        
        <view class="content" v-if="storageData.login">
            <view class="list">
                <view class="list-item" v-for="(article, index) in articles" :key="index">
                    <text>{{article.title}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var loginRes, _self;
export default {
    data() {
        return {
            storageData: {},
            articleCount:10,
            followCount:5,
            messageCount:66,
            integral:100,
            articles:[
                {
                    id:1,
                    title:'第一篇文章',
                },
                {
                    id:2,
                    title:'第二篇文章',
                },
                {
                    id:3,
                    title:'第三篇文章',
                },
                {
                    id:4,
                    title:'第四篇文章',
                }
            ]
        };
    },
    onLoad: function() {},
    onShow: function() {
        const loginKey = uni.getStorageSync('login_key');
        console.log("my-vue page show");
        if (loginKey) {
            console.log(loginKey);
            this.storageData = {
                login: loginKey.login,
                nickname: loginKey.nickname,
                avatar: loginKey.avatar
            };
        }else{
            this.storageData ={
                login: false
            }
        }
    },
    methods: {
        
    }
};
</script>

<style scoped>
.top {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100px;
    margin-top: 5px;
}
.avatar-box{
    flex: 1 1 30%;
}
.info-box{
    flex: 1 1 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.setting-txt{
    color: #00B26A;
    margin-left: 15px;
}
.center{
    display: flex;
    justify-content: center;
}
.info{
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    text-align: center;
    
    border-right: 1px solid #eee;
}
.title{
    font-size: 14pt;
}
.content{
    margin-top: 20px;
}
</style>

2.7 signin.vue

<template>
    <view class="uni-flex uni-column container">
        <input
            class="uni-input"
            type="number"
            placeholder="输入手机号"
            v-model="userDTO.mobile"
            required="required"
        />
        <input
            class="uni-input"
            password
            type="text"
            placeholder="输入密码"
            v-model="userDTO.password"
            required="required"
        />
        <button class="green-btn" @tap="signIn(userDTO)">登录</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userDTO: {
                mobile: '',
                password: ''
            }
        };
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '登录'
        });
    },
    methods: {
        signIn: function(userDTO) {
            var _this = this;
            // console.log(userDTO.mobile + ',' + userDTO.password);
            uni.request({
                url: 'http://39.96.182.225:8080/api/user/sign_in',
                // url: 'http://172.20.10.4:8080/api/user/sign_in',
                method: 'POST',
                data: {
                    mobile: userDTO.mobile,
                    password: userDTO.password
                },
                header: {
                    'content-type': 'application/json'
                },
                success: res => {
                    // console.log(res.data.data);
                    if (res.data.code == 0) {
                        //将用户数据记录在本地存储
                        uni.setStorageSync('login_key', {
                            userId: res.data.data.id,
                            nickname: res.data.data.nickname,
                            avatar: res.data.data.avatar,
                            token: res.data.data.token,
                            login: true
                        });
                        uni.showToast({
                            title: '登录成功'
                        });
                        uni.navigateBack();
                    }
                    //登录失败，弹出各种原因
                    else {
                        uni.showModal({
                            title: '提示',
                            content: res.data.msg
                        });
                    }
                }
            });
        }
    }
};
</script>

<style scoped>
input {
    height: 50px;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}
</style>

2.8 setting.vue

<template>
    <view class="container">
        <view class="list">
            <view class="list-item"><text>文章推送</text></view>
            <view class="list-item"><text>新消息推送</text></view>
            <view class="list-item"><text>个人资料修改</text></view>
        </view>
        <button  @tap="logout" class="green-btn">退出当前账号</button>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '设置'
        });
    },
    methods: {
        logout: function() {
            console.log('log out');
            uni.removeStorageSync('login_key');
            uni.showToast({
                title: '已经退出当前账号'
            });
            uni.navigateBack();
        }
    }
};
</script>

<style>
</style>