基于Vue,Vue-router,Vuex的简书网站模仿(三)

时间 2019-11-09

原文原文链接

接着上两篇文章继续讲，附上上两篇的地址，没看过的同窗能够去看看。今天主要讲解一下登陆组件部分和下载部分，也是最简单部分，今天讲完以后，做者须要潜心修炼一下后端，争取能作到和数据库进行交互，到时候再来接着写。前端

登录界面

因为比较简单，就不画辅助线了，能够看到登陆组件部分有两个功能，登陆和注册，须要根据用户的点击来切换页面内容。直接上代码：git

<template>
    <div class="login-container">
        <div class="login-logo"></div>
        <div class="login-header">
            <a  :class="{active: loginway == 'login'}" 
                        @click="changeLogin('login')">&nbsp;&nbsp;&nbsp;&nbsp;登陆&nbsp;&nbsp;&nbsp;&nbsp;·</a>
            <a  :class="{active: loginway == 'register'}" 
                        @click="changeLogin('register')">&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="login-input" v-if="loginway === 'login' ">
            <form class="form_login" accept-charset="UTF-8" method="post">
                <div class="username">
                    <span class="span1"><i class="fa fa-user"></i></span>
                    <input type="text" name="register_name" placeholder="选一个昵称" class="span2">
                </div>
                <div class="password">
                    <span class="span1"><i class="fa fa-unlock-alt"></i></span>
                    <input type="password" name="register_password" placeholder="密码" class="span2">
                </div>
                <button class="login-btn btn" type="submit"><span>登陆</span></button>
                <div class="login-control" style="color:#555555;font-size:12px;">
                    <span style="float:left" class="checkbox" :class="{checked: checked === true}"
                        @click="checked = !checked">
                        <input type="checkbox" style="position: absolute; opacity: 0;" checked="checked">
                        <ins class="check"></ins>
                    </span>
                    <span style="float:left">记住我</span>
                    <span style="float:right"><a href="#" style="color:#555555">忘记密码</a></span>
                </div>
            </form>
        </div>
        <div class="login-input" v-if="loginway === 'register'">
            <form class="form_register" accept-charset="UTF-8" method="post">
                <div class="email">
                    <span class="span1"><i class="fa fa-envelope-o"></i></span>
                    <input type="text" name="email_adress" placeholder="你的邮件地址" class="span2">
                </div>
                <div class="username">
                    <span class="span1"><i class="fa fa-user"></i></span>
                    <input type="text" name="sign_in[name]" placeholder="手机号码/电子邮件" class="span2">
                </div>
                <div class="password">
                    <span class="span1"><i class="fa fa-unlock-alt"></i></span>
                    <input type="password" name="sign_in[password]" placeholder="密码" class="span2">
                </div>
                <button class="register-btn btn" type="submit"><span>注册</span></button>
                <p class="register_text">点击 “注册” 或下方社交登陆按钮，即表示您赞成并愿意遵照简书 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a> 。</p>
            </form>
        </div>            
        <div class="login-way">
            <h5>您还能够经过如下方式登陆</h5>
            <ul>
                <li class="qqicon"><i class="fa fa-qq"></i></li>
                <li class="weiboicon"><i class="fa fa-weibo"></i></li>
                <li class="wechaticon"><i class="fa fa-wechat"></i></li>
                <li class="googleicon"><i class="fa fa-google-plus"></i></li>
                <li class="githubicon"><i class="fa fa-github"></i></li>
            </ul>
        </div>
    </div></template>
<script>
import { changeLogin } from '../vuex/actions'
    export default{
        data () {
            let checked = 'true'
            return {checked}
        },
        vuex:{
            getters:{
                loginway: state => state.loginway
            },
            actions:{
                changeLogin
            }
        }
    }
</script>

能够看到我这里页面内容的方式是经过vue的v-if功能来进行显示不一样的内容，而V-if内的变量我是经过vuex的getters进行获取的，为何这么作呢？由于若是我仅仅是在当前页面切换的话是不用这么干的，可是咱们在App.vue里提供了注册按钮，若是不经过VUEX的话，这个注册按钮点进来仍是会显示登陆界面，而不是注册界面，或者你也能够用事件分发把这个loginway参数分发出去，可是那样作太麻烦，因此我在state里面新建了一个loginway变量，这样我无论在哪里点击注册或者登陆事件，都能显示对应的界面，下面是actions.js部分代码和store.js部分代码：github

export const changeLogin = ({ dispatch },loginway) => {
    dispatch('CHANGELOGIN',loginway)
}

这是store.jsvue-router

const state = {
    loginway = 'login'
}
const mutations = {
    CHANGELOGIN (statem, loginway){
        state.loginway = loginway
    }
}

作完这些，一个登陆界面的UI就作好了。vuex

下载界面

这部只须要在router.map下添加一个路由便可，没有数据的交互，直接给代码吧：
main.js部分数据库

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

import home from './components/Home.vue'
import topic from './components/Topic.vue'
import article from './components/Article.vue'
import bonus from './components/Bonus.vue'
import login from './components/Login.vue'
import topic_article from './components/Topic_article.vue'
import download from './components/Download.vue'

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
    '/home': {
        component: home,
        subRoutes: {
            '/article': {
                component: article
            }
        }
    },
    '/topic': {
        component: topic,
        subRoutes: {
            'topic_article': {
                component: topic_article
            }
        }
    },
    '/bonus': {
        component: bonus
    },
    '/login': {
        component: login
    },
    '/download': {
        component: download
    }
})

router.redirect({
    '*':'/home/article'
})

router.start(App,'app')
router.go('/home/article')

能够看到新加了一个download路由。接下来是download.vue部分：segmentfault

<template>
    <div class="download_container">
        <div class="download_content">
            <div class="page-left">
                <div class="logo">
                    <img src="../../static/jianshu_logo.jpg">
                </div>
                <div class="download_btn">
                    <ul class="download">
                        <li><a href="#"><i class="fa fa-android"></i>Android版</a></li>
                        <li><a href="#"><i class="fa fa-mobile"></i>iPhone版</a></li>
                    </ul>
                    <img src="../../static/download_img1.png">
                </div>
                <ul class="share_list">
                    <li>关注咱们</li>
                    <li><i class="fa fa-qq"></i></li>
                    <li><i class="fa fa-weibo"></i></li>
                    <li><i class="fa fa-wechat"></i></li>
                </ul>    
            </div>
            <div class="app-img">
                <img src="../../static/download_img2.png">
            </div>    
        </div>
    </div>
</template>

到这里，一个比较简单的简书首页前端页面就作完成了，相信你跟着个人这些步骤过一遍的话，对于vue-router和vuex应该有一部分了解了，简单来讲就是好玩，好学。但愿我能经过个人文章帮你打开进入vue的大门，仍是那句话球求收藏，错误的地方请斧正！！！后端