当前位置：首页 > news >正文

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

news 2025/9/10 6:40:48

Vue基础回顾

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

安装环境检查

2024最新版Node.js下载安装及环境配置教程【保姆级】_nodejs下载-CSDN博客

两种创建项目方式

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

第一种方法：在想创建项目的根目录下输入 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）、调试难	长耗时任务：网络请求、定时器、数据库查询、大文件读写