【JavaWeb学习Day24】

Web前端实战

Vue工程化

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org）

Vue项目工程化：在企业级的前端项目开发中，把前端开发所需求的工具、技术、流程、经验等进行规范、标准化。

模块化：项目划分若干模块，单独开发、维护、提高效率。

组件化：将页面的各个组成部分封装为一个一个的组件，提高复用。

规范化：提供标准统一的目录结构，编码规范、开发流程。

自动化：项目的构建、开发、测试、打包、部署

环境准备：

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供的功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

依赖环境：NodeJS

npm：Node Package Manager，是NodeJS的软件包管理器

Vue项目简介

创建：

创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4

（提示：执行上述指令，将会安装并执行create-vue，他是Vue官方的项目脚手架工具）

进入项目目录，执行命令安装当前项目的依赖：npm install

（注意：创建项目以及安装依赖的过程，都是需要联网的。）

项目结构：

启动：执行命令：npm run dev ，就可以启动了

Vue项目开发流程

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue的单文件组件会将一个组件的逻辑（JS），模板（HTML）和样式（CSS）封装在同一个文件里.vue

API分格

选项式API：可以包含多个选项的对象来描述组件的逻辑，如：data、method、mounted等，选项定义的属性都会暴露在函数内部的this上，他会指向当前的组件实例。

组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑，他提供了一种更灵活更可组合的方式来编写组件

​

<script setup>
//引入ref函数和onMounted函数
import { ref, onMounted } from 'vue'
//声明相应式数据
const count = ref(0);
​
//声明函数 - 在组合是Api中没有this
function add() {
  count.value++;
}
//钩子函数
onMounted(() => {
  console.log('vue mounted...')
})
</script>
<template>
  <button @click="add">count is {{count}}</button>
</template>
<style scoped>
</style>

setup：是一个标识，告诉vue需要进行一些处理，让我们可以更简洁的使用组合式API

ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有指向内部值的属性value。

onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

（在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。）

案例

要求在页面加载完毕后，发送异步请求，加载数据，渲染表格

项目中用到axios，就需要安装axios的依赖：npm install axios

<script setup>
//引入ref函数
import { ref,onMounted } from 'vue';
import axios from 'axios';
//声明相应式数据
const name = ref('');
const gender = ref('');
const job = ref(1);
const userList = ref([]);
​
//声明函数
async function search() {
 const result = await axios.get('https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}').then(result =>{
  userList.value = result.data.data;
 })
}
​
//钩子函数
onMounted(() => {
  search();
})
 
</script>
 
<template>
  <div id="center">
    姓名: <input type="text" name="name" v-model="name">
 
    性别:
    <select name="gender" v-model="gender">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
 
    职位:
    <select name="job" v-model="job">
      <option value="1">班主任</option>
      <option value="2">讲师</option>
      <option value="3">其他</option>
    </select>
 
    <input class="btn" type="button" value="查询" @click="search">
  </div>
   
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>头像</th>
      <th>性别</th>
      <th>职位</th>
      <th>入职时间</th>
      <th>更新时间</th>
    </tr>
 
    <!-- v-for 用于列表循环渲染元素 -->
    <tr v-for="(user, index) in userList" :key="user.id">
      <td>{{index + 1}}</td>
      <td>{{user.name}}</td>
      <td> <img :src="user.image"> </td>
      <td>
        <span v-if="user.gender == 1">男</span>
        <span v-else-if="user.gender == 2">女</span>
        <span v-else>其他</span>
      </td>
      <td>
        <span v-if="user.job == 1">班主任</span>
        <span v-else-if="user.job == 2">讲师</span>
        <span v-else-if="user.job == 3">学工主管</span>
        <span v-else-if="user.job == 4">教研主管</span>
        <span v-else-if="user.job == 5">咨询师</span>
        <span v-else>其他</span>
      </td>
      <td>{{user.entrydate}}</td>
      <td>{{user.updatetime}}</td>
    </tr>
  </table>
</template>
 
<style scoped>
  table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
    line-height: 50px;
    text-align: center;
  }
 
  #center,table {
    width: 60%;
    margin: auto;
  }
 
  #center {
    margin-bottom: 20px;
  }
 
  img {
    width: 50px;
  }
 
  input,select {
    width: 17%;
    padding: 10px;
    margin-right: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
 
  .btn {
    background-color: #ccc;
  }
</style>