后台框架搭建过程
1.1
创建一个Vue项目
vue create 项目名
1.1.1
选择合适的选项进行安装
· default
· Manually select features
等待一段时间，项目创建完成
1.2.
删除原有的demo
1.2.1
src/views
· about.vue
· home.vue
1.2.2
App.vue
删除对应的nav和style样式
Home |
About
1.2.3
src/router/index.js
引入home的代码，和相关的路由配置全部删除
1.2.4
src/components
删除HelloWord.vue
基于以上操作后，项目才会变成空白项目
1.3
搭建环境
1.3.1
UI框架
· ElementUI
· iview
· antDesign
具体的框架选择，可以选择该网站作为参考
FE
拿iview做例子
1.3.1.1
@vue/cli3/4
vue add vue-cli-plugin-viewui
直接运行，不需要在进行多余的配置
1.3.1.2
如果使用传统方式
安装iview
npm i --save view-design
在main.js中引入iview
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.use(ViewUI)
如果我们需要在一个css中对iview进行重置，则需要去创建一个css并且在main.js引入
在assets中创建css/reset.css，在main.js中引入(需要放在UI组件的css的下面)
import './assets/css/reset.css'
1.3.2
axios
1.3.2.1
安装axios
npm i --save axios
# 或者
yarn add axios
1.3.2.2
创建一个新的axios实例进行配置，并作为模块导出
在src下新建文件utils/server.js
server.js
import axios from 'axios'
// 调用axios的create方法创建一个新的axios
const instance = axios.create({
// 公共的请求前缀
baseURL: 'https://some-domain.com/api/',
// 请求超时时间
timeout: 1000,
// 设置默认的header信息
// headers: {'a': '1'}
})
// 创建axios的请求拦截器(一般设置的是401的问题)
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
// 一般配置config中的headers添加token
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
// 最后将实例导出，未来作为模块使用
export default instance
1.3.3.
接口配置
我们应该对接口进行统一的管理
· GET /books?page=1&limit=10 获取第一页的信息
· GET /books/:id 获取某本书的信息
· POST /books 新建一本书{title: "",ISBN: "",author: "",price: ""}
· PUT /books/:id 更新书本全部内容{title: "",ISBN: "",author: "",price: ""}
· PATCH /books/:id 更新书本部分内容{title: "",ISBN: "",author: "",price: ""}
· DELETE /books/:id 删除某本书
· POST /login{username: '',password: ''}
01
1.3.3.1. 创建文件夹api
在src下创建api文件夹，对应的统一模块的数据应该放在api下的模块.js中，模块中有相应模板
src/api/books.js
// 引入axios的实例
import axios from '@/utils/server'
/*
请求的函数最终返回的一定是一个Promise对象(axios.xxx())
*/
// 获取很多图书信息
/* {
page: 1,
limit: 10
} */
export const getBooks = params => axios.get('/books', {params})
// 获取某一本书
export const getBook = id => axios.get(`/books/${id}`)
// 创建一本书
export const postBook = data => axios.post('/books', data)
// 更新一本书
export const putBook = (id, data) => axios.put(`/books/${id}`, data)
export const patchBook = (id, data) => axios.patch(`/books/${id}`, data)
// 删除一本书
export const deleteBook = id => axios.delete(`/books/${id}`)
src/api/user.js
import axios from '@/utils/server'
export const login = data => axios.post('/login', data)
1.3.4
路由配置
根据左侧导航菜单进行路由的配置
· Dashboard
· 主控台
· 监控页
· 工作台
· 表单页面
· 基础表单
· 高级表单
· 列表页面
· 基础列表
· 用户列表
· 搜索页面
· 文章列表
· 项目列表
// 这里的相关path没有按要求写，只是个例子
const routes = [
{
path: '/Dashboard',
component: Layout,
children: [
{
path: '主控台',
}, {
path: '监控页'
}, {
path: '工作台'
}
]
}, {
path: '/表单页面',
component: Layout,
children: [
{
path: '基础表单'
}, {
path: '高级表单'
}
]
}
]
src/router/Dashboard.js
import Layout from 'Layout路径'
export default {
path: '/Dashboard',
redirect: '/Dashboard/主控台',
component: Layout,
children: [
{
path: '主控台',
component: () => import('组件路径')
}, {
path: '监控页',
component: () => import('组件路径')
}, {
path: '工作台',
component: () => import('组件路径')
}
]
}
src/router/表单页面.js
import Layout from 'Layout路径'
export default {
path: '/表单页面',
redirect: '/表单页面/基础表单',
component: Layout,
children: [
{
path: '基础表单',
component: () => import('组件路径')
}, {
path: '高级表单',
component: () => import('组件路径')
}
]
}
这个时候我们就可以在router/index.js中引入对应的路由模块
import Dashboard from 'Dashboard.js'
import 表单页面 from '表单页面.js'
const routes = [
Dashboard,
表单页面
]
如果我们还有新增的菜单，我们可以继续
1. 新建文件src/router/菜单.js
2. 在对应的文件中配置对应的路由
import Layout from 'Layout路径'
export default {
path: '/一级菜单路径',
redirect: '/一级菜单路径/二级菜单路径'
component: Layout,
children: [
{
path: '二级菜单路径',
component: () => import('组件路径')
}
]
}
3. 把这个对象在src/router/index.js中引入
import Dashboard from 'Dashboard.js'
import 表单页面 from '表单页面.js'
import 菜单 from '菜单.js'
const routes = [
Dashboard,
表单页面,
菜单
]
1.3.4.1
添加路由后自动渲染菜单
该功能需要我们自己实现，在我们的菜单组件中，获取到对应的路由配置，根据路由配置的数组遍历得到菜单结构
先在src/router/index.js导出routes
export const routes = [
//...
]
在对应的菜单组件中，引入对应的routes
在渲染时，我们发现，缺少必要的信息，例如
import Layout from 'Layout路径'
export default {
path: '/一级菜单路径',
component: Layout,
meta: {
title: "一级菜单",
icon: "ios-xxx"
},
children: [
{
path: '二级菜单路径',
component: () => import('组件路径'),
meta: {
title: "二级菜单"
}
},
{
path: '二级菜单路径(不需要渲染到菜单)',
component: () => import('组件路径'),
meta: {
title: "二级菜单",
hidden: true
}
}
]
}
{
"title": "",
"icon": ""
}
这些自定义信息，我们可以添加到meta中
src/components/Sider.vue
{{parent.meta.title}}
{{child.meta.title}}
import {routes} from '@/router'
export default {
data () {
return {
routes
}
}
}
1.3.5
路由组件创建
src/views中存放我们的路由组件，原则上，一个模块应该分别在一个文件夹
- views
- dashboard
- 总控台.vue
- 监控页.vue
- 工作台.vue
- 表单
- 普通表单.vue
- 高级表单.vue
如果是属于路由组件中的普通组件
- components
- 路由组件名(文件夹)
- 普通组件.vue
1.3.6
vuex
vuex最好使用modules，在配置时，添加对应模块在src/store/modules
- modules
- dashboard.js
- 表单.js
在每个js中结构都是相同的
demo.js
export default {
namespaced: true,
state: {},
mutations: {},
actions: {}
getters: {},
modules: {}
}
再把模块js放置在src/store/index.js中
index.js
import 模块 from '模块路径'
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules: {
模块
}
})
如果我们要用到请求，那么在对应模块中引入，并在action里调用
如果我们想要在vuex中使用Message、router等相关的对象
直接引入即可
import {Message} from 'view-design'
import router from '@/router'
在vue中有一些东西是一样
this.$store === new Vue.Store()
this.$router === new VueRouter()
文/云和数据高级H5开发工程师
相关链接： 致全体云和数据复课学生的一封信 高亮！2020年4月全国程序员工资新鲜出炉 毕业在即，选择IT行业就业会更好吗？ 裁员降薪浪潮再现？你凭借什么在职场中生存下去？ 点击文末“”咨询，免费来云和试听课程——UI视觉交互精英班、PHP全栈web高薪班、JAVA大数据精英班、HTML5全栈精英班、Unity虚拟现实大师班、全域电商精英班、大数据人工智能专家班、华为认证课程，座位有限，先抢先得！
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
