1.项目概述

1.1项目概述:

基于PC端后台管理的电商后台管理系统

1.2 电商后台管理系统的功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

1.3 电商后台管理系统的开发模式（前后端分离）

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的 SPA 项目。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

1.4 电商后台管理系统的技术选型

1. 前端项目技术栈

Vue 、Vue-router 、Element-UI 、Axios 、Echarts

2. 后端项目技术栈

Node.js、Express、Jwt、Mysql、Sequelize

2. 项目初始化

2.1 前端项目初始化步骤

① 安装 Vue 脚手架

② 通过 Vue 脚手架创建项目

③ 配置 Vue 路由

④ 配置 Element-UI 组件库

⑤ 配置 axios 库

⑥ 初始化 git 远程仓库

⑦ 将本地项目托管到 Github 或 码云 中

2.2 后台项目的环境安装配置

① 安装 MySQL 数据库 （这里我用的是navicat，将数据库导入navicat中）

数据库使用？1 赞同 · 0 评论回答

② 安装 Node.js 环境

node安装（超级详细版）适合小白_small李的博客-CSDN博客_node安装​blog.csdn.net/qq_40712862/article/details/120231621

③ 配置项目相关信息

④ 启动项目

⑤ 使用 Postman 测试后台项目接口是否正常

​

编辑切换为居中

3.1 登录概述

1. 登录业务流程

① 在登录页面输入用户名和密码

② 调用后台接口进行验证

③ 通过验证之后，根据后台的响应状态跳转到项目主页

2. 登录业务的相关技术点

①http 是无状态的

②通过 cookie 在客户端记录状态 （不存在跨域的情况下）

③通过 session 在服务器端记录状态 （不存在跨域的情况下）

④通过 token 方式维持状态（存在跨域的情况下用token）本项目中采用token

3.2 登录 — token 原理分析

​

3.3 登录功能实现

​

创建login分支

​

代码部分

​

​

​

路由部分

从login页面跳转到home页面

​

添加图片注释，不超过 140 字（可选）

登录成功：

​

写登录过程遇到的问题：

1.预校验规则的时候，无论是不输入还是输入一个，或者输入正确都是提示“请输入用户名”

解决：数据绑定值的时候应该是 ：model=”绑定的值“ ，而自己写的是 v-model=”绑定的值”

​

2.输入账号密码，点击登录，无论是输入正确还是错误都是提示：”登录失败，账号或密码输入错误“

解决：用postman测试接口，显示登录成功，传值错误，参数记得和接口文档一致

​

注意：

一.写的时候要将后台打开，

登录功能的所有代码

<template>

  <div class="login_container">

    <div class="boxhezi">

      <div class="avatar_box">

        <img src="../assets/logo.png" alt="" />

      </div>

      <div>

        <el-form label-width="0px" :model="LoginfForm" :rules="rules" ref="ruleForm" class="login_from">

          <!-- 用户名 -->

          <el-form-item prop="username">

            <el-input prefix-icon="el-icon-user-solid" v-model="LoginfForm.username"></el-input>

          </el-form-item>

          <!-- 密码 -->

           <el-form-item prop="password">

            <el-input prefix-icon="el-icon-lock" v-model="LoginfForm.password" type="password"></el-input>

          </el-form-item>

           <!-- 按钮区域 -->

           <el-form-item class="btns">

          <el-button type="primary" @click="submit">登录</el-button>

          <el-button type="info" @click="reset">重置</el-button>

          </el-form-item>

        </el-form>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'VShopLogin',

  data () {

    return {

      LoginfForm: {

      // 用户名

        username: 'admin',

        // 密码

        password: '123456'

      },

      rules: {

        username: [

          { required: true, message: '请输入用户名', trigger: 'blur' },

          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }

        ],

        password: [

          { required: true, message: '请输入密码', trigger: 'blur' },

          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }

        ]

      }

    }

  },

  methods: {

    // 重置，点击重置按钮时将用户名、密码重置为空

    reset () {

      this.$refs.ruleForm.resetFields()

    },

    // 登录

    submit () {

      this.$refs.ruleForm.validate(async valid => {

        if (!valid) return

        // eslint-disable-next-line no-unused-vars

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

        if (res.meta.status !== 200) {

          return this.$message.error('登录失败')

        }

        // 保存token

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

        this.$message.success('登录成功')

        // 路由跳转到home页面

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

      })

    }

  }

}

</script>

<style lang="less" scoped>

.login_container {

  background-color: #5dbe8a;

  height: 100vh !important;

}

.boxhezi {

  top: 50%;

  width: 450px;

  height: 300px;

  border-radius: 3px;

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: #fff;

}

.avatar_box {

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: #fff;

  padding: 10px;

  width: 130px;

  height: 130px;

  border: 1px solid #eee;

  border-radius: 50%;

  box-shadow: 0 0 10px #ddd;

}

img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #eee;

}

.login_from{

 position: absolute;

 bottom:0px;

 width: 90%;

 padding: 0 20px;

}

.btns{

  display: flex;

  justify-content: flex-end;

}

</style>

项目来源：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibili

项目接口都能使用。谢谢黑马，谢谢刘龙斌老师！