【Vue实战项目-电商管理系统】二、登录部分

1、开发新功能前，在项目目录下：

git status 
git checkout -b login   //创建分支login
git branch              //查看当前项目所有分支

2、项目目录整理

1. 去除多余部分，并且关掉eslint
   在.eslintrc.js中注释掉'@vue/standard'即可，然后npm run serve重启。

2. 整理目录结构
   

3. 增加vue.config.js文件，在里面修改路径别名。

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('src'))
        .set('components',resolve('src/components'))
        .set('views',resolve('src/views'))
        .set('assets',resolve('src/assets'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
　　　　
    }
}

3、注意路由懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import('components/Login.vue')

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

4、添加样式后需要安装less-loader less

注意：本项目使用vue2，less-loader版本不可过高，安装less-loader@7.3.0
npm install less less-loader@7.3.0 --save -dev

5、定位方式及响应式布局

1. 多采用postion绝对定位进行布局
   外层：
   position:relative;
   内层：
   position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2. 另外各部分的尺寸也都用px进行规定。

需要考虑响应式布局来进行优化

6、Element UI使用

1. 表单数据双向绑定
   

通过el-form的属性model来绑定表单数据对象。

<!-- 表单部分 -->
      <el-form
        label-width="0px"
        class="login_form"
        :model="loginFormData"
        :rules="loginFormRules"
        ref="loginFormRef"
      >

在data中的数据对象：

      // 表单数据
      loginFormData: {
        username: 'admin',
        password: '123456'
      },

输入栏通过v-model双向绑定：

        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            v-model="loginFormData.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

2. 表单验证
   通过el-form中的rules属性绑定验证规则（对象）。
   在data中的验证条件（对象）：

      // 表单数据验证
      loginFormRules: {
        username: [
          { requied: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 12, message: '密码长度为3到8字符', trigger: 'blur' }
        ],
        password: [
          { requied: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 12, message: '密码长度为3到12字符', trigger: 'blur' }
        ]
      }

在数据项中通过prop来确定传入的字段：

        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            v-model="loginFormData.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

3. 表单数据重置及登录

通过el-form的方法来重置并验证合法性，如果合法则可进行下一步网络请求，进行登录。

通过对el-form绑定ref来调用其方法：

<!-- 表单部分 -->
      <el-form
        label-width="0px"
        class="login_form"
        :model="loginFormData"
        :rules="loginFormRules"
        ref="loginFormRef"
      >

在方法中进行重置及网络请求：

// 重置表单
    resetForm() {
      this.$refs.loginFormRef.resetFields()
    },
    // 登录请求
    login() {
      // 1、验证表单数据合法性
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // 2、将数据发往服务器进行确认，如果返回码为200则继续，否则返回错误信息。
        // 需要保证服务器处于运行状态，打开mysql数据库及api接口
        const { data: res } = await this.$http.post('login', this.loginFormData)
        if (res.meta.status !== 200) return this.$message.error('登陆失败！')
        this.$message.success('登陆成功！')
        // 3、将服务器返回的token存储在sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 4、跳转页面
        this.$router.push('/home')
      })
    }

7、发起网络请求细节

1. 首先打开mysql以及api接口，保证服务器处于运行状态。
   phpstudy打开mysql，在api server 文档下shift加右键在窗口输入：node ./app.js

2. 使用axios，
   首先在main.js中导入

// 导入axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

挂载到http后可以通过this.$http发请求。
如：

let {data:res} = this.$http.post('login',this.loginFormData)

如果出现this中没有$http的情况，安装vue-resource
npm install vue-resource --save

注意：发送请求返回的是promise，用async和await可以直接接受返回结果，结果有多个属性，是axios封装好的，直接解构出需要的data即可

注意路径不要写错，否则可能出现404 not found的错误

8、登陆提示消息：

用element ui中的Message
取代原型中的message
在plugins的element.js中导入并引用。

import { Message } from 'element-ui'
Vue.prototype.$message = Message

使用：

if (res.meta.status!==200)return this.$message.error('登陆失败！');
this.$message.success('登陆成功！')

9、登陆状态存储

将token存储到sessionStorage，因为sessionStorage会话期有效，localStorage是永久有效，token应该在网站打开期间有效。

window.sessionStorage.setItem('token',res.data.token)

10、路由导航守卫

使用路由导航守卫，使得未登录时不能通过修改url来进入其他页面，而是重定向到登陆页面。
利用beforeEach钩子函数，验证是否有token。但不能验证token合法性。

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

11、.prettierrc与.eslintrc中的配置

下载Prettier - Code formatter插件可以对文档进行格式化，但与ESlint中的格式矛盾了，可以通过对两者配置文档的修改来达成统一。

在项目目录下新建.prettierrc，配置如下：

{
  "singleQuote": true,   //使用单引号
  "semi": false          //不使用分号
}

对.eslintrc做修改：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'space-before-function-paren': 0,    //函数名与括号之间不需要空格
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

12、阿里图标库的使用

首先在下载需要的图标，放入项目目录下

然后main.js中进行导入全局样式表

// 导入图标
import 'assets/fonts/iconfont.css'

在需要的地方进行使用即可。

<el-input
  prefix-icon="iconfont icon-user"
  v-model="loginFormData.username"
  placeholder="请输入用户名"
>

13、最后提交：

git status
git add .
git commit -m 'login finish'
git branch
git checkout master 	//切换到主分支
git merge login			//合并到分支
git push				//主分支推送到云端仓库

把login分支提交到云端

git checkout login			//切换分支
git branch					//检查一下
git push -u origin login	//首次推送该分支