Vue
Lydia的IT世界是橙色的
研究所工程师,码龄2年,大数据方向
展开
-
shiro - 前后端权限控制详细做法
之前的博客已经对shiro在springboot中的使用做了详细说明,这里继续说明如何具体实施,由于我一直在完善自已的博客,这里做一个笔记。1. 创建表我创建了4个表来对不同身份的用户进行权限管理,主要是通过用户->角色->权限进行管理各个表的样子如下:2. 定义Perm类这里的类与之前创建的perm表相对应@Data@AllArgsConstructor@NoArgsConstructorpublic class Perm implements Serializable原创 2020-11-13 19:24:51 · 619 阅读 · 0 评论 -
vue -前端传递对象到springboot后端,跳转页面并传递参数
由于对前端不是特别熟, vue也就学了一周,javascript也就是简单学了一两天,做个人博客的时候遇到一些不常用的,现在就记一下笔记。1. 构建对象,利用axios传递到后,跳转页面并传参首先构建函数,由于是分页数据,需要在data对象里包含多个参数: //条件分页查询 export const findPage = (params) => { return axios({ method: 'post', url: `/findPage`, data: {原创 2020-11-06 20:41:08 · 8063 阅读 · 0 评论 -
Vue - 后端解析md文件并在前端显示 (代码高亮+md中图片显示)
之前在做的个人博客,前端直接引入markdown文件并显示,当时的做法如下:这里如果用import()动态引入,必须写入静态路径,十分麻烦,难道项目部署上线时我还需要到这里来修改这个静态路径吗?肯定不会,所以我思来想去,还是采用后端解析md文件前端显示的流程,这样一系列文件路径的配置可以放在后端。1. 后端解析md文件1.1 配置md文件存储路径以及相关映射server: #端口 port: 4000 #本地路径 为了映射md中的图片文件,必须填 address: localho原创 2020-11-03 19:23:22 · 5373 阅读 · 0 评论 -
Vue系列 - 从创建vue到项目打包发布全过程总结
1 创建vue 项目1.1 安装基本环境1.安装vue和node.js 的express2.这里假设都安装完npm和node.js环境vue3.0 安装 npm install -g @vue/cli1.2 vue3.0创建项目 vue create my-project cd my-project npm run serve # 1.Manually select features # 2.选择Router,Vuex,CSS Pre-processors,原创 2020-10-23 20:13:34 · 1184 阅读 · 0 评论 -
Vue系列 -直接引入vue.js与axios.js到html中使用
今天学习ElasticSearch相关项目,跟着B站狂神说做了一个京东搜索的实战项目,其中有一个直接将vue.js和axios引入到html中并结合thymeleaf使用的方法挺好,在此做一个记录。1.下载vue.js与axios.jsnpm init首先必须确保先安装node.js环境,新建一个英文的文件夹,取名newvue,然后进入该文件夹打开cmd命令行,输入C:\Users\Administrator\Desktop\new_vue>npm init一路回车,遇到"Is thi原创 2020-10-22 16:53:59 · 4661 阅读 · 1 评论 -
springboot - vue - shiro 登录验证的一些坑
最近开发个人博客,shiro配置后,需要进行登录验证,如要输入用户名或密码不正确,需要进行异常拦截并将结果返回给前端,在此过程有一些坑,在此记录一下:1. 前端登录界面该界面是用vue开发的,登录的el-form: <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label原创 2020-10-21 10:57:33 · 925 阅读 · 0 评论 -
Vue系列-前端条件分页查询全流程演示
最近在做个人博客网站,后端的条件分页查询已经写好(见https://blog.csdn.net/ws6afa88/article/details/108928401),现在来用Vue做前端显示。1. 数据表2. 最终效果3. axios函数所需要的条件分页函数定义在article.js中//条件分页查询 export const findPage = (pageSize,pageNum,title) => { return axios({ method:原创 2020-10-07 22:34:19 · 1839 阅读 · 1 评论 -
Vue系列-import动态引入的坑
最近在开发个人博客,点击文章列表显示相应md文章,效果如下:其中遇到一个坑,我通过在后端请求md文件的path,从而在前端展示markdown文件,具体代码如下:<!--前端展示md文章--><vue-markdown :key="key">{{msg}}</vue-markdown> async getMd(){ //通过id获取md文件的path await getArticleById(this.$route.p原创 2020-10-01 09:29:14 · 7589 阅读 · 1 评论 -
Vue系列-axios请求与拦截综合应用
1.封装axios请求与回复拦截器import axios from 'axios'import {Message} from 'element-ui'//定义axios的baseURL axios.defaults.baseURL = 'http://localhost:8080/api/' // request拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config原创 2020-09-30 00:36:52 · 173 阅读 · 0 评论 -
springboot -前端vue请求文件下载完美解决
1.前端定义下载按钮<template> <div> <el-button @click="downLoad" id="down">下载MD</el-button> </div></template>定义下载方法download() //下载MD文件 async downLoad(){ var id=1; //通过axios.defaults.baseURL获取ba原创 2020-09-25 15:55:08 · 1805 阅读 · 2 评论 -
Vue系列-使用mavon-editor编辑并保存markdown到后台,同时回显图片
1. 安装并配置mavon-editor到Vue项目前端vue,后端springboot实现markdown文件的编辑与上传。主要使用mavon-editor插件1.1 安装npm install mavon-editor --save1.2 配置新建mavenEditor.js // 全局注册 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' impo原创 2020-09-24 02:10:34 · 7344 阅读 · 6 评论 -
axios带参请求-返回HTTP Status 400 -Required String parameter xxx is not present类型异常
最近做一个博客项目,用axios向后端springboot发送带参请求一直报“HTTP Status 400 -Required String parameter xxx is not present类型异常”,经过一番研究,终于解决。1.错误写法前端axios请求函数:import axios from 'axios'export function postMd(value){ return axios.post('/saveMd', { c原创 2020-09-21 15:56:51 · 978 阅读 · 0 评论 -
Vue系列-解决axios请求的跨域问题
vue创建页面时,假如设置的端口是8080,而后台端口是40000,当用axios进行数据交互时就会出现跨域问题。解决的办法很简单,这里做一个笔记,就是在vue项目中与package.json文件同级的目录下新建一个文件vue.config.js,在vue.config.js中进行如下配置module.exports = { devServer: { proxy: { '/api': { //后端请求的地址原创 2020-09-21 00:02:43 · 256 阅读 · 0 评论 -
Vue系列-动态引入markdown文件并显示的完整实现案例
1. 安装html-loader与markdown-loadernpm i html-loader markdown-loader --save安装完成后可以在package.json中看到2. 配置md文件解析规则package.json同级的目录下找到vue.config.js,没有则新建一个,配置加载md文件的规则,如下module.exports = { //配置加载md文件时的解析规则 chainWebpack: config => { config.modu原创 2020-09-20 23:40:36 · 5602 阅读 · 2 评论 -
Vue系列-用<router-link>创建链接传参总结
当我们的博客框架搭好后,点击文章链接可以跳转到文章内容页面。在Vue.js中我们可以用router-link标签来完成这一操作。我们以一个博客页面做为实例,如图:点击列表中的article2,中间区域显示对应的文章信息,同时显示对应的number:2。现在我们来实现这一功能1. 创建router-link列表并传参首先创建路由列表的变量:export default { data(){ return{ routerList:[ {'id':'1','nam原创 2020-09-17 22:11:08 · 570 阅读 · 0 评论 -
Vue系列-创建博客首页布局-step by step
在学习完Vue前端的知识后,我们就来创建一个通用的博客网站首页,里面所用的知识点有:CSSVue的menu组件Router博客的页面如下图:1.创建基本布局首先将页面分为两个部分,左边20%,右边80%;主要用el-aside组件与el-main组件,具体组件导入请查阅Vue官网。<template><!-- 总容器 --><el-container class="home-container" > <!-- 左边栏 -->原创 2020-09-15 22:30:19 · 838 阅读 · 0 评论