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