整合 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