[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善

导语:

暑假在家闲着无事,就琢磨着做一个web博客练练手,现在已经做完了,把过程分享出来给大家看看,分享一下学习经验。这是第三篇,主要讲node,webpack和vue-cli环境的搭建,使用vue全家桶,写好路由,构建静态页面,完善前端的一些功能。

本文的目录

  • 一,编写子组件
    • 1,消息提示框子组件toast
    • 2,登陆注册弹出框子组件login
    • 3,右拉信息框right
    • 4,个人信息组件information

一,编写子组件

1,消息提示框子组件toast

[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善_第1张图片

这个主要是z-index还有居中等要素。

<template>
  <div class="toast" v-show="toastShow">
    {{toastStr}}
  div>
template>

<script>
export default {
  props: {
    toastShow: {
      type: Boolean,
      default: false
    },
    toastStr: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  }
}
script>

<style>
.toast {
  position: fixed;
  z-index: 2100;
  left: 50%;
  top: 45%;
  transition: all .5s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 5px;
  color: #FFF;
  background: rgba(17, 17, 17, 0.7);
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  max-width: 150px;
}
style>

2,登陆注册弹出框子组件login

[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善_第2张图片
[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善_第3张图片
弹出层内点击转换登陆和注册。

<template>
  <div class="login">
    <div class="modal-body">
      
    <ul class="nav nav-tabs">
        <li v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="{active:index == nowIndex}" :key="index">{{item}}li>
    ul>
    
    <div class="tab-content">
        <div class="tab-pane fade in" id="login" v-show="nowIndex === 0">
            <div class="signup-form-container text-center">
                <form class="mb-0" @submit.prevent="_login($event)">
                  <div class="form-group">
                      <input type="text" class="form-control" name="username" placeholder="*用户名或邮箱">
                  div>
                  <div class="form-group">
                      <input type="password" class="form-control" name="password" placeholder="*密码">
                  div>
                  <button type="submit" class="go-login btn btn--primary btn--block"><i class="fa fa-bullseye">i> 安全登录button>
                  
                form>
                
            div>
            
        div>
        <div class="tab-pane fade in " id="signup" v-show="nowIndex === 1">
            <form class="mb-0" @submit.prevent="_signup($event)">
              <div class="form-group">
                  <input type="text" class="form-control" name="username" placeholder="输入账号">
              div>
              <div class="form-group">
                  <input type="text" class="form-control" name="realname" placeholder="输入用户名">
              div>
              
              <div class="form-group">
                  <input type="email" class="form-control" name="email" placeholder="绑定邮箱">
              div>
                    
              <div class="form-group">
                  <input type="password" class="form-control" name="password" placeholder="密码最小长度为6">
              div>
              <div class="form-group">
                  <input type="password" class="form-control" name="password1" placeholder="再次输入密码">
              div>
              <button type="submit" class="go-register btn btn--primary btn--block"><i class="fa fa-bullseye">i> 立即注册button>
            form>
            
        div>
    div>
  div>
  div>

template>

<script>
import { login, signup } from "@/api/user"
import { ContactList } from 'vant';
export default {
  data(){
    return {
      tabsParam : ['登陆', '注册'],
      nowIndex:0,//默认第一个tab为激活状态
    }
  },
  methods: {
    toggleTabs:function(index){
      this.nowIndex=index;
    },
    _login() {
      var formData = new FormData(event.target);
      login(formData).then(res => {
        if (res.data.errno == 0) {
          console.log(res)
          let userinfo = res.data.data
          this.$store.commit('updateUserStatus',userinfo);
        }
        this.$emit('closelogin',res.data.errno)
      })
    },
    _signup(event) {
      let message = event.target
      if (message.password.value != message.password1.value) {
        // console.log('buyiy')
        this.$emit('passwordNoSame')
        return
      }
      var formData = new FormData(message)
      formData.email = message.email.value
      formData.username = message.username.value
      formData.password = message.password.value
      formData.realname = message.realname.value
      // console.log(formData)
      signup(formData).then(res => {
        if (res.data.errno == 0) {
          console.log(res)
        }
        this.$emit('closesign', res.data.errno)
      })
    }

  },
  mounted() {
    console.log(this.$store.getters.getCurrentUser)
    console.log(this.$store.getters.getIsLogin)
  },
}
script>

<style scoped>
.login{
  border: none;
  box-shadow: none;
  position: relative;
  background-color: transparent;
}
.model-body{
  position: relative;
  padding: 15px;
}
.nav-tabs{
  border-bottom: none;
    text-align: center;
    padding-left: 0;
    padding: 10px;
    list-style: none;
    margin: 0;
}
.nav-tabs li{
  float: none;
  display: inline-block;
  margin: 0 5px;
}
.tab-content{
  padding: 20px;
    background-color: #ffffff;
    border-radius: 4px;
}
.form-group{
  margin-bottom: 15px;
  position: relative;
}
.form-control{
  border-radius: 0;
  font-family: Lato,sans-serif;
  line-height: 30px;
  margin-bottom: 10px;
  padding: 0 12px;
  transition: border-color cubic-bezier(0.77,0,0.175,1);
  border: 1px solid #dad9d9;
  font-size: 14px;
  border-radius: 10px;
}
.active{
  color: #69d78a;
}
.tabnav{
  color: red;
}
.mb-0{
  text-align: center;
}
.btn{
  background-color: #69d78a;
  border: 1px solid #69d78a;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
}
style>

3,右拉信息框right

[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善_第4张图片

<template>
  <div class="right">
    <div class="img-div">
      <img src="../../assets/logo.jpg" class="logo">
      <p class="rightp">轻松学算法p>
      <p class="rightp">小程序:轻松学算法p>
    div>
    <div class="button_div">
      <van-button type="primary" size="mini" to="/home">首页van-button>
    div>
  div>
template>

<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);
export default {

}
script>

<style scoped>
.img-div{
  margin-top: 30px;
  text-align: center;
}
.logo{
  height: 160px;
  width: 160px;
}
.rightp{
  font-size: 14px;
  margin-top: 0;
}
.button_div{
  padding-left: 10px
}
style>

4,个人信息组件information

[记录三] Vue(全家桶)+node+koa2+mysql+nginx+redis,全栈博客项目前端部分完善_第5张图片

<template>
  <div class="information">
    toast>
    <van-popup v-model="show" style="border-radius: 10px;">
      <div class="inputdiv">
        <input class="input" v-model="newName">
        

在这里插入图片描述
你们的赞就是对我最大的鼓励,谢谢啦~~~

你可能感兴趣的:(html/css,js,node,javascript,css,vue.js,node.js,html5)