koa2项目笔记（一）

看月亮的方源
166 阅读4分钟

1. 项目创建流程

1.创建项目

npm init @vitejs/app
  1. 安装项目依赖
 1.安装项目生产依赖
npm add vue-router@next vuex@next element-plus axios -S
2. 安装项目开发依赖  
npm add sass -D
  1. npm install 安装依赖包 --save、–save-dev、-S、-D的区别
  • --save等同于-S （常用，可保存在package.json文件中），-S, --save 安装包信息将加入到dependencies（生产阶段的依赖,也就是项目运行时的依赖，就是程序上线后仍然需要依赖）
  • --save-dev 等同于 -D。-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。）
  1. 区别:在用npm install 单独安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install–save,另一个是 npm install –save-dev，他们表面上的区别是：
  • –save 会把依赖包名称添加到 package.json 文件 dependencies 下。
  • –save-dev 则添加到 package.json 文件 devDependencies下。
  1. 更改端口，vite.config.js
export default defineConfig({
  // 更改端口
  server: {
    host: 'hocalhost',
    port: 8080,
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2.环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环(永远)与 import.meta.env.PROD相反)。
  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

3. 环境变量的配置

在config文件夹下的index.js中配置

/**
 *环境变量配置 
 */

const env = import.meta.env.MODE || 'pord';
const EnvConfig = {
    dev: {//开发环境
        baseApi: '/',
        mockApi: '',
    },
    test: {
        baseApi: '//test.future.com/api',
        mockApi: '',
    },
    pord: {
        baseApi: '/',
        mockApi: '',
    },
}
export default {
    env,
    mock: true,//告诉接口是否支持mock
    ...EnvConfig[env],
}

4. mock模拟数据

登录网站fastmock 模拟数据 image.png

image.png

5.全局挂载封装的axios请求。

image.png 注意：使用setup语法糖获取不到this axios的封装。

/**
 * axiso的封装
*/
import axios from "axios";
import config from "../config";
import { ElMessage } from "element-plus";//报错信息组件
import router from '@/router'
const token_invalid = 'token 认证失败，请重新登录~';
const network_error = '网络请求异常~';
// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 5000,

})

//请求拦截
service.interceptors.request.use((req) => {
    const headers = req.headers;
    if (headers.Authorization) {//判断header里面是否有这个字段
        headers.Authorization = 'Back Jack';
    }
    return req;
})
//响应拦截
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    if (code == 200) {
        return data;
    } else if (code === 40001) {
        ElMessage.error(token_invalid)
        setTimeout(() => {
            router.push('/login')//跳转到登录界面
        }, 20000)

        return Promise.reject(token_invalid)
    } else {
        ElMessage.error(token_invalid)
        router.push('/login')//跳转到登录界面
        return Promise.reject(network_error)
    }
})
/**
 * @params {*} options 请求的配置
 * */
function request(options) {
    options.method = options.method || 'get';
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi;
    } else {
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi;
    }
    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method:item,
            options,
            ...options,
        })
    }
})
export default request;

1.获取全局的封装的请求。

其实通过 Composition API 中的 getCurrentInstance 方法也是有两种方式的

  1. 通过 getCurrentInstance 方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
import { onMounted, getCurrentInstance } from 'vue';

const currentInstance = getCurrentInstance();
 
const { $axios } = currentInstance.appContext.config.globalProperties;
 const getData = async () => {
  data = await $axios({ url: "/one/data" });
  console.log("data", data);
    onMounted(() => {
 getData()
});
  1. 通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。
import { onMounted, getCurrentInstance } from 'vue';

const currentInstance = getCurrentInstance();
 
const { proxy } = currentInstance;
 
const getData2 = async () => {
      data = await proxy.$axios({ url: "/one/data" });
      console.log("data2", data);
};

6. localStroage的封装

1.localStorage的方法：

  • localStorage.getItem(key):获取指定key本地存储的值； // 获取指定key 本地存储数据的值。

  • localStorage.setItem(key,value)：将value存储到key字段； // 获取指定value 存储到key 字段

  • localStorage.removeItem(key):删除指定key本地存储的值； // 删除指定key 本地存储的值

2. value只能是字符串类型和数组

image.png

image.png

3. 项目复杂需要用到相同数据，会造成覆盖，出现问题。所以需要提一个存储空间。

image.png

  • 往命名空间中添加字段。
  • 先取变量，如图：

image.png

  • 最后，重新反序列化一下。

image.png

4. 清空变量

image.png

5.封装 storage.js

/**
 * Storage的二次封装
 * */
import config from "../config";
export default {
    setItem(key, val) {//写入key,value
        let storage = this.getStroage();
        storage[key] = val;//key是变量的时候，必须用中括号包裹一下。才能动态的往里面写变量
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));//反序列化写入
    },
    getItem(key) {
        return this.getStroage()[key];//取到所有的信息，获取key值
    },
    getStroage() {
        // console.log();
        return JSON.parse(window.localStorage.getItem(config.namespace) || '{}');//获取命名空间,获取指定key 本地存储数据的值
    },
    clearItem(key) {
        let storage = this.getStroage();
        delete storage[key];
        //删除完之后，在写一遍
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));//反序列化写入


    },
    clearAll() {
        window.localStorage.clear();
    },
};
avatar
文章
阅读
粉丝