Recipe-Box User模块

作者: 三仕贰號 | 来源:发表于2018-01-05 17:47 被阅读0次

Recipe-Box User模块
Recipe-Box Recipe模块
django中级 --- User模块
2019-06-19【关于django中auth模块的表】
微糖需求分析及功能分析
maven的聚合和继承
keystone
2020-10-19PDMS
zookeeper 和dubbo
auth 组件

修改 welcome.blade.php 文件 （路径：resources/views/welcome.blade.php）
修改引入的 css文件和 js 文件，使用 Vue + Vue-Router

<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Recipe Box</title>
        <link rel="stylesheet" type="text/css" href="{{mix('css/app.css')}}">
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script type="text/javascript" src="{{mix('js/app.js')}}"></script>
    <footer></footer>
</html>

删除不需要的文件

_variables.scss 路径: resources/assets/sass/_variables.scss
bootstrap.js 路径: resources/assets/js/bootstrap.js
Example.vue 路径：resources/assets/js/components/Example.vue

运行 npm

>npm run watch

后面需要修改/添加文件，免得混乱，贴一张图以供参考

20180105134045.png

修改app.js (路径：resources/assets/js/app.js)

import Vue from 'vue';
import App from './App.vue';
import router from './router';

const app = new Vue({
    el: '#root',
    template: `<app></app>`,
    components: { App },
    router
})

添加 router 文件夹，并在该文件夹下创建 inde.js (在文件夹：resources/assets/js/ 下创建文件夹)

import Vue from 'vue';
import VueRouter from 'vue-router';

import Register from '../views/Auth/Register.vue';
import Login from '../views/Auth/Login.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {path: '/register', component: Register},
        {path: '/login', component: Login}
    ]
});

export default router;

添加App.vue (在文件夹：resources/assets/js/ 下添加)

<template>
    <div class="container">
        <div class="navbar">
            <div class="navbar__brand">
                <router-link to="/">Recipe Box</router-link>
            </div>

            <ul class="navbar__list">
                <li class="navbar__item" v-if="!check">
                    <router-link to="/login">LOGIN</router-link>
                </li>

                <li class="navbar__item" v-if="!check">
                    <router-link to="/register">REGISTER</router-link>
                </li>

                <li class="navbar__item" v-if="check">
                    <router-link to="/recipes/create">CREATE RECIPE</router-link>
                </li>

                <li class="navbar__item" v-if="check">
                    <a @click.stop="logout">LOGOUT</a>
                </li>
            </ul>
        </div>

        <div class="flash flash__success" v-if="flash.success">
            {{flash.success}}
        </div>

        <div class="flash flash__error" v-if="flash.error">
            {{flash.error}}
        </div>

        <router-view></router-view>
    </div>
</template>

<script type="text/javascript">
    import Auth from './store/auth';
    import Flash from './helpers/flash';
    import { post } from './helpers/api';
    export default{
        data(){
            return {
                flash: Flash.state,
                auth: Auth.state
            }
        },
        computed: {
          check(){
              if(this.auth.api_token && this.auth.user_id){
                  return true;
              }else {
                  return false;
              }
          }
        },
        methods:{
            logout(){
                post('/api/logout')
                    .then((res) => {
                        if(res.data.logged_out){
                            Auth.remove();
                            Flash.setSuccess('退出登录！');
                            this.$router.push('/');
                        }
                    }).catch((err) => {
                })
            }
        },
        created(){
            Auth.initialize();
        }
    }
</script>

创建 Auth 文件夹，并在该目录下创建Register.vue 和 Login.vue （在目录：resources/assets/js/views 下创建 Auth 文件夹）

<template>
    <form class="form" @submit.prevent="register">
        <h1 class="form__title">注册账号</h1>
        <div class="form__group">
            <label>Name</label>
            <input type="text" class="form__control" v-model="form.name"/>
            <small class="error__control" v-if="error.name">{{error.name[0]}}</small>
        </div>

        <div class="form__group">
            <label>Email</label>
            <input type="text" class="form__control" v-model="form.email"/>
            <small class="error__control" v-if="error.email">{{error.email[0]}}</small>
        </div>

        <div class="form__group">
            <label>Password</label>
            <input type="password" class="form__control" v-model="form.password"/>
            <small class="error__control" v-if="error.password">{{error.password[0]}}</small>
        </div>

        <div class="form__group">
            <label>Confirm Password</label>
            <input type="password" class="form__control" v-model="form.password_confirmation"/>
        </div>

        <div class="form__group">
            <button :disabled="isProcessing" class="btn btn__primary">Register</button>
        </div>

    </form>
</template>

<script type="text/javascript">
    import Flash from '../../helpers/flash';
    import { post } from '../../helpers/api';
    export default{
        data(){
            return {
                form: {
                    name: '',
                    email: '',
                    password: '',
                    password_confirmation: ''
                },
                error: {},
                isProcessing: false
            }
        },
        methods: {
            register(){
                this.isProcessing = true;
                this.error = {};
                post(`/api/register`, this.form).then((res) => {
                    if(res.data.registered){
                        Flash.setSuccess('创建帐号成功！');
                        this.$router.push('/login');
                    }
                    this.isProcessing = false;
                }).catch((err) => {
                    if(err.response.status === 422){
                        this.error = err.response.data;
                    }
                    this.isProcessing = false;
                })
            }
        }
    }
</script>

<template>
    <form class="form" @submit.prevent="login">
        <h1 class="form__title">欢迎回来！</h1>

        <div class="form__group">
            <label>Email</label>
            <input type="text" class="form__control" v-model="form.email"/>
            <small class="error__control" v-if="error.email">{{error.email}}</small>
        </div>

        <div class="form__group">
            <label>Password</label>
            <input type="password" class="form__control" v-model="form.password"/>
            <small class="error__control" v-if="error.password">{{error.password[0]}}</small>
        </div>

        <div class="form__group">
            <button :disabled="isProcessing" class="btn btn__primary">Login</button>
        </div>

    </form>
</template>

<script type="text/javascript">
    import Flash from '../../helpers/flash';
    import Auth from '../../store/auth';
    import { post } from '../../helpers/api';
    export default{
        data(){
            return {
                form: {
                    email: '',
                    password: ''
                },
                error: {},
                isProcessing: false
            }
        },
        methods: {
            login(){
                this.isProcessing = true;
                this.error = {};
                post(`/api/login`, this.form).then((res) => {
                    if(res.data.authenticated){
                        Auth.set(res.data.api_token, res.data.user_id);
                        Flash.setSuccess('登录成功！');
                        this.$router.push('/');
                    }
                    this.isProcessing = false;
                }).catch((err) => {
                    if(err.response.status === 422){
                        this.error = err.response.data;
                    }
                    this.isProcessing = false;
                })
            }
        }
    }
</script>

创建 store 文件夹，并在该目录下创建 auth.js （在目录：resources/assets/js/ 下创建 store 文件夹）

auth.js 内容：

export default {
    state: {
        api_token: null,
        user_id: null
    },
    initialize(){
        this.state.api_token = localStorage.getItem('api_token');
        this.state.user_id = parseInt(localStorage.getItem('user_id'));
    },
    set(api_token, user_id){
        localStorage.setItem('api_token', api_token);
        localStorage.setItem('user_id', user_id);
        this.initialize();
    },
    remove(){
        localStorage.removeItem('api_token');
        localStorage.removeItem('user_id');
        this.initialize();
    }
}

创建helpers 文件夹，并在该目录下创建 api.js、flash.js、form.js （在目录：resources/assets/js/ 下创建 helpers 文件夹）

api.js 文件：

import axios from 'axios';
import Auth from '../store/auth';

export function get(url) {
    return axios({
        method: 'GET',
        url: url,
        headers: {
            'Authorization': `Bearer ${Auth.state.api_token}`
        }
    })
}

export function post(url, data) {
    return axios({
        method: 'POST',
        url: url,
        data: data,
        headers: {
            'Authorization': `Bearer ${Auth.state.api_token}`
        }
    })
}

export function del(url) {
    return axios({
        method: 'DELETE',
        url: url,
        headers: {
            'Authorization': `Bearer ${Auth.state.api_token}`
        }
    })
}

flash.js 内容：

export default {
    state: {
        success: null,
        error: null
    },
    setSuccess(message){
        this.state.success = message;
        setTimeout(()=>{
            this.removeSuccess();
        }, 3000);
    },
    setError(message){
        this.state.error = message;
        setTimeout(()=>{
            this.removeError();
        }, 10000);
    },
    removeSuccess(){
        this.state.success = null;
    },
    removeError(){
        this.state.error = null;
    }
}

form.js 内容：

export function toMulipartedForm(form, mode) {
    if(mode === 'edit' && typeof form.image === 'string'){
        const temp = JSON.parse(JSON.stringify(form));
        delete temp.image;
        return temp;
    }else {
        return objectToFormData(form);
    }
}

export function objectToFormData(obj, form, namespace) {
    let fd = form || new FormData();
    let formKey;
    for(var property in obj){
        if(obj.hasOwnProperty(property)){
            if(namespace){
                formKey = namespace + '[' + property + ']';
            }else {
                formKey = property;
            }
        }

        if(obj[property] instanceof Array){
            for (var i = 0; i < obj[property].length; i++){
                objectToFormData(obj[property][i], fd, `${property}[${i}]`);
            }
        }else if(typeof obj[property] === 'object' && !(obj[property] instanceof File)){
            objectToFormData(obj[property], fd, property);
        }else {
            fd.append(formKey, obj[property]);
        }
    }

    return fd;
}

Recipe-Box User模块
修改 welcome.blade.php 文件（路径：resources/views/welcome.blade...
Recipe-Box Recipe模块
创建 images 目录，并放置一张图片当做默认图片，最好把 images 目录权限设置为 777（images的...
django中级 --- User模块
模块说明： User对象属性 User方法：模块扩展： django默认的user模块字段固定，可能无法满足我们...
2019-06-19【关于django中auth模块的表】
参考博客 Django权限系统AUTH模块 auth模块相关的表 user表User是auth模块中维护用户信息的...
微糖需求分析及功能分析
一、用户模块User 【用户表：User】 |字段|类型|默认值|描述| ------------- |:----...
maven的聚合和继承
maven的聚合有三个项目，我们分了三个模块编译：user-core user-log user-service...
keystone
keystone -- 身份服务模块 User即用户，代表可以通过keystone进行访问的人或程序，User通过...
2020-10-19PDMS
ADMIN模块今天看到新建TEAM USER DB MDB .
zookeeper 和dubbo
zookeeper : 是注册中心如:user模块和order模块 dubbo : Alibaba 分布式框架服务...
auth 组件
目录 auth模块介绍 auth模块的常用方法扩展默认的auth_user表 1. auth模块介绍用户认证系...