vue2后台管理总结

一、前言

这个项目已经做了挺久一段时间了，但是一直也没有花时间来总结一下，只是做完了，就不管了，前端老组长就跟我说了项目无非就是tob和toc，好吧刚听到这两个词一脸懵，他跟我解释也就是前台和中后台项目。这个后台管理项目是我第一个完整完成的，做的时候其中有一些地方没搞懂也就过去了，回过头来重新总结分析一下吧。

二、前期准备

Node环境

安装@vue/cli

1	`npm i @vue/cli -g`

创建脚手架

1	`vue create 脚手架文件夹名`

采用ElementUI组件库，网络请求axios库。

下载element-ui包到当前项目(注意它支持的是Vue2版本项目)
1
npm i add element-ui

封装新建src/elementUI/index.js, 在这里进行组件引入和注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在main.js中引入, 使其参与到webpack打包并在网页生效
1
import '@/elementUI' // 注册elementUI组件

封装请求库的思想

封装项目的请求架构，为后面的请求数据做准备

项目管理网络请求：

1）下载axios包到当前项目的文件夹中

2）封装request请求函数配置基地址

3）封装api统一接口方法

4）在逻辑页面，需要用到哪个就引入后调用等待请求的结果，在逻辑页面使用后台返回的数据。

核心思想：分层架构

在任意组件调用封装好的接口方法，接口方法调用统一的axios函数告诉他请求的参数它去请求数据。

请求结构

安装axios：

1	`npm i axios`

新建src/utils/request.js项目核心请求方法的模块文件

import axios from 'axios'

// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址
const myAxios = axios.create({
  baseURL: 'http://big-event-vue-api-t.itheima.net'
})

// 导出自定义的axios方法, 供外面调用传参发请求
export default myAxios

新建src/api/index.js项目接口方法的统一管理模块文件

// 导入
import request from '@/utils/request.js'

export const getList = ()=>{
    // 这里先用这个接口测试下, 如果url以http开头会忽略baseURL, axios直接请求此地址
	return request({
        url:'http://geek.itheima.net/v1_0/channels'
    })
}

在任意组件src/App.vue中引入接口请求方式，并请求数据

import {getList} from '@/api'
export default {
    created(){
        this.getListFn()
    },
    methods:{
        async getListFn(){
            const res = await getListAPI()
            console.log(res)
        }
    }
}

这种分层架构思想, 可以更好的统一管理项目中所有接口, 并也方便统一给axios方法添加拦截器和修改基地址

git工具的使用

本地仓库

1.初始化本地git仓库，项目目录下有.git文件夹，保存git相关

1	`git.init`

2.把新建对并配置好的代码暂存，本地提交一次，产生提交记录

# 暂存当前目录下所有的变化文件，到内存中
git add .
# 本地提交，才真正的被git记录一次在快照磁盘
git commit -m '描述'

远程仓库

将代码保存到远程仓库里面

1
2
3

git remote add origin 远程仓库地址
# 只有第一次需要-u origin master ， 以后直接git push
git push -u origin master

上传成功后可在远程仓库内看到

新旧项目提交和推送

开发代码变化后

保存本地（暂不保存到远程仓库上）

1 2	`git add . git commit -m '提交说明，方便回滚'`

推送到远程的话才执行

1	`git push`

项目克隆拉取

第一次克隆下来

注意: http/https开头的地址, 需要账号密码才能克隆/推送
注意; git@开头的地址, 需要ssh秘钥文件配置好, 才能免账号密码克隆/推送

1	`git clone 远程git仓库地址`

多人协同开发一个项目, 别人推送了, 以后直接拉取更新即可

如果提示有冲突, 打开代码, 找到对方商量合并冲突

前提: 你本地有变化必须暂存提交后, 才能拉取!!!

1	`git pull`

git pull：必须连接远程仓库才能用。可以用于下载完整代码更新本地代码。
git clone：只要你想往本地下远程仓库完整的代码就可以用，不用连接远程仓库（连接了也可以）。不适用于更新本地代码。

项目-注册登录页面准备

准备注册和登录页面组件以及路由

新建注册页面组件，在src/views/register/index.vue中

<template>
  <div>
    Reg.vue
  </div>
</template>

<script>
export default {
  name: 'my-register'
}
</script>

<style lang="less" scoped></style>

新建登录页面组件，在src/views/login/index.vue

<template>
  <div>
    Login.vue
  </div>
</template>

<script>
export default {
  name: 'my-login'
}
</script>

<style lang="less" scoped></style>

在src/router/index.js配置路由表

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
	{
		path:'/reg',
		component: () => import('@/views/register')
	},
	{
		path:'login',
		component: () => import('@/views/register')
	}
]
const router = new VueRouter({
	routes
})

export default router

在App.vue组件中，定义<router-view>

<template>
  <router-view></router-view>
</template>

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

<style lang="less" scoped></style>

注册-标签布局样式布局

注册页面

在src/views/register/index.vue，初始化注册页面的基础布局，并美化样式

<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-register'
}
</script>

<style lang="less" scoped>
.reg-container {
  background: url('../../assets/images/login_bg.jpg') center;
  background-size: cover;
  height: 100%;

  .reg-box {
    width: 400px;
    height: 335px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    box-sizing: border-box;

    .title-box {
      height: 60px;
      background: url('../../assets/images/login_title.png') center no-repeat;
    }

    .btn-reg {
      width: 100%;
    }
  }
}
</style>

查找ElementUI组件库，要完成表单组件的布局，并带上基础的校验功能

1、用户名必须是1-10的大小写字母数字
2、密码必须是6-15的非空字符
3、确认密码必须和密码一致

<!-- 注册的表单区域 -->
<el-form :model="regForm" :rules="regRules" ref="regRef">
  <!-- 用户名 -->
  <el-form-item prop="username">
    <el-input v-model="regForm.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item prop="password">
    <el-input v-model="regForm.password" type="password" placeholder="请输入密码"></el-input>
  </el-form-item>
  <!-- 确认密码 -->
  <el-form-item prop="repassword">
    <el-input v-model="regForm.repassword" type="password" placeholder="请再次确认密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" class="btn-reg">注册</el-button>
    <el-link type="info">去登录</el-link>
  </el-form-item>
</el-form>


<script>
export default {
  name: 'my-register',
  data () {
    const samePwd = (rule, value, callback) => {
      if (value !== this.regForm.password) {
        // 如果验证失败，则调用 回调函数时，指定一个 Error 对象。
        callback(new Error('两次输入的密码不一致!'))
      } else {
        // 如果验证成功，则直接调用 callback 回调函数即可。
        callback()
      }
    }
    return {
      // 注册表单的数据对象
      regForm: {
        username: '',
        password: '',
        repassword: ''
      },
      // 注册表单的验证规则对象
      regRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10的大小写字母数字',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' },
          { validator: samePwd, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

注册功能的实现

完成点击注册按钮的校验和注册功能

核心思想：注册就是把用户输入的账号密码做好校验以后，收集到变量中，调用接口发送给后台，后台代码把他们存储到数据库中，再给前端返回提示

注册按钮绑定事件：

1	`<el-button type="primary" class="btn-reg" @click="regNewUserFn">注册</el-button>`

事件处理函数中，执行表单验证：

methods:{
	// 注册新用户
	regNewUserFn(){
		// 表单认证 
		this.$refs.regRef.validate(valid =>{
			if(!valid) return false
			// 输出得到的内容
			console.log(this.regForm)
		})
	}
}

调用后台接口，在src/api/index.js定义

/**
	*注册接口
	*@param {*} param0 {username:用户名,password：密码,repassword：确认密码}
	*@returns Promise对象
	*/
export const registerAPI = ({username,password,repassword})=>{
	return request({
		url:'/api/reg',
		method: 'post',
		data:{
			username,
			password,
			repassword
		}
	})
	
}

在逻辑页面中引用接口，并在注册逻辑中调用，使用elementUI绑定在Vue全局属性上的$message弹窗方法

// 注册新用户
regNewUserFn(){
	// 进行表单验证
	this.$refs.regRef.validate(async valid=>{
		if(!valid) return false
		// 调用注册接口
		const {data:res} = await registerAPI(this.regForm)
		console.log(res)
		// 注册失败，提示用户
		if (res.code!==0) return this.$message.error(res.message)
		// 注册成功
		this.$message.success(res.message)
		// 跳转到登陆页面
		this.$router.push('/login')
	})
}

注册的业务逻辑：将前端页面标签准备好，点击事件中走完表单验证逻辑，调用接口传参给后台，根据后台返回的code做前端页面结果的展示

登录标签布局和表单验证

在login页面准备好页面标签和样式

登录页面

登录页面和注册页面差不多，标签和校验一样，在src/views/login/index.vue中

<template>
  <!-- 登录页面的整体盒子 -->
  <div class="login-container">
    <!-- 登录的盒子 -->
    <div class="login-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 登录的表单区域 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginRef">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" maxlength="10" minlength="1"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            maxlength="15"
            minlength="6"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-login">登录</el-button>
          <el-link type="info">去注册</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-login',
  data () {
    return {
      // 登录表单的数据对象
      loginForm: {
        username: '',
        password: ''
      },
      // 登录表单的验证规则对象
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  background: url('../../assets/images/login_bg.jpg') center;
  background-size: cover;
  height: 100%;

  .login-box {
    width: 400px;
    height: 270px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    box-sizing: border-box;

    .title-box {
      height: 60px;
      background: url('../../assets/images/login_title.png') center no-repeat;
    }

    .btn-login {
      width: 100%;
    }
  }
}
</style>

实现注册页面，点击登录跳转效果，在src/views/register/index.vue，找到对应标签绑定点击事件跳转路由页面

1	`<el-link type="info" @click="$router.push('/login')">去登录 </el-link>`

实现登录页面，点击注册跳转效果，在src/views/login/index.vue，找到对应标签绑定点击事件跳转路由页面

1	`<el-link type="info" @click="$router.push('/reg')">去注册 </el-link>`

登录功能实现

点击登录按钮，实现登录逻辑

核心思想：通过表单校验，收集用户输入的内容，调用接口带给后台验证没返回响应结果，再给页面响应结果

1	`<el-button type="primary" class="btn-login" @click=loginFn>登录</el-link>`

#vue项目

vue2后台管理总结

http://example.com/2023/06/19/vue2后台管理总结/

作者

AlongSunsea

发布于

2023年6月19日

许可协议

JS中的this 上一篇

杂感下一篇