이 프로젝트는 Dewu APP의 사용자 로그인/등록, 상품 목록, 상품 상세 페이지, 상품 주문 및 결제 기능을 구현하고 최종적으로 프로젝트를 패키징하여 완전한 프로젝트 개발을 완료합니다.
이 프로젝트에서 배울 수 있는 것은 다음과 같습니다.
- 프로젝트에서 요구하는 기본 패키지를 참조하는 방법과 표준화된 프로젝트에 동의하는 방법을 포함한 프로젝트 빌드 방법
- 라우팅 구성
- 공통 구성 요소 개발
- axios를 사용하여 백엔드 인터페이스 호출
- 타사 라이브러리 찾기 및 사용
- 패키징, 퍼블리싱 및 환경 배포 에 관심이 있는 경우
계속 읽을 수 있으며 모두 업데이트하겠습니다
.이 프로젝트의 기능은 주로 세 부분으로 구성됩니다
: 1. APP 계정 등록 및 로그인
2. 제품 목록 찾아보기 및 상품정보 열람
3. 재화의 구매 및 결제
등록
APP에 진입하는 신규 사용자는 초기 페이지의 "사용자 등록" 버튼을 선택하여 페이지를 등록하고, 자신의 휴대폰 번호를 사용하여 등록할 수 있습니다.
로그인
APP 진입 후, 기존 사용자는 "사용자 로그인" -> 로그인 페이지 -> 계정 비밀번호를 입력하여 제품
목록 으로 들어가십시오. 로그인에 성공 하면
제품 목록 페이지로 진입하여 
제품 세부 정보를 열람할 수 있습니다.
제품 목록의 제품은 제품 세부 정보 페이지를 입력합니다 제품 세부 정보 보기
주문하기
상품상세페이지로 진입 후 상세페이지 하단의 '바로구매하기'를 클릭하시면 상품사이즈 선택창이 팝업되며, 사이즈 선택 후 주문확인페이지로 이동 후 '주문서 제출하기' 클릭 후 결제
결제 결제
후 결제 성공 및 결제 실패 페이지로 이동합니다.
프로젝트 생성
vscode에서 프로젝트 시작
- 프로젝트 열기
터미널(Mac) 또는 CMD(Windows)에서 프로젝트를 생성한 후 vscode에서 직접 프로젝트를 열 수 있습니다(참고: npm install 및 npm run dev는 아직 실행되지 않았습니다)
- 열린 터미널
- 터미널에서 명령어 실행
의존성 다운로드 명령어 실행 및 프로젝트 명령어 시작
의존성 설치 프로젝트
의 루트 디렉터리로 이동
cd dewu-web
로컬에 기본 종속성 다운로드
새 종속성을 추가하거나 다른 코드를 가져올 때마다 다음 명령을 실행합니다.
npm 설치
또는
원사
프로젝트 시작
npm run dev
또는 yarn dev
경로 추가
라우팅 설치
Scaffolding vite는 기본적으로 라우터를 설치하지 않으므로 직접 설치해야 하며 프로젝트 루트 디렉터리에서 실행해야 합니다.
npm install vue-router@next
또는 yarn add vue-router@next
라우팅 구성
- 라우팅 파일
생성 src 디렉토리에 새로운 라우터 폴더를 생성하고 그 안에 index.js 파일을 추가합니다.
// src/router/index.js
import {
createRouter, createWebHistory } from "vue-router";
const routes = [
// 待添加路由
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
- 경로를 로드
하고 main.js 파일에서 경로를 가져옵니다.
// main.js
import {
createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
createApp(App).use(router).mount("#app");
경로 별칭
개발 과정에서 가져온 파일 경로가 매우 깊거나 다음 경로와 같이 파일 이름이 매우 긴 상황이 자주 발생합니다.
".../.../components/nav/Index.vue"에서 홈 가져오기;
현재 자동 코드 프롬프트와 유사한 기능을 통해 경로를 자동으로 도입할 수 있기를 희망하며 이 기능을 사용할 수 있지만 수동으로 구성해야 합니다.
- 경로 별칭 구성 경로 별칭 을 사용하면 다음과
작별할 수 있습니다.../operation
루트 디렉터리의 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()]
});
프로젝트를 다시 시작한 후 기사 시작 부분의 경로를 다음과 같이 소개할 수 있습니다.
"@/components/nav/Index.vue"에서 홈 가져오기;
지금까지 경로의 자동 프롬프트 기능을 구현하지 않았습니다
. 2. 구성 경로의 자동 프롬프트
루트 디렉터리 아래에 새 jsconfig.json을 만들고 다음 코드를 입력합니다.
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"] // 匹配src目录下的所有目录
}
},
"exclude": ["node_modules", "dist"]
}
이런 식으로 vscode를 다시 시작한 후 다시 시도하고 경로를 가져오면 코드의 자동 프롬프트 기능이 구현됩니다.
파일을 가져올 때마다 @로 시작해야 합니다
.실제로 설정 및 사용 경로 별칭이 완료되었습니다.
정적 페이지 개발
- 새 디렉토리
생성 다음 디렉토리 구조와 같이 새 디렉토리를 생성해야 합니다
. 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는 라우팅 별칭으로 라우팅에 닉네임을 부여하는 것과 같습니다.
http://localhost:3000/products
http://localhost:3000/
현재는 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는 브라우저의 node.js에서 사용할 수 있는 약속 기반 HTTP 라이브러리입니다.
그 기능은 데이터를 얻기 위해 백엔드 인터페이스를 호출하는 것입니다.
- Axios를 설치 하려면
터미널에 다음 명령을 입력하십시오.
npm install axios@next
또는 yarn add axios@next
@next는 설치된 종속성이 최신 버전인지 확인할 수 있습니다.
- 인터페이스 호출 함수 캡슐화
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;
- 호출 인터페이스
axios가 패키징된 후 인터페이스를 호출하여 제품 목록을 가져올 수 있습니다.
프로젝트를 더 깔끔하게 만들기 위해 요청 인터페이스의 기능을 균일하게 관리하고
src에 새 api 폴더를 만들어야 합니다. 이 폴더는 API를 통일적으로 관리하기 위해 사용하는 폴더이며, 사용자 등 다양한 인터페이스를 가질 수 있기 때문입니다. 상품. 로그인 등 따라서 각 .js 파일은 인터페이스의 분류입니다.
예를 들어 제품 목록을 가져오기 위해 인터페이스를 호출하고 싶으므로 이 인터페이스를 호출하는 방법은 product.js 파일에 위치해야 합니다.
새 제품을 만듭니다. 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를 캡슐화할 때 더 구체적인 지침을 만드십시오.
- axios를 설치할 때 다음 명령을 사용하십시오. yarn add axios@next
- Encapsulate axios src 디렉토리에 새로운 utils 디렉토리를 생성하고, 이 디렉토리에 새로운 http.js 파일을 생성하여 axios 캡슐화를 완료합니다. http를 캡슐화하기 위한 baseUrl은 VITE_BASE_URL=https://www.fastmock.site/mock/입니다. c3af16c01eaad121c58feccb492a088c/f8 / / 이 링크는 루트 디렉토리에 새 .env 파일을 만들고 링크를 붙여넣습니다.
- 상품 API를 구현합니다. src 디렉토리에 새로운 api 디렉토리를 생성하고 변경된 디렉토리에 새로운 product.js 파일을 생성합니다. 이 파일의 항목을 요청하기 위한 API 작성
- /src/products/index.vue 파일에서 API를 호출하여 제품을 요청하는 API를 사용하여 데이터 요청을 구현합니다.
- API 데이터를 사용하여 죽은 데이터를 교체하면 인터페이스에서 요청한 데이터를 사용하여 data.js의 이전 데이터를 교체하여 페이지 렌더링을 수행할 수 있습니다.
세부정보 페이지로 이동
다음 디렉토리 구조에 따라 새 제품 세부 정보 페이지를 만듭니다.
- 경로 등록
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")
}
];
- 상세
페이지로 점프 리스트페이지에 점프방식 추가, 리스트의 각 그리드 클릭 후 상세페이지로 점프
<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>
자세한 단계
- 상품 상세 페이지를 추가합니다. src/pages 디렉토리에 새로운 product-detail 디렉토리를 생성하고 이 디렉토리에 새로운 Index.vue를 생성하여 기본 코드를 채웁니다.
<template>商品详情页面</template> <script setup></script> <style lang="scss" scoped></style>
- 상품 상세 페이지 경로 등록 router/index.js 파일의 경로 목록에 상품 상세 페이지 경로 추가
- 페이지 점프. 각 그리드를 클릭한 후 제품 세부 정보 페이지로 이동할 수 있도록 제품 목록에 클릭 이벤트를 추가합니다. 제품 세부 정보 페이지로 이동할 때 매개변수를 전달해야 합니다. 매개변수는 제품 ID이며 이름을 productId로 지정할 수 있습니다.