簡(jiǎn)閱1.1登錄

登錄功能后端實(shí)現(xiàn)
創(chuàng)建數(shù)據(jù)庫(kù)db_jianyue月匣，新建用戶數(shù)據(jù)表t_user

image.png

準(zhǔn)備幾個(gè)數(shù)據(jù)

IDEA中新建 jianyue-api項(xiàng)目鹏漆，目錄結(jié)構(gòu)如下：

image.png

pom.xml文件

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

application.properties文件

數(shù)據(jù)源配置

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

#指定實(shí)體類映射的包

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

swagger.contact.url=http://www.reibang.com/u/822585e5c69a

swagger.contact.email=moqi1977@gmail.com

swagger.base-package=com.soft1721.jianyue.api.controller

swagger.base-path=/**

swagger.exclude-path=/error, /ops/**

entity包User.java實(shí)體類

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數(shù)據(jù)傳輸對(duì)象類

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

import lombok.Data;

@Data

public class UserDTO {

private String mobile;

private String password;

}

util工具包下的幾個(gè)類

image.png

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

}

}

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;

}

package com.soft1721.jianyue.api.util;

public class MsgConst {

public static final String SUCCESS = "請(qǐng)求成功";

public static final String USER_ID_NO_FOUND = "id不存在";

public static final String USER_MOBILE_NO_FOUND = "手機(jī)號(hào)不存在";

public static final String PASSWORD_ERROR = "密碼錯(cuò)誤";

public static final String USER_STATUS_ERROR = "賬號(hào)異常";

}

package com.soft1721.jianyue.api.util;

import lombok.Data;

import lombok.Setter;

/**

* 封裝統(tǒng)一的響應(yīng)體

* 調(diào)用 ResponseResult.success() 或 ResponseResult.success(Object data),

* 不需要返回?cái)?shù)據(jù)時(shí)調(diào)用前者, 需要返回?cái)?shù)據(jù)時(shí)調(diào)用后者

*/

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

}

}

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

}

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 {

/**

* 根據(jù)手機(jī)號(hào)獲取用戶信息

*

* @param mobile

* @return

*/

User getUserByMobile(String mobile);

/**

* 登錄方法

*

* @param userDTO

* @return boolean

*/

int signIn(UserDTO userDTO);

}

service下impl子包UserServiceImpl.java實(shí)現(xiàn)類

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

//手機(jī)號(hào)存在

if (user != null) {

//密碼正確

if (userDTO.getPassword().equals(user.getPassword())) {

//賬號(hào)正常

if (user.getStatus() == 1) {

user.setToken(StringUtil.getUUIDString());

userMapper.update(user);

return StatusConst.SUCCESS;

} else { //賬號(hào)異常

return StatusConst.USER_STATUS_ERROR;

}

} else { //密碼錯(cuò)誤

return StatusConst.PASSWORD_ERROR;

}

} else { //手機(jī)號(hào)不存在

return StatusConst.USER_MOBILE_NOT_FOUND;

}

}

}

單元測(cè)試類

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

//手機(jī)號(hào)存在这难，將明文密碼轉(zhuǎn)成Base64密文后進(jìn)行登錄

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

public class WebMvcConfigurer extends WebMvcConfigurerAdapter {

//跨域配置

@Bean

public WebMvcConfigurer corsConfigurer() {

return new WebMvcConfigurer() {

@Override

//重寫父類提供的跨域請(qǐng)求處理的接口

public void addCorsMappings(CorsRegistry registry) {

//添加映射路徑

registry.addMapping("/**")

//放行哪些原始域

.allowedOrigins("*")

//是否發(fā)送Cookie信息

.allowCredentials(true)

//放行哪些原始域(請(qǐng)求方式)

.allowedMethods("GET", "POST", "PUT", "DELETE")

//放行哪些原始域(頭部信息)

.allowedHeaders("*")

//暴露哪些頭部信息（因?yàn)榭缬蛟L問(wèn)默認(rèn)不能獲取全部頭部信息）

.exposedHeaders("Header1", "Header2");

}

};

}

}

1.  啟動(dòng)主類

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.  運(yùn)行swagger頁(yè)面[http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)厕妖，測(cè)試登錄功能

[圖片上傳失敗...(image-135dfd-1555505089729)] 

[圖片上傳失敗...(image-213584-1555505089729)] 

1.  登錄功能前端實(shí)現(xiàn)

1.  在HBuilderX中創(chuàng)建uni-app類型的項(xiàng)目署尤，選擇默認(rèn)模板即可

然后建目錄結(jié)構(gòu)，如圖所示：

*   commons目錄放置一些全局配置函數(shù)

*   components目錄放置封裝的組件

*   pages目錄放置頁(yè)面文件

*   static目錄放置圖片資源

*   style目錄放置全局樣式文件

[圖片上傳失敗...(image-278b2b-1555505089729)] 

1.  pages目錄的各個(gè)子目錄里分別放相應(yīng)的vue文件

[圖片上傳失敗...(image-140fca-1555505089729)] 

1.  static目錄圖標(biāo)素材

圖標(biāo)素材.zip12.1KB

1.  配置pages.json文件如下：

{

"pages": [

//pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)时鸵，參考：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" : "簡(jiǎn)閱",

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

}

]

}

}

啟動(dòng)主類

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

運(yùn)行swagger頁(yè)面http://localhost:8080/swagger-ui.html，測(cè)試登錄功能

登錄功能前端實(shí)現(xiàn)

在HBuilderX中創(chuàng)建uni-app類型的項(xiàng)目厅瞎，選擇默認(rèn)模板即可
然后建目錄結(jié)構(gòu)饰潜，如圖所示：

commons目錄放置一些全局配置函數(shù)
components目錄放置封裝的組件
pages目錄放置頁(yè)面文件
static目錄放置圖片資源
style目錄放置全局樣式文件

image.png

pages目錄的各個(gè)子目錄里分別放相應(yīng)的vue文件

image.png

配置pages.json文件如下：

{
    "pages": [
        //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：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" : "簡(jiǎn)閱",
        "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目錄新建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;
}

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

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

my.vue

<template>
    <view class="container">
        <!-- 頂部頭像和昵稱區(qū)域和簸，縱向排列 -->
        <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">點(diǎn)擊登錄</navigator>
                <text v-if="storageData.login">{{ storageData.nickname }}</text>
                <navigator url="../setting/setting" v-if="storageData.login">
                    <text class="setting-txt">個(gè)人設(shè)置</text>
                </navigator>
            </view>
        </view>
        
        <!-- 中間文章數(shù)量彭雾、好友數(shù)量、消息數(shù)量等統(tǒng)計(jì)區(qū)域锁保，橫向排列 -->
        <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>關(guān)注</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>

signin.vue

<template>
    <view class="uni-flex uni-column container">
        <input
            class="uni-input"
            type="number"
            placeholder="輸入手機(jī)號(hào)"
            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) {
                        //將用戶數(shù)據(jù)記錄在本地存儲(chǔ)
                        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>

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>個(gè)人資料修改</text></view>
        </view>
        <button  @tap="logout" class="green-btn">退出當(dāng)前賬號(hào)</button>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '設(shè)置'
        });
    },
    methods: {
        logout: function() {
            console.log('log out');
            uni.removeStorageSync('login_key');
            uni.showToast({
                title: '已經(jīng)退出當(dāng)前賬號(hào)'
            });
            uni.navigateBack();
        }
    }
};
</script>

<style>
</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市爽柒，隨后出現(xiàn)的幾起案子吴菠，更是在濱河造成了極大的恐慌，老刑警劉巖浩村，帶你破解...
沈念sama閱讀 222,627評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件做葵，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡心墅，警方通過(guò)查閱死者的電腦和手機(jī)酿矢，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)怎燥，“玉大人瘫筐，你說(shuō)我怎么就攤上這事☆硪Γ” “怎么了策肝？”我有些...
開(kāi)封第一講書人閱讀 169,346評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)谦屑。經(jīng)常有香客問(wèn)我驳糯，道長(zhǎng)，這世上最難降的妖魔是什么氢橙？我笑而不...
開(kāi)封第一講書人閱讀 60,097評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任酝枢，我火速辦了婚禮，結(jié)果婚禮上悍手，老公的妹妹穿的比我還像新娘帘睦。我一直安慰自己袍患，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 69,100評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布竣付。她就那樣靜靜地躺著诡延，像睡著了一般。火紅的嫁衣襯著肌膚如雪古胆。梳的紋絲不亂的頭發(fā)上肆良，一...
開(kāi)封第一講書人閱讀 52,696評(píng)論 1贊 312
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音逸绎，去河邊找鬼惹恃。笑死，一個(gè)胖子當(dāng)著我的面吹牛棺牧，可吹牛的內(nèi)容都是我干的巫糙。我是一名探鬼主播，決...
沈念sama閱讀 41,165評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼颊乘，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼参淹！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起乏悄，我...
開(kāi)封第一講書人閱讀 40,108評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤浙值，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后檩小，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體亥鸠，經(jīng)...
沈念sama閱讀 46,646評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,709評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年识啦，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了负蚊。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,861評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡颓哮，死狀恐怖家妆，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情冕茅，我是刑警寧澤伤极，帶...
沈念sama閱讀 36,527評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站姨伤，受9級(jí)特大地震影響哨坪，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜乍楚，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,196評(píng)論 3贊 336
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一当编、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧徒溪，春花似錦忿偷、人聲如沸金顿。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 32,698評(píng)論 0贊 25
一樁弒父案鲤桥，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)揍拆。三九已至，卻和暖如春茶凳，著一層夾襖步出監(jiān)牢的瞬間嫂拴，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,804評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工贮喧，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留顷牌，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,287評(píng)論 3贊 379
代替公主和親
正文我出身青樓塞淹，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親罪裹。傳聞我的和親對(duì)象是個(gè)殘疾皇子饱普，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,860評(píng)論 2贊 361

簡(jiǎn)閱1.1登錄

數(shù)據(jù)源配置

登錄功能前端實(shí)現(xiàn)

推薦閱讀更多精彩內(nèi)容