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测试接口，显示登录成功，传值错误，参数记得和接口文档一致

注意：

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

登录功能的所有代码

</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>

</template>

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>

.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

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

基于vue的电商后台管理系统相关推荐

java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档 java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...
Vue+Element-UI 电商后台管理系统详细总结
一.概述基于 Vue 和 Element-UI 的电商后台管理系统 1.1 实现功能用户登录/退出用户管理用户列表实现用户的增删改查.分页查询以及分配角色功能权限管理角色列表实现角色的 ...
【VUE项目】VUE+ElementUI电商后台管理系统
电商后台管理系统项目来源:https://www.bilibili.com/video/BV1x64y1S7S7?p=191&spm_id_from=333.1007.top_right_b ...
计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
3.1 Vue实战--电商后台管理系统的登录功能补充了加密功能
1. 原来功能的不足当登录成功之后,打开调试面板,找到"网络",在请求体中会看到密码和用户名,这是不安全的.这是因为:http协议是明文传输,只要别人一抓包就可以获取到传输的报文 ...
[JAVA毕业设计]Vue框架电商后台管理系统源码获取和系统演示
项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
基于Vue实现智慧社区电商后台管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.前端项目.小程序开发.Python开发.大数据和 ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...

基于vue的电商后台管理系统

1.项目概述

1.1项目概述:

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

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

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

2. 项目初始化

2.1 前端项目初始化步骤

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

3.1 登录概述

3.2 登录 — token 原理分析

3.3 登录功能实现

基于vue的电商后台管理系统相关推荐

最新文章

热门文章