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

Jrain 发布于2019-08-01 15:42 / 2102人阅读

摘要：基于的简书网站模仿二基于的简书网站模仿一登陆界面由于比较简单，就不画辅助线了，可以看到登录组件部分有两个功能，登录和注册，需要根据用户的点击来切换页面内容。

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

基于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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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