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