library项目总结

一次项目的 vue axois使用简单总结
登录：前端

 this.$axios.post('http://localhost:8080/Library/users/login',{
          username:this.username,
          password:this.password
        }).then(
          res=>{
            console.log(res.data);
            if(res.data.result=='账号密码错误'){
              //登录失败
              this.info='您的用户名或密码输入错误，请重新输入';
            }else{
              //登录成功
              console.log(res.data);
              //判断是管理员还是普通用户
              if(res.data.limit=='管理员'){
                sessionStorage.setItem("admin_username",this.username);
                sessionStorage.setItem("auid",parseInt(res.data.uid));
                this.$router.push('/index');
              }else{
                sessionStorage.setItem("users_username",this.username);
                sessionStorage.setItem("uid",parseInt(res.data.uid));
                //添加站内消息
                this.$axios.get('http://localhost:8080/Library/msg/addMsg',{
                    params:{
                        uid:sessionStorage.getItem('uid')
                    }
                })
                .then(res=>{
                    console.log(res.status);
                    this.$router.push('/usersIndex');
                });
                
              }
            }
          }
        );

controller：

//登录，检查账号密码     √
    @RequestMapping(value = "/login")
    @CrossOrigin(origins = "http://localhost:8989",maxAge = 3600,allowCredentials = "true")
    @ResponseBody
    public Map<String, String> checkLogin(@RequestBody Map<String,String> m, HttpServletRequest request) {
        Map<String, String> map = new HashMap<String, String>();
        Users u = us.UsersLogin(m.get("username"), m.get("password"));
        if (u != null) {
//            request.getSession().getServletContext().setAttribute("loginUser",u);
            request.getSession().setAttribute("loginUser", u);
            if (u.getLimitis() == 0) {
                map.put("limit", "管理员");
            } else {
                map.put("limit", "用户");
            }
            String uid = u.getUid() + "";
            map.put("uid", uid);
            map.put("result", "登录成功");
        } else {
            map.put("result", "账号密码错误");
        }
        return map;
    }

前端使用post请求，需要接收返回值res.data
后端需要参数@RequestBody Map<String,String> 接受
@ResponseBody 给前端发送map类型的值
还需要 @CrossOrigin(origins = “http://localhost:8989”,maxAge = 3600,allowCredentials = “true”)

注册：前端

 this.$axios.post('http://localhost:8080/Library/users/register',{
                        username:this.username,
                        password:this.password
                    }).then(res=>{
                        console.log(res.data);
                        if(res.data.check=='注册成功'){
                            alert('注册成功！');
                            this.$router.push('/');
                        }else if(res.data.check='账号名已存在'){
                            this.tips=res.data.check;
                        }
                    });

controller

//注册,默认权限为普通用户，状态正常   
    @RequestMapping(value = "/register")
    @CrossOrigin
    @ResponseBody
    public Map<String, String> register(@RequestBody Map<String,String> m) {
        Map<String, String> map = new HashMap<String, String>();
        if (us.UserAccoutSearch(m.get("username")) == null) {
            map.put("check", "注册成功");
            us.UsersRegister(m.get("username"), m.get("password"));
        } else {
            map.put("check", "账号名已存在");
        }
        return map;
    }

前端post请求
后端@requestbody接受map类型，发送map类型

公告增删改查
前端：
查

 this.$axios.get('http://localhost:8080/Library/notice/searchNotice')
                .then(res=>{
                    console.log('查询了'+res.data);
                    this.noticeMsg=res.data;
                })

后端：

//所有用户都可以查询公告  
    @RequestMapping(value = "/searchNotice")
    @CrossOrigin
    @ResponseBody
    public List<Notice> searchNotice(){
        List<Notice> list=ns.NoticeSearch();
        return list;
    }

前端get请求不发送参数
后端return一个list集合

增：

 var that=this;
                this.$axios.post('http://localhost:8080/Library/notice/addNotice',{
                    ndetail:that.addedNotice,
                    uid:sessionStorage.getItem('auid')
                }).then(res=>{
                    if(res.status==200){
                        this.getNoticeData();
                        this.addFlag=false;
                    }
                })

 //管理员发布新公告   √   ndetail&uid
    @RequestMapping(value = "/addNotice")
    @CrossOrigin
    @ResponseBody
    public void addNotice(@RequestBody Map<String, String> m){
        ns.NoticeAdd(m.get("ndetail"),parseInt(m.get("uid")));
    }

前端post请求发送两个参数 put请求会报错？
后端用map接受不返回值

删：

this.$axios.delete('http://localhost:8080/Library/notice/deleteNotice',{
                   params:{
                       nid:nid
                   }
               }).then(res=>{
                   if(res.status==200){
                       this.getNoticeData();
                   }
               })



//管理员删除公告  
   @RequestMapping(value = "/deleteNotice")
   @CrossOrigin
   @ResponseBody
   public void deleteNotice(int nid){
       ns.NoticeDelete(nid);
   }

前端delete请求给id
后端直接接收id

改：前端

// 1.根据id查询
this.$axios.get('http://localhost:8080/Library/notice/searchNoticeById',{
                    params:{
                        nid:nid
                    }
                }).then(res=>{
                    console.log(res.data);
                    this.name=res.data.ndetail;
                });      
//2.修改
this.$axios.post('http://localhost:8080/Library/notice/changeNotice',{
                        nid:nid,
                        ndetail:name,
                        uid:uid
                })
                .then(res=>{
                console.log(res.status);
                    if(res.status==200){
                        //重新加载页面
                        this.getNoticeData();
                        this.num=-1;
                    }
                });   

后端：

//根据id查询公告   √
    @RequestMapping(value = "/searchNoticeById")
    @CrossOrigin
    @ResponseBody
    public Notice searchNoticeById(int nid){
        Notice n=ns.NoticeIdSearch(nid);
        return n;
    }
//管理员修改公告        nid&ndetail&uid
    @RequestMapping(value = "/changeNotice")
    @CrossOrigin
    @ResponseBody
    public void changeNotice(@RequestBody Map<String, String> m){
        ns.NoticeChange(parseInt(m.get("nid")),m.get("ndetail"),parseInt(m.get("uid")));
    }

1.查询
前端get请求给id值
后端直接接收id返回对象
2.修改
前端post请求给三个参数
后端用map接收不返回参数

借书：

//条件满足，发借书请求         
this.$axios.get('http://localhost:8080/Library/orders/AddOrders',{
	params:{
		bid:bid
	}
}).then(res=>{
	console.log(res.data);
	if(res.data=='ok'){
		alert('借书成功！还能借'+num+'本');
		//借完，重新渲染页面
		this.getData();
	}
})

 //    //新增订单(借书)拿到bid，uid，以及当前时间
//    void OrdersAdd(Orders o);//LoginUser
    @RequestMapping(value = "/orders/AddOrders")
//    @ResponseBody
    public String ordersAdd(HttpServletRequest request, HttpSession session, Integer bid, RedirectAttributes attr) throws Exception {
        Users users = (Users) session.getAttribute("loginUser");
//        System.out.println("bid = " + bid);
        Integer uid=users.getUid();
//        System.out.println("uid = " + uid);
        String borrowed = os.getDate();
        String returned = os.addDate(borrowed);
        OrdersBase o = new OrdersBase(bid,uid , borrowed, returned, 0, 1);
        os.OrdersAdd(o);
        attr.addAttribute("bid", bid);
        //新增订单的同时该书本的在馆数量-1，借阅次数+1
        return "redirect:/changeBooksNumAndTimes";
    }

//借书后更改图书数量和借阅次数
    @RequestMapping("/changeBooksNumAndTimes")
    @CrossOrigin
    @ResponseBody
    public String changeBooksNumAndTimes(Integer bid) {
        bs.borrowChanged(bid);
        //借书成功
        return "ok";
    }

前端：使用get请求发送id
后端：直接接收id 然后redirect到另一个方法，需要返回一个字符串给前端 否则报错？

还书：

this.$axios.get('http://localhost:8080/Library/orders/returnBooks',{
	params:{
		oid:oid
	}
}).then(res=>{
	if(res.status==200){
		//重新渲染页面
		alert('还书成功！');
	    this.getLendedData();
	 }
							
});

  //还书成功
//    void updateOrdersStatus(int oid);
    @RequestMapping("/orders/returnBooks")
    @CrossOrigin
//    @ResponseBody
    public String updateOrdersStatus(int oid,RedirectAttributes attr) {
        os.updateOrdersStatus(oid);
        Orders o = os.searchOrderByOid(oid);
        Integer bid = o.getB().getBid();
        attr.addAttribute("bid", bid);
        //还书时该书本的在馆数量+1
        return "redirect:/books/returnBnum";
    }

//还书后的在馆数+1
    @RequestMapping("/books/returnBnum")
    @CrossOrigin
    @ResponseBody
    public String returnBnum(int bid) {
        bs.returnBooks(bid);
        return "ok";
    }

前端：get请求传递一个id
后端：直接接收id，redirect一个方法然后返回字符串给前端

管理员下架书籍：

this.$axios.delete('http://localhost:8080/Library/searchNotReturnByBid',{
						params:{
							bid:bid
						}
					})
					.then(res=>{
						console.log(res.data,typeof res.data);
						if(res.data==1){
							//不能下架
							alert('该书籍已借出，不可下架')
						}else{
							//下架
							alert('下架成功！');
							this.getData();
						}

					});



//下架图书
    @RequestMapping("/books/cancelBooks")
    @CrossOrigin
    @ResponseBody
    public int cancelBooks(Integer bid, HttpSession session) {
        /*下架图书
         * 先查询是否有未归还的订单*/
        List<Orders> list = (List<Orders>) session.getAttribute("NoReturnByBid");
        //获取未还书的数量
        int num;
        if (list == null) {
            num = 0;
        } else {
            num = list.size();
        }

        if (num == 0) {//没有未还书的数量，即全部在馆
            //将数量减至0
            bs.cancelBooks(bid);
//            System.out.println("下架");
            //num为0的时候能下架
            return num;
        } else {
            //不能下架
//            System.out.println("不能下架");
            return 1;
        }
    }

管理员修改书籍：

this.$axios.post('http://localhost:8080/Library/books/modifyBook',{
	bid:this.updatedBook.bid,
	bname:this.updatedBook.bname,
	author:this.updatedBook.author,
	publisher:this.updatedBook.publisher,
	isbn:this.updatedBook.isbn,
	btype:this.updatedBook.btype,
	btimes:this.updatedBook.btimes,
	bnum:this.updatedBook.bnum,
	intro:this.updatedBook.intro,
	bimg:this.updatedBook.bimg,
	bprice:this.updatedBook.bprice,
	bstatus:this.updatedBook.bstatus
}).then(res=>{
	console.log(res.status);
	if(res.status==200){
		alert('修改成功！')
	}
})



//修改图书
    @RequestMapping(value = "/books/modifyBook",headers = "Content-Type=application/json")
    @CrossOrigin
    @ResponseBody
    public void updateBooks(@RequestBody Map<String ,String > map) {
//        System.out.println(map);
        int bid=Integer.parseInt(map.get("bid"));
        String bname=map.get("bname");
        String author=map.get("author");
        String publisher=map.get("publisher");
        String isbn=map.get("isbn");
        String btype=map.get("btype");
        int btimes=Integer.parseInt(map.get("btimes"));
        int bnum=Integer.parseInt(map.get("bnum"));
        String intro=map.get("intro");
        String bimg=map.get("bimg");
        double price=Double.parseDouble(map.get("bprice"));
        int bstatus=Integer.parseInt(map.get("bstatus"));
        bs.modifyBooks(bid,bname,author,publisher,isbn,btype,btimes,bnum,intro,bimg,price,bstatus);
        //bs.modifyBooks(books);
    }

前端：post请求依次传递要修改的值，（很麻烦，但是不知道怎么传一个对象不报错）
后端：用map接收值（很麻烦），无返回值

管理员上传图书：
首先上传图片再上传其它
上传图片：

			<!--上传封面-->
<input style="width:500px;display:none;" name="images" class="image">
	<div class="layui-form-item">
	<label class="layui-form-label ">封面:</label>
	<div class="layui-upload">
		<button type="button" class="layui-btn" id="test">上传图片</button>
		<div class="layui-upload-list">
		<img class="layui-upload-img" id="demo1">
		<p id="demoText"></p>
	</div>


<script>
//图片上传
layui.use('upload', function(){
	var $ = layui.jquery
	,upload = layui.upload;
		
	//普通图片上传
	var uploadInst = upload.render({
		 elem: '#test'//绑定元素
		 ,url: 'http://localhost:8080/Library/books/upload'//上传接口
		  ,accept:'images'
		  ,size:50000
		  ,before: function(obj){
		 obj.preview(function(index, file, result){
		
		   $('#demo1').attr('src', result);
	 });
	}
		    ,done: function(res){
			console.log(res);
		     //如果上传失败
		     if(res.code > 0){
		       return layer.msg('上传失败');
		            }
		            //上传成功
		            var demoText = $('#demoText');
		            demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		
		            var fileupload = $(".image");
		            fileupload.attr("value",res.data.src);
		            console.log(fileupload.attr("value"));
		            $(".insertBooks").click(function(){
		                var flag=false;
		                if($(".bname").val()==''){
		                    alert('您还未填写图书标题！');
		                }else if($("author").val()==''){
		                    alert('您还未填写作者！')
		                }else if($(".publisher").val()==''){
		                    alert('您还未填出版社！')
		                }else if($(".isbn").val()==''){
		                    alert('您还未填ISBN！')
		                }else if($(".btype").val()==''){
		                    alert('您还未填图书类型！')
		                }else if($(".bnum").val()==''){
		                    alert('您还未填数量！')
		                }else if($(".intro").val()==''){
		                    alert('您还未填简介！')
		                }else if($(".bprice").val()==''){
		                    alert('您还未填价格！')
		                }else{
		                    flag=true;
		                }
		                if(flag){
		                    var b={ 
		                        "bname":$(".bname").val(),
		                        "author":$(".author").val(),
		                        "publisher":$(".publisher").val(),
		                        "isbn":$(".isbn").val(),
		                        "btype":$(".btype").val(),
		                        "btimes":0,
		                        "bnum":$(".bnum").val(),
		                        "intro":$(".intro").val(),
		                        "bimg":fileupload.attr("value"),
		                        "bprice":$(".bprice").val(),
		                        "bstatus":0
		                    }
		    //使用jQuery的ajax上传其它
		                    $.ajax({
		                        type:'post',
		                        contentType: "application/json;charset=UTF-8",
		                        dataType:'json',
		                        url:'http://localhost:8080/Library/books/insertBooks',
		                        data:JSON.stringify(b),
		                        headers:{
		                            "Content-Type":"application/json"
		                        },
		                        success:function(data){
		                            //console.log(data);
		                            alert('添加成功！');
		                        }
		                    });
		                    alert('添加成功！');
		                }
		            })
		        }
		        ,error: function(){
		            //演示失败状态，并实现重传
		            var demoText = $('#demoText');
		            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		            demoText.find('.demo-reload').on('click', function(){
		                uploadInst.upload();
		            });
		        }
		    });
		});
</script>

后端

 //书籍图片上传
    @ResponseBody
    @RequestMapping("/books/upload")
    @CrossOrigin
    public Map upload(MultipartFile file, HttpServletRequest request){

        String prefix="";
        String dateStr="";
        //保存上传
        OutputStream out = null;
        InputStream fileInput=null;
        try{
            if(file!=null){
                String originalName = file.getOriginalFilename();
                System.out.println(originalName);
                prefix=originalName.substring(originalName.lastIndexOf(".")+1);
                Date date = new Date();
                String uuid = UUID.randomUUID()+"";
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                dateStr = simpleDateFormat.format(date);
                String filepath = "D:\\IDEAProject\\Library\\src\\main\\webapp\\images" +"\\"+uuid+"." + prefix;


                File files=new File(filepath);
                //打印查看上传路径
                System.out.println(filepath);
                if(!files.getParentFile().exists()){
                    files.getParentFile().mkdirs();
                }
                file.transferTo(files);
                Map<String,Object> map2=new HashMap<>();
                Map<String,Object> map=new HashMap<>();
                map.put("code",0);
                map.put("msg","");
                map.put("data",map2);
                map2.put("src","http://localhost:8080/Library/images" +"/"+uuid+"." + prefix);
                return map;
            }

        }catch (Exception e){
        }finally{
            try {
                if(out!=null){
                    out.close();
                }
                if(fileInput!=null){
                    fileInput.close();
                }
            } catch (IOException e) {
            }
        }
        Map<String,Object> map=new HashMap<>();
        map.put("code",1);
        map.put("msg","");
        return map;

    }

}

//上传图书
    @RequestMapping(value = "/books/insertBooks",headers = "Content-Type=application/json")
    @CrossOrigin
    @ResponseBody
    //String bname,String author,String publisher,String isbn,String btype,int bnum,String intro,String bimg,double bprice
    public void insertBooks(@RequestBody Books b) throws Exception {
        bs.addBooks(b);
    }

前端：
使用的ajax，因为不会vue和layui上传结合操作，
ajax传递了一个json字符串
注意1. contentType: “application/json;charset=UTF-8”,
2. dataType:‘json’,
3. 对象需要JSON.stringify()
后端：
直接@RequestBody 接收对象，无须返回值
注意：需要指定headers = “Content-Type=application/json”