uniapp实现前端登录

1.下载uniapp框架

npm install -g @vue/cli     //全局安装vue-cli   安装过就不用按了
vue create -p dcloudio/uni-preset-vue my-project   //下载框架  my-project 是文件名称是必须带的参数  可以更改 下载《默认模板》

下载完的框架可能会找不到npm 工具栏 去下面找到package.json文件右键 show npm scripts 这一项点击就会出现
在npm 中可以选择编译方式

2.添加文件 到src文件下

所需文件一共5个
1. api 文件 用于存放ajax请求的自定义参数
2.components 文件 用于存放feinpm下载的插件（可有可无）
3.config  文件 配置ajax请求的网址，自定义的全局调用的变量
4.libs 文件 用于存放ajax以及请求拦截
5.store 文件 封装好的 ：登录，获取个人信息，退出登录

3配置文件

在main.js里面添加

import store from './store'   //全局引入
Vue.prototype.$store = store  //实例化

在pages文件夹下面 创建一个文件名为login 的文件夹 再在login下建一个index.vue 的vue文件这个文件就是登陆页面
找到路由文件pages.json 将login/inde 的路由放在首位，这样每次进来的就是登陆页面了

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/index",
            "style": {
                "navigationBarTitleText": "登陆"
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

login/index页面样式自己写

<template>
    <view class="content">
        <view class="title">
            <p>登录</p>
        </view>
        <view>
            <p>账号</p>
            <input type="text" v-model="form.email" class="username">
            <p>密码</p>
            <input type="password" v-model="form.password" class="username">
        </view>
        <view>
            <button type="primary" class="login" @click="submit">登录</button>
        </view>
    </view>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        data() {
            return {
                form:{
                    email: '',
                    password: '',
                }
            }
        },
        onLoad() {

        },
        methods: {
            ...mapActions([
                'handleLogin',
                'getUserInfo'
            ]),
            submit(){
                this.handleLogin(this.form).then(() => {
                    this.getUserInfo().then(() => {
                        uni.showToast({
                            icon: 'success',
                            position: 'bottom',
                            title: '登录成功'
                        })
                        // uni.navigateBack()   小程序用这个  把首页路由放第一个
                        uni.navigateTo({
                            url: '../index/index'
                        });
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .title{
        font-weight: bold;
        margin: 10rpx 0 40rpx 0;
        font-size: 44rpx;
        color: white;
    }
    .username{
        height: 80rpx;
        margin:10rpx 0 40rpx 0;
        width: 600rpx;
        border-radius: 10rpx;
        border: #007aff 2rpx solid;
        background-color: rgba(200, 199, 204, 0.36);
    }
    .content {
        background-size: 100% 100%;
        padding: 70rpx;
        margin: 0 auto;
        text-align: center;
        height: 90.3vh;
    }
    .login{
        width: 400rpx;
        margin-top: 150rpx;
        color: white;
    }
</style>

index/index页面

<template>
    <view class="content">
        <p>{{title}}</p>
    </view>
</template>
<script>
    import {mapActions} from 'vuex'
    export default {
        data() {
            return {
                title: '登陆成功！',
            }
        },
        onShow() {
            this.index()
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
            index(){
                this.getUserInfo().then(() => {
                }).catch((error) => {
                    uni.navigateTo({
                        url: '../login/index'
                    });
                });
            }

        }
    }
</script>

<style>
</style>

齐活收工！(ૢ˃ꌂ˂ૢ)