springboot+vue 组件传值和路由传参

sprinboot

需要下载mabatisx 和vue-js

1，PageHapper 是 mybatis的一个分页排序插件

//mapper配置文件模糊查询

<if test="name != null and name != ''"> and name like concat('%',#{name},'%') </if>

配置依赖

com.github.pagehelper

pagehelper-spring-boot-starter

1.3.0

2，Swagger 接口文段生成工具，也可以用来测试接口

io.springfox

springfox-boot-starter

3.0.0

访问地址：http://localhost:8080/swagger-ui/index.html

@ApiModel("部门")

@ApiParam("查询部门id")

@ApiOperation("根据id查询部门")

@Api(tags = "部门接口")

returnBean

package cn.hx.property.entity.vo; public class ReturnBean { private boolean success;//成功否 private String message;//消息 private Object data;//数据 public static ReturnBean ofSuccessReturnBean(Object data){ ReturnBean returnBean=ofSuccessReturnBean(); returnBean.setData(data); return returnBean; } public static ReturnBean ofSuccessReturnBean(){ return ofReturnBean(true,"成功"); } public static ReturnBean ofReturnBean(boolean success,String message){ ReturnBean returnBean=new ReturnBean(); returnBean.setMessage(message); returnBean.setSuccess(success); return returnBean; } public static ReturnBean ofReturnBean(boolean success,String message,Object data){ ReturnBean returnBean = ofReturnBean(success, message); returnBean.setData(data); return returnBean; } private ReturnBean() { } public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } @Override public String toString() { return "ReturnBean{" + "success=" + success + ", message='" + message + '\'' + ", data=" + data + '}'; } }

@MapperScan("cn.hx.property.dao")

配置类

@Configuration//申明当前类是一个配置类 public class SwaggerConfig { @Bean//往spring容器里面加一个对象 public Docket getDocket(){ ApiInfo apiInfo=new ApiInfoBuilder().title("物业管理系统").description("这是一个小区物业管理系统，目前正在开发，作者是xxx").build(); return new Docket(DocumentationType.OAS_30).apiInfo(apiInfo) .select() .apis(RequestHandlerSelectors.basePackage("cn.hx.property.controller"))//指定那些包下面的控制器生成文档 // /*匹配单层路径 /** 匹配多层路径 ？ 匹配一个字符 .paths(PathSelectors.ant("/**")).build(); } }

分页aop

@Component @EnableAspectJAutoProxy @Aspect public class PageAspect { @Around("execution(* cn.hx.property.service.impl.*.queryAll(..))") public Object pageAOP(ProceedingJoinPoint joinPoint) throws Throwable { ServletRequestAttributes requestAttributes=(ServletRequestAttributes) RequestContextHolder.getRequestAttributes(); HttpServletRequest request=requestAttributes.getRequest(); String page = request.getParameter("page"); String size = request.getParameter("size"); String orderBy = request.getParameter("orderBy"); if (StringUtils.hasText(page)&&StringUtils.hasText(size)){ PageHelper.startPage(Integer.parseInt(page),Integer.parseInt(size),StringUtils.hasText(orderBy)? orderBy: null); } Object Object = joinPoint.proceed();//调用目标方法 return Object; } }

application.yml：配置链接数据库

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql:///property username: root password: root mybatis: mapper-locations: classpath:mapper/*.xml logging: level: cn.hx.property.dao: debug

vue

命令控制安装router路由器

vue3：npm i vue-router

vue2：npm i vue-router@3

安装命令：npm install vue

npm i element-ui -S

官网下载地址

bootstrap

Bootstrap中文网

vue官网

https://vuejs.bootcss.com/guide/

element

Element - The world's most popular Vue UI framework

axios官网

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

nodejs:

Node.js

vue组件：

<template> <div class="hello"> <service-card-top :list="service"></service-card-top> <service-list :serviceList="serviceList"></service-list> <service-list1 :serviceList="serviceList"></service-list1> <service-list2 :serviceList="serviceList"></service-list2> </div> </template> <script> import ServiceCardTop from "@/components/ServiceCardTop"; import ServiceList from "@/components/ServiceList"; import ServiceList1 from "@/components/ServiceList1"; import ServiceList2 from "@/components/ServiceList2"; export default { name: 'HelloWorld', components: {ServiceList2, ServiceList1, ServiceList, ServiceCardTop}, data() { return { service: [{name: "收付款", icon: "▽"}, {name: "钱包"+120+"元", icon: "◇"}], serviceList: [{ name1: "金融理财", list1: [ {name: "信用卡还款", icon: "♂"}, {name: "微粒贷借钱", icon: "♀"}, {name: "理财通", icon: "◐"} ] }, { name2: "生活服务", list2: [ {name: "手机充值", icon: "☹"}, {name: "腾讯公益", icon: "√"}, {name: "生活缴费", icon: "☝"}, {name: "城市服务", icon: "♠"}, {name: "医疗健康", icon: "♠"} ] }, { name3: "交通出行", list3: [ {name: "出行服务", icon: "☹"}, {name: "滴滴出行", icon: "√"}, {name: "酒店", icon: "☝"}, ] } ] } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { width: 400px; height: 650px; background-color: lavender; margin: 0 auto; padding: 10px; } </style>

接受组件传值

<template> <div class="card"> <div v-for="l in list" class="left-icon" :key="l.name"> <p>{{ l.icon }}</p> <h4>{{ l.name }}</h4> </div> </div> </template> <script> export default { name: "ServiceCardTop", props: ["list"] } </script> <style scoped> .card { height: 100px; background-color: green; border-radius: 6px; } .left-icon { width: 50%; height: 100px; float: left; color: white; } </style>

路由rout传参

<template> <div> <h1>userInfo</h1> <router-link to="/user/list?id=12">list</router-link> <router-link to="/user/add/566">add</router-link> <router-view></router-view> </div> </template> <script> export default { name: "UserInfo" } </script> <style scoped> </style>

接受参数

<template> <h1>编辑{{$route.params.id}}</h1> </template> <script> export default { name: "UserInfoAdd" } </script> <style scoped> </style> 第二种接受参数： <template> <h1>用户查询{{$route.query.id}}</h1> </template> <script> export default { name: "UserInfoList", created() { console.info(this.$route.query.id) } } </script> <style scoped> </style>

router

index.js

import HelloWorld from '@/components/HelloWorld.vue' import UserInfo from '@/components/UserInfo.vue' //路由需要用到哪些页面 import {createRouter, createWebHashHistory} from "vue-router" import UserInfoAdd from "@/components/UserInfoAdd"; import UserInfoList from "@/components/UserInfoList"; //从vue-router 里面导入两个对象这当前js中使用 const router = createRouter({ history: createWebHashHistory(), routes: [{ path: "/", component: HelloWorld }, { path: "/user", component: UserInfo,children:[ {path:"add/:id",component:UserInfoAdd},{path:"list",component:UserInfoList} ] }] }) export default router;

app.vue首页

<template> <!-- 动态组件--> <router-link to="/">首页</router-link> <router-link to="/user">用户</router-link> <router-view></router-view> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

man,js

import { createApp } from 'vue' import App from './App.vue' import router from "@/router"; createApp(App).use(router).mount("#app")