梦学谷项目(上)

Posted 2021-05-18 李耀书

梦学谷项目(上)

项目分析：

​ 梦学谷项目是高度类似于电商后台管理项目的，都是通过前后端分离实现的类似电子商务管理项目。

项目技术栈

1. Vue，
2. Vue-Router
3. Element-UI框架
4. Axios的应用
5. mock.js假数据的应用

项目技术分析：

1、登录鉴权

在用户登录时，通过正则匹配的方式，以及路由守卫的方式进行鉴权

2、组件拆分

页面初始拆分为多个组件

1. Login登录页
2. Home主页面
3. welcome欢迎页面。

​ 在Home主页中，通过UI框架的布局容器，进行布局。可以很轻松地分为header头部，asside侧边栏，以及content内容区。

​ 每个单独的模块对应的是一个单独的组件，点击侧边栏，跳转到对应的模块。

3、UI框架的使用

借助babel-plugin-component,实现按需引入

npm install babel-plugin-component -D

在main.js中或新建文件中实现按需引入

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

4、Vue-Router的应用

​ 根据项目需求，通过redirect实现重定向功能

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [{
    path: "/Home",
    component: () => import( /* webpackChunkName: "about" */ "../views/Home.vue"),
    children: [{
      path: "/Welcome",
      component: () => import( /* webpackChunkName: "about" */ "../components/Welcom.vue"),
    },
export default router;

5、Axios的封装

• 首先先对基准路径进行封装。

//导入axios依赖包
import axios from "axios";
//2. 创建axios的实例化对象
const Server = axios.create({
    baseURL: 'http://mengxuegu.com:9999/pro-api/',//后期请求接口的基地址
    timeout: 5000,//5s超时时间
});
//3. 设置请求拦截器配置
Server.interceptors.request.use(function (config) {//成功的时候
    console.log(config);
    config.headers.Authorization = sessionStorage.token;
    return config
}, function (error) {//失败
    return Promise.reject(error);
})
//4. 配置相应拦截器的信息
Server.interceptors.response.use(function (response) {
    if (response.status == 200) {
        return response.data;
    }
    return response;
}, function (error) {//失败
    return Promise.reject(error);
});
//5. 导出模块
export default Server;

• 根据对应的模块封装不同的API，

在API中设置请求方式以及路径。

比如这样：

import request from '../utils/index'
export default {
    goodsList() {
        return request({
            url: '/host',
            method: 'get',
        })
    },
    dele(id) {
       return request({
            url: `/del/${id}`,
            method: 'delete'
        })
    },
    editForm(){
        return request({
            url:'/editt',
            method:'post'
        })
    },
    searchForm(){
        return request({
            url:'/search',
            method:'put'
        })
    }
}