diff --git a/.gitignore b/.gitignore
index a547bf3..a9eb91b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+# vscode-workspace
+*.code-workspace
+
# Logs
logs
*.log
diff --git a/Vite-Vue-tutorial/package.json b/Vite-Vue-tutorial/package.json
index 27d543d..5ce1499 100644
--- a/Vite-Vue-tutorial/package.json
+++ b/Vite-Vue-tutorial/package.json
@@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build": "vite build",
- "preview": "vite preview"
+ "preview": "vite preview",
+ "format": "prettier --write ./**/*.{html,vue,ts,js,json}"
},
"dependencies": {
"axios": "^0.27.2",
diff --git a/Vite-Vue-tutorial/src/.prettierrc b/Vite-Vue-tutorial/src/.prettierrc
index 6de2ea7..0d1e949 100644
--- a/Vite-Vue-tutorial/src/.prettierrc
+++ b/Vite-Vue-tutorial/src/.prettierrc
@@ -1,4 +1,6 @@
{
- "singleQuote": false,
- "semi": true
-}
\ No newline at end of file
+ "singleQuote": false,
+ "semi": true,
+ "tabWidth": 4,
+ "useTabs": true
+}
diff --git a/Vite-Vue-tutorial/src/hooks/useCategories.js b/Vite-Vue-tutorial/src/hooks/useCategories.js
index 5273527..a20fd4c 100644
--- a/Vite-Vue-tutorial/src/hooks/useCategories.js
+++ b/Vite-Vue-tutorial/src/hooks/useCategories.js
@@ -3,15 +3,15 @@ import { ref } from "vue";
/**
* 返回分类接口的数据
- * @returns
+ * @returns
*/
export const useCategories = () => {
- const categories = ref([]);
- loadCategoriesAPI().then(res => {
- categories.value = res.data;
- });
- return {
- categories,
- }
-};
\ No newline at end of file
+ const categories = ref([]);
+ loadCategoriesAPI().then((res) => {
+ categories.value = res.data;
+ });
+ return {
+ categories,
+ };
+};
diff --git a/Vite-Vue-tutorial/src/hooks/useProducts.js b/Vite-Vue-tutorial/src/hooks/useProducts.js
index f29e077..05cba6d 100644
--- a/Vite-Vue-tutorial/src/hooks/useProducts.js
+++ b/Vite-Vue-tutorial/src/hooks/useProducts.js
@@ -1,53 +1,51 @@
-import { loadProductAPI } from '../services/products';
+import { loadProductAPI } from "../services/products";
import { ref } from "vue";
/**
* 返回商品接口的数据
* @param {*} categoryId 当前的商品分类id, 空表示获取所有分类
- * @returns
+ * @returns
*/
-export const useProducts = (categoryId='') => {
+export const useProducts = (categoryId = "") => {
+ const page = ref(1); // 当前页码
+ const loading = ref(false); // 是否在加载中
+ const finished = ref(false); // 是否加载完成
+ const currentCategoryId = ref(categoryId); // 当前分类id
+ const products = ref([]); // 商品数据
- const page = ref(1); // 当前页码
- const loading = ref(false); // 是否在加载中
- const finished = ref(false); // 是否加载完成
- const currentCategoryId = ref(categoryId); // 当前分类id
- const products = ref([]); // 商品数据
+ /**
+ * 加载products
+ * @param {*} needReset 是否需要重置products
+ * @param {*} categoryId 分类id
+ */
+ const onLoad = (needReset = false, categoryId = "") => {
+ if (needReset) {
+ // 重置一些参数
+ finished.value = false;
+ products.value = [];
+ page.value = 1;
+ }
+ // 分类id不为空才需要修改
+ if (categoryId !== "") {
+ currentCategoryId.value = categoryId;
+ }
+ loading.value = true; // 开始加载
+ loadProductAPI(page.value, currentCategoryId.value).then((res) => {
+ finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
+ loading.value = false;
+ // 将获取的数据存入products
+ products.value.push(...res.data);
+ page.value++; // 页码+1
+ });
+ };
- /**
- * 加载products
- * @param {*} needReset 是否需要重置products
- * @param {*} categoryId 分类id
- */
- const onLoad = (needReset=false,categoryId='') => {
- if (needReset) {
- // 重置一些参数
- finished.value = false;
- products.value = [];
- page.value = 1;
- }
- // 分类id不为空才需要修改
- if (categoryId !=='' ) {
- currentCategoryId.value = categoryId;
- }
- loading.value = true; // 开始加载
- loadProductAPI(page.value, currentCategoryId.value).then((res) => {
- finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
- loading.value = false;
- // 将获取的数据存入products
- products.value.push(...res.data);
- page.value++; // 页码+1
- });
- };
-
- return {
- // page,
- loading,
- finished,
- products,
- currentCategoryId,
- onLoad,
- }
+ return {
+ // page,
+ loading,
+ finished,
+ products,
+ currentCategoryId,
+ onLoad,
+ };
};
-
diff --git a/Vite-Vue-tutorial/src/services/banners.js b/Vite-Vue-tutorial/src/services/banners.js
index ca8a87f..7779a14 100644
--- a/Vite-Vue-tutorial/src/services/banners.js
+++ b/Vite-Vue-tutorial/src/services/banners.js
@@ -2,6 +2,6 @@ import { get } from "../utils/request";
/**
* 获取轮播图
- * @returns
+ * @returns
*/
-export const loadBannersAPI = () => get('/api/v1/banners');
\ No newline at end of file
+export const loadBannersAPI = () => get("/api/v1/banners");
diff --git a/Vite-Vue-tutorial/src/services/categories.js b/Vite-Vue-tutorial/src/services/categories.js
index b3c8a02..a1a73ad 100644
--- a/Vite-Vue-tutorial/src/services/categories.js
+++ b/Vite-Vue-tutorial/src/services/categories.js
@@ -2,6 +2,6 @@ import { get } from "../utils/request";
/**
* 返回所有商品分类
- * @returns
+ * @returns
*/
-export const loadCategoriesAPI = () => get('api/v1/product_categories');
\ No newline at end of file
+export const loadCategoriesAPI = () => get("api/v1/product_categories");
diff --git a/Vite-Vue-tutorial/src/services/products.js b/Vite-Vue-tutorial/src/services/products.js
index 2d71d05..5688dc0 100644
--- a/Vite-Vue-tutorial/src/services/products.js
+++ b/Vite-Vue-tutorial/src/services/products.js
@@ -1,21 +1,21 @@
-import { get } from '../utils/request'
-
+import { get } from "../utils/request";
/**
* 获取商品信息
* @param {*} page 页号
* @param {*} category 分类,为空表示不分类
- * @returns
+ * @returns
*/
-export const loadProductAPI = (page = 1, category = '') => get('/api/v1/products/', {
- page,
- category,
- // per, 每页最多多少数据
-});
+export const loadProductAPI = (page = 1, category = "") =>
+ get("/api/v1/products/", {
+ page,
+ category,
+ // per, 每页最多多少数据
+ });
/**
* 返回商品详情
* @param {*} id 商品id
- * @returns
+ * @returns
*/
-export const loadProductByIdAPI = id => get('/api/v1/products/'+ id);
+export const loadProductByIdAPI = (id) => get("/api/v1/products/" + id);
diff --git a/Vite-Vue-tutorial/src/utils/request.js b/Vite-Vue-tutorial/src/utils/request.js
index dddb0c2..fccca06 100644
--- a/Vite-Vue-tutorial/src/utils/request.js
+++ b/Vite-Vue-tutorial/src/utils/request.js
@@ -1,13 +1,13 @@
-import axios from "axios"
-import NProgress from "nprogress"
-import "nprogress/nprogress.css"
+import axios from "axios";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
-export const serverUrl = "http://localhost:1337"
+export const serverUrl = "http://localhost:1337";
const instance = axios.create({
- baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
- timeout: 5000, // 设置超时时间
-})
+ baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
+ timeout: 5000, // 设置超时时间
+});
/**
* get 请求
@@ -17,9 +17,9 @@ const instance = axios.create({
*/
// axios.get(url, config)请求第二个参数表示配置信息(包括请求数据、请求头等)
export const get = (url, params) =>
- instance.get(url, {
- params: params, // url传递的参数
- })
+ instance.get(url, {
+ params: params, // url传递的参数
+ });
/**
* post 请求
@@ -28,7 +28,7 @@ export const get = (url, params) =>
* @returns
*/
// axios.post(url, data, config)请求第三个参数表示配置信息(包括请求数据、请求头等)
-export const post = (url, data) => instance.post(url, data)
+export const post = (url, data) => instance.post(url, data);
/**
* put 请求
@@ -36,41 +36,41 @@ export const post = (url, data) => instance.post(url, data)
* @param {*} data 数据
* @returns
*/
-export const put = (url, data) => instance.put(url, data)
+export const put = (url, data) => instance.put(url, data);
/**
* delete 请求
* @param {*} url 请求地址
* @returns
*/
-export const del = (url) => instance.delete(url)
+export const del = (url) => instance.delete(url);
// Add a request interceptor (全局请求拦截)
instance.interceptors.request.use(
- function (config) {
- // console.group("全局请求拦截");
- // console.log(config);
- // console.groupEnd();
- NProgress.start() // 启动进度条
- // 这里还可以设置token
- return config
- },
- function (error) {
- return Promise.reject(error)
- }
-)
+ function (config) {
+ // console.group("全局请求拦截");
+ // console.log(config);
+ // console.groupEnd();
+ NProgress.start(); // 启动进度条
+ // 这里还可以设置token
+ return config;
+ },
+ function (error) {
+ return Promise.reject(error);
+ }
+);
// Add a response interceptor (全局响应拦截)
instance.interceptors.response.use(
- function (response) {
- // console.group("全局响应拦截");
- // console.log(response);
- // console.groupEnd();
- NProgress.done() // 关闭进度条
- return response.data
- },
- function (error) {
- NProgress.done() // 关闭进度条
- return Promise.reject(error)
- }
-)
+ function (response) {
+ // console.group("全局响应拦截");
+ // console.log(response);
+ // console.groupEnd();
+ NProgress.done(); // 关闭进度条
+ return response.data;
+ },
+ function (error) {
+ NProgress.done(); // 关闭进度条
+ return Promise.reject(error);
+ }
+);
diff --git a/Vite-Vue-tutorial/src/utils/tools.js b/Vite-Vue-tutorial/src/utils/tools.js
index 830e378..c12447d 100644
--- a/Vite-Vue-tutorial/src/utils/tools.js
+++ b/Vite-Vue-tutorial/src/utils/tools.js
@@ -1,18 +1,17 @@
import { serverUrl } from "./request";
-
-export const extName = str => `【${str}】`;
+export const extName = (str) => `【${str}】`;
/**
* 处理返回数据中的url字段
* @param {*} url 请求返回的图片url
*/
-export const dalImageUrl = url => {
- if (url) {
- if (url.startsWith('http')) {
- return url;
- }
- return serverUrl + url;
- }
- return "https://hugo.bnblogs.cc/images/img/20220215001349.png";
-}
\ No newline at end of file
+export const dalImageUrl = (url) => {
+ if (url) {
+ if (url.startsWith("http")) {
+ return url;
+ }
+ return serverUrl + url;
+ }
+ return "https://hugo.bnblogs.cc/images/img/20220215001349.png";
+};
diff --git a/Vite-Vue-tutorial/src/views/Detail.vue b/Vite-Vue-tutorial/src/views/Detail.vue
index 075dd5b..ed313eb 100644
--- a/Vite-Vue-tutorial/src/views/Detail.vue
+++ b/Vite-Vue-tutorial/src/views/Detail.vue
@@ -1,21 +1,25 @@
-
-
+
+
-
{{ product.name }}
-
-
-
-
-
-
-
-
+
{{ product.name }}
+
+
+
+
+
+
+
+
diff --git a/Vite-Vue-tutorial/src/views/Home.vue b/Vite-Vue-tutorial/src/views/Home.vue
index 0206c0b..21040a8 100644
--- a/Vite-Vue-tutorial/src/views/Home.vue
+++ b/Vite-Vue-tutorial/src/views/Home.vue
@@ -21,7 +21,7 @@
:price="item.price.toFixed(2)"
:title="item.name"
:thumb="dalImageUrl(item.coverImage)"
- @click-thumb="toDetail(item.id)"
+ @click-thumb="toDetail(item.id)"
/>
@@ -38,7 +38,7 @@ import { useCategories } from "../hooks/useCategories";
import { useProducts } from "../hooks/useProducts";
// 获取第一页的商品数据
-const { products, onLoad} = useProducts();
+const { products, onLoad } = useProducts();
onLoad();
// 轮播图
@@ -54,14 +54,14 @@ const { categories } = useCategories();
// 跳转到详情页
const router = useRouter();
-const toDetail = id => {
- router.push({
- name: 'Detail',
- query: {
- id,
- }
- })
-}
+const toDetail = (id) => {
+ router.push({
+ name: "Detail",
+ query: {
+ id,
+ },
+ });
+};
diff --git a/Vite-Vue-tutorial/src/views/List.vue b/Vite-Vue-tutorial/src/views/List.vue
index 1b99738..ebf81df 100644
--- a/Vite-Vue-tutorial/src/views/List.vue
+++ b/Vite-Vue-tutorial/src/views/List.vue
@@ -1,32 +1,32 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+