vue-admin-element https://panjiachen.github.io/vue-element-admin-site/zh/
基于vue的生态做的很好，提供的很多的文档，中文。并且有视频。
vue
element == element ui
vue-cli实现（脚手架）
内置了 i18 国际化解决方案 提供了中文
1、安装：
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install # FQ安装 npm == linux 中 yum 包管理工具 npm时候node的包管理工具
# node_modules
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 需要启动mock服务
# 运行 mock
# python mock.py
# 本地开发 启动项目
npm run dev # 项目的根目录
2、框架中重点关注：
├── src # 源代码
│ ├── api # 所有请求 *
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件 *
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由 *
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 *
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
3、目标：
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录
cd vue-element-admin # 安装依赖
npm install # FQ安装 npm == linux 中 yum 包管理工具 npm时候node的包管理工具
# node_modules # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org # 需要启动mock服务
# 运行 mock
# python mock.py # 本地开发 启动项目
npm run dev # 项目的根目录
├── src # 源代码
│ ├── api # 所有请求 *
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件 *
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由 *
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 *
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
3、目标：
parameter.html 迁移到 vue-admin框架
parameter.html 就是基于elementui实现的 vue-element-admin 框架也是基于 vue和element-ui实现的
前端 3 大块
js、css、html
导入模块，导出模块：
第一种
export { parameterRouter } // 导出模块
import { parameterRouter } from './modules/parameter' 第二种
export default { // 只能导出一个
name: 'parameter'
}
import chartsRouter from './modules/charts' // 不带大括号的都是 和 export default结合使用的
代码爆红：
代码爆红是由于框架增加了代码格式验证
需要修改根目录下 .eslintrc.js 中rules改为 rules:{}
4、新建页面：
4.1 配置路由
例：src/router/parameter.js
import Layout from '@/layout' //导入一个模块，菜单模块
const parameterRouter = { //定义一个常量
path: '/main', //路径
component: Layout,
redirect: 'noRedirect', //重定向
meta: {
icon: 'lock',
roles: ['qa'] // 权限
},
children: [
{
path: 'parameter',
component: () => import('@/views/parameter/index'),
name: '参数管理',
meta: { title: '参数管理', icon: 'table' }
}
]
} export { parameterRouter } //导出模块，当你想要外部应用你的模块，要用export，多个变量用，隔开 export{a,b}
4.2 在src/router/index.js中导入模块
/* Router Modules */
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'
import { parameterRouter } from './modules/parameter'
export const asyncRoutes = [
parameterRouter,
{
path: '/permission',
component: Layout,
redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
name: 'Permission',
meta: {
title: 'permission',
icon: 'lock',
roles: ['qa', 'editor'] // you can set roles in root nav
}
]
asyncRoutes:受权限控制的模块
constantRoutes：全部模块，不受权限控制
导入成功后，在左侧菜单栏处，能看到新增页面
4.3 在Views目录创建 对应业务的文件夹，文件夹下有默认的一个index.vue parameter.html
例：src/views/parameter目下有个index.vue
<template>
<div class="app-container">
<div id="bar">
<!--搜索、筛选-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input placeholder="搜索" v-model="filter_query.search"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add_collection">添加</el-button>
</el-form-item>
</el-form>
</div>
<div id="table">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
v-loading="loading" element-loading-text="玩命加载中...">
<el-table-column
prop="id"
label="ID">
</el-table-column>
<el-table-column
prop="name"
label="参数名称">
</el-table-column>
<el-table-column
prop="desc"
label="描述"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="value"
label="参数值"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handle_edit(scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handle_delete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table> </div>
<div id="edit">
<el-dialog :title="dialog_title" :visible.sync="dialogFormVisible" v-loading="loading"
element-loading-text="玩命加载中..."> <el-form :model="form"> <el-form-item label="参数名称" :label-width="formLabelWidth">
<el-input v-model="form.name" style="width: 50%" placeholder="请输入参数名称"></el-input>
</el-form-item>
<el-form-item label="描述" :label-width="formLabelWidth">
<el-input type="textarea" v-model="form.desc" style="width: 50%" placeholder="请输入参数描述"></el-input> </el-form-item>
<el-form-item label="参数值" :label-width="formLabelWidth">
<el-input v-model="form.value" style="width: 50%" placeholder="请输入参数值"></el-input>
</el-form-item> </el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="operate" :loading="button_loading">确 定</el-button>
</div>
</el-dialog>
</div>
<div id="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="filter_query.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template> <script>
import { getParameter, deleteParameter, putParameter, postParameter } from '@/api/parameter' export default {
name: 'parameter',
mounted() {
this.get_page_data()
},
data: function() {
return {
currentPage: 1,
total: 0,
filter_query: {
search: undefined,
limit: 10,
page: 1
},
tableData: [],
dialogFormVisible: false,
dialog_title: '添加',
form: {
name: '',
value: '',
desc: ''
},
formLabelWidth: '120px',
value: [],
loading: false,
button_loading: false,
id: undefined
}
},
methods: {
handleSizeChange(val) {
this.filter_query.limit = val
this.filter_query.page = 1
this.get_page_data()
},
handleCurrentChange(val) {
this.filter_query.page = val
this.get_page_data()
},
data_to_string(data) {
let tmp = new FormData()
for (var key in data) {
tmp.append(key, data[key])
}
return tmp
},
get_page_data: function() {
this.loading = true //
getParameter(this.filter_query).then((response) => {
this.tableData = response.data.data
this.total = response.data.count
this.loading = false //
})
},
search: function() {
this.filter_query.page = 1
this.get_page_data()
},
handle_edit(row) {
// this.form = Object.assign({}, {name: row.name, value: row.value, desc: row.desc}); //深拷贝
this.form = { name: row.name, value: row.value, desc: row.desc } //深拷贝
this.form.id = row.id
this.dialog_title = '编辑'
this.dialogFormVisible = true //打开模态框
},
handle_delete(row) {
this.$confirm('确认删除当前参数吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteParameter({ id: row.id }).then((response) => {
if (response.data.code == 0) {
this.$message({
type: 'success',
message: '删除成功'
})
this.get_page_data()
} else {
this.$message({
type: 'error',
message: response.data.msg
})
}
}).catch((error) => {
this.$message({
type: 'error',
message: error
})
}) }).catch(() => {
this.$message({
type: 'info',
message: '取消删除'
})
}) },
add_collection() {
this.reset_form()
this.dialog_title = '添加'
this.dialogFormVisible = true
},
reset_form() {
//form数据置为空
this.form = {
name: '',
desc: '',
value: ''
}
},
operate() {
this.button_loading = true
if (this.dialog_title == '添加') {
postParameter(this.data_to_string(this.form)).then((response) => {
this.button_loading = false
if (response.data.code == 0) {
this.dialogFormVisible = false //关闭模态框
this.get_page_data()
} else {
this.$message({
type: 'error',
message: response.data.msg
})
}
}).catch((error) => {
this.button_loading = false
this.$message({
type: 'error',
message: error
})
})
} else if (this.dialog_title == '编辑') {
putParameter(this.data_to_string(this.form)).then((response) => {
this.button_loading = false
if (response.data.code == 0) {
this.dialogFormVisible = false //关闭模态框
this.get_page_data()
} else {
this.$message({
type: 'error',
message: response.data.msg
})
}
}).catch((error) => {
this.button_loading = false
this.$message({
type: 'error',
message: error
})
})
} }
}
}
</script> <style scoped> </style>
4.4 创建API，和后台请求的接口，每开发一个模块，需要在src/api目录下创建一个针对这个模块的API接口
例：src/api/parameter.js
import request from '@/utils/request' //@代表src目录 //获取参数信息
export function getParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'get',
params:params
})
} //删除参数信息
export function deleteParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'delete',
params:params
})
} export function putParameter(data) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'put',
data:data
})
} export function postParameter(data) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'post',
data:data
})
}
4.5 src/utils/requests.js 实际是对axios进行封装，最后暴露一个模块
import request from '@/utils/request' //@代表src目录
export function getParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'get',
params:params
})
}
//引用
//getParameter(this.filter_query)相当于axios()
get_page_data: function() {
this.loading = true //
getParameter(this.filter_query).then((response) => {
this.tableData = response.data.data
this.total = response.data.count
this.loading = false //
})
},
4、pycharm安装vue插件
File--Settings--Plugins
搜索vue，选择第一个vue.js，Install
安装成功后，重启pycharm
