精华内容
下载资源
问答
  • vue电商后台管理系统

    2019-04-24 12:08:41
    电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能
  • Vue 电商后台管理系统后台 API 接口服务器
  • Vue 电商后台管理系统后台 API 接口服务器,里面有数据库脚本,大家可以下载自己运行,此资料仅供学习,谢谢
  • Vue电商后台管理系统后台API接口服务器 技术栈 Node.js 表示 MySQL 项目整体文件说明 config配置文件目录default.json替换配置文件(其中包含数据库配置,jwt配置) dao数据访问层,存放对数据库的增删改查操作DAO...
  • Vue电商后台管理系统 前言 (三)主页布局和功能实现 一、主页布局 用到element-ui组件库中的Container布局容器,来实现主页的基础布局 (1)选择一个自己想要的布局,复制其代码 <template> <el-container&...

    Vue电商后台管理系统

    前言

    (三)主页布局和功能实现

    一、主页布局

    用到element-ui组件库中的Container布局容器,来实现主页的基础布局
    (1)选择一个自己想要的布局,复制其代码

    <template>
        <el-container>
          <!-- 头部区域 -->
          <el-header>
            <div>
              <span>电商后台管理系统</span>
            </div>
            <el-button type="info" v-on:click="quit">退出</el-button>
          </el-header>
          <!-- 页面主体区域 -->
          <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">Aside</el-aside>
            <!-- 右侧对应主体 -->
            <el-main>Main</el-main>
          </el-container>
        </el-container>
    </template>
    

    (2)在plugins->element.js中导入并注册组件

    import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside} from 'element-ui'
    Vue.use(Container)
    Vue.use(Header)
    Vue.use(Aside)
    Vue.use(Main)
    

    (3)添加css样式

    <style lang="less" scoped>
    .el-container {
      width: 100%;
      height: 100%;
    }
    .el-header {
      background-color: #373D41;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        color: #fff;
        font-size: 28px;
      }
      .el-button{
        color: white;
        font-size: 18px;
      }
    }
    .el-aside {
      background-color: #333744;
    }
    .el-main {
      background-color: #eaedf1;
    }
    </style>
    

    在这里插入图片描述

    二、左侧菜单布局

    菜单分为二级,并且可以折叠
    用到element-ui组件库中的NavMenu导航菜单
    (1)粘贴代码到侧边栏中

    <!-- 侧边栏 -->
            <el-aside width="200px">
              <!-- 侧边栏菜单区域 -->
              <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
                <!-- 一级菜单 -->
                <el-submenu index="1">
                  <!-- 一级菜单模版区域 -->
                  <template slot="title">
                    <!-- 图标 -->
                    <i class="el-icon-location"></i>
                    <!-- 文本 -->
                    <span>导航一</span>
                  </template>
                  <!-- 二级菜单 -->
                  <el-menu-item index="1-4-1">
                    <!-- 一级菜单模版区域 -->
                    <template slot="title">
                      <!-- 图标 -->
                      <i class="el-icon-location"></i>
                      <!-- 文本 -->
                      <span>导航一</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-aside>
    

    (2)导入并注册组件

    import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside, Menu, Submenu, MenuItemGroup, MenuItem} from 'element-ui'
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItemGroup)
    Vue.use(MenuItem)
    

    (3)通过接口获取菜单数据
    通过axios请求拦截器添加token,保证拥有获取数据的权限
    (为每一次API请求头,挂载了Authorization)

    // 配置axios
    import axios from 'axios'
    // 配置请求的根路径
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    axios.interceptors.request.use(config => {
      console.log(config)
      config.headers.Authorization = window.sessionStorage.getItem('token')
      // 在最后必须return config
      return config
    })
    Vue.prototype.$http = axios
    

    (4)获取左侧菜单数据

    <script>
    export default {
      data() {
        return {
          menuList:[]
        }
      },
      created() {
        this.getMenuList()
      },
      methods: {
        quit () {
          // 清空token
          window.sessionStorage.clear()
          // 清空后重定向到登录界面
          this.$router.push('/login')
        },
        // 获取所有菜单
        async getMenuList () {
          const { data:res } = await this.$http.get('menus')
          // 失败
          if(res.meta.status!==200) return this.$message.error(res.meta.msg)
          this.menuList=res.data
          console.log(res)
        }
      }
    }
    </script>
    

    在这里插入图片描述
    (5)通过双层for循环渲染左侧菜单
    一级菜单是data,数组中的每一项
    每一个一级菜单通过children属性又嵌套了所有的二级菜单
    外层for循环主要渲染一级菜单,内层for循环渲染二级菜单

    <!-- 一级菜单 -->
    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
    <span>{{item.authName}}</span>
    <!-- 二级菜单 -->
    <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
    <span>{{subItem.authName}}</span>
    

    (6)为选中项设置字体颜色并添加分类图标

    <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF">
    

    其中active-text-color就是激活后的颜色

    修改二级菜单图标
    去element-ui中找到icon图标,复制其名称即可

    <!-- 图标 -->
     <i class="el-icon-menu"></i>
    

    修改一级菜单图标,所有一级菜单图标都是不一样的,需要通过自定义图标形式去解决.
    在数据中定义一个图标对象,把id作为对象的键,把图标名称作为值

    data() {
        return {
          menuList:[],
          iconsObj: {
            '125': 'iconfont icon-user',
            '103': 'iconfont icon-tijikongjian',
            '101': 'iconfont icon-shangpin',
            '102': 'iconfont icon-danju',
            '145': 'iconfont icon-baobiao'
          }
        }
      },
    

    再用v-for遍历,把对应id号的图标添加上来

    <!-- 图标 -->
     <i :class={{iconsObj[item.id]}}></i>
    

    (7)每次只能打开一个菜单项
    给menu添加属性 unique-opened的值为true
    此时就只能打开一个菜单栏

    三、左侧菜单的折叠与展开

    (1)布局与样式

    <!-- 在侧边栏中最顶部添加 -->
    <div class="toggle-btn">|||</div>
    .toggle-btn{
        background-color: #4A5064;
        color: white;
        font-size: 15px;
        letter-spacing: 0.2em;
        cursor: pointer;
      }
    

    (2)实现点击__折叠与展开
    为按钮绑定一个单击事件
    怎么实现?menu有一个属性collapse,值为true__折叠
    只要实现点击按钮,切换这个值的true/false即可实现

    data() {
        return {
          menuList:[],
          iconsObj: {
            '125': 'iconfont icon-user',
            '103': 'iconfont icon-tijikongjian',
            '101': 'iconfont icon-shangpin',
            '102': 'iconfont icon-danju',
            '145': 'iconfont icon-baobiao'
          },
          // 默认不折叠
          isCollapse:false
        }
      }
      methods: {
       // 点击按钮__切换菜单的折叠与展开
        toggleCollapse(){
          this.isCollapse=!this.isCollapse
        }
        }
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px':'200px'">
      <!-- 侧边栏菜单区域 -->
      <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened="true" :collapse="isCollapse" :collapse-transition="false">
    

    四、实现路由的重定向效果

    定义一个welcome组件,在home页面中main这个位置放一个路由占位符,然后把welcome这个路由设置为home路由的子路由规则,这样就在home页面中嵌套显示了welcome子组件
    (1)在components->新建welcome.vue

    <template>
      <div>
          <h3>Welcome!</h3>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>
    

    (2)在路由中导入welcome组件

    import welcome from '../components/welcome.vue'
    

    (3)把welcome作为home的子路由规则,并且当访问home页面时,重定向到welcome组件

    { path: '/home', component: home ,redirect:'/welcome',children:[
        {path:'/welcome',component:welcome}
      ]}
    

    (4)在home.vue中的menu中的main区域放一个路由占位符

    <!-- 右侧对应主体 -->
    <el-main>
       <!-- 路由占位符 -->
       <router-view></router-view>
    </el-main>
    

    在这里插入图片描述

    五、实现左侧菜单路由链接的改造

    把每个二级菜单改成路由链接,不用把每个都改成router-link,有更简单的方法
    menu有一个属性router,默认值是false,就是没有启动路由跳转模式,启动该模式会在激活导航时以index作为path进行路由跳转
    (1)开启router模式
    为el-menu添加一个属性 router=“true”
    此时,点击二级菜单,会发生跳转,跳转到二级菜单对应index的值,也就是id值
    在这里插入图片描述
    但是拿id值作为跳转地址并不是很合理,应该拿当前的path属性值作为唯一的跳转地址
    在这里插入图片描述

    <!-- 二级菜单 -->
    <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
    

    在这里插入图片描述

    展开全文
  • 在学习vue的时候,刚好想找个项目练练手,在b站等网上找了好久,最后选择了黑马的一套vue电商后台管理系统开发的项目。(`・ω・´)。写了两周。终于终于写好了,特意记录自己的开发总结,希望有人会用到! 选择的...

    (*^▽^*)目录

    一、前言

            在学习vue的时候,刚好想找个项目练练手,在b站等网上找了好久,最后选择了黑马的一套vue电商后台管理系统开发的项目。(`・ω・´)。写了两周。终于终于写好了,特意记录自己的开发总结,希望有人会用到!

    选择的原因:

    1.  整个项目资料比较完善,包括原作者的开发源码使用的软件等。
    2. 视频讲解比较细,跟着进度开发项目时很清楚是那个地方自己存在问题。
    3.  整个项目的仓库还在,进行比较时也方便。

    项目简介:

    1. 项目的视频在b站上,版本有很多,有时候视频看着看着,啪!快乐就没了。(o(╥﹏╥)o),有的时候就被和谐。。我使用的视频版本
    2. 原项目的码云地址gitee,前端代码仓库后端代码仓库
    3. 链接: phpstudy软件资源 提取码: 2cjb 。  (注意:这里建议用这个版本的,个人试过mysql自带的,结果sql脚本导入来时卡在1w多行的位置。听别的小朋友说,也有人使用最新版的phpstudy成功了。所以自选。(#^.^#)
    4. 这是另一位小伙伴已经上线的项目地址,可以用来快速开发时作对比。(我一般就是连着看好多视频,然后开发,有的时候要看一下样式,但是这个也有点问题,特别是在添加商品功能那里!)

    二、个人开发文档和仓库

            这里给出自己开发时,使用wolei记录的开发文档地址,仅供自己和有需要的人查阅。我的线上开发文档。 \(^o^)/~,个人觉得,在开发的时候,要自己记录一下,这个文档不要求多么好,仅在给自己看。在开发完后,可以基于这个来整理。

            给出:(^_−)☆个人前端代码仓库,感觉和老师的没很大区别,除了自己优化了一些小地方,还有补全了视频中省略的一些功能。

    三、总结

    个人觉得需要注意的事:

    1. vue版本采用2.x,element也是2.x版本。
    2. eslint虽然现在感觉很烦,但是还是建议开启,个人觉得工作中肯定会是这个。ψ(*`ー´)ψ
    3. echarts版本使用4.x版本,不然会出错。
    4. 使用row-key=“id”来解决打包后角色列表显示出现多个>展开的时候,建议将row-key="id"绑定在展开列的table-item中。放在table中还是会出错。
    5. 这个后台订单列表中查询物流进度的接口有问题,可以直接使用本地数据代替,就是将返回的数据copy,然后直接赋值处理吧!|ू・ω・` )
    6. 使用级联选择器时,高度会默认100%,这个时候直接给级联选择器设置是没有用的,检查源码,找到对应元素,在全局css样式中添加高度。记住一定要在全局添加!
    7. 项目中只要有分页的地方,都有一个小bug,就是当一页只有一项,删除后,页面刷新会停留在已经没有的页码上,会显示暂无数据。解决办法:删除的事件行为函数里面,在重新调用api获取数据前。根据 (当前总数 - 1)% 当前每页大小 === 0,如果是,那么,将请求体重的pagenum--后再请求。

    项目上线

    1. 自己租了云服务器,小试了一下,可以跑起来,但是用的本地的mysql服务。
    2. 尝试在云服务器上跑mysql服务,卡死在导入sql脚本。(;′⌒`)!

    最后:

            这是记录自己开发后,如果你刚好在这个项目中遇到问题,欢迎留言交流!蟹蟹٩('ω')و!

    展开全文
  • Vue电商后台管理系统(1) 登录 在components文件夹下创建登录组件,Login.vue,并快速生成template、script和style骨架。 配置路由,进入router文件夹,导入Login组件,创建路由并重定向首页为登录界面,进入首页...

    Vue电商后台管理系统(1)

    登录

    在components文件夹下创建登录组件,Login.vue,并快速生成template、script和style骨架。

    在这里插入图片描述
    配置路由,进入router文件夹,导入Login组件,创建路由并重定向首页为登录界面,进入首页时会自动跳转至登录页面,配置如下:
    在这里插入图片描述
    绘制页面:
    在这里插入图片描述

    <template>
      <div class="login_container">
        <div class="login_box">
          <!-- 头像区域 -->
          <div class="avatar_box">
            <img src="../assets/logo.png" alt />
          </div>
          <!-- 登录表单区域 -->
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            label-width="0px"
            class="login_form"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                prefix-icon="iconfont icon-3702mima"
                type="password"
              ></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    

    css样式:

    <style lang="less" scoped>
    .login_container {
      background-color: #2b4b6b;
      height: 100%;
    }
     
    .login_box {
      width: 450px;
      height: 300px;
      background-color: #fff;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
     
      .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
     
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #eee;
        }
      }
    }
     
    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
     
    .btns {
      display: flex;
      justify-content: flex-end;
    }
    </style>
    

    实现登录功能

    绑定账户信息

    <template>
      <div class="long-content">
        <div class="biao">
          <div class="hide">
            <img src="../../assets/logo.png" alt="" />
          </div>
          <div class="form">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item prop="username">
                <el-input
                  v-model="ruleForm.username"
                  prefix-icon="el-icon-user-solid"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  prefix-icon="el-icon-lock"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="botton">
            <el-button type="primary" size="medium" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button type="info" size="medium">重置</el-button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
      data() {
        return {
          ruleForm: {
            username: "",//用户名
            password: "",//密码
          },
          rules: {
          //校验用户名
            username: [
              { required: true, message: "请输入用户户名", trigger: "blur" },
              { min: 3, max: 8, message: "长度在 3 到 5 个字符", trigger: "blur" },
            ],
            //校验密码
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              {
                min: 3,
                max: 12,
                message: "长度在 3 到 12 个字符",
                trigger: "blur",
              },
            ],
          },
        };
      },
      methods: {
      //登录
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let url = this.$store.state.url;
              this.$axios.post(`${url}login`, this.ruleForm).then((res) => {
                console.log(res);
                if (res.meta.status == 200) {
                 // 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中
                 //1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问
                //1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
                 window.sessionStorage.setItem("token", res.data.token);
                  this.$message.success(res.meta.msg);
                  this.$router.push("/home");
                } else {
                  this.$message.error(res.meta.msg);
                  return false;
                }
              });
            } else {
              return false;
            }
          });
        },
      },
    };
    </script>
    

    实现退出功能
    当用户登录后进入后台,点击退出按钮即可实现退出功能。

    即在Home.vue中添加一个退出按钮,并为其添加点击事件,当用户点击时,删除当前存储在session中的token信息,并且跳转至登录页面。

    <template>
      <div>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </template>
     
    <script>
    export default {
      methods: {
        logout() {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
      }
    }
    </script>
     
    <style lang="less" scoped>
    </style>
    

    实现导航守卫功能
    至此,登录功能基本实现,但存在一个bug,即在用户未登录的情况下,在地址栏输入http://localhost:8080/#/home地址时,也可以跳转至后台。

    为了解决此bug,我们在router里挂载一个导航守卫路由,即在用户每次跳转前,验证用户所要跳转的地址,若为login页面则放行,若为其他页面,则查询当前session中是否有对应的token,若有则放行,反之,则强制跳转至登陆页面。

    航守卫功能

    至此,登录功能基本实现,但存在一个bug,即在用户未登录的情况下,在地址栏输入http://localhost:8080/#/home地址时,也可以跳转至后台。

    为了解决此bug,我们在router里挂载一个导航守卫路由,即在用户每次跳转前,验证用户所要跳转的地址,若为login页面则放行,若为其他页面,则查询当前session中是否有对应的token,若有则放行,反之,则强制跳转至登陆页面。
    在这里插入图片描述

    展开全文
  • Vue电商后台管理系统 ** 前言 (二)登录和退出功能的实现 一、git操作 进入vscode,进入项目目录 1.检查git状态:git status 显示clean,则继续: On branch master Your branch is ahead of 'origin/master' by 1 ...

    **

    Vue电商后台管理系统

    **

    前言

    (二)登录和退出功能的实现


    一、git操作

    进入vscode,进入项目目录
    1.检查git状态:git status
    显示clean,则继续:

    On branch master
    Your branch is ahead of 'origin/master' by 1 commit.
      (use "git push" to publish your local commits)
    nothing to commit, working tree clean
    

    如果还有没被添加的文件:

    % git add .                                                  
    % git commit -m "add files" 
    

    2.添加分支
    因为项目有很多功能,每个功能都在一个分支内完成,最后再合并到master上。

    % git checkout -b login  //创建一个登录分支
    Switched to a new branch 'login'
    % git branch   //列出所有分支
    * login   // *表示正处于这个分支上
      master
    

    二、梳理项目结构

    1.打开项目可视化管理界面
    进入终端:

    % vue ui 
    

    2.运行项目
    进入任务,点击serve,点击运行,编译完成,点击启动app
    3.重置页面布局
    (1)打开vscode,src->main.js(打包的入口文件)

    import Vue from 'vue'
    import App from './App.vue'  // 引入App.vue
    import router from './router'
    import './plugins/element.js'
    import './assets/css/global.css'
    Vue.config.productionTip = false
    new Vue({
      router,
      render: h => h(App)  // 把App渲染到根组件中
    }).$mount('#app')
    

    (2)src->App.vue
    这是页面布局,要删除默认的布局

    <template>
      <div id="app">
        App根组件
      </div>
    </template>
    
    <script>
    export default {
       name: 'app'
    }
    </script>
    
    <style>
    </style>
    

    (3)src->router->index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    

    (4)删除views目录删除
    (5)删除components->HelloWorld.vue
    4.接下来可以基于干净的项目进行开发了

    三、定义login组件

    1.定义login单文件组件
    (1)components->login.vue
    单文件组件由三部分组成:结构,样式,行为

    <template>
    </template>
    
    <script>
    export default {
    
    }
    
    </script>
    
    <style lang="less" scoped>
    // lang="less"表示在这个节点中支持less语法格式
    // scoped是vue指令,用来控制组件样式生效区间_只在当前组件内生效
    </style>
    

    2.渲染login组件到页面
    在router中,通过路由的形式把它渲染到App根组件中
    (1)进入router->index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import login from '../components/login.vue'
    
    Vue.use(VueRouter)
    
    // 路由规则
    const routes = [
      // 只要用户访问了/根路径,就重定向到登录页面
      { path: '/', redirect: '/login' },
      { path: '/login', component: login }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    

    (2)在App根组件中放一个路由占位符

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>
    
    <style>
    </style>
    

    四、完成login组件的布局

    1.安装开发依赖

    2.全局样式表
    (1)在assets->css->创建global.css

    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    

    (2)让全局样式表生效
    在main.js(入口文件中),导入全局样式表,让其生效

    import './assets/css/global.css'
    

    3.绘制登录盒子以及头像
    打开login.vue

    <template>
      <div class="login_container">
          <div class="login_box">
              <!-- 头像盒子 -->
              <div class="avatar_box">
                  <img src="../assets/logo.png" alt="">
              </div>
          </div>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    
    </script>
    
    <style lang="less" scoped>
    .login_container{
        background-color: #2b4b6b;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        .avatar_box{
            border: 1px solid #eee;
            padding: 10px;
            border-radius: 50%;
            width: 130px;
            height: 130px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }
    </style>
    


    4.绘制登录表单区域
    用Element-UI组件实现布局:el-form,el-form-item,el-input,el-button,字体图标
    (1)打开Element-UI的官网
    点击form表单,找到典型表单,只需要粘贴一部分
    在login.vue中的login_box中添加

              <!-- 登录表单区域 -->
              <el-form label-width="0px">
                    <el-form-item>
                        <el-input></el-input>
                    </el-form-item>
              </el-form>
    

    结果报错:Unknown custom element: …
    是因为element-ui是按需导入的
    需要在plugins->element.js中按需导入要使用的元素

    import Vue from 'vue'
    import { Button, Form, FormItem, Input } from 'element-ui'
    // 使用Vue.use把它们注册为全局可用的组件
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)
    

    (2)表单布局和样式
    布局:

              <!-- 登录表单区域 -->
              <el-form label-width="0px" class="login_form">
                    <!-- 用户名 -->
                    <el-form-item>
                        <el-input></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item>
                        <el-input></el-input>
                    </el-form-item>
                    <!-- 按钮区域 -->
                    <el-form-item>
                        <el-button type="primary" plain>登录</el-button>
                        <el-button type="info" plain>重置</el-button>
                    </el-form-item>
              </el-form>
    

    样式:

    .login_form{
            width: 100%;
            position: absolute;
            bottom: 0px;
            padding: 0 20px;
            box-sizing: border-box;
        }
    


    (3)绘制带icon的输入框
    进入element-ui官网,找到input输入框中的带 icon 的输入框
    属性方式为input表单添加icon
    在前面添加icon:prefix-icon=“XXX”

    在网上下载图标
    需要在main.js入口文件
    // 导入字体图标:import ‘./assets/fonts/iconfont.css’
    添加icon属性:prefix-icon=“iconfont icon-3702mima”
    prefix-icon=“iconfont icon-user”

    5.表单的数据绑定
    (1)为el-form加上:model=""属性,指向一个数据对象

     <el-form :model="loginForm" label-width="0px" class="login_form">
    

    (2)为el-input加上v-model=""属性,绑定到数据对象的属性中

     <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
     <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
    

    (3)数据对象

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

    (4)细节:密码隐藏,为密码的input标签加上type属性 type=“password”

    6.实现表单的数据验证
    进入element-ui官网,找到form表单__表单验证__在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
    (1)为el-form绑定rules属性,值为表单验证规则对象(在data数据里面定义)
    (2)写具体的验证规则

     loginFormRules: {
              // 验证用户名是否合法
              username: [
                // required: true必填项
                { required: true, message: '请输入登录名称', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
              ],
              // 验证密码是否合法
             password: [
              { required: true, message: '请输入登录密码', trigger: 'blur' },
              { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
            ]
          }
    

    (3)让验证规则生效
    为el-item添加props=“具体的规则”

    <!-- 用户名 -->
    <el-form-item prop="username">
       <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password">
       <el-input v-model="loginForm.password" type="password" prefix-icon="iconfont icon-3702mima"></el-input>
    </el-form-item>
    


    7.实现表单的重置功能
    在element-ui中找到form表单->form methods->resetFields(对整个表单进行重置,将所有字段值重置为初始值并移除校验结果)
    拿到表单的实例对象,然后调用resetFields函数重置表单
    (1)拿到表单实例对象
    对el-form添加ref=“loginFormRef”
    (2)为"重置"按钮绑定点击事件

     <el-button type="info" plain v-on:click="resetLoginForm">重置</el-button>
    

    (3)定义resetLoginForm方法

    methods: {
        resetLoginForm () {
          this.$refs.loginFormRef.resetFields()
        }
      }
    

    this->当前login.vue组件的实例对象
    实例上有一个属性 $refs(与自定义的属性一致)

    8.实现登录前表单数据的预验证
    必须验证通过后,才可以发起登陆请求,否则应该直接提示用户输入不合法,怎么进行预验证呢?
    点击登陆后,通过调用表单的某一个函数进行验证,那么是哪个函数呢?
    validate——对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise
    拿到表单的实例对象,然后调用resetFields函数重置表单(同上一步操作)
    (1)拿到表单实例对象
    对el-form添加ref=“loginFormRef”
    (2)对登录按钮添加点击事件

      <el-button type="primary" plain v-on:click="login">登录</el-button>
    

    (3)写login方法

    login () {
          this.$refs.loginFormRef.validate((valid) => {
            // true/false_验证结果
            console.log(valid)
          })
        }
    

    五、配置axios发起登陆请求

    1.配置axios
    在main.js入口文件中添加axios的配置

    // 配置axios
    import axios from 'axios'
    Vue.prototype.$http = axios
    // 配置请求的根路径
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    

    2.发起登陆请求
    (1)在login方法中 ,通过this访问原型上的$http这个成员,发起登录请求

    login () {
          this.$refs.loginFormRef.validate((valid) => {
            // console.log(valid)
            if (!valid) return
            const result = this.$http.post('login', this.loginForm)
            console.log(result)
          })
        }
    

    (2)打开后台api接口和MySql
    node app.js

    (3)点击登录后
    result是promise对象
    在这里插入图片描述
    可以用await/async来简化这次promise操作

    login () {
          this.$refs.loginFormRef.validate(async (valid) => {
            // console.log(valid)
            if (!valid) return
            const result = await this.$http.post('login', this.loginForm)
            console.log(result)
          })
        }
    

    这次结果是:
    在这里插入图片描述
    这里只有data属性我们需要
    解构赋值操作把真实数据提取出来

    const { data: res } = await this.$http.post('login', this.loginForm)
            console.log(res)
    

    在这里插入图片描述
    3.判断msg

    if (res.meta.status !== 200) return console.log('登录失败')
    

    六、配置message全局弹框组件

    目前,登录成功/失败,是在console中显示,用户是看不到的,为了让用户明确知道自己登录是否成功,可以用element-ui中的Message消息提示
    1.导入组件
    在plugins->element.js中

    import { Button, Form, FormItem, Input, Message } from 'element-ui'
    // 把Message挂载到Vue的原型对象身上
    Vue.prototype.$message = Message
    

    2.使用弹框

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

    七、完善登录成功后操作

    1.将登录成功后的token,保存到客户端的 sessionStorage 中
    1.1项目中出现了登录之外的其他API接口,必须在登录后才能访问
    1.2token只应在当前网站打开期间生效,所以将token保存在sessionStorage中
    2.通过编程式导航跳转到后台主页,路由地址是/home
    (1)获取token

    res.data.token
    

    (2)把token保存到sessionStorage中

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

    (3)通过编程式导航跳转到后台主页,路由地址是/home

    this.$router.push('/home')
    

    3.写主页组件
    (1)在components->创建Home.vue

    <template>
      <div>
          Home 组件
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>
    
    

    (2)把home组件渲染到根组件

    import home from '../components/home.vue'
    // 添加路由规则
    { path: '/home', component: home }
    

    4.路由导航守卫控制页面访问权限
    必须在登录成功的情况下才能访问到home接口下的界面,但是把token清除之后,刷新页面,还是能访问__不满足需求
    没有登录的情况下访问home界面,需要跳转到登录页面

    // 挂载路由导航守卫
    router.beforeEach((to, from, next) => {
      // to将要访问的路径
      // from代表从哪个路径跳转而来
      // next是一个函数,表示放行
      // next('/login')  强制跳转
      // 如果直接访问的是登录页__直接放行
      if (to.path === '/login') return next()
      // 获取token
      const tokenStr = window.sessionStorage.getItem('token')
      if (!tokenStr) {
        // 如果没有token__表示未登录__强制跳转到登录页
        return next('/login')
      } else {
        // 如果有token__表示登录成功__放行
        next()
      }
    })
    

    八、实现退出功能

    1.实现原理
    基于token的方式实现退出比较简单,只需要销毁本地的token即可。这样,后续的请求就不会携带token,必须重新登录生成一个新的token之后才可以访问。
    2.实现步骤
    (1)在home.vue写出一个退出按钮

    <template>
      <div>
          <el-button type="info">退出</el-button>
          Home 组件
      </div>
    </template>
    

    (2)为退出按钮绑定一个单机事件

    <el-button type="info" v-on:click="quit">退出</el-button>
    methods: {
        quit () {
          // 清空token
          window.sessionStorage.clear()
          // 清空后重定向到登录界面
          this.$router.push('/login')
        }
      }
    

    九、处理项目中ESLint语法报错问题

    1.在项目中新增一个配置.prettierrc文件,自动转化为ESLint格式

    {
        "semi": false,
        "singleQuote": true
    }
    

    2.在.eslintrc.js中的rules新增

    'space-before-function-paren': 0
    

    十、上传到本地仓库,再同步到码云中

    1.上传到本地仓库
    (1)git status__显示已经修改和新增的文件
    (2)把所有文件都添加到暂存区

    git add .
    git status // 所有文件都显示绿色__已经被添加到暂存区
    

    (3)把这些文件提交一下

    git commit -m "完成了登录功能"
    
    git branch
    * login
      master
    // 表示刚才commit提交的问件都被提交到了login分支里面进行保存
    

    (4)把login分支合并到master主分支
    切换到master主分支

    git checkout master
    

    基于master分支合并login分支

     git merge login
    

    (5)把本地仓库的master分支中最新代码推送到码云中

    % git push
    Enumerating objects: 53, done.
    Counting objects: 100% (53/53), done.
    Delta compression using up to 4 threads
    Compressing objects: 100% (35/35), done.
    Writing objects: 100% (42/42), 28.28 KiB | 1.09 MiB/s, done.
    Total 42 (delta 12), reused 0 (delta 0)
    remote: Powered by GITEE.COM [GNK-5.0]
    To https://gitee.com/yyq326/vue_shop.git
       cecd055..858a579  master -> master
    

    2.把本地的login分支一并推送的码云中

    qiaofang@qiaofangdeMacBook-Air vue_shop % git checkout login 
    Switched to branch 'login'
    qiaofang@qiaofangdeMacBook-Air vue_shop % git branch        
    * login
      master
    qiaofang@qiaofangdeMacBook-Air vue_shop % git push -u origin login
    Total 0 (delta 0), reused 0 (delta 0)
    remote: Powered by GITEE.COM [GNK-5.0]
    remote: Create a pull request for 'login' on Gitee by visiting:
    remote:     https://gitee.com/yyq326/vue_shop/pull/new/yyq326:login...yyq326:master
    To https://gitee.com/yyq326/vue_shop.git
     * [new branch]      login -> login
    Branch 'login' set up to track remote branch 'login' from 'origin'.
    
    展开全文
  • 电商后台管理系统v1.0 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and...
  • Vue电商后台管理系统 前言 (四)用户列表布局和功能实现 点击用户列表,在右侧主题区域展示用户组件 一、用户列表组件布局 1.创建用户列表链接对应的组件页面 新建components->user->users.vue <template>...
  • 电商后台管理系统用于管理账号、商品分类、商品信息、订单、数据统计等业务功能 项目概述 前端技术栈 vue vue-router Element-UI Axios Echarts 项目部分效果 这是一个登陆页面主要实现了用户登陆表单验证...
  • 前提拥有: 一个完整的vue电商后台管理系统,下面是B站的视频链接 https://www.bilibili.com/video/BV1bE411p7As?share_source=copy_web 下载上面两个软件,可自行百度安装. 在阿里云申请服务器 ...
  • 照着B站vue电商项目视频敲代码,到了登陆页前后端交互的时候,明明在postman那里测试的后台接口没问题,但是总是显示下面的问题 Post http://localhost:8080/login 404 xhr.js?b50d:178 Uncaught (in promise) ...
  • vue-ui中选择安装运行依赖 直接搜索echarts然后点击安装即可 获取折线图并渲染图表 源码 <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator="/"> <el-...
  • 梳理页面结构 3.2 梳理项目结构 在终端中输入npm run serve启动我们刚刚导入...App.vue <template> <div id="app"> App 根组件 </div> </template> <script> export default { nam

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,169
精华内容 2,067
关键字:

vue电商后台管理系统

vue 订阅