Vue+Javaweb 项目心得

一、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, //代理websockedchangeOrigin: true, //虚拟的站点需要更管originsecure: 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"><MeTablev-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 () {// 总是会执行});

暂且记这么多。。。