vue 开发笔记

vue 开发记录

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);
}

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)
        })
})
}

• 在main.js中注册方法

import {post,fetch,patch,put} from './axios'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

• 调用

this.$fetch("/article/").then(response => {
    this.articlelist = response;
});

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;
    }
}

vue 使用mockjs 模拟服务器数据

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }

    return {
        articles: articles
    }
}

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData);