web前端

Vue项目说明

2019-01-10  本文已影响97人  cj_jax

学什么？

创建项目

手动配置路由

element-ui 组件库的使用

项目接口本地搭建

以后每天写项目之前要做的事情

使用 git 管理项目

# 原始提交到远程仓库的命令
git push https://gitee.com/zqran/shop_admin_31.git master
# 有了 remote 后：
git push shop master
# 使用 -u 命令后：
git push shop

# 将 仓库地址 与 shop 这个名称关联到一起
git remote add shop https://gitee.com/zqran/shop_admin_31.git

# -u 就是将 master 设置为默认，提交的时候，就不需要每次都指定 master 分支了
# -u 命令只需要执行一次即可
git push -u shop master

登录功能

搭建登录表单结构

登录逻辑

调整登录组件的样式

ref

编程式导航 - JS代码实现路由跳转功能

element-ui 消息提示组件

// 这是 element-ui 中提供的一个方法，用来做消息提示：

this.$message({
  // 提示信息
  message: res.data.meta.msg,
  // 消息提示的类型
  type: 'error',
  // 表示消息显示时长
  duration: 1000
})

登录访问控制

如何知道有没有登录

样式调整

菜单组件结构分析

<!--
  el-menu 菜单组件
    default-active="2" 设置默认菜单高亮，值是el-menu-item的index值
    @open="handleOpen"    菜单展开事件
    @close="handleClose"  菜单收起事件
    background-color="#545c64" 菜单背景色
    text-color="#fff" 菜单文字颜色
    active-text-color="#ffd04b" 菜单高亮文字颜色
  el-submenu 二级菜单，也就是一个可以展开收起的组件。
    这个组件可以嵌套，形成多级菜单
    index="1" 唯一标志，可以用来设置菜单高亮
  el-menu-item 可点击的菜单项组件
    disabled 表示禁用这个菜单
-->
<el-menu
  default-active="4"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
>
  <el-submenu index="1">
    <template slot="title">
      <!-- 指定了菜单的图标 -->
      <i class="el-icon-location"></i>
      <!-- 指定了菜单名称 -->
      <span>导航一</span>
    </template>
    <!-- 分组菜单： -->
    <el-menu-item-group>
      <template slot="title">分组一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">选项4</template>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

props类型的说明

嵌套路由使用步骤

接口使用说明

用户列表功能

获取用户列表数据

分页获取数据

退出功能

项目中的作用域插槽使用

<template slot-scope="scope">
  <!--
    scope.row 表示当前行数据
    mg_state 就是当前用户的状态
  -->
  <el-switch v-model="scope.row.mg_state"></el-switch>
</template>

切换用户状态功能

优化axios的使用

// 配置基准路径：
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'

// 请求拦截器
// 说明：因为只要是 axios 发送的请求，都会执行 请求拦截器 中的代码
//      所以,可以在 请求拦截器 中, 一次性添加请求头
axios.interceptors.request.use(config => {
  // 统一添加 Authorization 请求头
  config.headers.Authorization = localStorage.getItem('token')
  // 一定要返回 config
  return config
})

// main.js

import axios from 'axios'
Vue.prototype.$http = axios

用户列表 - 查询

用户列表 - 删除

用户列表 - 添加用户

表单验证的说明

使用组件的注意点

用户列表 - 编辑

抽离组件为三部分

<!-- 三个内容中，都是通过 src 属性，引用内容的 -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>

<!-- 如果要使用 less 这样配置： -->
<!-- 1 -->
<style src="./style.less" lang="less"></style>
<!-- 2 安装： npm i -D less less-loader -->

VScode 生成SFC模板

// vue 文件中：

{
  "vue SFC": {
    "prefix": "vuetss",
    "body": [
      "<template src=\"./template.html\"></template>",
      "<script src=\"./script.js\"></script>",
      "<style lang=\"less\" src=\"./style.less\"></style>",
      ""
    ],
    "description": "快速生成单文件组件分离后的结构"
  }
}

权限模块 - 业务逻辑

权限和菜单

总结

角色列表

分析用户拥有的权限数据结构

children: [
  // 权限名称
  roleName: '一级权限',
  // 二级权限列表
  children: [
    {
      roleName: '二级权限 1',
      // 三级权限列表：
      children: []
    },
    {
      roleName: '二级权限 2',
      // 三级权限列表：
      children: []
    }
 ]
]

给角色分配权限

Vue组件样式的问题说明

element-tree-grid

import ElTreeGrid from 'element-tree-grid'
Vue.component(ElTreeGrid.name, ElTreeGrid)

<!--
  label ：设置列名称
  prop ：提供列内容的属性名

  tree-key ：区分其他菜单，不添加该key会导致所有菜单同时展开，添加该key只展开该菜单
  level-key ：设置菜单级别，以缩进形式表示子菜单
  parent-key ：父级菜单id，不添加该key，则无法收起子菜单
  child-key ：指定使用哪个属性名称表示子菜单，默认值为：children
-->

<el-table-tree-column
  tree-key="cat_id"
  level-key="cat_level"
  child-key="children"
  parent-key="cat_pid"
  label="分类名称"
  prop="cat_name"
  width="320"
  :indent-size="20"
>
  <template slot-scope="scope">
    <span>{{ scope.row.cat_name }}</span>
  </template>
</el-table-tree-column>

富文本编辑器

// 导入样式文件：
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

<quill-editor v-model="goodsAddForm.goods_introduce"></quill-editor>

动态获取菜单

加载中效果

<!-- 
  loading 是一个布尔值数据，如果为true表示展示加载中效果；如果为false，表示隐藏加载中效果
-->
<el-table v-loading="loading"></el-table>

添加分类

商品列表

样式 scoped 属性的问题说明

项目打包和优化

优化：按需加载

// 使用：
const Home = () => import('@/components/home/Home')
// 替换：
// import Home from '@/components/home/Home'

// 给打包生产的JS文件起名字
const Home = () =>
  import(/* webpackChunkName: 'home' */ '@/components/home/Home')

// chunkName相同，将 goods 和 goods-add 两个组件，打包到一起
const Goods = () => import(/* webpackChunkName: 'goods' */ '@/components/goods')
const GoodsAdd = () =>
  import(/* webpackChunkName: 'goods' */ '@/components/goods-add')

{
  // [name] 代替 [id]
  chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}

优化：使用CDN

项目中使用CDN

CDN使用步骤

externals: {
  // 键：表示 导入包语法 from 后面跟着的名称
  // 值：表示 script 引入JS文件时，在全局环境中的变量名称
  //  window.Vue / window.axios / window.VueRouter
  vue: 'Vue',
  axios: 'axios',
  'vue-router': 'VueRouter',
  // 注意：带有样式文件的第三方包，需要在 代码中 将样式注释掉！！！
  'element-ui': 'ELEMENT',
  'element-tree-grid': 'ElTableTreeColumn',
  'vue-quill-editor': 'VueQuillEditor'

  BMap: 'BMap',
  echarts: 'echarts',
}

常用包 CDN

Quill

<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

<!-- Include stylesheet -->
<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css" rel="stylesheet"/>

缓存和保留组件状态

1 在需要被缓存组件的路由中添加 meta 属性 meta
属性用来给路由添加一些元信息（其实，就是一些附加信息）
{
  path: '/',
  name: 'home',
  component: Home,
  // 需要被缓存
  meta: { keepAlive: true }
}

2 修改路由出口，替换为以下形式： 根据 meta 是否有 keepAlive
属性，决定该路由是否被缓存
<keep-alive>
  <!-- 这里是会被缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>

<!-- 这里是不被缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"> </router-view>

启用路由的 History 模式

// 去掉 # 后，地址变为： http://localhost:8080/goods 那么，服务器需要正确处理
/goods 才能正确的响应内容， 但是，/goods 不是服务端的接口，而是
用来在浏览器中实现 VueRouter 路由功能的

后端的处理方式

反向代理

proxyTable: {
  // 使用：/api/movie/in_theaters
  // 访问 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
  '/api': {
    // 代理的目标服务器地址
    target: 'https://api.douban.com/v2',
    // https请求需要该设置
    secure: false,
    // 必须设置该项
    changeOrigin: true,
    // '/api/movie/in_theaters' 路径重写为：'/movie/in_theaters'
    pathRewrite: {"^/api" : ""}
  }
}

Vuex

上一篇 下一篇

猜你喜欢

热点阅读