vue 开发笔记

时间：2024-01-24 09:25:30

0.1. vue 开发记录

0.1.1. marked 插件的使用

import marked from "marked";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai-sublime.css";

init(code){
    marked.setOptions({
            renderer: new marked.Renderer(),
            highlight: function(code) {
            return hljs.highlightAuto(code).value;
            },
            pedantic: false,
            gfm: true,
            tables: true,
            breaks: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            xhtml: false
        });
    return marked(code);
}

0.1.2. axios 的使用及封装

* 封装
import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://127.0.0.1:8000';


//http request 拦截器
axios.interceptors.request.use(
config => {
    // 发送数据之前的操作
    
    return config;
},
error => {
    return Promise.reject(err);
}
);


//http response 拦截器
axios.interceptors.response.use(
response => {
    // 返回数据之前的操作

    return response;
},
error => {
    return Promise.reject(error)
}
)


/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/

export function fetch(url,params={}){
return new Promise((resolve,reject) => {
    axios.get(url,{
    params:params
    })
    .then(response => {
    resolve(response.data);
    })
    .catch(err => {
    reject(err)
    })
})
}


/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/

export function post(url,data = {}){
return new Promise((resolve,reject) => {
    axios.post(url,data)
        .then(response => {
            resolve(response.data);
        },err => {
            reject(err)
        })
})
}

/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/

export function patch(url,data = {}){
return new Promise((resolve,reject) => {
    axios.patch(url,data)
        .then(response => {
        resolve(response.data);
        },err => {
        reject(err)
        })
})
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/

export function put(url,data = {}){
return new Promise((resolve,reject) => {
    axios.put(url,data)
        .then(response => {
        resolve(response.data);
        },err => {
        reject(err)
        })
})
}
  • 调用
this.$fetch("/article/").then(response => {
    this.articlelist = response;
});

0.1.3. markdown 标签过滤（使用正则）

    gettext(code) {
    text = codes
        .replace(/(\*\*|__)(.*?)(\*\*|__)/g, "") //全局匹配内粗体
        .replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g, "") //全局匹配图片
        .replace(/\[[\s\S]*?\]\([\s\S]*?\)/g, "") //全局匹配连接
        .replace(/<\/?.+?\/?>/g, "") //全局匹配内html标签
        .replace(/(\*)(.*?)(\*)/g, "") //全局匹配内联代码块
        .replace(/`{1,2}[^`](.*?)`{1,2}/g, "") //全局匹配内联代码块
        .replace(/```([\s\S]*?)```[\s]*/g, "") //全局匹配代码块
        .replace(/\~\~(.*?)\~\~/g, "") //全局匹配删除线
        .replace(/[\s]*[-\*\+]+(.*)/g, "") //全局匹配无序列表
        .replace(/[\s]*[0-9]+\.(.*)/g, "") //全局匹配有序列表
        .replace(/(#+)(.*)/g, "") //全局匹配标题
        .replace(/(>+)(.*)/g, "") //全局匹配摘要
        .replace(/\r\n/g, "") //全局匹配换行
        .replace(/\n/g, "") //全局匹配换行
        .replace(/\s/g, ""); //全局匹配空字符;
    return text;
    }
}

相关文章