基於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的大門，仍是那句話球求收藏，錯誤的地方請斧正！！！後端