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

Jrain 發布于2019-08-01 15:42 / 2104人閱讀

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

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

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

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

登陸界面

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

可以看到我這里頁面內容的方式是通過vue的v-if功能來進行顯示不同的內容，而V-if內的變量我是通過vuex的getters進行獲取的，為什么這么做呢？因為如果我僅僅是在當前頁面切換的話是不用這么干的，但是我們在App.vue里提供了注冊按鈕，如果不通過VUEX的話，這個注冊按鈕點進來還是會顯示登錄界面，而不是注冊界面，或者你也可以用事件分發把這個loginway參數分發出去，但是那樣做太麻煩，所以我在state里面新建了一個loginway變量，這樣我不管在哪里點擊注冊或者登錄事件，都能顯示對應的界面，下面是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下添加一個路由即可，沒有數據的交互，直接給代碼吧：
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部分：

到這里，一個比較簡單的簡書首頁前端頁面就做完成了，相信你跟著我的這些步驟過一遍的話，對于vue-router和vuex應該有一部分了解了，簡單來說就是好玩，好學。希望我能通過我的文章幫你打開進入vue的大門，還是那句話球求收藏，錯誤的地方請斧正！！！

GPU云服務器云服務器 vue-router Vue_Vuex 阿里云服務器搭建網站簡書 Vuex

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50061.html

基于Vue,Vue-router,Vuex的簡書網站模仿

摘要：本文假設讀者手里有關于和的文檔，并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹，可以配合本文進行學習。關鍵就是在中部導航欄熱門，新上榜那塊，棕色框內的內容會根據中部導航欄選中不同內容進行改變。在這個教程里面，我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔，并且對Vue-router...

warnerwu 2019-08-29 11:16 評論0 收藏0
基于Vue,Vue-router,Vuex的簡書網站模仿

摘要：本文假設讀者手里有關于和的文檔，并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹，可以配合本文進行學習。關鍵就是在中部導航欄熱門，新上榜那塊，棕色框內的內容會根據中部導航欄選中不同內容進行改變。在這個教程里面，我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔，并且對Vue-router...

shiyang6017 2019-08-01 15:42 評論0 收藏0
基于Vue,Vue-router,Vuex的簡書網站模仿(二)

摘要：通過點擊事件來更換不同的值和文章內容。文章排版整潔，注意詩游戲玩轉簡書的第一步，從這個專題開始。專題主編蘇錦年投稿須知本專題收錄古詩詞現代詩以及詩詞點評及指導。內容必須為原創，切勿用其他詩人的詩句。接著上一篇我們接著講,關于這個網站的專題頁面和2015精選頁面，如果有小伙伴沒看過上一篇文章，這里附上上一篇文章的的鏈接基于Vue,Vue-router,Vuex的簡書網站模仿這里是網站的...

yibinnn 2019-08-22 10:37 評論0 收藏0
?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用，適合于vue2、vuex、vue-router核心概念的理解與掌握。前言做這個項目的初衷其實很簡單，我司之前一直用angular、react進行PC端項目的開發，但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

learning 2019-08-02 15:57 評論0 收藏0
?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用，適合于vue2、vuex、vue-router核心概念的理解與掌握。前言做這個項目的初衷其實很簡單，我司之前一直用angular、react進行PC端項目的開發，但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

galois 2019-08-21 11:50 評論0 收藏0