二：登陸頁面和註冊頁面的前臺和後臺

時間 2019-11-30

標籤登陸頁面註冊前臺後臺简体版

原文原文鏈接

** 項目一共有 16 個頁面，是一個電商網銷項目，本身在網上的某網上找的一個要作的網站的設計圖；html

頁面主要包括：登陸頁 -- 註冊頁 -- 首頁 -- 產品列表頁 -- 產品詳情頁 -- 會員中心頁 -- 個人購物車頁 -- 支付頁 -- 支付成功頁 -- 支付失敗頁 -- 評價頁 -- 評價詳情頁 -- 個人訂單頁 -- 訂單詳情頁 -- 確認訂單頁 -- 收貨地址列表頁；前端

後端技術： node express mongo；vue

前端技術：vue-cli elementui axios ；node

編輯器： vscode；jquery

項目的暫時github地址：https://github.com/13476075014/node-vue/tree/master/mynodeproject/10.moon ；純屬我的記錄下這個整個項目的過程，並不是教程。 **ios

一基本樣式展現，以下圖前臺的基本實現

二：進入 client - src - components 文件夾，新建文件 head.vue( 是全部頁面公用的頭部組件文件），具體代碼以下：

<!-- 這個是公用的頭部的組件 -->

<template>
  <div id="headone">
      <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo item head1"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu class="head_item" index="1">
        <template slot="title">網站導航</template>
        <el-menu-item index="1-1"> <a class="map" href="#hot">熱門商品</a> </el-menu-item>
        <el-menu-item index="1-2"><a class="map" href="#new">最新商品</a></el-menu-item>
        <el-menu-item index="1-3"><a class="map" href="#beauty">化妝品</a></el-menu-item>
      </el-submenu>

      <el-submenu class="head_item" index="2">
        <template slot="title">客戶服務</template>
        <el-menu-item index="2-1">選項1</el-menu-item>
        <el-menu-item index="2-2">選項2</el-menu-item>
        <el-menu-item index="2-3">選項3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">選項4</template>
          <el-menu-item index="2-4-1">選項1</el-menu-item>
          <el-menu-item index="2-4-2">選項2</el-menu-item>
          <el-menu-item index="2-4-3">選項3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item class="item" index="3">
        <div class="block head_block">
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="selectedOptions2"
            @change="handleChange">
          </el-cascader>
        </div>
      </el-menu-item>

      <el-menu-item class="item" index="4" style="float:right;">
        <router-link to="{path:'/'}" target="_blank">
            在線幫助
        </router-link>
      </el-menu-item>
      <el-menu-item class="item" index="5" style="float:right;">
        <router-link to="{path:'/'}" target="_blank">
            購物車
        </router-link>
      </el-menu-item>
      <el-menu-item class="item" index="6" style="float:right;">
        <router-link to="{path:'/'}" target="_blank">
            個人訂單
        </router-link>
      </el-menu-item>
      <el-menu-item class="item" index="7" style="float:right;">
        <router-link to="{path:'/'}" target="_blank">
            曉月會員
        </router-link>
      </el-menu-item>
      <el-menu-item class="item" index="8" style="float:right;">
        <router-link :to="{name:'register'}" target="_blank">
            註冊有禮
        </router-link>
      </el-menu-item>
      <el-menu-item class="item" index="9" style="float:right;">
        <router-link :to="{path:'/'}" target="_blank">
            請登陸
        </router-link>
      </el-menu-item>
    </el-menu>

    <div id="top2" style="text-align:left;padding-top:45px;">
         <el-row style="margin-top:10px;">
          <el-col :offset="3" :span="5">
            <a href="">
                <img src="../assets/images/login_01.png" alt="">
            </a>
          </el-col>

          <el-col :span="10">
               <el-input style="" placeholder="請輸入內容" v-model="input_search" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <p style="font-size:12px;">
                  <span>熱門搜索：</span> 蘭蔻
              </p>
          </el-col>


           <el-col :span="3" style="text-align:right;">
              <img src="../assets/images/login_02.png" alt="">
          </el-col>
           <el-col>

          </el-col>
        </el-row>
    </div>

     <!-- 頭部3 -->
      <div id="top3" style="background:rgb(219,219,219);line-height:40px;text-align:left;">
        <el-row>
          <el-col :offset="3">
              <el-dropdown trigger="click" style="padding:0 35px;" v-for="(i,index) in drop" :key="index" :class="{'drop_active':index == active_index}" id="clickMe">
                <span class="el-dropdown-link" style="cursor:pointer;" @click="changetab(index)">
                  {{i.main}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <div  v-for="(de,index2) in i.detail" :key="index2">
                      <el-dropdown-item>{{de.top}}</el-dropdown-item>
                      <el-dropdown-item>
                          <div style="max-width:150px;">
                            <span v-for="(ii,index3) in de.bottom" :key="index3">{{ii}} /</span>
                          </div>
                      </el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
          </el-col>
        </el-row>
    </div>  <!-- 頭部3結束 -->

  </div>
</template>

<script>
import city from '../assets/js/city.js'

export default {
  name:"oneHead",  //這個命名注意不要和一些內置的名重複儘可能，否則會報錯  "vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: head"
   data() {
      return {
          activeIndex2: '1',
           active_index:0,
          options:city,
          selectedOptions2:[],
          input_search:"",
          drop:[ //頭部3
              {main:"所有商品分類",detail:[{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]},{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]}]},
              {main:"化妝品",detail:[{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]},{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]}]},
              {main:"護膚品",detail:[{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]},{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]}]},
              {main:"沐浴用品",detail:[{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]},{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]}]},
              {main:"海外尖貨",detail:[{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]},{top:"化妝品",bottom:["口紅","眼霜","面霜","口紅","眼霜","面霜"]}]}

            ]
      };
    },
    created:function(){
        //console.log(city);
    },
    methods: {
        handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleChange(value) {
        console.log(value);
      },
      changetab:function(ins){
              this.active_index = ins;
        }
    }
}
</script>

<style scoped>
    .item{height:40px!important;line-height: 40px!important;}
    .head1{position: fixed;top:0;left:0;width:100%;z-index:2005;}
    .block{background:none;}
    .drop_active{background:rgb(251,114,142);color:white;}
    a.map{color:white!important;}
</style>

View Code

三：進入 client - src - components 文件夾，新建文件 foot.vue( 是全部頁面公用的尾部組件文件），具體代碼以下：

<template>
    <div id="onefoot" style="font-size:12px;background:rgb(247,247,247);">
        <el-row>
          <el-col :span="14" :offset="5">
              <p class="p1">
                <span v-for='(i,index) in top1' :key='index'>
                    <a class="bor_r" :href="i.url">
                      {{i.label}}
                    </a>
                </span>
              </p>
              <p class="p2">
                <span class="bor_r" v-for='(i,index) in top2' :key='index'>
                      {{i}}
                </span>
              </p>
              <p>
                <span v-for='(i,index) in top3' :key='index'>
                      {{i}}
                </span>
              </p>
          </el-col>
        </el-row>

    </div>
</template>


<script>
export default {
    name:"onefoot",
    data(){
      return {
          top1:[{label:"關於咱們",url:""},{label:"聯繫咱們",url:""},{label:"聯繫客服",url:""},{label:"合做招商",url:""},{label:"營銷中心",url:""},{label:"手機曉月",url:""},{label:"友情連接",url:""},{label:"銷售聯盟",url:""},{label:"曉月社區",url:""},{label:"風險監測",url:""},{label:"隱私策略",url:""}]
          ,top2:["備案號","ICP證","資格證--經營證----"]
          ,top3:["互聯網出版許可證","網絡文化經營許可證","違法和不良信息舉報電話"]
          ,top4:["Copyright"]
      }
    }
}
</script>


<style scoped>
.bor_r{border-right:1px solid rgb(113,113,113);padding:0 10px;}
#onefoot{position:absolute;bottom:0;left:0;width:100%;}

</style>

View Code

四：登陸頁面client - src - components 文件夾，新建 login.vue（登陸的頁面），具體以下

4.1： login.vue的html部分git

　　　　主要可能要花點時間的就是極客驗證的使用，使用方法在前面寫過，地址：http://www.cnblogs.com/chun321/p/8818746.html ；剩下的基本是elementui裏面的表單；github

<template>
  <div id="login">
    <el-row>
      <el-col :span="10" :offset="7">
          <div class="login_inner">
              <el-button-group class="login_btn">
                <el-button type="info">
                  <router-link to="/" style="color:white;">登錄</router-link>
                </el-button>
                <el-button type="default">
                   <router-link to="/register">註冊</router-link>
                </el-button>
              </el-button-group>

              <el-form style="border-bottom:1px solid rgb(213,213,213);margin-bottom:20px;" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="80px" class="demo-ruleForm">
                <el-form-item label="用戶名" prop="username">
                  <el-input type="text" class="username" v-model="ruleForm2.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密碼" prop="pass">
                  <el-input type="password" class="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                 <!--極客驗證的使用-->
                <div>
                    <div id="captcha">
                      <p id="wait" class="show">正在加載驗證碼......</p>
                    </div>
                </div>

                <div class="login_more">
                  <el-checkbox v-model="checked" class="remerber">記住密碼</el-checkbox>
                  <a href="">忘記密碼？</a>
                  <!-- <p>短信驗證碼登錄</p> -->
                </div>

                <el-form-item class="login_submit">
                  <el-button type="primary" id="btn">登陸</el-button>
                  <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
              </el-form>

              <div style="text-align:left;" class="login_other">
                    其餘登陸： <img src='../assets/images/login_05.png' alt=""> <img src='../assets/images/login_06.png' alt=""> <img src='../assets/images/login_04.png' alt="">
              </div>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

View Code

4.2：js的部分vue-cli

 import jqu from "../assets/js/jquery-1.9.0.js" ;
    import gt from "../assets/js/gt.js" ;  //極客驗證的包
    import sli from "../assets/js/slider.js" ;  //極客驗證的包


export default {
  name:"login",
  data() {
      var validatePass = (rule, value, callback) => { //表單密碼的驗證
        if (value === '') {
          callback(new Error('請輸入密碼'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var checkName= (rule,value,callback) =>{//表單用戶名的驗證
          if(value === ""){
            callback(new Error('請輸入用戶名'));
          }else{
            callback();
          }
      };
      return {
        checked:false,
        ruleForm2: {//表單裏面的字段
          pass: '',
          checkPass: '',
          username:""
        },
        rules2: {
          username:[
            { validator: checkName, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },





  methods: {
    //登陸的放在了slider.js裏面；
      resetForm(formName) {//重置表單
        this.$refs[formName].resetFields();
      }
    },
  created:function(){//調用極客驗證裏面的方法，來進行驗證和登陸請求
    sli(this);
  }
}

View Code

4.3：部分樣式的調整，暫時有的標籤是eleui的標籤，尚未實例化，對其樣式的調整放在了主頁面index.html中；下面是當前頁面的styleexpress

<style scoped>
     #login{border-bottom:5px solid rgb(241,241,241);padding:80px 0 40px;background:url('../assets/images/login_03.png')left top no-repeat;background-size:cover;}
    .login_inner{background:white;padding:20px calc(15% + 50px) 40px;border:1px solid rgb(200,200,200);}
    .login_inner .login_btn{margin-bottom:25px;}
    .login_other img{width:30px;height:15px;}
    .login_more{text-align: left;margin-bottom:15px;}
    .login_more .remerber{margin-left:80px;}
    .login_more a{float:right;font-size:14px;color:crimson;}
    .login_more p{font-size:14px;text-align: left;padding-left:80px;}
</style>