vue和springboot整合

整合 vue项目中直接运行npm run build. 在生成的dist目录下的文件全部拷贝到springboot项目资源目录下的static文件夹下。

一:vue

文档:https://cn.vuejs.org/v2/guide/index.html

总结一下常用的一些东西, vue使用脚手架自动生成项目结构

项目结构是这样:

1.vue实现全选

1⃣️单选:

input标签:其中sceneCheckData在data中定义:sceneCheckedData=[]

每次点击的时候会将绑定的scene.id加入到sceneCheckData中,再次点击会将scene.id从sceneCheckedData中移除

说明:v-if是控制其是否显示,这里不用管,主要是自己的业务中需要才这么做的;现在自己的业务中由于一个场景可能含有多条用例,需要实现只有场景中的第一个用例才显示场景名。

2⃣️全选:

全选按钮:

method中的方法为checkAll:

逻辑是:判断全选的按钮是否勾选,如果是,将当前的checkbox全部勾选,如果是取消全选,将sceneCheckData清空

注意:有这样的情景,当前选择全选按钮,如果再增加一个场景的话,全选按钮还是被选中,所以需要监听当前场景,保证在增加场景的时候去掉全选按钮状态:

监听在watch中实现:

二:vue激活状态跟随选中标签

如果点击选择标签,method中的chooseTag方法会将activeTag设置为当前标签的名字;activeTag在script下的data中。

三:vue中路由的使用

将路由信息写入一个配置文件:如:

其中path:代表访问路径;name:这个路径的名字(后面用到), componet:是那个组建

1⃣️在main.js中引入路由和路由配置文件:import VueRouterfrom 'vue-router';import {routes} from './router/routing';

//使用路由

Vue.use(VueRouter)

然后在new vue中引入router

使用:

to:代表点击这个标签的时候走的是那个路由

全局路由:比如控制没有登陆的用户跳转到登陆页面

四,vue中状态管理

Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:

main.js中引入:import Vuexfrom 'vuex'

 Vue.use(Vuex);

将状态配置写入一个文件:

比如是文件aa. 引入配置文件import {store}from 'aa'

new vue中加入

State负责存储整个应用的状态数据;使用this.$store.state直接获取状态

mutations更改状态:this.$store.commit("xxx")

actions也可更改状态,通过触发mutations实现,可以触发异步操作,this.$store.dispatch("xxx")

getters获取状态:this.$store.getters.xxx;

五:axios:

        axios并不是vue插件,所以不能使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。为了解决这个问题,可以在引入 axios 之后,通过修改原型链,来更方便的使用。

main.js中引入:import axios from 'axios'; 使用原型:Vue.prototype.axios = axios

设置默认url:axios.defaults.baseURL ="http://" + hostName;

设置携带cookie:axios.defaults.withCredentials =true;

get请求:  axios({

url:"/get",

method:"get",

params:{

key1:value1});

post请求:axios({

url:"/post",

method:"post",

data:{

xxx}

});

例子:

springboot

一:mybatis三剑客

1⃣️自动生成数据库表和类的映射,生成mapper文件,生成xml文件

pom文件中引入包:

自动下载好jar包后,idea中会有相应的插件

在资源文件下建立文件:generatorConfig.xml

内容为:https://pan.baidu.com/s/1MHS_qKyqy0ir_zNzNDy7FA

配置好相应路径后,直接用行即可,会自动生成基础的增删改查语句

2⃣️代码跳转工具 idea中plugins中搜索mybatis

点击前面的箭头会跳到相应的xml文件处或者mapper处

3⃣️mybatis分页插件

使用:PageHelper.startPage(pageNum, defaultPageSize);第一个参数是页数,开始是第一页

二:重新实现quartz定时任务

1⃣️自定义一个注解:

2⃣️定义一个基础父类

3⃣️自定义任务只需实现Custom,并使用@JobConfig注解,重写execute方法

4⃣️定义任务管理类

5⃣️实现ApplicationContextAware 容器启动时加载任务类并启动

6⃣️启动应用:

三:重新实现shiro安全框架

1⃣️将用户认证信息session保存到redis中,继承AbstractSessionDAO

doCreate:为用户创建sessionID

doReadSession:根据sessionId获取session

update:更新session

2⃣️重写sessionManager,解决多次读取的问题

3⃣️将用户角色和权限信息存到redis,实现Cache

4⃣️缓存管理使用自定义的缓存实现,实现CacheManager

5⃣️最重要的认证和鉴权实现, 继承AbstractSessionDAO

用户认证:从数据库中查找用户是否存在

用户鉴权:

6⃣️:配置,由于业务原因,不配置登陆成功和错误相关页面,如果出错直接给前端返回错误码,可以自己进行配置

配置 ShiroFilterFactoryBean

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,979评论 1 4
  • 昨天是儿童节,没有出乎意料,我离这个节日那么近,却又那么远。 哪怕还有一颗童心,儿童节也过不出当初的味道,更多的只...
    复角度的生活阅读 298评论 0 2
  • 285期3D推荐(上期独胆1、独跨2中、个位1、百位1中) 独胆2 二胆2.5 三胆2.4.5 定位百:...
    fedb3226e1a3阅读 322评论 0 0
  • 还是把本分做好 对得起之前的承诺 二十多岁了都 太渣了怎么过日子 少看直播少打游戏 看看书看看综艺都不为过 要活的...
    Gas阅读 281评论 0 0