【苍穹外卖】前端 Day 1

1 Vue

1.1 通过 vue cli 脚手架创建前端工程

1.2 项目结构

1.3 启动项目

VS Code 启动前端项目：

npm run serve

注意这里占用端口号 8080

与 java springboot 占用端口号一致，有冲突

serve 是这个名字

终止：ctrl + c

修改端口号

2 vue 基本使用方式

2.1 组件

vue 的组件以 .vue 结尾，由三部分组成：

2.2 文本插值

作用：用来绑定 data 方法返回的对象属性

用法：{{ }}

<template>
  <div>
    hello {{ name }} is a/an {{ age >= 18 ? 'adult' : 'youngster' }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'wyn',
      age: 24
    };
  },
}
</script>

<style></style>

插值表达式 中可以进行：

基本变量插值 {{ name }}
计算表达式 {{ 10+5 }}
条件表达式（三元运算符） {{ age >= 18 ? 'adult' : 'youngster' }}
函数调用 {{ add(10, 5) }}

<script>

export default {

methods: {

add(a, b) {

return a + b;

}

}

}

</script>

属性访问 {{ user.name }}
字符串拼接 {{ 'Hello, ' + name }}

2.3 属性绑定

作用：为标签的属性绑定 data 方法中返回的属性

用法：v-bind:xxx，简写为 :xxx

绑定的是标签中的属性

<input type="text" v-bind:value="name"><br>
<input type="url" :value="url" size="90px">

export default {
  data() {
    return {
      name: 'wyn',
      age: 24,
      url:'https://www.bilibili.com/video/BV1TP411v7v6?p=173&vd_source=03e6715a501abcf7a961b0266e94d6d4',
    };
  }
}

补充 <input> 标签中 type 的值：

type="text"：单行文本输入框，用于接受文本输入
type="password"：密码输入框，输入内容会以隐藏字符（如 *）显示
type="number"：数字输入框，允许用户输入数字
type="email"：电子邮件输入框，验证输入的值是否为合法的电子邮件格式
type="url"：URL 输入框，要求输入值为有效的 URL 格式
type="checkbox"：复选框，允许选择多个选项
type="radio"：单选按钮，允许在多个选项中选择一个
type="date"：日期选择器，允许用户选择日期
type="file"：文件选择器，允许用户上传文件
type="range"：范围选择器，允许用户选择一个数值范围
type="reset"：重置按钮，点击后会重置表单中的所有输入值
type="color"：颜色选择器，允许用户从颜色盘中选择颜色

同时还有别的属性：

placeholder：用于为输入框提供提示信息
value：设置输入框的默认值
disabled：禁用输入框，使其无法接受用户输入
readonly：设置输入框为只读状态，用户无法修改输入内容
required：设置输入框为必填项
maxlength：限制文本输入框的最大字符数

2.4 事件绑定

作用：为元素绑定对应的事件

用法：v-on:xxx，简写为 @xxx

在 Vue.js 中， @是 v-on 指令的简写，用于监听 DOM 事件，并将事件处理器绑定到相应的事件上。@ 后面可以加上你想要监听的具体事件名称

DOM（Document Object Model，文档对象模型）是浏览器中的一种编程接口，它允许开发者通过编程语言（如 JavaScript）来访问和操作网页的结构、内容和样式。DOM 将 HTML 文档表示为一个由节点构成的树状结构，每个节点代表文档的一部分，比如元素、属性或文本。通过 DOM，开发者可以动态地修改网页的内容和结构

常见 DOM 事件：

鼠标事件：
- @click：监听点击事件
- @dblclick：监听双击事件
- @mousedown：监听鼠标按下事件
- @mouseup：监听鼠标松开事件
- @mousemove：监听鼠标移动事件
- @mouseenter：监听鼠标进入元素时触发
- @mouseleave：监听鼠标离开元素时触发
键盘事件：
- @keydown：监听按键按下事件
- @keyup：监听按键松开事件
- @keypress：监听按键按下时触发，但与 keydown 的触发时机略有不同
表单事件：
- @submit：监听表单提交事件
- @change：监听输入框或下拉框的值变化
- @input：监听输入框的输入事件
- @focus：监听元素获得焦点
- @blur：监听元素失去焦点

<template>
    <input type="button" value="click me to add 1" @click="clickToAddOne"> =>
    <input type="text" :value="sum" size="1px">
</template>

<script>
export default {
  data() {
    return {
      sum:0,
    };
  },
  methods: {
    clickToAddOne(){
      this.sum += 1;
    }
  }
}
</script>

2.5 双向绑定

作用：表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方

用法：v-model

data(){age: {{ age }}}
<input type="text" v-model="age">

2.6 条件渲染

作用：根据表达式的值来动态渲染页面元素

用法：v-if、v-else、v-else-if

3 Axios

Axios 是一个基于 Promise 的 JavaScript HTTP 客户端，主要用于浏览器和 Node.js 中发起 HTTP 请求。它可以方便地进行与服务器的交互，包括发送 GET、POST、PUT、DELETE 等请求，处理响应数据，并且支持请求的拦截、取消、自动处理 JSON 数据、并发请求等功能

安装：

npm install axios

导入：

import axios from 'axios'

如果不这样设置，会导致：

proxy 设置代理 http://localhost:8080

将所有以 /api 开头的请求转发到 http://localhost:8080/，并通过pathRewrite去掉 /api 前缀

同时 axios 发送请求的 url 不再是 localhost:8080 而是 /api

3.1 GET

<template>
  <div>
    <input type="button" value="send request" @click="sendRequest()">
    {{ responseData }}
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      responseData: null
    };
  },
  methods: {
    sendRequest() {
      axios.get('/api/user/shop/status')
        .then(response => {
          console.log(response.data);
          this.responseData = response.data;
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
}
</script>
<style></style>

3.2 POST

还可以 POST：

<template>
  <div>
    <input type="button" value="get token" @click="getToken()">
    <input type="text" v-model="token" size="114px">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      token: null
    };
  },
  methods: {
    getToken() {
      axios.post('/api/login', {
        'username': 'admin',
        'password': 123456
      }).then(res => {
        this.token = res.data.data.token;
      })
    }
  }
}
</script>

<style></style>

3.3 统一使用方式

4 Vue-Router

Vue Router 是 Vue.js 的官方路由管理器，用于 在单页应用（SPA）中实现路由功能，允许你通过不同的 URL 显示不同的组件或页面。Vue Router 可以帮你实现页面的导航、动态路由、嵌套路由、守卫和懒加载等功能

因为使用的是 vue2，所以安装 vue-router 是 3 版本

npm install vue-router@3

4.1 路由配置

路由组成：

VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
<router-link>：路由链接组件，浏览器会解析成 <a>
<router-view>：路由视图组件，用来展示与路由路径匹配的视图组件

在 Vue 项目中，App.vue 通常是整个应用的 主页面 或 根组件。它是 Vue 应用的入口组件，所有的其他页面和组件都会作为它的子组件来进行渲染

所以一上来访问的路径是"/"的时候，不仅仅是渲染 HomeView 组件，还有 APP 的根组件

创建 View 组件

在 src 文件夹下创建 views 文件夹，新建几个 View.vue 文件

这里把之前 App.vue 的代码复制过来到 DemoView.vue

配置路由表

在 src 文件夹下创建 router 文件夹，新建文件 index.js

import AboutView from "@/views/AboutView.vue";
import HomeView from "@/views/HomeView.vue";
import VueRouter from "vue-router";
import Vue from "vue";
import DemoView from "@/views/DemoView.vue";

Vue.use(VueRouter)

// 配置路由表
const routes = [
    {
        path: '/',
        component: HomeView
    },
    {
        path: '/about',
        component: AboutView
    },
    {
        path:'/demo',
        component:DemoView
    }
]

// 创建路由实例
const router = new VueRouter({
    routes
})

// 将定义好的 router 实例导出
export default router

挂载路由器

main.js 先导入路由器，然后挂载路由器

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由器

Vue.config.productionTip = false

new Vue({
  router, // 挂载路由器
  render: h => h(App),
}).$mount('#app')

路由跳转

在 App.vue 中

使用标签

<router-link to=" "></router-link> 创建导航链接

使用标签

<router-view/> 渲染当前路径对应的组件

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> &nbsp;
      <router-link to="/about">About</router-link> &nbsp;
      <router-link to="/demo">Demo</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>

</script>

<style></style>

效果：