springBoot整合ssmp
-
lomBok（帮助实体类开发） 导入坐标，然后在实体类上加入注解@Data 自动帮你生成get set hasgcode tostring方法，但是没有生成有参构造
-
注意，在使用mybatis-plus的增加用户操作的时候有一个bug，他默认提供的每一次增加的id是它自己提供的，我们需要的是数据库的自增，所以会报错，我们需要在yml配置文件 声明 我们需要的id是自增加的
报错信息
Could not set property 'id' of 'class com.itheima.domain.Book' with value '1476761652270473217' Cause: java.lang.IllegalArgumentException: argument type mismatch
yml文件
//加在这里 mybatis-plus: global-config: db-config: table-prefix: ssm_ id-type: auto
-
yml 配置文件 （用下面这组来获取sql执行的日志）
configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
分页和搜索功能的测试
-
第一步 要先创建一个拦截器（格式是固定的）
@Configuration public class PageConfig { //定义一个page拦截器 来帮助我们开发分页功能 @Bean public MybatisPlusInterceptor mybatisPlusInterceptor(){ MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return mybatisPlusInterceptor; } } -
mybatis-plus 永远的神！ 什么都写好了
@Test void page(){ //分页 IPage<Book> page = new Page<>(1,5); bookDao.selectPage(page,null); //打印一下数据 //当前页 System.out.println(page.getCurrent()); //当前数据数量 System.out.println(page.getSize()); //总数居数量 System.out.println(page.getRecords()); //总页数 System.out.println(page.getPages()); } //搜索查询 通过name关键字来查询 @Test void queryBooks(){ String name = "开心"; IPage<Book> page = new Page<>(1,5); LambdaQueryWrapper<Book> lqw = new LambdaQueryWrapper<>(); //这里的（name==null）表示 判断是否name为null 如果为null 则后面的不加在sql语句limit后面，反之加 lqw.like(!(name==null),Book::getName,name); //在用lqw查询到的情况下将数据分页， IPage<Book> pageList = bookDao.selectPage(page, lqw); System.out.println(pageList); }
Service层 的简便
-
mybatis-plus 还帮我们将service都写好了
-
第一步创建接口 并且实现 IService《你要实现的实体类》
public interface IBookService extends IService<Book> { -
第二步 创建实现类
@Service public class IBookServiceImpl extends ServiceImpl<BookDao, Book> implements IBookService { }什么都不用写，已经帮我们写好了增删改查的方法，只不过名字不一样删除变成了remove
-
第三步 测试即可，
-
如果我们想要增加新的功能 ，只要跟老样子在接口创建方法，实现类 实现就行，别重写他的方法就行
-
Controller
-
所有请求都用 GetMapping 修改用PutMapping 增加用 PostMappong 删除用deleteMapping
前后端的协议
-
我们将后面的数据统一格式，将他们都封装到一个R类下的data（Object类型）属性当中，前端就可以通风这个data来获取数据，同时我们设立一个flag， 如果我们查询成功就返回true ，出现异常返回false
-
第一步：创建一个R类
public class R { private boolean flag; private Object data; -
第二步：Controller 的写法
@RestController @RequestMapping("/books") public class BookController { @Autowired private BookService bookService; //所有的请求用get 修改用put 增加用post 删除用delete @PostMapping public R addBook(@RequestBody Book book){ R r = new R(bookService.save(book)); return r; } @DeleteMapping("{id}") public R deleteBook(@PathVariable Integer id){ R r = new R(bookService.deleteById(id)); return r; } @PutMapping() public R updateBook(@RequestBody Book book){ R r = new R(bookService.update(book)); return r; } @GetMapping public R getAll(){ R r = new R(); List<Book> books = bookService.queryAll(); r.setData(books); r.setFlag(true); return r; } @GetMapping("{curentPage}/{size}") public R pages(@PathVariable int curentPage,@PathVariable int size){ R r = new R(); IPage<Book> page = bookService.curentPage(curentPage, size); r.setFlag(true); r.setData(page); return r; }
-
Vue
-
先导入vue。js vue框架的运作是 vue将视图和模型之间做了相互转换， 首先 用户在客户端输入数据，视图发生了改变，vue就将改变发送给模型，模型跟着改变，然后又将改变的数据给视图，视图又改变
<title>vue</title> </head> <body> <div id="app"> <input v-model="username"> {{username}} <!--这里打印出上面modle的值， 上面视图发生变化，跟着模型发生变化，又跟着视图变化--> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", /*用来规定你要操作的范围，这里的app就是id为app的div都会受到这个vue 的控制*/ data(){ return { /*返回*/ username:"" } } }); </script> </body> </html> -
v-bind
<div id="app"> <input v-model="username"> {{username}} <!--这里打印出上面modle的值， 上面视图发生变化，跟着模型发生变化，又跟着视图变化--> <a v-bind:href="url">百度一下</a> <a :href="url">百度一下</a> <!--还可以写成这样--> <input v-model="url"> <!--我在这里的名字和url一样，那么我这个和url也形成了双向连接，我这里的值一遍url也要变--> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", /*用来规定你要操作的范围，这里的app就是id为app的div都会受到这个vue 的控制*/ data(){ return { /*返回*/ username:"", /*这个其实相当于 默认值，如果这里有值的化，上面和这个同名的就会有默认值*/ url:"https://www.baidu.com/" /*给网址加上默认的*/ } } }); -
v-on 绑定一个事件
<div id="app"> <input type="button" value="我是一个按钮" v-on:click="show()"> <input type="button" value="我是一个按钮" @click="show()"> <!--第二种写法--> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", /*用来规定你要操作的范围，这里的app就是id为app的div都会受到这个vue 的控制*/ /*为方法加上一个单机事件*/ methods:{ show(){ confirm("我被点了啊！。。。") } } }); -
v-if
<div id="app"> <!--控制显示的页面--> <div v-if="count==3">div1</div> <!--顾名思义当count=3才显示--> <div v-if="count==3">div2</div> <div v-if="count==4">div3</div> <div v-if="count==5">div4</div> <div v-show="count==4">v-show</div> <!--这个特殊，效果跟上面一样，但是即使count不等于4 他会在源码理想显示代码，上面不会显示代码--> <!--控制count数量--> <input v-model="count"> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ count:"3" } }); </script>
表示分界线 -
v-for 循环
<div id="app"> <div v-for="addr in addrs"> <!--遍历数组--> {{addr}} </div> <hr> <div v-for="(addr,i) in addrs"> <!--遍历数组--> {{i+1}}---{{addr}} <!--i表示数组的下标从0开始--> <!--我们可以用i来表示序号，将他加个1--> </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ addrs:["重庆","北京","上海","武汉"] /*定义一个数组*/ } }); </script>