Axios+Elementui+Vue+原生JS+后端原生java的JAVA web小组项目踩坑总结

目录

序

后端

关于maven与tomcat

关于过滤器

关于session 

关于使用fastjson转换复杂类型的JSON字符串

前端

html不同页面拼接

 js跨页面传值与本地缓存

element-ui中使用@click事件无法触发

JSON字符串与JS数组常见API

js获取当前时间，可直接插入数据库

IDEA

文件恢复

---

序

首先十分感谢我的组员与组长给予我的帮助，以下项目是我们共同完成的

后端

关于maven与tomcat

1 在maven写入相关的依赖包之后一定要点更新点完更新，之后还有非常重要的一件事情！！！！那就是我们需要通过项目结构中的工件（fact），将相关新加的包同步到Tomcat目录中，我们先点击工件，点击加号，选择web应用程序归档，如果展开之后有模板的话点击模板，如果没有模板的话就点击空就可以了。

啊调查

 

------------------------------------

2 进行完这些操作后我们需要将右侧的可用元素，同步到左侧的输出根，怎么同步到输出根呢？
方法很简单将鼠标放于右侧文件夹下右击选择，选项第1个，置于output root，然后我们会发现左边的目录中多了一些包，最后我们点击应用再点击确定就OK了

3 为Tomcat配置工件，如果你的tomcat并没有配置工件先进行以上的操作。然后再进行以下操作。进行完上述操作后进入Tom cat配置目录，点击部署，再点击加号 然后选择工件我们刚刚新加的工件就会自动被添加到tomcat服务器的部署目录中的了

 想改可以改

4 如果进行完上述操作发现项目中某些包还是没有被调用那就可能是maven缓存问题了我们先点击项目右侧的maven应该在侧边栏上maven生命周期中的clean点完之后再点击刷新等于说清理了缓存又重新下载了相关依赖，进行完之后再次进行前3步操作（记得先将上次建的工件删除）看下图2

 

关于过滤器

1 假如我们在过滤器中统一设计的编码以及返回值的类型我这里设置的是json，那么此项目中的静态资源html网页css等，在此项目中启动加载时可能会出现呈现网页源代码的情况!!!

package com.ascent.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@WebFilter("/*")
public class CharSetsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        //设置字符编码
        request.setCharacterEncoding("utf-8");
        //设置内容类型（全部为JSON格式）
        response.setContentType("text/json;charset=utf-8");
        filterChain.doFilter(request, servletResponse);
    }
}

2 解决方法就是彻底做前后端分离!!!就是我们在解决跨越问题之后（不会的看这篇文章中的跨域问题解决JAVA 纯后端解决跨域请求问题_桂亭亭的博客-CSDN博客）

在本地资源管理器中启动我们的网页即可，或者只去过滤.java文件

这里贴一个图，自己领会

关于session 

还没玩明白......

关于使用fastjson转换复杂类型的JSON字符串

 使用的是 fastjson中的TypeReference

package com.ascent.utils;
 
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import com.ascent.entity.User;
import org.junit.Test;
 
import java.util.ArrayList;
import java.util.List;
 
public class test {
    @Test
    public void JSONdeal()
    {
        List userList=new ArrayList<>();
        userList.add(new User(1,"测试","测的试","测的试"));
        userList.add(new User(2,"测试地方","测地方试","测试"));
        userList.add(new User(3,"测地方试","测试的","测试"));
        //序列化
        String jsonString = JSON.toJSONString(userList);
        System.out.println(jsonString);
 
        //复杂类型 反序列化
        //TypeReference泛型，可以传入任意复杂类型
        TypeReference> typeReference = new TypeReference>() {
        };
        List userObjects = JSON.parseObject(jsonString,typeReference);
        System.out.println(userObjects);
        for (User user : userObjects) {
            System.out.println(user.toString());
        }
    }
}

测试结果

前端

html不同页面拼接

  无奈vue学的不好并不会什么高级的页面拼接技术，所以我们使用的是iframe标签，实用词标签可以将不同的html拼接在一个页面中并且各个html文件中的css和JavaScript相互独立而不干扰，需要解决的只是页面传值问题和跳转iframe标签的问题

1 页面拼接

        我们这边还是借助vue的技术给iframe一个单向绑定，绑定其src属性，及此标签默认加载的原链接。代码如下我们可以通过点击事件改变 htmlcontent的值从而使iframe页面内容发生变化

<div id="app">
        <iframe frameBorder="0" v-bind:src="htmlcontent" width="1500px" height="800px">iframe>
div>
 
<script>
    new Vue({
        el: "#app",
        data() {
            return {
//需要跳转的链接
                htmlcontent: "",
            }
        }
})
script>

 js跨页面传值与本地缓存

        页面传值网上有很多方法但我感觉最适用的还是以下这种，感觉有点像后端的session技术

简述

localStorage将数据直接存储到本地，localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。

常用API

var arr=[1,2,3];
//存储
localStorage.setItem("temp",arr); //存入 参数1调用的值相当于key 参数2所要存入的数据(只能以字符串形式存入)
//获取　　 
console.log(localStorage.getItem("temp"));//输出
//清空
localStorage.clear(); 
//删除键值对
localStorage.removeItem("temp");

//存入json数据
let jsonString=JSON.stringify({code: '1' ,mes:"隐藏下拉菜单"});
localStorage.setItem('ishiddendropmenu', jsonString);

 //取出json数据

let obj1 = JSON.parse(localStorage.getItem('ishiddendropmenu'));
console.log(obj1)

使用

可以用来隐藏登录/注册按钮/其他标签

mounted() {
            //判断是否显示下拉菜单
            var obj1 = JSON.parse(localStorage.getItem('ishiddendropmenu'));
            //隐藏用户名
            if (obj1.code=="1")
            {
                this.$refs.usernameref.$el.style.display="none";
            }
            else
            {
                this.$refs.usernameref.$el.style.display="block";
            }
}

element-ui中使用@click事件无法触发

        为什么@click无法触发相应的事件函数呢?哈哈问题是出在我们的理所当然了!

@click固然可以满足大部分标签的点击事件触发 但是有些标签例外，

比如这个el-dropdown-item，遇到这种情况我们应该赶紧去翻看官方文档看看官方文档给出的事件触发方案是什么!!!

一看果然不对劲官方给的是@click.native，好家伙双标是吧,hh

看来以后官方文档一定要看完呀， OK我们修改代码为此就可以正常的进行事件触发了

 <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心el-dropdown-item>
                    <el-dropdown-item @click.native="cancellation1()">注销el-dropdown-item>
                    <el-dropdown-item>购物车el-dropdown-item>
                el-dropdown-menu>

JSON字符串与JS数组常见API

        传输给后台的josn字符串数据中的值和键必须用双引号包裹
必须用双引号包裹
必须用双引号包裹
必须用双引号包裹重要的事情说4遍!

        比如下面的status不能为number类型!!!如果是number类型我们应该将其转化为字符串类型，OK。否则可能会出错的后端，除此之外还有一个原因那就是 number类型超出js Number类型所能承受的极限时也前端也会报错，所以养成好习惯。

 for (let i = 0; i <this_.selectedIds.length ; i++) {
                    arrjson.id="";
                    arrjson.productname=this_.selectedIds[i].productname
                    arrjson.category=this_.selectedIds[i].category
                    arrjson.price1=this_.selectedIds[i].price1.toString();
                    arrjson.number=this_.selectedIds[i].num.toString();
                    arrjson.createtime =this.getCurrentTime();
                    arrjson.status="1"
                    arrjson.email=this_.shopUserForm.email
                    arrjson.tel=this_.shopUserForm.phone
                    arrjson.username=username
                    arrdata.push(arrjson);
                    arrjson={}
                }

        因为前端知识不够扎实的原因操纵js数组时也出了多多少少的问题，现在总结一下js数组常用的API

1  连接：arr.join("连接符") 用连接符把数组里面的元素连接成字符串。

2  删除、插入、替换：arr.splice(start, deleteCount [,value1,value2...])

3 合并  arr1.push.apply(arr1,arr2)

将arr2追加到arr1后面，arr1将改变

arr1.concat(arr2,arr3,arr4....)会返回合并后的数组

例子

//join
//将数组转为字符串，可指定分隔符
let arr_1=[1,2,3,3,4,5]
let arr_2=[1,2,3,3,4,5]
var s = arr_1.join("-");
var s1 = arr_1.join("");
console.log(s,s1)//1-2-3-3-4-5 123345
 
//splice
 
//使用splice删除多个数组元素
// 参数1为开始删除的索引，参数2为删除的个数
let arr1=[1,2,3]
arr1.splice(1,2)
console.log(arr1)//结果[1]
//使用splice追加多个数组元素
arr1.splice(arr1.length,0,22,33,44)
console.log(arr1)//结果[ 1, 22, 33, 44 ]
//使用splice替换元素
arr1.splice(arr1.length-1,1,"ts")
console.log(arr1)//[ 1, 22, 33, 'ts' ]
 
 
//数组合并
// 1 使用[].push.apply()
//会改变原数组，且只能合并两个数组
let arr2=[4,5,6]
let arr3=[7,8,9]
arr2.push.apply(arr2,arr3)
console.log(arr2)//结果 [ 4, 5, 6, 7, 8, 9 ]
// 2 使用cancat
//可以合并多个数组，且不会改变原数组
let arr4=[4,5,6]
let arr5=[7,8,9]
let arr6=[4,5,6]
let arr7=[7,8,9]
var arrs = arr4.concat(arr5,arr6,arr7);
console.log(arrs)//[4, 5, 6, 7, 8,9, 4, 5, 6, 7, 8, 9]
console.log(arr4)//[ 4, 5, 6 ]
 
//delete直接删除数组中的元素,但是数组的长度并未改变
delete arr7[0];
console.log(arr7,arr7.length)

js获取当前时间，可直接插入数据库

函数已封装好，是原生的，不需要其他依赖

getCurrentTime() {
                //获取当前时间并打印
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                console.log(_this.gettime)
                return _this.gettime;
            },

IDEA

文件恢复

1 如果不小心删除或覆盖了某些文件，但却又无法撤销时可以使用此个办法，我当时是使用在git把我本地代码覆盖的时候。（不过经过测试只能恢复近三天的文件）

2 方法

右击鼠标选中还原即可