Vue电商后台管理系统项目第1天-基本环境搭建&登陆功能

时间 2019-12-10

标签 vue 后台管理系统项目 1天基本环境搭建登陆功能繁體版

原文原文链接

基本环境搭建完成

安装npm包：npm -S i vue vue-router axios element-uijavascript

配置Eslint：css

打开设置，搜索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-uihtml
涉及到用户数据的验证vue
发起axios请求java
接收返回值，实现路由跳转react

添加登录组件 :login.vue,在src下面建立用于存放页面组件的文件夹：viewsios

全部组件的展现都是基于路由git

建立路由。添加路由配置：将路由建立为单独的模块：src/router.jsgithub

让Vue使用vue-router和让Vue使用router对象是两码事vue-router

Vue.use(vue-router):就能够在Vue实例中使用全部路由相关功能，包含router-view,router-link.....
Vue.use(router):仅仅是可能使用路由配置

登录界面的制做过程：login.vue

咱们须要使用element-ui中的什么组件来实现登录页面

使用form表单 > 表单验证
复制代码，复制数据，复制功能函数
删除不须要的结构：删除不要的表单元素
修改已有代码

<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' }
        ]
      }
    }

让界面好看一些--添加自定义样式

复制咱们所提供的样式文件，如重置样式代码
复制样式所对应的资源文件，如字体文件
在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>

常见错误：

缘由：咱们尚未引入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
}

实现登录功能

下载axios
引入
看接口文档
1. 接口名称：login
2. 请求方法：post
3. 参数：{username:'',passwrod:''}
将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
  })
}

实例登录

引入axios
设置baseURL
添加实现登录验证的方法

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