因为项目要求用vue 写后台管理系统,所以接触到 vue-element-admin 框架,现在这个项目快要结束了,准备把这个过程中能记得的(可能不全)写个系列。
框架GitHub 地址:https://github.com/PanJiaChen/vue-element-admin
框架官方文档 :https://panjiachen.github.io/vue-element-admin-site/zh/guide/
Element-UI 官方文档地址 :https://element.faas.ele.me/#/zh-CN/component/installation
1、刚从git下载的项目运行,先 npm install 。再把跟mock有关的代码注释掉,mock 文件夹里面有个index.js 全部注释就行,其他的 js 文件就不用注释了。(直接把 mock 文件夹删了也行,我弄完全部之后删的)
2、然后 npm run dev 运行后 控制台显示这个的,跟严格模式有关系
解决方法:在这个文件里加一段代码: eslint --fix --ext .js,.vue src 重新跑一次
3、运行后 显示这个的
解决方法: 在这个文件里 加上三段代码
eslint-disable
eslint-disable-next-line
src/*
重新跑一次
刚运行的问题应该就这些了,有其他问题的评论再问吧。
(一)接下来说一下 项目部署问题
1、页面显示 src/views 是放页面的文件夹
git 上下载的项目有图表,我写的项目没有图表,所以关于图表这类的问题 我没办法。
我的页面都是表单和表格,很好写,十多个页面一天就写完了,直接从 Ele-UI 上复制粘贴 ,也不用改样式。
(1)、登录
如下图 上面的框 是文件的路径 ,下面的框 是控制标题显示内容
(2)、 login / index.vue 可以改下图中的显示内容
2、页面路由 src / router / index.js
title 就是页面的名字 icon 是图标 svg 存在 src/icons/svg 里面
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'Dashboard',
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
}
]
}
(二)、对接口部署
1、接口域名
这两个地方要写 接口域名
2、 接口地址及方法
(1)、 比如接口地址是 admin/index (传的值是 token 的)
需要在 src/store/modules 里面建一个 admin.js 文件 (就是跟接口地址的前一个单词一致,其实也不必非要跟接口地址一致,但是为了之后好区分,就一致对应吧)
import { index } from '@/api/admin' // index 就是地址后面的字段,一一对应
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: ''
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
}
const actions = {
// index 地址后面的字段
index({ state }) {
return new Promise((resolve, reject) => {
// 这里也是 index
index(getToken('token')).then(response => { //括号里的getToken('token') 是调接口需要传的值
resolve(response)
}).catch(error => {
reject(error)
})
})
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
还需要在 src/api 里面建一个 admin.js 文件
import request from '@/utils/request'
export function index(data) { // index 地址后面的字段
return request({
url: 'admin/index',
method: 'post',
data // data 就是上个图 括号里的内容
})
}
在页面中
info(){ // 方法名
this.$store.dispatch('admin/index').then((res) => {
console.log(res)
}).catch((res) => {
console.log(res)
})
}
在 store/index.js 中 需要引入
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import settings from './modules/settings'
import admin from './modules/admin'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
admin,
},
getters
})
export default store
3、 接口返回code数值
4、 token 获取 存缓存
登录成功后,后台会返回token,在登录的接口 js 文件那里
// 登录
checklogin({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
checklogin({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', { data }.data) // token 根据后台传过来的数据格式自取
setToken({ data }.data.token)
resolve(response)
console.log(response)
}).catch(error => {
reject(error)
})
})
},
若登录成功,看一下 F12 的控制台,cookie 中 有没有 存上 token
src/utils/auth.js
import Cookies from 'js-cookie'
const TokenKey = 'token'
//存token的设置, 'token' 这个就是存token值的key, 随便改 看登录后cookie中的token的key名字 是不是改之后的
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function getToken(token) {
return Cookies.get(token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
然后打印一下 getToken('token') 看有没有值。有值就存上cookie了,之后再用 token 的话,就直接写 getToken('token')就可,如果没存上,就是哪里出了问题。
5、调接口传值 ( 传多个值的情况 ) 接口地址以 log/index 为例
建 js文件 就不多说了 这里只写个 data 就可
页面中
<template> // 这个包含获得数据渲染表头和表格,就一起说了吧
<div class="content">
<!-- 表单 -->
<div class="app-table">
<el-table :data="tableData" stripe border style="width: 100%"> // 表格内容
<el-table-column v-for="(item,index) in table" :key="index" :prop="index" :label="item"> // 表头
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
index
} from '../../../api/log' // 这里要引入index,地址后面的字段
export default {
data() {
return {
tableData: [],
table: [],
}
},
created() {
this.listinfo()
},
methods: {
// 列表
listinfo() {
var a = { // 这里面就是需要传的值
xx:xx,
yy:yy,
token: getToken('token')
}
// 这是用的 log.js 中的index 方法 a 就是要传的值
index(a).then((res) => {
// console.log(res)
if (res.code == 1) {
this.table = res.data.list; // 表头
this.tableData = res.data.info; // 表格
} else {
this.$message(res.msg)
}
}).catch((err) => {
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped>
.el-row {
display: flex;
}
</style>
(1)得到接口返回的数据,向页面渲染的时候 报这个错的:
是数据格式的问题 , 见 => 详情
(2) [Vue warn]: Injection “elForm” not found报错
看一下 <el-form-item> 外面有 <el-form> 吗 我的是因为没有加父组件才报的错,网上很多说 element-ui 和 vue 版本不一样
还是要看具体情况。
<el-dialog title="规则编辑" :visible.sync="dvisible">
<el-form :label-position="labelPosition" label-width="80px">
<el-form-item label="id">
<el-input v-model="row.id"></el-input>
</el-form-item>
</el-form>
</el-dialog>
(3)[Vue warn]: Property "center" must be accessed with "$data.center" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internalsSee 这种错的,
一下子出来十多条的,是刚写的代码中有 字段没有定义 或者没有找到对应的方法或者对应的代码,会报这种错,要好好找。