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