vue入门,从启动项目开始,做完得物App的用户登录

本次项目通过实现得物APP 的用户登录/注册,商品列表,商品详情页,商品的下单和支付功能、最后将项目打包后,完成一次完整的项目开发。
通过这次项目,可以学习到的是:

  1. 工程如何搭建,其中包括如何引用项目需要的基础包,如何约定规范的工程项目
  2. 路由的配置
  3. 开发公共组件
  4. 使用axios调用后端接口
  5. 寻找、使用第三方库
  6. 打包、发布、环境部署
    要是感兴趣的话,可以继续看,我会把所有的更新完
    本次项目的功能主要包括三大部分
    1.APP账号的注册和登录
    2.商品列表的浏览和商品详情的浏览
    3.商品的购买和支付

注册
新用户进入APP可以选择初始页面中的“用户注册”按钮进行注册页面,使用手机号进行注册

在这里插入图片描述
登录
老用户进入APP后,点击“用户登录”—>登录页面—>输入账号密码即可
在这里插入图片描述
商品列表
登录成功之后即可进入商品列表的页面去浏览商品在这里插入图片描述
商品详情
点击商品列表中的商品,进入商品详情页查看 商品详情
在这里插入图片描述

下单
进入商品详情页,点击详情页下方的“立即购买”,弹出商品尺寸选择框,选择尺寸后进入订单确认页面,点击“提交订单” 即可付钱
在这里插入图片描述

支付
支付后会跳转到支付成功和支付失败页面
在这里插入图片描述

创建工程

在vscode 中启动项目

  1. 打开项目
    在terminal(Mac)或者CMD(Windows)中创建好项目后,可以直接在vscode中打开项目,(注意:此时尚未执行npm install、npm run dev)
    在这里插入图片描述
  2. 打开终端
    在这里插入图片描述
  3. 在终端执行命令
    执行依赖下载命令和启动项目命令
    在这里插入图片描述
    安装依赖
    进入项目的根目录
cd dewu-web

下载基础的依赖到本地

每次添加新的依赖或者拉了别个的代码以后,都要执行以下这个命令

npm install
或者
yarn

启动工程

npm run dev
或者yarn dev

添加路由

安装路由
脚手架vite 默认是不安装router的,需要我们自己动手安装的,在项目根目录下 执行

npm install vue-router@next
或者yarn add vue-router@next

路由配置

  1. 创建路由文件
    在src 目录下新建router文件夹 并在里面添加index.js文件
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";

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

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

export default router;
  1. 加载路由
    在main.js文件引入路由
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

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

路径别名

开发中我们其实会经常遇到引入的文件路径很深,或者文件名很长的情况,例如下面的路径

import Home from “…/…/components/nav/Index.vue”;

这时候我们希望 有一种类似于代码自动提示的东西,帮助我们自动引入路径,这种功能是有的,但是需要手动配置

  1. 配置路径别名
    路径别名可以让我们告别…/操作
    在根目录下的vite.config.js文件中添加如下代码
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()]
});

重新启动项目后,文章开头的路径可以这样引入

import Home from “@/components/nav/Index.vue”;

到这里我们其实没有实现路径的自动提示功能
2. 配置路径的自动提示
在根目录下面新建jsconfig.json 填入下面的代码

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

这样子我们重启vscode以后,再去尝试,引入路径,会实现代码的自动提示功能
每次引入文件的时候,都要以@开头
到这里其实 路径别名的设置和使用已经完成了

静态页面的开发

  1. 新建目录
    需要新建如下目录结构所示的目录
    在这里插入图片描述
    在index.vue添加基础的代码
src
 |__pages
   |__products
     |__index.vue

在index.vue添加基础的代码

<template>商品列表</template>

<script setup></script>

<style scoped></style>

添加页面到路由
在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是路由别名,相当于给路由起个外号,如下两个方式否可以访问products页面

http://localhost:3000/products
http://localhost:3000/

这时候其实是访问不到products 页面的,因为没有添加router-view
在App.vue中添加router-view标签,来显示对应的路由组件

<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>

既然可以 配置好了,那么就可以开发静态页面了
在这里插入图片描述

注意: 在这里其实商品列表的商品只需要开发一个商品小格子即可,其他的商品在后面的章节中,可以根据从后端请求来得数据进行循环渲染。

在这里插入图片描述
这是目前所要建的文件

axios封装

Axios官方的解释就是:Axios是一个基于promise的HTTP 库,可以用在浏览器的node.js中
它的作用就是用来调用后端接口获取数据的

  1. 安装Axios
    在终端输入下面的命令

npm install axios@next
或者yarn add axios@next
@next可以保证安装的依赖是最新的版本

  1. 封装接口调用函数

axios支持基础的get、post请求,如

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

但是这种调用的方式不够通用,所以在项目中,我们会将请求封装成一个方法来统一调用
在src目录下新建Utils文件夹,并加入http.js文件
在文件中加入如下的代码

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;
  1. 调用接口
    axios封装好以后,接下来就可以调用接口来获取商品的列表了
    为了可以让项目更加的整洁,我们需要将请求接口的函数统一管理起来
    在src目录下新建api文件夹,该文件夹就是用来统一管理api的,又因为我们的接口可能有很多种,比如用户。商品。登录等。所以每一个.js文件就是对接口的一种归类
    比如我们要调用获取商品列表的接口,所以这个调用接口的办法应该放在product.js文件内
    新建product.js文件,并键入如下的代码
// /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 };

最后只需要在.vue文件内调用queryproductsj就可以获取到数据了

// 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>

如果不出意外的好,就可以在控制台看到打印的数据了,要是没有的话,要好好检查一下代码哦

在axios封装的时候,做一些更具体的说明,真的是 超级详细哦

  1. 安装axios的时候,使用这个命令yarn add axios@next
  2. 封装 axios 在src目录下新建utils目录,并在该目录下新建http.js文件,完成axios 的封装装,封装http的baseUrl为VITE_BASE_URL=https://www.fastmock.site/mock/c3af16c01eaad121c58feccb492a088c/f8 // 该链接在根目录下新建.env文件,并将该链接黏贴进去
  3. 实现商品api 。 在src目录下新建api目录,在改目录下新建product.js文件。在该文件中写请求商品的API
  4. 调用api 在/src/products/index.vue文件中使用请求商品的api实现数据的请求
  5. 使用api 数据替换死数据、这样我们就可以用从接口请求过来的数据去替换之前在data.js中的数据来实现页面的渲染。

跳转详情页

根据下面的目录结构,新建商品的详情页面
在这里插入图片描述

  1. 注册路由
    在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")
 }
];
  1. 跳转详情页
    在列表页面添加跳转方法,点击列表中的每个格子,跳转到详情页
<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>

详细的步骤

  1. 添加商品详情页 。 在src/pages目录下新建product-detail目录,并在该目录下新建Index.vue填充基础的代码
<template>商品详情页面</template>  <script setup></script>   <style lang="scss" scoped></style>
  1. 注册商品详情页路由 在router/index.js 文件中的路由列表中添加商品详情页的路由
  2. 页面跳转。 在商品 列表中添加点击事件,保证点击每一个格子后可以跳转到商品的详情页,跳转商品详情页的时候,需要传递参数,参数为商品id,可以命名为productId

持续更新中……(明天更新商品详情页的开发,包括数据的获取和轮播图的制作)需要源代码的可以加我获取哦

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>