vue电商管理后台前端项目

最新推荐文章于 2024-07-23 17:22:52 发布

初辰ge

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量2k

点赞数 4

分类专栏：前端工程化 vue 文章标签： vue

本文链接：https://blog.csdn.net/chuenst/article/details/114848242

版权

vue 同时被 2 个专栏收录

27 篇文章 7 订阅

订阅专栏

前端工程化

9 篇文章 0 订阅

订阅专栏

电商后台项目概述

管理员使用的业务服务：PC后台管理端
PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计
前端项目是基于Vue的SPA（单页应用程序）项目，前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts

项目及数据库准备

恢复依赖包安装

进入 vue-api-server 目录，运行如下命令，进行恢复安装

npm install

数据库创建及导入

新建数据库 shop_admin，找到 db 目录下的 shop_admin.sql ,将数据导入
在这里插入图片描述

启动项目后端程序

运行如下命令，启动后台项目

node app.js

测试

浏览器访问如下链接进行测试
http://127.0.0.1:8888/api/private/v1/goods
在这里插入图片描述

项目初始化

码云创建仓库

创建仓库 shop-vue
在这里插入图片描述

本地创建项目

执行如下命令，在本地创建项目

vue create vue-shop

将本地项目推送到远程仓库

在vue-shop目录打开git命令行程序
在这里插入图片描述
Git 全局设置

git config --global user.name "pengbo"
git config --global user.email "24612582@qq.com"

创建git仓库

mkdir shop-vue
cd shop-vue
git init

本地 vue-shop 目录下新建 README.md

touch README.md

添加 README.md 到暂存区 git add README.md

git add README.md

提交更改 git commit -m 'first commit

git commit -m "first commit"

添加对应的远程仓库 git remote add origin … ，注意要使用自己的地址

git remote add origin https://gitee.com/mcweb/shop-vue.git

推送本地仓库到远程仓库 git push -u origin master

git push -u origin master

配置Element-UI

安装 element ui

npm i element-ui -S

项目中引入element ui
在这里插入图片描述

配置Axios

删除组件和视图

删除 src 目录下的 views 目录中的 Home.vue 和 About.vue
删除 components 目录中的 HelloWorld.vue

实现登录功能

登录逻辑

在登录页面输入账号和密码进行登录，将数据发送给服务器，服务器返回登录的结果
数据中带有token，客户端得到token并进行保存，后续的请求都需要将此token送给服务器，服务
器会验证token以保证用户身份

添加新分支login

在login分支中开发当前项目
在vs code 中打开终端，使用git status确定当前项目状态,
确定当前工作目录是干净的之后，创建一个分支进行开发，开发完毕之后将其合并到master

git checkout -b login

然后查看新创建的分支：

git branch

确定我们正在使用login分支进行开发

修改根组件

修改App.vue(根组件)，只留下路由出口

<template>
  <div id="app"><router-view /></div>
</template> <style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}
</style>

创建登录组件

在 views 文件夹中新建Login 文件夹，Login 文件夹中新建 index.vue 和 imgs 文件夹

index.vue模板

<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 网站logo -->
      <div class="logo-box"><img src="./imgs/login.jpg" alt /></div>
      <!-- 表单 -->
      <el-form ref="form" :model="loginForm" class="loginForm">
        <el-form-item>
          <el-input
            v-model="loginForm.username"
            placeholder="输入用户名"
            prefix-
            icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="loginForm.password"
            placeholder="输入密码"
            prefix-
            icon="el-icon-view"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style lang="less" scoped>
.login-container {
  background-color: #303133;
  height: 100%;
  .login-box {
    width: 450px;
    height: 310px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    .logo-box {
      position: absolute;
      width: 150px;
      height: 150px;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #fff;
      padding: 5px;
      box-shadow: 0 0 10px #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .loginForm {
      position: absolute;
      top: 120px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      text-align: center;
    }
  }
}
</style>

上面用到了 less 的语法，所以需要安装 less 和 less-loader

npm install less less-loader -D

全局样式

全局样式，就是所有或者大部分组件都需要用到的样式
assets 中新建 css 目录，在 css 目录下新建 common.css 在其中编写全局样式

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

然后在 main.js 中导入

import './assets/css/common.css'

添加路由规则

router/index.js 中添加路由规则

import Login from '../views/Login'
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

添加表单验证

给form添加属性:rules=“formLoginRules”，formLoginRules是一堆验证规则，定义在script中
在data中定义formLoginRules规则的具体内容

loginFormRules: {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
  ]
}

通过的prop属性设置验证规则

<el-form-item label="活动名称" prop="username">

安装配置zxios

安装 axios

npm i axios

main.js 中加入如下代码

// 引入 axios
import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载到 Vue 原型上
Vue.prototype.$http = axios

请求登录接口

查看 API 文档，根据登录接口的要求，进行登录请求

存储token

登录成功后，应该将返回的 token 存储起来，建议放到本地存储，而不是 session 中

async submitForm (form) {
  try {
    // 进行表达校验
    await this.$refs.form.validate()
    const res = await this.$http.post('login', this.loginForm)
    const { status, msg } = res.data.meta
    if (status === 200) {
      const { data: { token } } = res.data
      localStorage.setItem('token', token)
    } else if (status === 400) {
      console.log(msg)
    }
  } catch (err) {
    console.log('验证未通过')
  }
}

成功跳转

登录成功后跳转到后台首页 views 目录下创建 Home 目录，此目录下新建 index.vue

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

修改登录方法 submitForm，登录成功后，添加如下代码

this.$router.push('home')

添加路由

如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面打开router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
Vue.use(Router)
const router = new Router({
  routes: [
    { path:'/', redirect:'/login'},
    { path:'/login' , component:Login },
    { path:'/home' , component:Home}
  ]
})
//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to,from,next)=>{ 
  if(to.path === '/login')
    return next();
  //获取token
  const tokenStr = window.sessionStorage.getItem('token');
  if(!tokenStr)
    return next('/login');
  next();
})
export default router

实现退出功能

在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：

export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
}