5 简阅项目 登录功能

1.后端

1.创建数据库db_jianyue,并创建数据库表t_user

image
  • 插入数据

    image

2.后端:新建一个新的模块jianyue-api

image

config配置
controller控制器
entity
dto只有账号密码,数据传输对象
util工具类
service业务逻辑impl具体实现类

2.1 pom文件



    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.3.RELEASE
         
    
    com.soft1721
    jianyue-api
    0.0.1-SNAPSHOT
    jianyue-api
    JianYue API project

    
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter
        

        
            com.alibaba
            fastjson
            1.2.56
        

        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
            mysql
            mysql-connector-java
            5.1.39
        


        
            com.aliyun
            aliyun-java-sdk-core
            4.0.3
        
        
            org.springframework.boot
            spring-boot-starter-data-redis
        

        
            com.aliyun.oss
            aliyun-sdk-oss
            2.8.3
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.1.1
        

        
            org.springframework.boot
            spring-boot-starter-mail
        
        
            javax.mail
            mail
            1.4.7
        

        
            org.projectlombok
            lombok
            1.18.6
            true
        

        
            com.spring4all
            swagger-spring-boot-starter
            1.8.0.RELEASE
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    


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=zhangli
swagger.contact.url=https://www.jianshu.com/u/f2a0d66f112f
[email protected]
swagger.base-package=com.soft1721.jianyue.api.controller
swagger.base-path=/**
swagger.exclude-path=/error, /ops/**

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;

}

entity子包中的dto包下的UserDTO.java数据传输对象

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

import lombok.Data;

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

util包下有四个类

image
  • 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 = "验证码错误";

}

  • ResponseResult类
package com.soft1721.jianyue.api.util;

import lombok.Data;
import lombok.Setter;

/**
 * 封装统一的响应体
 * 调用 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;
    }
}

  • StatusConst类
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.Random;
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();
    }
    public static String getVerifyCode() {
        Random random = new Random();
        StringBuilder stringBuilder = new StringBuilder();
        for (int i = 0; i < 6; i++) {
            stringBuilder.append(String.valueOf(random.nextInt(10)));
        }
        return stringBuilder.toString();
    }
}

  • mapper包下的UserMapper.java接口
package com.soft1721.jianyue.api.mapper;

import com.soft1721.jianyue.api.entity.User;
import org.apache.ibatis.annotations.*;

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

    @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 id = #{id}")
    User getUserById(int userId);
    @Update("UPDATE t_user SET nickname=#{nickname} WHERE id =#{id}")
    void nickname(User user);

    @Insert("INSERT INTO t_user(mobile,password,nickname,status,regtime,avatar) VALUES(#{mobile},#{password},#{nickname},#{status},#{regtime},#{avatar}) ")
    void insert(User user1);
}

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

    User getUserById(int userId);

    void updateUser(User user);

    int signUp(UserDTO userDTO);

    void nickname(User user);
}

  • UserServiceImpl实现类
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;
import java.util.Date;

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

    @Override
    public User getUserById(int userId) {
        return userMapper.getUserById(userId);
    }

    @Override
    public void updateUser(User user) {
        userMapper.update(user);

    }

    @Override
    public int signUp(UserDTO userDTO) {
        //先根据手机号找用户是否存在
        User user = userMapper.getUserByMobile(userDTO.getMobile());
        if (user != null) {
            return StatusConst.MOBILE_EXIST;
        } else {
            User user1 = new User();
            user1.setMobile(userDTO.getMobile());
            user1.setPassword(StringUtil.getBase64Encoder(userDTO.getPassword()));
            user1.setNickname("新用户");
            user1.setAvatar("http://niit-soft.oss-cn-hangzhou.aliyuncs.com/avatar/default.png?Expires=1554292133&OSSAccessKeyId=TMP.AQHz8QArrtzxbb3VQMkjjdlwB2JvoOvmIMBh4CoHPerk718LdNehNeLBWDEcMC4CFQDgleDgj6q_VsjSB-9lTP7KcdjU1gIVAOnRS2ovGQSHNf9WpHc4nSLw0-OH&Signature=NT9%2BSOt7FX4VvmQnvt7B8XvKtmA%3D");
            user1.setRegtime(new Date());
            user1.setStatus((short) 1);
            userMapper.insert(user1);
            return StatusConst.SUCCESS;
        }
    }

    @Override
    public void nickname(User user) {
        userMapper.nickname(user);
    }
    }

  • 单元测试
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);
    }
    @Test
    public void signUp() {
        UserDTO userDTO = new UserDTO();
        userDTO.setMobile("18315158147");
        userDTO.setPassword("111");
        int n = userService.signUp(userDTO);
        assertEquals(0, n);
    }

    @Test
    public void nickname() {
        User user=userService.getUserById(1);
        user.setNickname("明天");
        userService.updateUser(user);

    }
}

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

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

启动主类:需要在主类里面加入注解
@SpringBootApplication
@MapperScan("com.soft1721.jianyue.api.mapper")

打开浏览器输入localhost:8080/swagger-ui.html远程接口测试接口
如果出现200,说明后端已经通了

2.前端

在HBuilderX创建uni-app类型的项目

image
  • commons目录放置全局配置函数

  • components放置封装的组件

  • pages放置页面文件

  • static目录放置图片资源

  • style放置全局样式文件

  • 配置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": {}
        },
        {
            "path": "pages/user_info/user_info",
            "style": {}
        },
        {
            "path": "pages/user_name/user_name",
            "style": {}
        },
        {
            "path": "pages/register/register",
            "style": {}
        },
        {
            "path": "pages/password/password",
            "style": {}
        },
        {
            "path":"pages/article_detail/article_detail",
            "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"
            }
        ]
    }
}

  • style的全局样式:
*{
    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: 40px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

  • App.vue引入全局样式:


  • my.vue






  • signin类






  • setting.vue






运行的结果:


image.png

image.png

image.png

image.png

image.png

image.png

你可能感兴趣的:(5 简阅项目 登录功能)