苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript-EW帮帮网

Vue基础回顾

1. 基于脚手架创建前端工程

安装环境检查

两种创建项目方式

第二种方式更常用，但是两种方式创建出的项目结构是一样的

第一种方法：在想创建项目的根目录下输入 vue create 项目名称

第二种方法：在想创建项目的根目录下输入vue ui，进入UI网页界面

项目结构：

2. vue基本使用方式

例子：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

基本语法

文本插值

可以使用简单的三目运算

以上的测试代码在HelloWorld.vue

<template>
  <div class="hello">
    {{ name }}
    {{ age > 60 ? '老年' : '青年 '}}

    <input type="text" v-bind:value="name"/>
    <input type="text" :value="age"/>
    <img :src="src">

    <input type="button" value="保存" v-on:click="handleSave"/>
    <input type="button" value="保存" @click="handleSave"/>

    <input type="text" v-model="name"/>
    <input type="button" value="修改name的值" @click="handleChange"/>

    <div v-if="sex == 1">
      男
    </div>
    <div v-else-if="sex == 2">
      女
    </div>
    <div v-else>
      未知
    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: '张三',
      age: 30,
      src: 'https://i-blog.csdnimg.cn/img_convert/bcd90b2d074ce6f358b63d4f53a44cc7.jpeg',
      sex: 1
    }
  },
  methods: {
    handleSave(){
      alert('你点击了保存按钮')
    },
    handleChange(){
      this.name = '李四'
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境，在前端开发中被广泛应用于发送 HTTP 请求、与后端 API 进行数据交互。

安装如下

尝试：不配置跨域解决方法，产生错误，原因是当前是在7070端口，而后端服务运行在8080端口

按照上面的方法配置可以解决跨域请求问题，修改vue.config.js文件，需要重启vue才能生效

编写get请求后会发生401错误，是因为需要JWT令牌token，所以从刚才POST方法中获得当前token，写到这个方法中

这次status可以正确请求，一开始测试不成功是因为redis没有开启，无法获取店铺营业状态

路由Vue-Router

1. 介绍

选择“手动创建”，勾选Router

不同的路径对应不同的组件展示

2. 路由配置

路由组成：路由器、路由链接组件、路由视图组件

在src/router/index.js中是路由路径和视图的对应关系，注意学习静态引入/动态引入

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

// 维护路由表，某个路由路径对应哪个视图组件
const routes = [
  {
    path: '/',
    name: 'home',
    //静态引入，打包时组件打包到同一个js文件里面
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 懒加载，项目打包时，单独打包到一个js文件里面
    // 如果请求这个视图时才加载，否则不加载
    // 建议使用这个动态导入方式，性能更好一些
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

路由链接组件，在App.vue，这是整个项目的入口

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

路由跳转：标签式、编程式

3. 嵌套路由（子路由）

组件 | Element

基于ElementUI提供的快速上手攻略配置main.js文件

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

配置嵌套路由：在index.js中配置children

状态管理vuex

1. vuex介绍

只能通过同步函数mutations修改state共享数据

2. 使用方式

定义和展示共享数据，在state中集中定义数据，在其他多组件都可以使用

修改共享数据

3. 异步操作和同步操作

对比：

维度	同步操作（Synchronous）	异步操作（Asynchronous）
执行方式	任务按顺序执行，前一个任务完成后，才执行下一个任务	任务发起后不等待结果，直接执行后续代码，结果通过 “回调 / 事件” 通知
阻塞性	会阻塞后续代码运行（“卡主” 程序）	不会阻塞后续代码运行（“并行” 处理）
结果获取时机	任务执行完成后，立即获取结果	任务后台执行，结果在未来某个时间点通过特定方式返回
典型场景	简单计算、变量赋值、同步读取本地文件	网络请求（Axios）、定时器（setTimeout）、异步 IO（数据库查询）

类型	优点	缺点	适用场景
同步操作	逻辑简单、线性执行、调试容易	阻塞线程，导致程序 “卡顿”（如长耗时 IO）	短耗时任务：简单计算、变量赋值、同步读取小文件
异步操作	不阻塞线程，提高程序响应速度	逻辑复杂（需处理回调 / Promise）、调试难	长耗时任务：网络请求、定时器、数据库查询、大文件读写