Projects

General Backstage Management System

General Backstage Management System

A pure static front-end Web application based on Vite + Vue3

This is a pure static front-end Web application based on Vite + Vue3. It relies on Mock.js to simulate all kind of data from the back end locally. Corresponding sidebar menus will be show when the user log in with different permissoin.

In the current system:

• Default administrator account: admin, password:123456
• Default member account: Apple，密码：123456

Deploy in GitHub pages: https://outofforbit.com/backstage

Deploy in Gitee pages: https://w-junhui.gitee.io/backstage

Technology stack

1. Build the UI interface by using Element Plus:

   使用 Vue 3 的 setup 语法构建项目的普通组件和路由组件

2. Build the front-end router system by using Vue Router 4:

   • 使用 Hash 路由模式，在路由配置的 component 属性中使用 () = > import() 组件导入语法实现路由懒加载
   • 在用户登录后返回的侧边栏菜单对象中，包含了设置动态子路由的 path、name、component的相关属性，因此在管理菜单数据的 mutation 中，通过全局路由对象提供的 addRoute() 方法动态添加子路由，同时使用 Vite 的动态导入模块语法 import.meta.glob 实现动态路由懒加载
   • 设置全局前置守卫，处理登录前通过修改路径的非法访问，以及处理登录后访问不存在路径

3. Simulate data from the back end locally by using Mock.js:

   • 封装 Mock.js 模块，使用正则表达式匹配请求路径并拦截项目中的 Ajax 请求
   • 根据项目的不同功能模块，封装不同的数据请求函数，在拦截请求后进行调用以返回正确的数据

4. Send Ajax requests by using Axios, and encapsulate Axios as a module:

   • 通过请求/响应拦截器统一处理项目中所有请求的重复步骤，包括在请求前自定义携带 header、处理请求失败的反馈信息、解构赋值请求成功的参数对象以简化嵌套，方便赋值
   • 根据请求携带参数中定义的 mock 布尔值，可选择是否使用 fastmock 的模拟数据
   • 根据已封装好的 Ajax 请求环境配置文件，判断在开发环境、测试环境、生产环境下应使用的请求根路径，防止生产环境使用 fastmock
   • 将项目中的所有 Ajax 请求函数封装为统一的接口模块 api.js，在该模块导入已二次封装的 request 函数，实现统一管理项目所有的请求接口

5. Manage the data by using Vuex 4, establish the data communitation among different components.

   • 在用户登录后会返回一个的侧边栏菜单对象，通过提交 mutation 将其存储至 Vuex 中，以供侧边栏动态设置菜单项以及面包屑动态设置路径名
   • 在点击侧边栏菜单后会返回一个激活菜单栏对象，通过提交 mutation 将其存储至 Vuex 中，供路由组件显示区顶部的 tag 标签使用
   • 通过 localStorage 持久化登录后的侧边栏菜单对象、激活菜单对象，并在 main.js 中提交对应的 mutation 以防止页面刷新后 Vuex 数据丢失引起的侧边栏、面包屑、tag 标签数据丢失

6. Render homepage's data charts by using Echarts.js:

   • 对首页中具有 X/Y 轴的图表（折线图、柱状图）进行基础的通用对象配置，对饼状图单独定义配置对象
   • 处理请求返回的 Mock 图表源数据，并将其与每个图表的配置对象结合以渲染图表

7. Save/remove login credentials token to/from the browser cookie by using vue-cookies

8. Load the lottie animation in the format of JSON by using vue3-lottie, which can play the Web page animation in a good performance.

 

---

 

Urban Weather Forecast in China

Urban Weather Forecast in China

Provides a one-week weather forecasts for cities in China

Technology stack

1. A Vue 3 Web application built by Vite.
2. Organized the UI interface by using Element Plus and deconstructed it by three components: CityPanel.vue、Days.vue、Footer.vue. Enable the responsive layout by using media query.
3. By comparing the city suffixes ('市', '县', '自治州', '岛'), the legal city name is determined to be a request parameter. To make the request easier, I set the Axios as the Vue global property $http，and request/response interceptor is also set at the same time.
4. Used the Less to write the styles and applyed some icons from 阿里巴巴矢量图标库

Deploy in Gitee pages: https://w-junhui.gitee.io/weather-forecast