Vue+Element实训：后台管理系统

瞧一乔一瞧

已于 2023-03-30 21:00:58 修改

阅读量1.4k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-03-28 16:41:08 首次发布

本文链接：https://blog.csdn.net/ly1010yl/article/details/129819418

版权

Vue+Element实训：后台管理系统–1

环境配置

安装脚手架：
创建项目：vue create my-app1
提示框选第三项自定义
选择所需配置项：选择Babel Typescript Router Vuex CSS-processors Linter/Formatter
选择版本：3.x
剩余选项全部回车选择默认
此时my-app1配置好
进入my-app1文件夹，用yarn serve运行（诺未安装yarn 选择使用npm run serve）：

初级准备

去除src/App.vue的组件内容注意留着（是一个路由接口）
删除components、views的所有vue文件
创建自己的vue文件：在views文件夹下再创建login文件夹创建LoginView.vue文件用于实现登录页面实现（注意首字母的大写）
在LoginView里面创建vue基本的结构
在router/index.ts实现路由规则配置

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [

{
path: '/login',
name: 'login',

    component: () => import( '../views/login/LoginView.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

yarn serve重新配置

修改默认样式

配置css主文件入口方便后期进行样式的设置
设置css住入口文件配置在vue.config.js中设置
新建styles文件夹新建main.scss主样式文件写如初始化样式
引入到主样式文件中

使用Element项目继承

进入Element官网：https://element.eleme.cn/#/zh-CN
在官网中可以找到Element的安装方法：
- 指南->安装
- npm install element-plus --save
在官网中可以找到Element的引用方法：
- 指南->快速开始
- 完整引用：引用简单但不建议

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

建议按需引用：
- 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
- npm install -D unplugin-vue-components unplugin-auto-import
- 在vue.config.js写入：

const { defineConfig } = require('@vue/cli-service')

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  transpileDependencies: true,
  // 设置插件配置
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
})

登录界面实现

登录注册按钮切换

创建切换数据在login下的LoginView.vue
在页面循环数据并且设置点击调用函数进行切换
创建切换模块函数
书写样式

element表单插入

插入element提供的自定义表单
修改输入框绑定变量：邮箱–username 密码–pasword 确认密码–passwords
修改触发验证的变量设置：username–CheckUser password–validatePass passwords–validatePass2
修改邮箱验证：
- 修改邮箱输入框的prop属性为username
- 修改对应触发函数
修改密码验证：
- 修改邮箱输入框的prop属性为password
- 修改对应触发函数
修改确定密码验证：
- 修改邮箱输入框的prop属性为passwords
- 修改对应触发函数
给按钮绑定事件：判定model是否为login是的话为登录页否则为注册页
注意登录时没有确定密码在登录时跳过所以在确定密码时添加：如果model.value==login那么callback()

封装工具库

邮箱的验证以及密码的验证在很多地方需要重复利用
需要运用封装工具库来实现功能的重复运用
新建一个utils文件夹用于容纳工具
新建js代码用于容纳代码实现邮箱的验证和密码的验证
此时在LoginView就可以使用封装的工具库

axios封装与拦截器

拦截器：
- 请求拦截器：在请求发送前进行的操作
- 响应拦截器：在接收到响应后进行的操作
- 安装：
  - 官网：https://axios-http.com/
  - 在终端：npm install --save axios
  - 在utils文件夹下新建service文件用于容纳拦截器

import axios from "axios"

// 创建axios实例
const service=axios.create()
//请求拦截与响应拦截
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default service

axios封装：
新建api文件夹实现请求的封装
新建Link.js封装相关数据请求：引进拦截器用request方法实现请求的发送

json-server

json-server提供数据实现后台
安装： npm install -g json-server
查看版本：json-server --version
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABf2G1kY-1679992792633)(…%2F…%2F…%2F…%2FPictures%2FSnipaste_2023-03-25_16-39-30.png)]
可以创建模拟数据：创建mock文件夹写一个data.json 写一个one的数据

{
    "one":[
        {"name":"LYQ"},
        {"name":"ZZQ"},
        {"name":"SHP"},
        {"name":"WZY"},
        {"name":"CZM"}
    ]
}

启动：
- cd到mock文件夹
- json-server --watch data.json --port
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zrYSyRJ2-1679992792634)(…%2F…%2F…%2F…%2FPictures%2FSnipaste_2023-03-26_20-01-24.png)]
- 如果觉得指令太长：可以在package.json文件中在scripts节点中设置你的启动命令
- 此时：只需npm run 启动命令即可此处我就可以：npm run mock

 "mock": "json-server --watch ./src/mock/data.json --port 8888",

在Url.js可以import到mock 封装请求地址

let apiUrl={
    one: "http://localhost:8888/one"
}

export default apiUrl

在LoginView.vue引入link和Urlapi
在提交表单就可以使用link和urlapi来实现http://localhost:8888/one的访问：

vue环境部署与baseurl配置

环境变量

在开发的时候一般会有是三个环境：开发环境测试环境线上环境

vue 中有个概念就是模式，默认先vue cli 有三个模式

development开发环境模式用于 vue-cli-service serve
production生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test测试环境模式用于 vue-cli-service test:unit

但是往往开发的时候可能不止有三种：

本地环境（local）
开发环境（development）
测试环境（devtest）
预发布环境（beta）
生产环境（production）

创建不同环境变量文件

通过为.env文件增加后缀来设置某个模式下特有的环境变量。

1.在项目根路径下设置新建对应文件 .env.development（开发环境文件） .env.production（生产环境文件）.env.devtest（测试环境文件）

2.在每个文件写入如下内容(VUE_APP_随便写）

VUE_APP_XIAOMING = "开发模式"

package.json环境对应的执行语句

  "scripts": {
    "serve": "vue-cli-service serve",//开发模式
    "build": "vue-cli-service build",//生产模式
    "dev_test_build": "vue-cli-service build --mode development_test",//测试模式
    "lint": "vue-cli-service lint"

  },

使用变量process.env.你的内容即可得到

import { reactive, ref,onMounted} from "vue";

onMounted(()=>{

    console.log(process.env.VUE_APP_XIAOMING);

   

})

默认请求地址baseurl

因为我们可以配置不同的环境变量那么我们就可以在设置请求的时候根据不同的环境来设置不同的请求地址

1.在开发环境文件中配置我们的请求（今后开发的时候可以在其他配置文件中配置你的请求）

VUE_APP_XIAOMING = "开发模式"
VUE_APP_API = "http://localhost:8888"

2.在封装的拦截器文件中配置baseURL

let axiosurl = ""
// 如果为开发模式的话执行url
if(process.env.NODE_ENV === 'development' ){
  axiosurl=process.env.VUE_APP_API
}else{
  // 否则设置成其他的模式（这里今后有很多个判断）
  axiosurl=process.env.VUE_APP_API
}

// 创建axios 赋值给常量service 
const service = axios.create({
  baseURL: axiosurl
});

3.在今后的请求中直接写请求的路由地址就行

    // 发送请求 url中请求地址前缀已经在baseURL中配置了
      link("/one").then((ok)=>{
        console.log(ok)
      })
# Vue+Element实训：后台管理系统--1
## 环境配置
- 安装脚手架：
- ![Snipaste_2023-03-23_16-56-21.png](..%2F..%2F..%2F..%2FPictures%2FSnipaste_2023-03-23_16-56-21.png)
- 创建项目：vue create my-app1
- 提示框选第三项自定义
- 选择所需配置项：选择Babel Typescript Router Vuex CSS-processors Linter/Formatter
- 选择版本：3.x
- 剩余选项全部回车选择默认
- 此时my-app1配置好
- 进入my-app1文件夹，用yarn serve运行（诺未安装yarn 选择使用npm run serve）：
- ![Snipaste_2023-03-23_17-02-32.png](..%2F..%2F..%2F..%2FPictures%2FSnipaste_2023-03-23_17-02-32.png)
## 初级准备
 - 去除src/App.vue的组件内容 注意留着<router-view/>（是一个路由接口）
 - 删除components、views的所有vue文件
 - 创建自己的vue文件：在views文件夹下再创建login文件夹 创建LoginView.vue文件 用于实现登录页面实现（注意首字母的大写）
 - 在LoginView里面创建vue基本的结构
 - 在router/index.ts实现路由规则配置
```js
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [

{
path: '/login',
name: 'login',

    component: () => import( '../views/login/LoginView.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

yarn serve重新配置