Vue 7（电商管理系统案例）

Jean
660 阅读4分钟

1.项目概述

1.1 电商业务概述

  • 客户使用的业务服务：PC端，小程序，移动web，移动app
  • 管理员使用的业务服务：PC后台管理端。

1.2 PC后台管理端的功能

管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计

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

  • 前端项目是基于Vue的SPA（单页应用程序）项目

1.4 技术选型

1.前端技术栈:

  • Vue
  • Vue-Router
  • Element-UI
  • Axios
  • Echarts 2.后端技术栈：（了解）
  • Node.js
  • Express
  • Jwt(模拟session)
  • Mysql
  • Sequelize(操作数据库的框架)

2. 项目初始化

2.1 前端项目初始化步骤 p5-p6

  • A.安装Vue脚手架
  • B.通过脚手架创建项目 vue ui
  • C.配置路由
  • D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element-plus
  • E.配置Axios：在依赖中安装,搜索axios(运行依赖)
  • F.初始化git仓库
  • G.将本地项目托管到github或者码云中
    • 设置-生成公钥 ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
    • /Users/ni/.ssh/id_rsa.pub
    • 添加后，在终端（Terminal）中输入ssh -T git@gitee.com -yes

2.2 本地仓库托管到码云中 p7

  • Git 全局设置:
  • 先在本地仓库提交git暂存区中的文件
    • git add .
    • git commit -m "add files"
    • git status
  • 已有仓库：

2.3 后台项目的环境安装配置（未解决） p8

  • A.安装Navicat Premium并导入mysql数据库数据 安装教程
    • 1）下载mysql
      • mysql官网，选择 MySQL Community Server，下载dmg文件
      • 安装成功后，在系统偏好设置中打开即可
    • 2）下载Navicat Premium，安装成功后打开
      • 点击connection-选择mysql
      • 输入连接名字（自己随便起），填入服务器名（远程主机名，本机是localhost），用户名，密码mysql的密码，端口号：3306（mysql默认端口号）
      • 新建数据库：此时左侧列表会显示出刚刚所创建连接，鼠标右击点击新建数据库
      • 创建表：选中刚创建的数据库,点击表头查询，新建查询
      • 在项目文件根目录下找到 shop2-server/db/mydb.sql 导入该文件后，点击运行
      • 等待几分钟，数据生成完毕后，右击左侧表,刷新如图就完成了本地服务器部署
  • B.安装nodeJS，配置后台项目,从终端打开后台项目shop2-server文件夹，然后在终端中输入命令安装项目依赖包：npm install p9
    • 要在shop2-server/config/default.json文件中修改用户名和密码
 "db_config" : {
		"protocol" : "mysql",
		"host" : "127.0.0.1",
		"database" : "itcast",//改成上面设置的database的名字
		"user" : "root",
		"password" : "root",   //改成自己的数据库密码才行
		"port" : 3306	
	}

3. 登录/退出功能 p10

3.1登录概述

1.登录业务流程

  • （1）在登录页面输入用户名和密码
  • （2）调用后台接口进行验证
  • （3）通过验证之后，根据后台的响应状态跳转到项目主页

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

  • http是无状态的
  • 通过cookie在客户端记录状态
  • 通过session在服务端记录状态
  • 通过token方式维持状态（存在跨域问题时使用，否则使用以上两种）

3.2 登录——token原理分析

3.3 登录功能实现 p11

1.登录页面的布局 通过Element-ui组件实现布局

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标

步骤： p12

  • 使用vscode打开前端项目
  • 执行：git status检查项目状态。（检查当前工作区是否是干净的）
  • 执行：git checkout -b login 创建login分支，并且切换到该分支。（开发新功能时，尽量在新分支上开发，开发完成后再合并到master分支）
  • 执行：git branch 查看当前项目所有分支（目前有login和master）
  • 执行：git status 查看项目当前在哪个分支上
  • 然后执行vue ui命令打开ui界面，然后运行serve，点击启动，运行app查看当前项目效果
  • 发现现在是一个默认页面，我们需要进行梳理，打开项目的src目录，点击main.js文件（入口文件）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • 再打开App.vue(根组件)，将根组件的内容进行操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式)
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>
  • 再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除，将components中的helloworld.vue删除
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    
  ]
})
  • 在components文件夹中新建Login.vue组件,添加template，script，style标签 p13 注意：单文件的style标签中一定要加scoped，只在当前组件内生效，可以防止组件之间的样式冲突，没有scoped则样式是全局的；同时，style支持less语法
// Login.vue
<template>
  <div>
    登录组件
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

</style>
  • 在router.js中导入组件并设置规则，访问根路径时通过路由重定向自动跳转到登录页面
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from './components/Login.vue'

const routes = [{
    path: '/',
    redirect: '/login'
}, {
    path: '/login',
    name: 'Login',
    component: Login
}]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
  • 在App.vue中添加路由占位符
<template>
  <div id="app">
    app根组件
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>
  • 当我们给Login.vue中的内容添加样式的时候，会报错“缺少less-loader”，需要配置less加载器（开发依赖），安装less(开发依赖)，less-loader（开发依赖） p14
  • 然后需要添加公共样式，在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式
/* 全局样式表 */
html,body,#app{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
}
  • 在main.js中导入global.css，使得全局样式生效 import “./assets/css/global.css”
  • 然后Login.vue中的根元素也需要设置撑满全屏（height:100%）

其中我们有用到一下内容，需要进行进一步处理：

  • A.添加element-ui的表单组件 p16
    • 在plugins文件夹中打开element.js文件，进行elementui的按需导入
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)
  • B.添加第三方字体 引入第三方阿里巴巴icon p17
    • 复制素材中的fonts文件夹到assets中,在入口文件main.js中导入import ‘./assets/fonts/iconfont.css’，然后直接在Login.vue使用
 <el-input prefix-icon="iconfont icon-3702mima"></el-input>
  • 登录组件表单数据的绑定 p18
<template>
。。。
      <!-- 登录表单区域 -->
      <el-form :model="loginForm" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item >
          <el-input v-model="loginForm.username" prefix-icon="iconfont el-iconyonghu"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item >
          <el-input v-model="loginForm.password" type="password" prefix-icon="iconfont el-iconmima"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      }
    }
  }
}
</script>
  • C.添加表单验证的步骤 p19
    • 1).给添加属性 :rules=“rules”，rules是一堆验证规则，定义在script中
    • 2).为label项添加prop属性：<el-form-item prop="username">
    • 3).在script中添加rules：
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
  • 重置表单并移除校验结果 resetFields（ ） p20
//1.为表单添加ref引用
<el-form ref="loginFormRef" >
//2.为按钮添加事件
<el-button type="info" @click="resetLoginForm">重置</el-button>
//3.设置事件
export default {
  data () {
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      // this就是表单是实例对象
      this.$refs.loginFormRef.resetFields()
    }
  }
  • 登录前的预验证validate（ ） p21
//1.给按钮添加点击事件
<el-button type="primary" @click="login">登录</el-button>

//2.设置事件，调用validatavalidate函数
login () {
      this.$refs.loginFormRef.validate(valid => {
        console.log(valid)
      })
  • 根据预验证是否发起请求 p22
    • 导入axios以发送ajax请求
    • 打开main.js，import axios from ‘axios’;
    • 设置请求的根路径：axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’;
    • 挂载axios：
      • vue3.0： app.config.globalProperties.$http = axios
      • vue2.0（Vue.prototype.$http = axios;）
    • 注意：要启动mysql，还有在shop2-serve下运行node app.js
      • 如果出错 Error: listen EADDRINUSE: address already in use :::8888 即端口被占用
      • 解决方法：输入 sudo lsof -i:8888，查看被占用进程的pid，再输入sudo kill -9 pid 即可杀死进程。
    • Login.vue
//1.为login注册事件
<el-button type="primary" @click="login">登录</el-button> 
//2.login（）拿到登录数据 解构data属性
    login () {
      // 点击登录的时候先调用validate方法验证表单内容是否有误
      this.$refs.loginFormRef.validate(async valid => {
        // 如果valid参数为false则验证不通过
        if (!valid) return
        //const result = await this.$http.post('login', this.loginForm)
        const { data: res } = await this.$http.post('login', this.loginForm)
        console.log(res)
      })

avatar
文章
阅读
粉丝