Vue-UI电商管理系统

1.项目初始化

        命令：vue ui，如果没反应，先执行cnpm i -g @vue/cli后在执行vue ui

 2.gitee使用

        2.1 生成公钥:ssh-keygen -t rsa -C "swang1204@163.com" + 三次回车

         2.2 打开C:\Users\My\.ssh\id_rsa.pub，内容复制到码云的设置-ssh公钥中，确定

         2.3 测试，命令：ssh -T git@gitee.com

         2.4 点击头像坐标+号，创建项目

         2.5 首次配置命令： 

        git config --global user.name "swangze"
        git config --global user.email "swang1204@163.com"

         2.6 提交代码：

        git add .

        git commit -m "add files"

        git remote add origin https://gitee.com/swangze/vue_shop.git

        git push -u origin master

3.安装MySQL和配置接口

        3,1 安装MySQL

        双击phpStudy20161103.exe文件，MySQL管理器——导入与导出，设置初始密码root并选择mydb.sql文件：

         3.2 配置接口

        1）安装Postman-win32-6.7.3-Setup.exe接口测试文件，并注册；

        2）运行接口文件夹vue_api_server内东西，npm install ; node app.js

        3）postman输入地址和请求参数进行测试，结果如下：

 

 4.登录与退出

        1）记录登录状态，不存在跨域问题，推荐使用cookies和session之记录状态信息；

        2）跨域问题时，使用token记录状态

        3）登录——token原理分析

5.登录页面布局

         5.1 创建新的分支 git checkout -b login，可以git branch查看所有分支

         5.2 vue ui 打开界面，编译——启动app

         5.3 配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/',
  redirect: '/login'
}, {
  path: '/login',
  component: () =>
    import ('@/components/Login')
}]

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

         5.4 Login.vue写法：

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="@/assets/logo.png" alt="">
      </div>
      <!-- 登录表单区 -->
      <el-form label-width="0px" class="login_form" :model="loginForm">
        <!-- 用户名 -->
        <el-form-item>
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input  prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name:'Login',
  data(){
    return{
      loginForm:{
        username:'admins',
        password:'123456'
      }
    }
  }
}
</script>

        5.5 上边的input、button等需要在src\plugins\element.js内注册：

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form, FormItem } from 'element-ui'
import { Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

6.mg_State状态的改变

 1）获取switch值：

<el-table-column  label="状态">
  <template v-slot:default="scope">
    <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
     <!-- {{scope.row.mg_state}} -->
  </template>
</el-table-column>

<script>
userStateChange(userInfo){
  console.log(userInfo);
</script>

2)userInfo值传到服务器，put方法

 代码：

<script>
    userStateChange(userInfo){
      // console.log(userInfo);
      changeUsersState(userInfo).then(res=>{
        if(res.meta.status !== 200){
          userInfo.mg_state = !userInfo.mg_state;
          return this.$message.error('获取用户列表失败');
        }
        this.$message.success('更新用户状态成功');
      })
    }

//...login.js
export function changeUsersState(userInfo) {
  return request({
    url: `users/${userInfo.id}/state/${userInfo.mg_state}`,
    method: 'put',
  })
}
</script>

 7.搜索功能

 1）如图，输入内容，显示搜索

 2）因为后台写好了搜索接口，因此不需要自己写搜索方法，调用原来的方法即可

<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="_getUserList">
  <el-button slot="append" icon="el-icon-search" @click="_getUserList"></el-button>
</el-input>

<script>
  data(){
    return{
      queryInfo:{
        query:'',
        pagenum:1,  //当前第几页
        pagesize:2  //每页几条数据
      },
      usersList:[],
      total:0,
      currentPage:1,
      input3:''
    }
  },
methods:{
    _getUserList(){
      getUserList(this.queryInfo).then(res=>{
        // console.log(res);
        if(res.meta.status !== 200) return this.$message.error('获取用户列表失败');
        this.usersList = res.data.users;
        this.total = res.data.total;
      });
    },
}

</script>

8.添加用户功能和表单手机邮箱验证

用到dialog对话框组件

  代码1（控制dialog显隐）：

<el-button type="primary" @click="dialogVisible = true">添加用户</el-button>

  代码2（dialog）：

<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
export default {
  name:'User',
  data(){
    //自定义邮箱验证规则
    var checkEmail = (rule,value,cb)=>{
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if(regEmail.test(value)){
        return cb()
      }
      cb(new Error('请输入合法邮箱'))
    }
    //自定义手机号验证规则
    var checkMobile = (rule,value,cb)=>{
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if(regMobile.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return{
      dialogVisible:false,
      addForm:{
        username:'',
        password:'',
        email:'',
        mobile:''
      },
      addFormRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {validator:checkEmail,trigger:'blur'}
        ],
        mobile:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {validator:checkMobile,trigger:'blur'}
        ]
      },
    }
  },
methods:{
    // 监听添加用户对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
  }
}
</script>

9.三级菜单渲染

1）scope.row数据：

 2)渲染结果

 3）代码

<!-- 展开列 -->
<el-table-column type="expand">
  <template v-slot:default="scope">
    <el-row v-for="(item1,index1) in scope.row.children" :key="item1.id" :class="['bdbottom',index1===0?'bdtop':'']">
      <!-- 渲染一级权限 -->
      <el-col :span=5>
        <el-tag>{{item1.authName}}</el-tag>
        <i class="el-icon-caret-right"></i>
      </el-col>
      <!-- 渲染二级和三级权限 -->
      <el-col :span=19>
        <el-row v-for="(item2,index2) in item1.children" :key="item2.id" :class="[index2===0?'':'bdtop']">
          <!-- 渲染二级权限 -->
          <el-col :span="6">
            <el-tag type="success">{{item2.authName}}</el-tag> 
            <i class="el-icon-caret-right"></i>  
          </el-col>
          <!-- 渲染三级权限 -->
          <el-col :span="18">
              <el-tag v-for="(item3,index3) in item2.children" :key="item3.id" :class="[index3===0?'':'bdtop']">
                {{item3.authName}}
              </el-tag>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    {{scope.row}}
  </template>
</el-table-column>