接着上两篇文章继续讲，附上上两篇的地址，没看过的同学可以去看看。今天主要讲解一下登录组件部分和下载部分，也是最简单部分，今天讲完之后，作者需要潜心修炼一下后端，争取能做到和数据库进行交互，到时候再来接着写。
登陆界面
由于比较简单，就不画辅助线了，可以看到登录组件部分有两个功能，登录和注册，需要根据用户的点击来切换页面内容。直接上代码：
<template>
<div class="login-container">
<div class="login-logo"></div>
<div class="login-header">
<a :class="{active: loginway == 'login'}"
@click="changeLogin('login')"> 登录 ·</a>
<a :class="{active: loginway == 'register'}"
@click="changeLogin('register')"> 注册 </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部分代码：
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部分：
<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的大门，还是那句话球求收藏，错误的地方请斧正！！！
7720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
