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

巴特西

vue 开发笔记

vue 开发记录

marked 插件的使用

axios 的使用及封装

markdown 标签过滤（使用正则）

vue 使用mockjs 模拟服务器数据

最新文章

热门文章