目录

一、完成项目历程

1、构建项目

2、项目的自定义选项

3、 封装组件

4、配置对应页面的路由

5、从后端调接口的方式

二、引入Element Plus、Echarts、国际化组件

1、Element Plus安装

2、Echarts安装

 3、国际化

 三、介绍项目以及展示

1、项目是基于Vue3、Element Plus、Ts、vite完成等完成

2、总共分10多个页面的一个后端管理系统

3、页面展示效果

---

一、完成项目历程

1、构建项目

npm create vite 项目名

2、项目的自定义选项

3、 封装组件

3.1主页面写在compoent文件里

3.2子页面写在view文件里

4、配置对应页面的路由

在router文件 index.ts文件里

import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../components/LoginView.vue'
import BackstageView from '@/components/BackstageView.vue'
import StageHomePage from '@/views/StageHomePage.vue'
import OrderManage from '@/views/OrderManage.vue'
import ProductList from '@/views/ProductList.vue'
import ProductAdd from '@/views/ProductAdd.vue'
import ProductClass from '@/views/ProductClass.vue'
import ShopManage from '@/views/ShopManage.vue'
import AccountList from '@/views/AccountList.vue'
import AccountAdd from '@/views/AccountAdd.vue'
import AccountCenter from '@/views/AccountCenter.vue'
import AccountUpdatePwd from '@/views/AccountUpdatePwd.vue'
import GoodsStats from '@/views/GoodsStats.vue'
import OrderStats from '@/views/OrderStats.vue'const routes = [{path: '/',component: LoginView,},{path: '/login',component: LoginView,meta: { title: '登录页' },},{path: '/backstage',component: BackstageView,children: [//后端首页{path: '/home',component: StageHomePage,meta: { title: '后台首页' , role:['super','normal']},},//订单管理的路由{path: '/order',component: OrderManage,meta: { title: '后台首页' , role:['super','normal']},},//订单编辑{path: '/edit',name: 'edit',meta: { title: '后台首页' , role:['super']},component: () => import('@/views/OrderEdit.vue'),},//商品管理{path: '/product/list',component: ProductList,meta: { title: '后台首页' , role:['super','normal']},},{path: '/product/add',component: ProductAdd,meta: { title: '后台首页' , role:['super']},},{path: '/product/class',component: ProductClass,meta: { title: '后台首页' , role:['super','normal']},},//店铺管理{path: '/shop',component: ShopManage,meta: { title: '后台首页' , role:['super','normal']},},//账号管理{path: '/user/list',component: AccountList,meta: { title: '后台首页' , role:['super','normal']},},{path: '/user/add',component: AccountAdd,meta: { title: '后台首页' , role:['super','normal']},},{path: '/user/center',component: AccountCenter,meta: { title: '后台首页' , role:['super','normal']},},{path: '/user/updatepwd',component: AccountUpdatePwd,meta: { title: '后台首页' , role:['super','normal']},},//销售统计{path: '/goods/stats',component: GoodsStats,meta: { title: '后台首页' , role:['super']},},{path: '/order/stats',component: OrderStats,meta: { title: '后台首页' , role:['super']},},],},
]//递归控制权限路由
function AccessRoutes(routes: any[]) {return routes.filter((item: { meta: { role: string[] }; children: any[] }) => {if (item.meta?.role) {if (item.meta.role[0] === 'normal') {if (item.children) {console.log(item); //一级 把符合条件的返回出去item.children = item.children.filter(item1 => {if (child.meta?.role) {if (item1.meta.role[0] === 'normal') {// 递归调用处理三级路由if (item1.children) {item1.children = AccessRoutes(item1.children);}console.log(item1);return true;} else {return false;}} else {return false;}})}return true;} else {return false;}} else {return false;}})
}console.log(AccessRoutes(routes));const router = createRouter({history: createWebHistory(),routes,
})export default router

5、从后端调接口的方式

5.1使用封装axios

新建api/users/index.ts

import request from '@/utils/request'
import { ElMessage } from 'element-plus'
/*** 登录接口异步方法* @param data 请求参数* @returns*/
export const fetchLogin = async (data: any) => {// 在这里可以写一些其它的逻辑，比如（对请求参数做一些特殊处理）const res = await request.post('/users/checkLogin', data)if (res.code === 0) {// 成功的提示ElMessage.success(res.msg)} else {// 失败的提示ElMessage.error('失败')}return res
}//订单接口的方法
export const fetchOrderList = async (data: any) => {const res1 = await request.get('/order/list', data)return res1
}//订单详情接口方法
export const fetchOrderdetail = async (data: any) => {const res5 = await request.get('/order/detail', data)return res5
}//订单修改接口方法
export const fetchOrderdedit = async (data: any) => {const res6 = await request.post('/order/edit', data)return res6
}//商品列表接口方法
export const fetchGoodList = async (data: any) => {const res2 = await request.get('/goods/list', data)return res2
}//商品修改接口方法
export const fetchGoodedit = async (data: any) => {const res3 = await request.post('/goods/edit', data)return res3
}//删除商品接口
export const fetchGooddel = async (data: any) => {const res3 = await request.get('/goods/del', data)return res3
}//添加商品接口
export const fetchGoodadd = async (data: any) => {const res4 = await request.post('/goods/add', data)return res4
}//商品分类接口
export const fetchGoodclass = async (data: any) => {const res7 = await request.get('/goods/catelist', data)return res7
}//商品分类修改接口
export const fetchGoodeditcate = async (data: any) => {const res8 = await request.post('/goods/editcate', data)return res8
}//商品分类删除接口export const fetchGoodeddelcate = async (data: any) => {const res9 = await request.get('/goods/delcate', data)return res9
}//商品分类添加接口
export const fetchGoodaddcate = async (data: any) => {const res9 = await request.post('/goods/addcate', data)return res9
}//店铺详情接口 get
export const fetchShopinfo = async (data: any) => {const res9 = await request.get('/shop/info', data)return res9
}//店铺修改接口
export const fetchShopedit = async (data: any) => {const res10 = await request.post('/shop/edit', data)return res10
}//账号列表接口
export const fetchUserlist = async (data: any) => {const res11 = await request.get('/users/list', data)return res11
}//账号添加接口 （account pwd userGroup）
export const fetchUseradd = async (data: any) => {const res10 = await request.post('/users/add', data)return res10
}//账号批量删除 （ids）
export const fetchUsersdel = async (data: any) => {const res10 = await request.get('/users/batchdel', data)return res10
}//账号删除 (id)
export const fetchUserdel = async (data: any) => {const res10 = await request.get('/users/del', data)return res10
}//账号修改
export const fetchUseredit = async (data: any) => {const res11 = await request.post('/users/edit', data)return res11
}//核对账号密码
export const fetchUsercheckoldpwd = async (data: any) => {const res11 = await request.get('/users/checkoldpwd', data)return res11
}//导出账号
export const fetchUserexport = async (data: any) => {const res11 = await request.get('/users/export', data)return res11
}//密码修改
export const fetchUsereditpwd = async (data: any) => {const res11 = await request.post('/users/editpwd', data)return res11
}//首页报表接口
export const fetchOedertotaldata = async (data: any) => {const res12 = await request.get('/order/totaldata', data)return res12
}//订单报表接口
//http://127.0.0.1:5000/order/ordertotal
export const fetchOrdertotal = async (data: any) => {const res13 = await request.get('/order/ordertotal', data)return res13
}//商品报表接口
export const fetchGoodstotal = async (data: any) => {const res13 = await request.get('/goods/goodstotal', data)return res13
}//账号信息  http://127.0.0.1:5000/users/info
export const fetchUsersinfo = async (data: any) => {const res13 = await request.get('/users/info', data)return res13
}//修改头像
export const fetchUseravataredit = async (data: any) => {const res13 = await request.get('/users/avataredit', data)return res13
}

 新建utils/request.ts

import axios from 'axios'
import qs from 'qs'// 创建axios的实例
const instance = axios.create({baseURL: 'http://127.0.0.1:5000', // 请求的基路径timeout: 5000, // 请求超时时间
})
// 拦截器，对请求和响应做统一处理
// 请求拦截器：对前端的所有请求做统一处理，比如统一给所有请求添加请求头
instance.interceptors.request.use((config: any) => {// 对所有请求做统一处理（给鉴权接口添加鉴权字段）const token = JSON.parse(localStorage.getItem('t_k')!)// console.log(token);if (token) {config.headers.Authorization = token}return config},(err) => {console.error(err)},
)// 响应拦截器：对后端的所有响应结果做统一处理，比如异常处理
instance.interceptors.response.use((response: any) => {// TODO: 在这里判断接口异常处理逻辑（比如token失效后跳转到登录页）// console.log(response)return response.data},(err) => {// TODO: 在这里判断接口网络异常处理逻辑（比如网络超时、网络错误）console.error(err)},
)// 创建基于restful接口规范的异步请求方法
const get = async (url: string, params: any = {}) => {return await instance.get(url, { params })
}
/*** post请求方法* @param url 请求地址，eg：/users/list* @param data 请求参数，eg：{ account: '', password: '' }* @returns*/
const post = async (url: string, data: any): Promise<any> => {return await instance.post(url, qs.stringify(data))
}
const put = () => {}
const del = () => {}export default {get,post,put,del,
}

5.2在组件中使用

//首先import引入调对应接口的方法//登录的接口
import { fetchLogin } from '@/api/users';async function login() {try {const res = await fetchLogin({account: username.value,password: password.value,});console.log('登录的信息', res);} catch (error) {console.log('报错', error);}
}

二、引入Element Plus、Echarts、国际化组件

Element Puls官网https://element-plus-docs.bklab.cn/zh-CN/guide/quickstart.html

1、Element Plus安装

npm install element-plus --save

1.2、全局引入

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

1.3、vite配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

 1.4、测试使用

//引入
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'<el-button>Default</el-button>

2、Echarts安装

2.2.1、安装

npm install echarts --save

2.2.2、全局引入

import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';const app = createApp(App);
app.config.globalProperties.$echarts = echarts;
app.mount('#app');

2.2.3、组件中使用

<template><div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template><script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';const chartDom = ref(null);
let chartInstance = null;onMounted(async () => {await nextTick();chartInstance = echarts.init(chartDom.value);const option = {title: { text: 'ECharts 示例图表' },tooltip: {},xAxis: { data: ["类别1", "类别2", "类别3", "类别4", "类别5"] },yAxis: {},series: [{ name: '数据系列', type: 'line', data: [120, 200, 150, 80, 70] }]};chartInstance.setOption(option);
});onUnmounted(() => {if (chartInstance != null && chartInstance.dispose) {chartInstance.dispose();}
});
</script>

 3、国际化

i18n官方文档https://kazupon.github.io/vue-i18n/zh/introduction.html

1. 安装vue-i18n: 使用npm或yarn来安装vue-i18n。对于Vue 3项目，确保安装的是9.x版本。

   npm install vue-i18n@9 --save
   # 或者
   yarn add vue-i18n@9

2. 定义语言包: 在项目中创建一个locales文件夹，用于存放不同语言的资源文件。例如，创建en.js和zh.js分别存放英文和中文的语言资源。

   // locales/en.js
   export default {message: {hello: 'Hello World!'}
   };// locales/zh.js
   export default {message: {hello: '你好，世界！'}
   };

3. 创建i18n实例: 在main.js或单独的配置文件中创建vue-i18n实例，并配置语言资源和默认语言。

   import { createApp } from 'vue';
   import App from './App.vue';
   import { createI18n } from 'vue-i18n';
   import enUS from './locales/en-US.json';
   import zhCN from './locales/zh-CN.json';const i18n = createI18n({locale: 'zh-CN', // 默认语言fallbackLocale: 'en-US', // 备用语言messages: {'zh-CN': zhCN,'en-US': enUS}
   });const app = createApp(App);
   app.use(i18n);
   app.mount('#app');

4. 在组件中使用: 在组件中使用国际化文本非常简单，只需使用$t方法。

   <template><div><p>{{ $t('message.hello') }}</p></div>
   </template>

5. 动态切换语言: 你可以通过修改i18n.global.locale来动态切换语言。

   methods: {changeLanguage(newLocale) {this.$i18n.locale = newLocale;}
   }

 三、介绍项目以及展示

1、项目是基于Vue3、Element Plus、Ts、vite完成等完成

2、总共分10多个页面的一个后端管理系统

3、页面展示效果