Primeros pasos con vue, comenzando desde el proyecto de inicio e iniciando sesión en el usuario de la aplicación Dewu

Este proyecto completa un desarrollo completo del proyecto al realizar el inicio de sesión/registro del usuario de la aplicación Dewu, la lista de productos, la página de detalles del producto, las funciones de pedido y pago del producto y, finalmente, empaquetar el proyecto.
Lo que puedes aprender de este proyecto es:

1. Cómo construir el proyecto, incluido cómo hacer referencia a los paquetes básicos requeridos por el proyecto y cómo acordar un proyecto estandarizado
2. configuración de enrutamiento
3. desarrollar componentes comunes
4. Use axios para llamar a la interfaz de back-end
5. Buscar y utilizar bibliotecas de terceros
6. Si está interesado en el empaquetado, la publicación y la implementación del entorno
   , puede continuar leyendo y los actualizaré todos
   . Las funciones de este proyecto incluyen principalmente tres partes
   : 1. Registro e inicio de sesión de la cuenta de la aplicación
   2. Navegación por la lista de productos y detalles del producto Navegación
   3. Compra y pago de bienes

Registro
Los nuevos usuarios que ingresan a la aplicación pueden seleccionar el botón "Registro de usuario" en la página inicial para registrar la página y usar su número de teléfono móvil para registrarse

Iniciar sesión
Después de ingresar a la APLICACIÓN, el antiguo usuario hace clic en "Inicio de sesión de usuario" -> Página de inicio de sesión -> Ingrese la contraseña de la cuenta para ingresar a la

lista
de productos . Después de iniciar sesión correctamente, puede ingresar a la página de la lista de productos para buscar los
detalles del producto.
Haga clic en el producto en la lista de productos para ingresar a la página de detalles del producto ver detalles del producto

Haga un pedido
Ingrese a la página de detalles del producto, haga clic en "Comprar ahora" en la parte inferior de la página de detalles, aparecerá el cuadro de selección del tamaño del producto, seleccione el tamaño e ingrese a la página de confirmación del pedido, haga clic en "Enviar pedido" para pagar

Pago
Después del pago, saltará a las páginas de pago exitoso y pago fallido.

Crear proyecto

Inicie el proyecto en vscode

1. Abra el proyecto
   Después de crear el proyecto en la terminal (Mac) o CMD (Windows), puede abrir el proyecto directamente en vscode (Nota: npm install y npm run dev aún no se han ejecutado)
   
2. terminal abierta
   
3. Ejecute el comando en la terminal Ejecute
   el comando de descarga de dependencia e inicie el comando del proyecto
   
   Instale la dependencia Vaya
   al directorio raíz del proyecto

cd dewu-web

Descargar dependencias básicas a local

Cada vez que agregue una nueva dependencia o extraiga otro código, ejecute el siguiente comando

npm install
o
hilo

iniciar el proyecto

npm ejecutar desarrollo
o desarrollo de hilo

añadir ruta

Instalar enrutamiento
Scaffolding vite no instala el enrutador de forma predeterminada, debemos instalarlo nosotros mismos, ejecutarlo en el directorio raíz del proyecto

npm instale vue-router@next
o hilo agregue vue-router@next

configuración de enrutamiento

1. Cree un archivo de enrutamiento
   Cree una nueva carpeta de enrutador en el directorio src y agregue el archivo index.js en él

// src/router/index.js
import {
    
     createRouter, createWebHistory } from "vue-router";

const routes = [
  // 待添加路由
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes
});

export default router;

2. Cargue la ruta
   e importe la ruta en el archivo main.js

// main.js
import {
    
     createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

createApp(App).use(router).mount("#app");

alias de ruta

En el desarrollo, a menudo nos encontramos con situaciones en las que la ruta del archivo importado es muy profunda o el nombre del archivo es muy largo, como la siguiente ruta

importar Inicio desde “…/…/components/nav/Index.vue”;

En este momento, esperamos tener algo similar a la solicitud automática de código para ayudarnos a introducir rutas automáticamente. Esta función está disponible, pero debe configurarse manualmente.

1. Configurar alias de ruta Los alias
   de ruta pueden permitirnos despedirnos de.../operación
   Agregue el siguiente código al archivo vite.config.js en el directorio raíz

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//  不要忘记引入path库
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    
    
 resolve: {
    
    
   //   路径别名选项
   alias: [
     {
    
    
       find: "@", // 当在你的路径中找到@ 就用下面replacement路径替换
       replacement: path.resolve(__dirname, "src") // 拼接根路径
     }
   ]
 },
 plugins: [vue()]
});

Después de reiniciar el proyecto, la ruta al principio del artículo se puede introducir así

importar Inicio desde “@/components/nav/Index.vue”;

Hasta ahora no hemos implementado la función de solicitud automática de la
ruta 2. Solicitud automática de la ruta de configuración
Cree un nuevo jsconfig.json en el directorio raíz y complete el siguiente código

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": "./",
    "paths": {
    
    
      "@/*": ["src/*"] // 匹配src目录下的所有目录
    }
  },
  "exclude": ["node_modules", "dist"]
}

De esta manera, después de reiniciar vscode, intentaremos nuevamente, importaremos la ruta y se realizará la función de solicitud automática del código.
Cada vez que importamos un archivo, debe comenzar con @
. De hecho, la configuración y el uso de el alias de la ruta se ha completado.

Desarrollo de paginas estaticas

1. Crear un nuevo directorio Debe
   crear un nuevo directorio como se muestra en la siguiente estructura de directorios
   
   Agregar código básico en index.vue

src
 |__pages
   |__products
     |__index.vue

Agregar código básico a index.vue

<template>商品列表</template>

<script setup></script>

<style scoped></style>

Agregar página a la ruta
Agregar ruta a la lista de rutas en el archivo src/router/index.js

import {
    
     createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    
    
    path: "/products",
    name: "products",
    alias: "/",
    component: () => import("@/pages/products/index.vue")
  }
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes
});

export default router;

alias es un alias de enrutamiento, lo que equivale a dar un apodo al enrutamiento ¿Se puede acceder a la página de productos de las siguientes dos formas?

http://localhost:3000/productos
http://localhost:3000/

En este momento, no puede acceder a la página de productos porque no
se ha agregado ninguna vista de enrutador. Agregue la etiqueta de vista de enrutador a App.vue para mostrar los componentes de enrutamiento correspondientes.

<template>
  <!-- 添加router-view -->
  <router-view />
</template>

<script setup></script>

<style>
  body {
      
      
    /* 去除body的默认margin */
    margin: 0;
  }
  #app {
      
      
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /* 删除margin-top */
  }
</style>

Ahora que puedes configurarlo, puedes desarrollar páginas estáticas

Nota: De hecho, los productos en la lista de productos solo necesitan desarrollar una pequeña cuadrícula de productos. En los siguientes capítulos, otros productos se pueden representar cíclicamente de acuerdo con los datos solicitados desde el backend.

Este es el archivo que se construirá hasta ahora.

paquete axios

La explicación oficial de Axios es: Axios es una biblioteca HTTP basada en promesas, que se puede usar en el node.js del navegador.
Su función es llamar a la interfaz de back-end para obtener datos.

1. Para instalar Axios
   ingrese el siguiente comando en la terminal

npm install axios@next
o yarn add axios@next
@next puede garantizar que las dependencias instaladas sean la última versión

2. Función de llamada de interfaz encapsulada

axios admite solicitudes básicas de obtención y publicación, como

import axios from "axios";
// get请求
const res = await axios.get(url, {
    
    
  // 参数对象
});
// post请求
const res = await axios.post(url, {
    
    
  // 参数对象
});

Sin embargo, este método de llamada no es lo suficientemente universal, por lo que en el proyecto, encapsularemos la solicitud en un método para llamarla de manera uniforme
. Cree una nueva carpeta Utils en el directorio src y agregue el archivo http.js.
Agregue lo siguiente codigo al archivo

import axios from "axios";

axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;
//这段代码的意思就是从项目根目录中的.env文件中获取VITE_BASE_URL字段的值，这个字段要以VITE_开头，否则无法识别
//.env文件用于配置通用字段，方便以后同意更改，在目录下新建.env文件要
//>VITE_BASE_URL=https://www.fastmock.site/mock/c3af16c01eaad121c58feccb492a088c/f8
axios.defaults.timeout = 5000; // 请求过期时间5s

const requests = async ({
    
    
  url,
  method = "get", // 请求方法 get、post 默认为get
  params = {
    
    }, // get请求参数
  data = {
    
    } // post请求参数
} = {
    
    }) => {
    
    
  method = method.toLocaleLowerCase();
  const res = await axios.request({
    
     method, url, params, data });
  return res.data;
};

export default requests;

3. Después de empaquetar la interfaz de llamada
   axios, puede llamar a la interfaz para obtener la lista de productos.
   Para que el proyecto esté más ordenado, necesitamos administrar de manera uniforme las funciones de la interfaz de solicitud y
   crear una nueva carpeta api en el src Esta carpeta se utiliza para administrar la api de manera unificada, y porque podemos tener muchos tipos de interfaces, como usuarios. producto. iniciar sesión, etc Por lo tanto, cada archivo .js es una clasificación de la interfaz.
   Por ejemplo, queremos llamar a la interfaz para obtener la lista de productos, por lo que este método de llamar a la interfaz debe colocarse en el archivo product.js. Cree un
   nuevo producto. js y escriba el siguiente código

// /src/api/product.js
import requests from "@/utils/http";

async function queryProducts({
     
      url } = {
     
     }) {
    
    
  const result = await requests({
    
    
    url: url,
    method: "GET"
  });
  return result && result.data;
}

export {
    
     queryProducts };

Finalmente, solo necesita llamar a queryproductsj en el archivo .vue para obtener los datos

// src/pages/product/index.vue

<script setup>
  import {
    
     onMounted } from "@vue/runtime-core";
  import {
    
     queryProducts } from "@/api/product";

  onMounted(async () => {
    
    
    const res = await queryProducts({
    
     url: "/get/products" });
    console.log(res);
  });
</script>

Si no hay ningún accidente, puedes ver los datos impresos en la consola, si no, revisa el código cuidadosamente.

Al encapsular axios, haga algunas instrucciones más específicas, que son realmente muy detalladas.

1. Al instalar axios, use este comando yarn add axios@next
2. Encapsule axios Cree un nuevo directorio utils en el directorio src y cree un nuevo archivo http.js en este directorio para completar la encapsulación de axios. La baseUrl para encapsular http es VITE_BASE_URL=https://www.fastmock.site/mock/ c3af16c01eaad121c58feccb492a088c/f8 // Este enlace crea un nuevo archivo .env en el directorio raíz y pega el enlace en él
3. Implementar la API de productos básicos. Cree un nuevo directorio api en el directorio src y cree un nuevo archivo product.js en el directorio modificado. Escriba la API para solicitar artículos en este archivo
4. Llame a la API en el archivo /src/products/index.vue para implementar la solicitud de datos utilizando la API que solicita el producto.
5. Use los datos de API para reemplazar los datos inactivos, de modo que podamos usar los datos solicitados desde la interfaz para reemplazar los datos anteriores en data.js para lograr la representación de la página.

Saltar a la página de detalles

De acuerdo con la siguiente estructura de directorios, cree una nueva página de detalles del producto

1. Registrar la ruta Registrar la ruta
   de la página de detalles en la carpeta src/router/index.js

const routes = [
 {
    
    
   path: "/products",
   name: "products",
   alias: "/",
   component: () => import("@/pages/products/index.vue")
 },
 // 注册详情页路由
 {
    
    
   path: "/product-detail",
   name: "product-detail",
   component: () => import("@/pages/product-detail/index.vue")
 }
];

2. Saltar a la
   página de detalles Agregue un método de salto a la página de lista, haga clic en cada cuadrícula de la lista y salte a la página de detalles

<script setup>
  import {
    
     onMounted, ref } from "vue";
  import {
    
     queryProducts } from "@/api/product";
  import {
    
     useRouter } from "vue-router";

  const products = ref([]);
  const router = useRouter();

  onMounted(async () => {
    
    
    products.value = await queryProducts({
    
     url: "/get/products" });
  });

  function getImgUrl(imgUrl) {
    
    
    return imgUrl.split(";")[0];
  }

  function goDetail(id) {
    
    
    router.push({
    
     path: "/product-detail", query: {
    
     productId: id } });
  }
</script>

pasos detallados

1. Agregar páginas de detalles del producto. Cree un nuevo directorio de detalles del producto en el directorio src/pages y cree un nuevo Index.vue en este directorio para completar el código básico

<template>商品详情页面</template>  <script setup></script>   <style lang="scss" scoped></style>

2. Registre la ruta de la página de detalles del producto Agregue la ruta de la página de detalles del producto a la lista de rutas en el archivo router/index.js
3. Salto de página. Agregue un evento de clic a la lista de productos para asegurarse de que puede saltar a la página de detalles del producto después de hacer clic en cada cuadrícula. Al saltar a la página de detalles del producto, debe pasar parámetros. El parámetro es la identificación del producto, que puede llamarse productId

Continuando con la actualización... (Mañana actualice el desarrollo de la página de detalles del producto, incluida la adquisición de datos y la producción de imágenes de carrusel) Si necesita el código fuente, puede agregarme para obtenerlo