前言：现在有很多vue2的管理后台系统，为什么还要自己写一个呢？我觉得会用总没有会写理解得深
一、有了基础框架（一）之后，对于一个vue开发工程师来说如何自己搭建自己的后台管理系统呢？当然可以直接抄一些现有的开源系统的代码，比如admin、ruoyi等，同样我想试试通过AI来写，一步一步完善，于是用了chatGPT
二、直接带上框架代码给GPT提问：
1、request.js代码：
import axios from "axios"; // 导入axios
import {Message} from "element-ui"; // 使用element-ui Message做消息提醒
import router from "../router"; //使用router做token到期或没有token时强制跳转login页
let state = true
// 这里面加入后端环境的地址
const request = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 50000, // 超时时间设置
withCredentials: true, // true允许跨域
headers: {
post: {
"Content-Type": "application/json;charset=UTF-8"
}
}
});
request.interceptors.request.use(
config => {
let token = Cookies.get('userToken');
if (localStorage.getItem("bearerToken") == null) {
config.headers['Authorization'] = 'Bearer ' + token;
} else {
config.headers.Authorization = JSON.parse(localStorage.getItem("userToken"));
}
return config;
},
error => {
Promise.reject(error);//记录错误到promise对象
localstorage.removeItem( 'userData ');//移除用户数据
localstorage.removeItem( 'userToken ');//移除token
router.push( '/login');//跳转到登录页面
}
);
request.interceptors.response.use(
response => {
if (response.status === 200 || response.status === 201 || response.status === 204) {
if (response.data.code == -10) {
if (state) {
Message.error(response.data.message);
state = false
}
localStorage.removeItem("userToken");
localStorage.removeItem("userData");
router.push({
name: "login"
});
return;
} else if (response.data.code == -1) {
Message.error(response.data.message);
return
} else {
state = true
return Promise.resolve(response);
}
} else {
return Promise.reject(response);
}
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400: error.message = '请求错误(400)'; break
case 401: error.message = '未授权，请重新登录(401)'; break
case 403: error.message = '拒绝访问(403)'; break
case 404: error.message = '请求出错(404)'; break
case 408: error.message = '请求超时(408)'; break
case 500: error.message = '服务器错误(500)'; break
case 501: error.message = '服务未实现(501)'; break
case 502: error.message = '网络错误(502)'; break
case 503: error.message = '服务不可用(503)'; break
case 504: error.message = '网络超时(504)'; break
case 505: error.message = 'HTTP版本不受支持(505)'; break
case -1: error.message = "系统繁忙,请稍后再试"; break
default: error.message = `连接出错(:${error})!`
}
} else {
// 超时处理
if (JSON.stringify(error).includes("timeout")) {
Message.error("服务器响应超时，请刷新当前页");
}
error.message("连接服务器失败");
}
return Promise.resolve(error.response);
}
);
export default request;
2、api文件夹下的user.js
import request from '@/utils/request'
// 退出登录
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'post'
})
}
3、main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
4、package.json
{
"name": "my-website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve:dev": "cross-env NODE_ENV=development vue-cli-service serve --mode development",
"serve:prod": "cross-env NODE_ENV=production vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"build:dev": "cross-env NODE_ENV=development vue-cli-service build --mode development",
"build:prod": "cross-env NODE_ENV=production vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
"vue": "^2.6.14",
"vue-router": "^3.6.5"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"postcss-import": "^16.1.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
5：如何在vue2框架下写一个登录页面以及后台管理的通用左侧菜单栏（包括用户、角色等）和顶部个人中心栏，要求类似于若依的框架，现在有api.js,request.js等基础组件，给出需要的文件代码粘贴到项目中
三、问题为上面5的问题：如何在vue2框架下写一个登录页面以及后台管理的通用左侧菜单栏（包括用户、角色等）和顶部个人中心栏，要求类似于若依的框架，现在有api.js,request.js等基础组件，给出需要的文件代码粘贴到项目中
四、以上基本的框架已经成型，但是跑项目报错，继续丢错误给chatGPT
五、用chatGPT解决掉问题后，跑项目成功
六、继续通过GPT完善
七、添加后如图：
至此后台管理框架成形，如果要继续完善就是写CSS样式和组件封装以及js并和后台联调，以后有时间再写。
顺便推荐一本书《CSS新世界》
