乐意购项目前端开发 #2

一、Axios的安装和简单封装

安装Axios

npm install axios

在utils目录下创建 http.js 文件, 内容如下

import axios from 'axios'// 创建axios实例
const http = axios.create({baseURL: 'http://localhost:9999',//后端服务器地址timeout: 5000
})// axios请求拦截器
http.interceptors.request.use(config => {return config
}, e => Promise.reject(e))// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {return Promise.reject(e)
})export default http

封装请求函数, 然后进行测试

在api目录下创建 test.js

import http from '@/utils/http'export function getTestAPI () {return http({url: 'home/test'})
}

调用getTestAPI

//测试接口函数
import { getTestAPI } from '@/api/testAPI'
getTestAPI().then(res=>{console.log(res);
})

二、路由设计

创建一级路由

先创建文件

<template><div>首页</div>
</template><script>
export default {// name: 'Layout',
}
</script><style></style>

然后修改 router/index.js 内容如下

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'const routes = [{path: '/',component: Layout}
]
const router = createRouter({history: createWebHashHistory(),routes
})export default router

打开 views/App.vue ,内容如下

<template><!-- 一级路由出口 --><router-view></router-view>
</template><style></style>

运行项目,如果报Component name "index" should always be multi-word这个错误, 

打开.eslintrc.js, 在rules中添加

'vue/multi-word-component-names': 'off'

创建二级路由

创建文件

<template><div>Home 页面</div>
</template><script>
export default {}
</script><style></style>

修改路由配置 router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'const routes = [{// Home 页面是首页下的二级页面,所以要配置在首页路径下path: '/',component: Layout,children: [{// Home 页默认在首页显示,所以 path 为空path: '',component: Home,}]},{path: '/login',component: Login}
]
const router = createRouter({history: createWebHashHistory(),routes
})export default router

修改 views/Layout/index.vue

<template><div>首页<!-- 二级路由出口 --><router-view></router-view></div>
</template><script>
export default {// name: 'Layout',
}
</script><style></style>

运行项目

三、导入静态资源和CSS文件

css存放CSS文件, img存放图片资源

基础css样式的使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/622202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么使用双token实现无感刷新用户认证?

单token机制 认证机制&#xff1a;对与单token的认证机制在我们项目中仅使用一个Access Token的访问令牌进行用户身份认证和授权的方案处理。 不足之处&#xff1a; 安全性较低&#xff08;因为只有一个token在客户端和服务器端之间进行传递&#xff0c;一旦Access Token被截…

pip查看某个包存在的历史版本

简介&#xff1a;当我们想查看某个包有哪些可安装版本&#xff0c;但是又不想去官网查询&#xff0c;如何用pip命令查询出全部历史版本&#xff1f; 历史版本&#xff1a; Python&#xff1a;pip升级超时解决方案 Python&#xff1a;指定的Python版本pip Python&#xff1a…

鸿蒙开发-UI-布局

鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 文章目录 前言 一、布局概述 1.布局结构 2.布局元素组成 3.布局分类 …

TRB 2024论文分享:基于生成对抗网络和Transformer模型的交通事件检测混合模型

TRB&#xff08;Transportation Research Board&#xff0c;美国交通研究委员会&#xff0c;简称TRB&#xff09;会议是交通研究领域知名度最高学术会议之一&#xff0c;近年来的参会人数已经超过了2万名&#xff0c;是参与人数和国家最多的学术盛会。TRB会议几乎涵盖了交通领域…

三、ngxin虚拟主机

目录 什么是nginx虚拟主机修改端口 访问页面1、配置nginx.config 文件2、 添加配置给目录中写入内容检测nginx 是否有语法错误&#xff08;nginx -t&#xff09;重启 nginx查看配置结果 不同主机网卡 查看到不同的页面先添加一个临时ip修改ngixn配置文件创建目录文件检测nginx …

React入门 - 06(TodoList 列表数据的新增和删除)

本章内容 目录 一、实践一下 React 的列表渲染二、TodoList 新增功能三、列表循环的 key四、删除 上一节内容我们完成了输入框中可以自由输入内容&#xff0c;这一节我们继续 TodoList功能的完善&#xff1a;列表数据的新增和删除。 在开始之前&#xff0c;我们先介绍一下 Re…

前端对接电子秤、扫码枪设备serialPort 串口使用教程

因为最近工作项目中用到了电子秤&#xff0c;需要对接电子秤设备。以前也没有对接过这种设备&#xff0c;当时也是一脸懵逼&#xff0c;脑袋空空。后来就去网上搜了一下前端怎么对接&#xff0c;然后就发现了SerialPort串口。 Serialport 官网地址&#xff1a;https://serialpo…

Linux 内核学习 3 - 虚拟内存和物理内存

虚拟内存其实是 CPU 和操作系统使用的一个障眼法&#xff0c;联手给进程编织了一个假象&#xff0c;让进程误以为自己独占了全部的内存空间&#xff1a; 在 32 位系统中&#xff0c;进程以为自己独占了 3G 的内存空间。 在 64 位系统中&#xff0c;进程以为自己独占了 128T 的…

杨中科 EFCORE 第四部分 命令详解56-61

Migrations 深入研究Migrations 1、使用迁移脚本&#xff0c;可以对当前连接的数据库执行编号更高的迁移&#xff0c;这个操作叫做“向上迁移” (Up)&#xff0c;也可以执行把数据库回退到旧的迁移&#xff0c;这个操作叫“向下迁移(Down&#xff09; 2、除非有特殊需要&…

机器人行业概况(2)

上篇已经介绍过关于机器人的定义以及分类&#xff0c;下面来看看机器人产业市场规模。 二、国内机器人产业市场规模 中国机器人产业在国家智能制造相关政策的引导下蓬勃发展。在新冠肺炎疫情防控期间&#xff0c;消毒、配送、测温、巡检等各类机器人的“火线上岗”&#xff0…

spring-boot2.7.8添加swagger

一、新建项目swaggerdemo 二、修改pom.xml 注意修改&#xff1a;spring-boot-starter-parent版本为&#xff1a;2.7.8 添加依赖&#xff1a; springfox-swagger2 springfox-swagger-ui springfox-boot-starter <?xml version"1.0" encoding"UTF-8"…

QT第3天

如上图界面&#xff0c;需求如下&#xff1a; 1、根据名字添加水果&#xff0c;并设置好单价 2、切换文件查看模式 3、点击任意水果可以显示单价 4、重量改变时&#xff0c;总价自动显示 //widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <Q…

RH850P1X芯片学习笔记-Flash Memory

文章目录 FeaturesClock Supply Block DiagramFlash SizeMemory ConfigurationRegistersRegister Base AddressList of RegistersRegister Reset Condition 与Flash Memory相关的操作模式Functional OverviewOption BytesOPBT0 — Option Byte 0OPBT1 — Option Byte 1OPBT2 —…

【CSS】保持元素宽高比

保持元素的宽高比&#xff0c;在视频或图片展示类页面是一个重要功能。 本文介绍其常规的实现方法。 实现效果 当浏览器视口发生变化时&#xff0c;元素的尺寸随之变化&#xff0c;且宽高比不变。 代码实现 我们用最简单的元素结构来演示&#xff0c;实现宽高比为4&#xf…

鸿蒙Harmony是如何影响Android工程师的呢?

其实鸿蒙在2019就已经出来了&#xff0c;那时候还是套壳Android的。从2023年9月的发布会上&#xff0c;华为宣布鸿蒙原生应用全面启动、HarmonyOS NEXT亮相以后&#xff0c;围绕着纯血鸿蒙展开的鸿蒙应用生态发展迅猛&#xff0c;目前已经有包括社交、金融、影音、游戏、资讯、…

docker-compose和docker compose的区别

在docker实际使用中&#xff0c;经常会搭配Compose&#xff0c;用来定义和运行多个 Docker 容器。使用时会发现&#xff0c;有时候的指令是docker-compose&#xff0c;有时候是docker compose&#xff0c;下面给出解释。 docker官方文档&#xff1a;https://docs.docker.com/c…

ArrayBlockingQueue的使用

异步日志打印模型概述 在高并发、高流量并且响应时间要求比较小的系统中同步打印日志已经满足不了需求了&#xff0c;这是因为打印日志本身是需要写磁盘的&#xff0c;写磁盘的操作会暂时阻塞调用打印日志的业务线程&#xff0c;这会造成调用线程的rt增加。 如图所示为同步日…

WorkPlus领先企业即时通信软件,提升团队沟通效率的利器

在企业工作中&#xff0c;高效沟通是推动团队协作和工作效率的关键。而企业即时通信软件成为了实现高效沟通的利器。作为一款领先的企业即时通信软件&#xff0c;WorkPlus以其卓越的性能和独特的功能&#xff0c;提升团队沟通效率&#xff0c;助力企业实现高效协作。 为什么选择…

豆包ai介绍

豆包是字节跳动基于云雀模型开发的AI工具&#xff0c;具有强大的语言处理能力和广泛的应用场景&#xff0c;无论是在学习、工作、生活中&#xff0c;都能派上用场。 豆包可以帮助打工人和创作者提升效率&#xff0c;完成各种工作任务&#xff0c;又能扮演各类AI角色进行高情商…

[学习笔记]刘知远团队大模型技术与交叉应用L1-NLPBig Model Basics

本节主要介绍NLP和大模型的基础知识。提及了词表示如何从one-hot发展到Word Embedding。语言模型如何从N-gram发展成预训练语言模型PLMs。然后介绍了大模型在NLP任务上的表现&#xff0c;以及它遵循的基本范式。最后介绍了本课程需要用到的编程环境和GPU服务器。 一篇NLP方向的…