Vue+ElementUI开发多页签前后端分离的ERP系统 |
您所在的位置：网站首页 › vscode前后端分离 › Vue+ElementUI开发多页签前后端分离的ERP系统 |
Vue+ElementUI开发多页签前后端分离的ERP系统
|
【实例简介】Vue与ElementUI开发多页签前后端分离的ERP前端系统 技术：Vue, ElementUI, Axios 功能：用户登录，主页，多级菜单，多页签， 数据的增删改查， 适合以此为基础开发ERP系统 使用：1）下载解压 2）开发工具VSCode 3）应用Vue脚手架 4）依赖安装 npm install 5）执行 npm run serve
【实例截图】
【核心代码】 1)登录
1.1 界面
欢迎使用DM测试电子资源管理平台 返回首页 帮助 关于 DM测试电子资源管理系统 登录 重置 版权所有 2021 DM测试电子有限公司
1.2 数据 export default { data () { return { logining: false, //定义loading默认为false myForm: { username: '', password: '' }, myRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 1, max: 15, message: '用户名需要1-15位', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 1, max: 15, message: '密码需要1-15位', trigger: 'blur' } ] }
1.3 网络请求 axios({ url:"https://xxx/dataApi/login.php", params:this.myForm }).then(res=>{ console.log(res) if (res.data.code == '401') { this.$message.error(res.data.txt) } else if (res.data.code == 200) { window.sessionStorage.setItem('token', res.data.token) this.$message.success('登录成功') this.$router.push('/home') } })
2) axios封装
import axios from 'axios' export function request (obj) { const instance = axios.create({ baseURL: 'https://xxx/dataApi/login', timeout: 5000, headers: { 'X-Token': window.sessionStorage.getItem('token') } }) return instance(obj) } export function request2 (config) { const instance = axios.create({ baseURL: 'https://xxx/dataApi/erp', timeout: 5000 }) return instance(config) } . └── ErpVueElementUIAspDotNet ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ ├── color-dark.css │ │ │ ├── icon.css │ │ │ ├── main.css │ │ │ └── theme-green │ │ │ ├── color-green.css │ │ │ ├── fonts │ │ │ │ ├── element-icons.ttf │ │ │ │ └── element-icons.woff │ │ │ └── index.css │ │ ├── img │ │ │ ├── img.jpg │ │ │ ├── light.png │ │ │ ├── loginbg1.png │ │ │ ├── loginbg2.png │ │ │ ├── loginbg3.png │ │ │ └── logo_sf.png │ │ ├── js │ │ │ ├── axiosFun.js │ │ │ ├── common.js │ │ │ ├── index.js │ │ │ ├── networks.js │ │ │ ├── request.js │ │ │ ├── store.js │ │ │ ├── userMG.js │ │ │ └── validator.js │ │ ├── logo copy.png │ │ └── logo.png │ ├── components │ │ └── Pagination.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ ├── bl │ │ ├── BlAdd.vue │ │ ├── BlFooter.vue │ │ ├── BlHeader.vue │ │ ├── BlItem.vue │ │ ├── BlShow.vue │ │ └── Blog.vue │ ├── po │ │ ├── PoDetail.vue │ │ ├── PoList.vue │ │ └── PoMain.vue │ ├── pub │ │ ├── FindCust.vue │ │ ├── FindProd.vue │ │ └── FindVend.vue │ ├── sy │ │ ├── SyDept.vue │ │ └── SyUser.vue │ ├── tst │ │ ├── Alluser.vue │ │ ├── BaseForm.vue │ │ ├── BaseTable.vue │ │ ├── Goods.vue │ │ ├── MyBaseForm.vue │ │ ├── Tabs.vue │ │ └── updateDialog.vue │ └── web │ ├── Header.vue │ ├── Home.vue │ ├── Login.vue │ ├── Sidebar.vue │ ├── Tags.vue │ ├── Welcome.vue │ ├── bus.js │ └── directives.js └── yarn.lock 18 directories, 63 files
|
【本文地址】
今日新闻 |
推荐新闻 |