2022.10.30今天我学习如何使用ruoyi系统,并运行此系统。
一、配置vue.config.js文件
target里面换成自己的后端接口。
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// 配置第一个接口地址
// 第一步连接后端
target: `http://xxxxxxxxxxx/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
// 配置第二个接口地址
'/tqgl/': {
target: `http://xxxxxxxxxx/`,
changeOrigin: true,
pathRewrite: {
'^/tqgl/': ''
}
},
},
disableHostCheck: true
},
二、配置.env.development文件
VUE_APP_BASE_API的值放空
# 页面标题
VUE_APP_TITLE = 若依管理系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
# 第二步放空
VUE_APP_BASE_API = ''
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
前面两步可以初始化项目。
三、编写新的api接口
import request from "@/utils/request";
// 天气管理
// 查询天气列表
// 第三步编写接口
export function listtqgl(city) {
return request({
url: '/api/test',
method: 'get',
params: {city}
})
}
四、编写新的view页面
view页面必须与用户管理,登录管理其他页面同级才能生效。
<!--直接添加到外部-->
<template>
<div>
<button @click="list()">接口</button>
</div>
</template>
<script>
import {listtqgl} from '@/api/system/weatherManagement'
import Treeselect from "@riophae/vue-treeselect";
export default {
data() {
return {
loadData: "",
};
},
components:{
Treeselect
},
methods: {
list() {
console.log(1);
// 第四步调用接口
listtqgl("xx").then((res) => {
console.log(res);
this.loadData = res.data;
});
},
},
};
</script>
<style>
</style>
五、修改router/index.js文件
添加一个新的路径,放在公共路由里面。
// 添加标题
{
path: '/weatherManagement',
component: Layout,
// hidden: true,
redirect: 'noredirect',
children: [
{
path: 'weatherManagement',
component: () => import('@/views/weatherManagement/index'),
name: 'WeatherManagement',
meta: { title: '天气管理', icon: 'user' }
}
]
},
后面三步可以实现添加侧边栏+新的页面效果。