Vue電商後臺管理系統項目第1天-基本環境搭建&登陸功能

基本環境搭建完成

安裝npm包：npm -S i vue vue-router axios element-ui

配置Eslint：

打開設置，搜索Eslint拓展，而後將下面代碼覆蓋進去便可

{
  "editor.fontSize": 17,
  "cssrem.rootFontSize": 32,
  "liveServer.settings.donotShowInfoMsg": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "eslint.autoFixOnSave": true,
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "eslint.autoFixOnSave": true,
  // 須要 npm install -g eslint-plugin-vue
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "editor.tabSize": 2,
}

Eslint配置代碼

 

 登陸功能

• 登錄界面--用到element-ui

• 涉及到用戶數據的驗證

• 發起axios請求

• 接收返回值，實現路由跳轉

 

添加登錄組件 :login.vue,在src下面建立用於存放頁面組件的文件夾：views

全部組件的展現都是基於路由

建立路由。添加路由配置：將路由建立爲單獨的模塊：src/router.js

讓Vue使用vue-router和讓Vue使用router對象是兩碼事

1. Vue.use(vue-router):就能夠在Vue實例中使用全部路由相關功能，包含router-view,router-link.....

2. Vue.use(router):僅僅是可能 使用路由配置

 

登錄界面的製做過程：login.vue

咱們須要使用element-ui中的什麼組件來實現登錄頁面

1. 使用form表單 > 表單驗證

2. 複製代碼，複製數據，複製功能函數

3. 刪除不須要的結構：刪除不要的表單元素

4. 修改已有代碼

<el-form
      :model="ruleForm" // 當前表單所對應的數據，這個數據對象中的成員通常與接口文檔的須要相關，這個時候必定要去仔細的閱讀接口文檔，將這個對象中的成員的屬性名稱要命名爲和接口文檔 的徹底一致，這樣作有一個好處：後期收集數據的時候更簡潔
      :rules="rules" // 驗證規則
      ref="ruleForm" // 表單標識
      label-width="100px" // 標籤的寬度，能夠去除
      class="demo-ruleForm"
    >

 

刪除不須要的label,同時刪除對於label寬度的設置代碼

<template>
  <div class="login">
    <div class="container">
      <img src="../assets/avatar.jpg" alt class="avatar">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="請輸入用戶名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="請輸入密碼"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn">登錄</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

如何實現用戶數據驗證

 Form 組件提供了表單驗證的功能，只須要經過 rules 屬性傳入約定的驗證規則，並 Form-Item 的 prop 屬性設置爲需校驗的字段名便可

1.設置prop屬性

2.根據prop屬性的值添加相同名稱的規則

3.規則解釋

{ required: true, message: '請輸入活動名稱', trigger: 'blur' }
required:必填項
message：若是不知足規則所給出的提示信息文本
trigger：觸發：何時觸發，blur是指失去焦點時觸發

 

細節：若是名稱不對應，那麼規則將沒法起效果

data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      //   添加驗證規則
      rules: {
        username: [
          { required: true, message: '請輸入用戶名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請輸入密碼', trigger: 'blur' }
        ]
      }
    }

 

 

讓界面好看一些--添加自定義樣式

1. 複製咱們所提供的樣式文件，如重置樣式代碼

2. 複製樣式所對應的資源文件，如字體文件

3. 在main.js文件中引入複製過來的index.less

import '@/styles/index.less'

 

在login.vue文件中添加以下樣式

<style lang="less" scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;
  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>

 

1. 常見錯誤：

   緣由：咱們尚未引入element-ui,你就須要下載+引入

• 添加圖標

  • 咱們得去找到可以添加圖片的文本框，分析裏面的代碼

  • 組件>input輸入框

  • prefix-icon：添加自定義的前置圖標

  • suffix-icon：添加自定義的後置圖標

• 添加驗證功能

  • 以前的rules僅僅是一個用戶提示信息，並不會阻止用戶提交

  • 因此咱們能夠爲表單添加一個validate函數，這個函數能夠實現 用戶數據的驗證，它會返回一個值給回調函數，以此來判斷驗證是否經過

 

 //   登錄
login () {
    //   實現用戶的數據驗證，由於以前的rules只是一個提示信息佈局，並不會真正的阻止用戶的登錄請求
    // 登錄驗證的時候，表單有一個validate函數，這個函數能夠真正的實現表單元素的數據驗證，這個驗證與以前的、rules規則對應，當驗證完成以後，會返回一個值給回調函數，若是是true,說明驗證難過，不然就不經過
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
            //   驗證經過，就去發起登錄請求
            console.log('ok')
        } else {
            // 給出用戶提示
            console.log('no')
            return false
        }
    })
}

 

添加用戶提示

• 介紹element-ui中的消息提示框

• 找到提示框組件：組件>Message 消息提示

• 特色：顯示以後會自動 消失

• 分析裏面的結構和屬性

  • message:提示信息

  • type:提示信息的類型，不一樣的類型有不一樣的顏色

• 應用

else {
    // 給出用戶提示
    this.$message({
        message: '數據輸入不合法',
        type: 'error'
    })
    return false
}

 

實現登錄功能

1. 下載axios

2. 引入

3. 看接口文檔

   1. 接口名稱：login

   2. 請求方法：post

   3. 參數：{username:'',passwrod:''}

4. 將users表的數據操做封裝爲一個單獨的文件：src/api/users.js

import axios from 'axios'
// 設置基準路徑
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'

// 添加登錄驗證方法
// 在vue中，暴露成員可使用export
export const userlogin = (data) => {
  // 咱們不但願經過回調的方式在這邊進行操做以後的方法調用，由於post方法返回一個promise,因此能夠之後在方法調用的時候進行then和catch
//   return axios.post(url, data)
  return axios({
    url: 'login',
    method: 'post',
    data: data
  })
}

 

實例登錄

1. 引入axios

2. 設置baseURL

3. 添加實現登錄驗證的方法

import { userlogin } from '@/api/users.js'


login () {
      //   實現用戶的數據驗證，由於以前的rules只是一個提示信息佈局，並不會真正的阻止用戶的登錄請求
      // 登錄驗證的時候，表單有一個validate函數，這個函數能夠真正的實現表單元素的數據驗證，這個驗證與以前的、rules規則對應，當驗證完成以後，會返回一個值給回調函數，若是是true,說明驗證難過，不然就不經過
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          //   驗證經過，就去發起登錄請求
          userlogin(this.loginForm)
            .then(result => {
              if (result.data.meta.status === 400) {
                this.$message({
                  message: result.data.meta.msg,
                  type: 'error'
                })
              } else {
                //   路由跳轉
              }
            })
            .catch(() => {
              this.$message({
                message: '服務器異常，請重試',
                type: 'error'
              })
            })
        } else {
          // 給出用戶提示
          this.$message({
            message: '數據輸入不合法',
            type: 'error'
          })
          return false
        }
      })
    }
  }

登錄完成後，實現路由跳轉

this.$router.push({ name: 'Home' })

 

首頁

 添加單文件組件

<template>
    <div class="home">首頁</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>

</style>

添加路由配置

{
      name: 'Home',
      path: '/home',
      component: Home
    }

 

頁面效果：

 

項目Github地址：https://github.com/replaceroot/itcast-manage-system3