一、Vue项目如何访问JavaWeb的Servlet
简单描述该问题：
该问题是我因为初学JavaWeb，所以导致我不太会使用Vue来访问JavaWeb的资源。主要解决能够在本地的Vue项目中访问本地的JavaWeb项目以完成与数据库相关的各类操作。
对该问题进行简单分析：
1.首先我需要做的是能够在浏览器中访问到本地的JavaWeb的Servlet控制器，并把从数据库读取的数据返回到浏览器。
2.然后我需要想办法在Vue中访问该资源，但因为两个项目不是在同一个服务上，因此肯定会出现跨域问题。
3.解决axios跨域的问题，我放在了前台，比较简单一点。
4.将JavaWeb返回的数据json格式化，便于Vue使用。
具体实现
1.首先是一个简单的Servlet，并且调用读取数据库的Dao类来获取数据，如下（这一步就不细讲了）
2.并且把该JavaWeb项目部署到 Tomcat（我用的8.5）上，跑起来，端口什么的最好改一下，别和Vue的重了。
3.注意！这里比较重要的一步来了——注解。将注解改为小写字母，我的是“menu”，然后打开浏览器，访问地址:http://localhost:81/vueapp/menu，就是http://主机名:端口号/项目名/Servlet注解名
4.然后就会发现数据出来了！
5.数据那一块，使用了fastjson.jar来处理了数据，并且使用PrintWriter写入到页面。
6.现在来到Vue这边，我用的是Vue（v3）
7.正常的流程，npm install axios
8.来到Vue项目目录下的vue.config.js，代码如下，你们看着自己的改，解决跨域的
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:81/', //这里填入你要请求的接口的前缀
ws: true, //代理websocked
changeOrigin: true, //虚拟的站点需要更管origin
secure: false, //是否https接口
pathRewrite: {
'^/api': '' //重写路径
}
}
}
}
})9.在想要发起请求的页面，添加如下代码：
import axios from "axios";
axios.defaults.baseURL = "/api";
// GET方法
axios.get("/vueapp/menu")
.then(function (response) {
// 处理成功情况
menuList.value = response.data
})
.catch(function (error) {
// 处理错误情况
console.log(error)
})
.then(function () {
// 总是会执行
});
// POST方法
axios.post("/vueapp/menuadd", qs.stringify(data))
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});10.这就完事了。数据就在 Response里面
二、菜单项显示问题
简单描述该问题：
该后台需要对登录用户的等级做出区分，并根据等级的不同，来展示不同的菜单项，比如等级高的人可以看到全部菜单，但等级低的人只能看到少数的菜单项。
对该问题进行简单分析：
首先是登录用户的字段里需要有一个字段作为其等级，假设为identify,现在当我登录该后台时，获取到我的identify，假设数字越大，权限越高。我的数字此时为1。
然后是对菜单项进行数据表设计，假设表为tb_menu，其中包含字段（id，menu_title，menu_icon，menu_level，menu_url），其中高亮字段为级别字段，可以按照权限级别来取1，2，3等等。
当我进入后台时，系统根据我的id，去tb_menu表中读取菜单项，例如 “SELECT * FROM tb_menu WHERE menu_level <= ?”，此处的插值为我的id，这样就可以实现简单的权限系统。
三、axios读取数据库数据，传递给组件，结果不渲染数据
简单描述该问题：
我使用axios请求数据后，将数据赋值给变量，并将该变量传递给子组件，结果发现子组件那里的数据是空的，但是在异步回调函数里有数据，这是怎么回事呢？
对该问题进行简单分析：
1.经过我查阅资料，发现axios请求和子组件渲染是同步的，意思就是我的数据还没读完，但是组件已经渲染好了，所以肯定没有数据。
2.所以可以在组件那里加个v-if判断，判断我读取的数据是否为空，如果不为空了，说明读取完毕了。在渲染子组件，这样就不会出现问题了。
具体实现
就给你们看一句代码就明白了：
模板代码：
<template>
<div class="common-layout">
<MeTable
v-if="tableData.length !== 0" <-就这一句
:tableDataSource="tableData"
:tableKeysSource="tableKeys"
:fromPathSource="'Menu'"
></MeTable>
</div>
</template>读数据的代码：
axios.get("/vueapp/menu")
.then(function (response) {
// 处理成功情况
tableData.value = response.data;
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});暂且记这么多。。。
