Vue基础-Day06
- 前端工程化
- 综合项目实战

Vue基础-Day06

前端工程化

基本概念介绍

软件工程：可行性分析、需求分析、设计（概要设计、详细设计）、软件开发、测试、实施（运维）前端工程化：独立的设计、独立的开发；独立测试；独立运维

为了实现更加方便的前端工程化，Vue的技术栈提供了一个非常方便的工具：脚手架

脚手架可以非常方便快速的让前端开发人员基于前端工程化的模式进行项目开发。

总结：什么是前端工程化？前端有一套独立的设计、开发、测试、打包、上线、运维…一整套操作流程如何快速实现这套流程？基于一套现有的工具：脚手架

脚手架基本使用

目标：熟悉脚手架用法

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

安装脚手架（安装工具）

npm install -g @vue/cli

查看版本号

# 如果看到了版本号就证明安装成功了
vue --version

基于脚手架创建项目（使用工具创建项目）

# project-demo 为项目的名称
vue create mydemo

启动项目

# 切换到项目目录
cd mydemo
# 启动项目
npm run serve

浏览器地址栏输入如下网址，如果能看到页面效果，证明项目已经启动成功

http://localhost:8080/

总结：

安装脚手架工具
使用这个工具创建项目
运行项目

脚手架项目结构分析

目标：熟悉脚手架创建项目代码的基本结构

|-public  -----------------------------------------------单页面
|-src  --------------------------------------------------项目源代码
    |-assets  -------------------------------------------项目用到的相关资源
    |-components  ---------------------------------------Vue组件
    |-App.vue  ------------------------------------------项目跟组件
    |-main.js  ------------------------------------------项目入口文件
|-.gitignore  -------------------------------------------git配置文件（忽略文件管理）
|-babel.config.js  --------------------------------------babel配置文件（控制ES6编译）
|-package.json  -----------------------------------------项目包管理文件
|-README.md  --------------------------------------------项目说明文档

总结：熟悉脚手架创建的项目的目录结构

ES6模块化开发

模板：熟悉ES6模块化规则 CommonJS模块化规范

导出 module.exports = {}
导入 require()

ES6模块化规范

导出 export
导入 import

基本的导入导出

// 导出一个变量
export const info = 'hello'
// 导出一个函数
export function showInfo () {
  console.log('nihao')
}

// 导入ES6模块的成员
// 单个成员的导入（对象的解构赋值用法）
import {info, showInfo} from './module/01.js'
console.log(info)
showInfo()

总结：

通过export关键字导出模块成员（包括变量和函数）
通过import { 成员名称 } from '模块路径' 实现导入

默认导出用法

// 通过export default方式实现默认导出
// 默认导出只能有一个
const fn = function () {
  console.log('hello')
}
export default {
  info: 'nihao',
  fn: fn
}

// 导入默认的信息，此时可以自定义名称，并且不可以添加花括号解构
import obj from './module/m2.js'
console.log(obj.info)
obj.fn()

总结：

默认导出只能有一个
导入默认信息可以自定义名称，但是不可以在自定义名称外面包裹花括号

有名字导出和默认导出结合使用

// 基本导出和默认导出结合使用
// 有名字的导出
export const msg = 'hello'
// 默认导出
export default {
  info: 'nihao'
}

// 导入默认和有名字导入结合
// 默认导入写到前面，解构导入写后面
import obj, { msg } from './module/m3.js'
console.log(obj.info)
console.log(msg)

总结:

默认导入写到前面，解构导入写后面
两者可以结合使用

入口文件分析

目标：熟悉入口文件相关代码业务逻辑

// 导入Vue核心构造函数
import Vue from 'vue'
// 导入根组件
import App from './App.vue'
// 配置开发提示信息
Vue.config.productionTip = false
// 实例化根组件
new Vue({
  // render的作用：生成组件模板，类似于template作用
  render: h => h(App),
}).$mount('#app')
// $mount('#app')的作用类似于el: '#app'的作用，用于挂载组件到页面容器div中。

productionTip启用后的提示信息

总结：入口文件实现了根组件挂载页面的功能

单文件组件

目标：熟悉单文件组件的基本结构

<template>
  <div id="app">
    <!-- 组件模板 -->
  </div>
</template>
<script>
// 组件配置选项
export default {
  name: 'App'
}
</script>
<style>
/* 这里添加组件相关样式 */
</style>

单文件组件的组成

template用来提供组件的模板
script用来提供组件的配置选项
style用来提供组件的样式

综合项目实战

项目介绍

项目整体功能：图书管理；人员管理；楼层管理

图书管理
- 图书列表
- 添加图书
- 删除图书
- 修改图书

初始化项目

目标：能够基于VueCli创建项目

通过vue create命令创建项目

vue create mybook

cd mybook

运行项目

npm run serve

页面基本布局

目标：能够基于Bootstrap实现案例的基本布局结构

分析页面的组件结构
- NavBar.vue 顶部导航组件
- Aside.vue 左侧菜单组件
- BookList.vue 英雄列表组件
- BookAdd.vue 添加英雄组件
- BookEdit.vue 编辑英雄组件
- PersonList.vue 装备列表组件
- FloorList.vue 技能列表组件
安装bootstrap包

npm i bootstrap@3.3.7

导入样式

// 引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'

导航组件

实现顶部导航组件

拆分组件实现布局 NavBar.vue

<template>
  <nav class="navbar navbar-inverse">
    <a class="navbar-brand" href="#">CURD</a>
  </nav>
</template>
<script>
export default {
  name: 'NavBar'
}
</script>

导入组件并使用

<!-- 组件的模板HTML -->
<template>
  <div id="app" class="container">
    <!-- 顶部导航栏组件 -->
    <NavBar/>
  </div>
</template>
<!-- 组件的配置选项JS -->
<script>
// 导入另外一个组件
import NavBar from './components/NavBar.vue'
export default {
  // 组件的名称，方便调试使用
  name: 'App',
  components: {
    NavBar
  }
}
</script>

侧边栏组件

拆分侧边栏组件布局

组件模板布局

<template>
  <div class="col-md-2">
    <div class="row">
      <div class="list-group">
        <a href="#" class="list-group-item active">图书列表</a>
        <a href="#" class="list-group-item">人员列表</a>
        <a href="#" class="list-group-item">楼层列表</a>
      </div>
    </div>
  </div>
</template>

导入组件用法

<template>
  <div class="container">
    <!-- 在脚手架的环境下，使用如下的两种命名方式都可以 -->
    <!-- <NavBar/> -->
    <!-- 顶部导航栏组件 -->
    <nav-bar/>
    <!-- 左侧菜单组件:单个单词的组件名称不可以使用纯小写的方式，但是首字符大写是可以的 -->
    <aside-menu/>
  </div>
</template>
<script>
// 导入子组件
import NavBar from './components/NavBar.vue'
import AsideMenu from './components/Aside.vue'
export default {
  // 配置局部子组件
  components: {
    NavBar,
    AsideMenu
  }
}
</script>

路由配置

目标：实现点击侧边栏的连接。需要切换右侧的内容。这个需要路由来实现。

安装vue-router

npm i vue-router

导入路由

import VueRouter from 'vue-router'

注册路由(配置路由插件)

Vue.use(VueRouter)

准备路由组件

BookList.vue
PersonList.vue
FloorList.vue

配置路由规则

import BookList from './components/BookList.vue'import PersonList from './components/PersonList.vue'import FloorList from './components/FloorList.vue'// 配置路由映射const routes = [  {path: '/', redirect: '/books'},  {path: '/books', component: BookList},  {path: '/persons', component: PersonList},  {path: '/floors', component: FloorList},]

实例化路由对象

const router = new VueRouter({ routes })

挂载路由对象到Vue实例上

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

配置路由链接

components/Aside.vue

<router-link to="/heroes" class="list-group-item active">英雄列表</router-link>
<router-link to="/zb" class="list-group-item">装备列表</router-link>
<router-link to="/jn" class="list-group-item">技能列表</router-link>

配置路由填充位

App.vue

<div class="col-md-10">
  <!-- 路由对应组件显示的位置 -->
  <router-view></router-view>
</div>

控制路由跳转菜单激活

目标：实现路由跳转菜单高亮控制

激活（高亮）：点击哪一个链接，哪一个链接应该添加一个类名active，没有点中的链接标签去掉类名

实现原理：基于vue-router的相关配置，自动给链接标签添加指定的类名

// linkExactActiveClass属性的作用：控制点中链接标签后添加的类名名称，默认的名称是router-link-active
const router = new VueRouter({ routes , linkExactActiveClass: 'active'})

拆分路由模块

目标：main.js 的职责足够单一，让代码更好维护。全局资源导入，根实例初始化。

封装路由模块：src/router/index.js

// 1. 导入插件import VueRouter from 'vue-router'// 2.  注册路由import Vue from 'vue'Vue.use(VueRouter)// 3. 导入路由组件import HeroesList from './views/HeroesList.vue'import ZbList from './views/ZbList.vue'import JnList from './views/JnList.vue'// 4. 配置路由规则const routes = [  { path: '/', redirect: '/heroes' },  { path: '/heroes', component: HeroesList },  { path: '/zb', component: ZbList },  { path: '/jn', component: JnList }]// 5. 初始化路由const router = new VueRouter({ routes , linkExactActiveClass: 'active'})// 6. 导出路由实例export default router

导入路由模块

import Vue from 'vue'import App from './App.vue'// 引入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'// 导入路由实例import router from './router'Vue.config.productionTip = falsenew Vue({  render: h => h(App),  // 挂载路由实例  router}).$mount('#app')

准备接口

目标：基于json-server模拟接口。

创建db.json文件

{  "books": [    { "id": 1, "bname": "西游记", "author": "吴承恩", "ctime": "2020-03-21 10:38:20" },    { "id": 2, "bname": "红楼梦", "author": "曹雪芹", "ctime": "2020-03-21 10:38:20" },    { "id": 3, "bname": "三国演义", "author": "罗贯中", "ctime": "2020-03-21 10:38:20" }  ]}

启动接口

json-server db.json测试接口地址：http://localhost:3000/books

安装axios包

npm i axios

英雄列表组件

目标：实现英雄列表组件

组件基本布局

<template>  <div class="list-container">    <a href="heroes-form.html" class="btn btn-primary">添加英雄</a>    <hr />    <table class="table table-hover">      <thead>        <tr>          <th>ID</th>          <th>英雄名称</th>          <th>英雄性别</th>          <th>创建时间</th>          <th>操作</th>        </tr>      </thead>      <tbody>        <tr>          <td>101</td>          <td>亚索</td>          <td>男</td>          <td>2019-02-10 10:50:12</td>          <td>            <button class="btn btn-success">编辑</button>&nbsp;            <button class="btn btn-danger">删除</button>          </td>        </tr>      </tbody>    </table>  </div></template><script>export default {}</script><style></style>

在组件初始化时，获取英雄列表数据

// 导入axios
import axios from 'axios'
export default {
  data () {
    return {
      bookList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取英雄列表数据
    loadList () {
      // 通过axios发查询列表请求
      axios.get('http://localhost:3000/books').then(res=>{
        this.bookList = res.data
      })
    }
  }
}

根据list数据，进行模板渲染。

<tbody>
  <tr :key='item.id' v-for='item in bookList'>
    <td>{{item.id}}</td>
    <td>{{item.bname}}</td>
    <td>{{item.author}}</td>
    <td>{{item.ctime}}</td>
    <td>
      <button class="btn btn-success">编辑</button>
      <button class="btn btn-danger">删除</button>
    </td>
  </tr>
</tbody>

添加英雄组件

目标：实现添加英雄功能

添加链接跳转

<router-link to="/heroes/add" class="btn btn-primary">添加英雄</router-link>

创建组件，基础布局 src/views/HeroesAdd.vue

<template>  <form action method="post" role="form">    <legend>添加英雄</legend>    <div class="form-group">      <label>英雄名称</label>      <input type="text" class="form-control" />    </div>    <div class="form-group">      <label>英雄性别</label>      <div>        <input type="radio" name="gender" value="男"> 男        <input type="radio" name="gender" value="女"> 女      </div>    </div>    <button type="submit" class="btn btn-primary">提交</button>  </form></template><script>export default {}</script><style></style>

配置路由规则 src/router.js

// 导入组件import HeroesAdd from './views/HeroesAdd.vue'// 配置路由映射{ path: '/heroes/add', component: HeroesAdd },

收集英雄表单数据

<div class="form-group">  <label>英雄名称</label>+    <input v-model="heroesForm.hName" type="text" class="form-control" /></div><div class="form-group">  <label>英雄性别</label>  <div>+    <input v-model="heroesForm.hGender" type="radio" name="gender" value="男"> 男+    <input v-model="heroesForm.hGender" type="radio" name="gender" value="女"> 女  </div></div>

绑定表单的提交事件，阻止默认的提交行为，使用axios来异步提交。

<form @submit.prevent="submit()">

在处理函数中，进行添加，如果添加成功，跳转列表

methods: {  submit() {    // 使用axios进行添加英雄请求    // 传参对象：hName  hGender cTime 后台需要    // 操作：把 heroesForm 与 cTime 合并到传参对象中    axios      .post("http://localhost:3000/heroes", {        cTime: new Date(),        ...this.heroesForm      })      .then(() => {        // 成功 跳转列表        this.$router.push('/heroes')      }).catch(()=>{        alert('添加失败')      })  }}

编辑英雄组件

目标：实现编辑英雄功能

实现动态跳转：views/HeroesList.vue

<router-link :to="'/heroes/edit/'+item.id" class="btn btn-success">编辑</router-link>

准备编辑组件，基础布局。 src/views/HeroesEdit.vue

<template>
  <form action method="post" role="form">
    <legend>编辑英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" name="gender" value="男"> 男
        <input type="radio" name="gender" value="女"> 女
      </div>
    </div>
    <button type="submit" class="btn btn-success">修改</button>
  </form>
</template>
<script>
export default {}
</script>
<style>
</style>

配置路由规则，通过动态路由规则，来指向编辑组件。 src/router.js

// 导入组件
import HeroesEdit from './views/HeroesEdit.vue'
// 路由映射配置
  { path: '/heroes/add', component: HeroesAdd },
+  // 编辑
+  { path: '/heroes/edit/:id', component: HeroesEdit },
  { path: '/zb', component: ZbList },

绑定表单数据

export default {
  data () {
    return {
      // 英雄表单数据对象
      heroesForm: {
        hName: '',
        hGender: ''
      }
    }
  }
}

    <div class="form-group">
      <label>英雄名称</label>
+      <input v-model="heroesForm.hName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
+        <input v-model="heroesForm.hGender" type="radio" name="gender" value="男"> 男
+        <input v-model="heroesForm.hGender" type="radio" name="gender" value="女"> 女
      </div>
    </div>

组件初始化，获取当前英雄的信息，展示在表单中。

created() {
    this.getHeroes();
  },
  methods: {
    getHeroes() {
      // 根据地址栏路径上的传参  名字叫id  去后台获取对应的英雄数据
      // 当前编辑的英雄ID
      const id = this.$route.params.id;
      axios.get(`http://localhost:3000/heroes/${id}`).then(res => {
        // console.log(res.data);
        // 填充表单，就是去修改 heroesForm 数据
        this.heroesForm.hName = res.data.hName
        this.heroesForm.hGender = res.data.hGender
      });
    }
  }

点击修改按钮，发起修改，修改成功后，列表组件。

<form @submit.prevent="update()">

methods: {
  submit() {
    // 使用axios进行添加英雄请求
    // 传参对象：hName  hGender cTime 后台需要
    // 操作：把 heroesForm 与 cTime 合并到传参对象中
    axios
      .post("http://localhost:3000/heroes", {
        cTime: new Date(),
        ...this.heroesForm
      })
      .then(() => {
        // 成功 跳转列表
        this.$router.push('/heroes')
      }).catch(()=>{
        alert('添加失败')
      })
  }
}

删除功能

目标：实现删除英雄功能

绑定删除按钮点击事件
弹出确认框
点击确认，发送删除请求
删除成功，更新当前列表

<button @click="delHeroes(item.id)" class="btn btn-danger">删除</button>

// 删除英雄
delHeroes(id) {
  if (confirm("是否确定删除英雄？")) {
    axios.delete(`http://localhost:3000/heroes/${id}`).then(()=>{
      // 删除成功 更新列表
      this.getList()
    }).catch(()=>{
      alert('删除失败')
    })
  }
},

时间过滤器

目标：基于moment包实现时间格式化过滤器

安装 moment

npm i moment

导入moment HeroesList.vue

// 导入moment
import moment from 'moment';

定义过滤器

filters: {
    // formatTime 过滤器名字，对应的函数处理格式。
    formatTime (value) {
        // 使用过滤器的时候，管道符 | 前的js表达式执行结果，就是value
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
},

使用过滤器

<td>{{item.cTime|formatTime}}</td>

axios全局配置

目标：全局配置axios

在组件中使用axios
每一个组件其实也是vue实例
实例都可以访问当构造函数的原型（方法|属性）
所以，把axios挂载到Vue的原型上
将来，任何组件都可以访问axios

// 进行axios的全局挂载
import axios from 'axios'
// 将来通过vue的实例访问$http，其实就是axios。
Vue.prototype.$http = axios