基于Vue开发电商后台管理系统项目回顾——前期准备

标题：基于Vue开发PC端电商后台管理系统项目回顾——前期准备

功能：
管理用户账号（登录，退出，用户管理，权限管理），
商品管理（商品分类，分类参数，商品信息，订单），
数据统计

开发模式
电商后台管理系统采用前后端分离的开发模式
前端项目是基于Vue的SPA（单页应用程序）项目

技术选型
前端技术栈:
Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈（了解）：
Node.js,Express,Jwt(模拟session),Mysql,Sequelize()

1.前端项目初始化
A.安装Vue脚手架，基于图形化界面的方式
以管理者身份运行cmd: 运行 vue ui 命令，打开图形化界面
B.通过脚手架创建项目
通过 Vue 项目管理器，进入具体的项目配置面板
选择：1.Linter/Formatter(代码校验)；2.Babel；3.Router；4.使用配置文件
select选择:ESLint+Standard config
C.配置路由
默认使用的是hash模式的路由
D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element
选择import on demand 按需导入，从而减少打包后项目的体积
如何确认组件安装成功？
启动App，复制组件代码到项目中，运行查看
（mian.js:import ‘./plugins/element.js’ 引入element-ui，必须要使用Vue.use()注册之后，才能使用element-ui的组件）
1.plugins->element.js中： import Vue form ‘vue’
2.按需导入 ： import {Button} from ‘element-ui’
3.注册为全局可用组件 Vue.use(Button)
4.将组件button粘贴到App.vue中，浏览器中运行，查看效果
5.设置使用组件的消息提醒组件和确认组件
导入组件并注册后：添加到Vue原型链方便调用this.$message.success{(}^{\prime }登录成{功}^{\prime })Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
E.配置Axios：在依赖中安装,搜索axios(运行依赖)
F:配置less加载器（开发依赖），安装less和less-loader(开发依赖)

2.后台项目的环境安装配置
A .安装 MySQL 数据库
1.双击运行phpStudy20161103.exe
2.点击phpStudy打开，只启动MySQL数据库
3.导入数据库数据
3.1.解压vue_api_server
3.2.phpStudy->MySQL导入导出：选择要还原的文件vue_api_server\db\mydb.sql 密码root 名字mydb一致
3.3.查看成功与否：MySQL根据->打开数据库目录,phpStudy\MySQL\data\mydb 里有很多文件就行了
B. 安装 Node.js 环境
C.配置项目相关信息
E.启动项目
1.打开文件路劲vue_api_server右键开大powerhell运行命令“npm install ”安装依赖包
2.node app.js 或者node .\app.js 启动api接口项目
3.点击打开phpStudy数据库
F 使用 Postman 测试后台项目接口是否正常

3.main入口文件代码初始化
A.main.js文件（入口文件）
1.引入组件插件：import ‘./plugins/element.js’
2.自定义的全局样式：import ‘./assets/css/global.css’
3.引入字体图标：import ‘./assets/fonts/iconfont.css’
4.引入并配置运行依赖axios：import axios from ‘axios’

	// 配置请求的跟路径(参考API接口文档)
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
Vue.prototype.$http = axios   //后续this.$http就是调用axios

5.设置为开发环境false或者生产环境(默认true)
Vue.config.productionTip = false
5.1.开发模式：npm run dev是前端自己开发用的,开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱
5.2.生产模式：npm run build 打包之后给后端放在服务端上用的
6.安装、导入富文本编辑器插件、树状表格(第三方组件)
使用Vue.component()方法注册全局组件
使用Vue.use注册插件

import TreeTable from 'vue-table-with-tree-grid'
// 导入富文本编辑器插件
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.component('tree-table', TreeTable)
// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

7.定义时间过滤器

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

8.挂载路由和根组件

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.App.vue根组件初始化
template中留下根节点，script中留下默认导出(对应main.js中“app”)，
路由占位符作用：根据路由匹配到的组件都会渲染到这个占位符里面展示

5.改造路由文件
5.1.嵌套路由
5.2.可挂载路由导航守卫：路由执行前只有在具有token时才会放行

import Vue from 'vue'
//引入组件(登录页面)
import Login from './components/Login.vue'
import Router from 'vue-router'
//上面引入路由插件，下注册插件
Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
       {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },    
       ]
    }
  ]
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行   next('/login')  强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router