vue电商管理后台前端项目

电商后台项目概述

管理员使用的业务服务: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');
        }
    }
}
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初辰ge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值