资产系统前端项目

这是前端项目所采用的框架：Vue 3 + Vite + Bootstrap，这是DepSystem资产系统的界面代码。 框架地址： 地址1：https://vxetable.cn/#/table/base/basic vxeTable的说明文档。

地址2：https://github.com/axios/axios#axios-api Axios 的说明文档。

地址3：https://router.vuejs.org/installation.html VueRouter 的说明文档。

---

前端界面

效果：

登录提示效果：

---

项目目录结构：

app5
|__ .vsconde
|__ node_modules
|__ public
|__ src
    |__ assets
    |__ components
    |__ image
    |__ router
    |__ scss
    |__ utils
    |__ views
    |__ main.js
    |__ style.css
|__ .gitignore
|__ index.html
|__ package-lock.json
|__ package.json
|__ README.md
|__ vite.config.js

安装

运行环境：

node 16+ 版本

安装好后，下载本仓库代码。

git clone http://120.24.203.75:3000/DepSystem/WebVue.git

代码地址

接着运行

npm build

开发运行下面命令

npm run dev

打包好后，将其打包好的文件放到Spring boot的static文件夹中。

运行Spring boot项目即可。

---

效果：登录后获取用户信息，并根据所返回的信息，动态的添加访问路径。再进入到后台中。

登录分析：

这里的效果是先请求，获取数据将数据存到Store中，让守卫根据Store来动态添加路径到menu中。[token]是后端返回存到本地的数据。

// setup(props, context) 这是setup函数所要传入的参数。

/// 操作对象。

// reactive 是和Ref一样的函数。可传递参数和对象。是引用型实例。