基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿(三)

Jrain 發(fā)布于2019-08-01 15:42 / 2127人閱讀

摘要：基于的簡書網(wǎng)站模仿二基于的簡書網(wǎng)站模仿一登陸界面由于比較簡單，就不畫輔助線了，可以看到登錄組件部分有兩個功能，登錄和注冊，需要根據(jù)用戶的點擊來切換頁面內(nèi)容。

接著上兩篇文章繼續(xù)講，附上上兩篇的地址，沒看過的同學(xué)可以去看看。今天主要講解一下登錄組件部分和下載部分，也是最簡單部分，今天講完之后，作者需要潛心修煉一下后端，爭取能做到和數(shù)據(jù)庫進行交互，到時候再來接著寫。

基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿(二)

基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿(一)

登陸界面

由于比較簡單，就不畫輔助線了，可以看到登錄組件部分有兩個功能，登錄和注冊，需要根據(jù)用戶的點擊來切換頁面內(nèi)容。直接上代碼：

可以看到我這里頁面內(nèi)容的方式是通過vue的v-if功能來進行顯示不同的內(nèi)容，而V-if內(nèi)的變量我是通過vuex的getters進行獲取的，為什么這么做呢？因為如果我僅僅是在當(dāng)前頁面切換的話是不用這么干的，但是我們在App.vue里提供了注冊按鈕，如果不通過VUEX的話，這個注冊按鈕點進來還是會顯示登錄界面，而不是注冊界面，或者你也可以用事件分發(fā)把這個loginway參數(shù)分發(fā)出去，但是那樣做太麻煩，所以我在state里面新建了一個loginway變量，這樣我不管在哪里點擊注冊或者登錄事件，都能顯示對應(yīng)的界面，下面是actions.js部分代碼和store.js部分代碼：

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

這是store.js

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

做完這些，一個登錄界面的UI就做好了。

下載界面

這部只需要在router.map下添加一個路由即可，沒有數(shù)據(jù)的交互，直接給代碼吧：
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部分：