2020 零基础到快速开发 Vue全家桶开发电商管理系统（一）

目录

项目概述

项目概述篇

1 电商项目基本业务概述

根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式，我们主要是做关于PC后台管理方面

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

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

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

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

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

① 前端项目技术栈：
Vue
Vue-router
Element-UI
Axios
Echarts
② 后端项目
Node.js
Express
Jwt
Mysql
Sequelize

项目初始化篇

cmd输入

vue ui

项目初始化篇
① 安装 Vue 脚手架
② 通过 Vue 脚手架创建项目
③ 配置 Vue 路由
④ 配置 Element-UI 组件库
⑤ 配置 axios 库
⑥ 初始化 git 远程仓库
⑦ 将本地项目托管到Github或码云中

使用码云托管项目篇

码云托管项目

安装mysql

安装phpStudy,导入数据库

导入
其他选项菜单–>mysql工具–>打开数据库目录，有下边这些文件说明数据库还原完成。

配置api接口

vue_api_server文件夹下 shift右键 打开powershell终端，
npm install, node app.js(把api接口项目跑起来)下边这样就是成功了

postman（测接口）

接口http://119.23.53.78:8888/api/private/v1/login?
username=admin&password=123456

登录退出功能实现

登录退出

登录业务的相关技术点
 http 是无状态的
 通过 cookie 在客户端记录状态（前端后台无跨域时）
 通过 session 在服务器端记录状态（前端后台无跨域时）
 通过 token 方式维持状态（前端后台有跨域时）

打开项目，先去终端

梳理项目结构

app.vue

router index.js（删掉）

渲染Login组件并实现路由重定向

//components下建Login.vue

//index.js(router)
import Login from '../components/Login'
const routes = [
  { path: '/', redirect:'/login'},
  { path: '/login' , component: Login}
]

//App.vue
// 路由占位符 
<router-view></router-view>

新建

main.js里

//导入全局样式表
import "./assets/css/global.css"

登陆界面

登录页面代码编写
用到element ui

//（element.js）plugins里
import Vue from 'vue'
import { Button } from 'element-ui'
import {Form ,FormItem} from 'element-ui'
import {Input} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

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

自己的字体图标使用
复制fonts文件夹到assets目录下，

//main.js导入
import "./assets/fonts/iconfont.css"
//组件页面使用
 <el-input prefix-icon="iconfont icon-users">

表单数据绑定

<el-form :model="loginForm"  label-width="0px"  class="login_form" >
<el-input v-model="loginForm.username">
data() { return {loginForm: { username: "admin", password: "123456", },

表单数据验证

<el-form :rules="loginFormRules"
<el-form-item prop="username">
<el-form-item prop="password">
loginFormRules: {  username: [{..}],password: [{..}]

表单重置(resetFields)

 <el-form  ref="loginFormRef">
 <el-button type="info" @click="resetLoginForm">重置</el-button>
 methods: {
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },

表单数据预验证(validate)

<el-button type="primary" @click="login">登录</el-button>
login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        console.log(valid);

配置axios发起登录请求

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

//Login.vue
login() { this.$http.post("login", this.loginForm);  //接口文档里，请求方式，路径，参数

phpStudy 启动mysql
vue_api_server 文件夹里 powershell输 node app

login() {
          this.$refs.loginFormRef.validate(async valid => {
            //console.log(valid);    //  true/false
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm) 
          //console.log(res);
          if (res.meta.status != 200) return console.log("登录失败");
          console.log("登陆成功");        
      });
    },

弹框提示

//element.js
//导入弹框提示组件
import { Message } from 'element-ui'
Vue.prototype.$message = Message

//Login.vue 的login（）方法中
if (res.meta.status != 200) return this.$message.error('登陆失败!');
    this.$message.success("登陆成功")

登录跳转到home

//Login.vue 的login（）方法中
// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem("token", res.data.token);
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push("/home");

建Home.vue

//index.js (router)
import Home from '../components/Home'
{ path:'/home', component:Home }

最终login()

login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginForm);
        if (res.meta.status != 200) return this.$message.error("登陆失败!");
        this.$message.success("登陆成功");
        window.sessionStorage.setItem("token", res.data.token);
        this.$router.push("/home");
      });
     }

路由导航守卫控制访问权限
如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面

//index.js (router)
//挂载路由导航守卫
// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
  // next是一个函数，表示放行    next()放行，next('/login')强制跳转
  // 如果用户访问的登录页，直接放行
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有token，强制跳转到登录页
  if (!tokenStr) return next('/login')
  next()
})

退出功能

 <el-button type="info" @click="logout">退出</el-button>
 methods: {
    logout() {
      window.sessionStorage.clear();  // 清空token
      this.$router.push("/login");  // 跳转到登录页
    },
  }

处理ESLint语法报错

//项目根路径新建 .prettierrc
{
  "semi": false,  //不额外加分号
  "singleQuote": true  //启用单引号
}