不同設備適配
目前是針對普通手機的屏幕尺寸設計，如果需要適配比如平板電腦，等比例放大，需要進行設備配置。
修改public\index.html
只需要在title後面增加如下代碼：
<script>
// 設備屏幕的寬度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 獲得第一個html標籤
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>
整體代碼如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
// 設備屏幕的寬度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 獲得第一個html標籤
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
項目上線
新建vue.config.js
// 1. npm run build 打包代碼
// 2. 把代碼給後端
// 3. 後端把前端代碼放入後端工程
// 4. 後端重啓後端服務
// * 容易出問題的就是下面的配置
module.exports = {
publicPath: '/moudong'
}
正在打包中：
打包完成：
然後把dist目錄發給後端人員即可，由他們去發佈。
到此，本項目學習課程全部結束，之後如有內容都是自己在巨人的肩膀上全新編寫。
目前整個項目涉及的所有接口如下：
[{
"name": "獲取訂單列表",
"url": "/api/order",
"method": "get",
"on": true
}, {
"name": "創建訂單",
"url": "/api/createOrder",
"method": "post",
"on": true
}, {
"name": "查詢商店的商品列表",
"url": "/api/shop/:id/products",
"method": "get",
"on": true
}, {
"name": "商店詳情",
"url": "/api/shop/:id",
"method": "get",
"on": true
}, {
"name": "熱門店鋪",
"url": "/api/user/hot_list",
"method": "get",
"on": true
}, {
"name": "註冊",
"url": "/api/user/register",
"method": "post",
"on": true
}, {
"name": "登錄",
"url": "/api/user/login",
"method": "post",
"on": true
}]
接口數據如下：
[{
"delay": 0,
"name": "獲取訂單列表",
"method": "get",
"url": "/api/order",
"description": "返回商品的所有訂單信息，用於前端展示",
"on": 1,
"create_time": "2021-12-02T08:45:54.000Z",
"update_time": "2021-12-02T09:47:07.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": [\r\n {\r\n \"address\": {\r\n \"city\": \"北京\",\r\n \"department\": \"xx小區\",\r\n \"houseNumber\": \"門牌號\",\r\n \"name\": \"張三\",\r\n \"phone\": \"18012341234\"\r\n },\r\n \"shopId\": \"1\",\r\n \"shopName\": \"某什麼碼1\",\r\n \"isCanceled\": false,\r\n \"products\": [\r\n {\r\n \"orderSales\": 5,\r\n \"product\": {\r\n \"name\": \"番茄250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/tomato.png\",\r\n \"sales\": 10,\r\n \"price\": 33.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 10,\r\n \"product\": {\r\n \"name\": \"櫻桃250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/cherry.png\",\r\n \"sales\": 10,\r\n \"price\": 79.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 8,\r\n \"product\": {\r\n \"name\": \"帝王蟹250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/crab.png\",\r\n \"sales\": 10,\r\n \"price\": 159.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 4,\r\n \"product\": {\r\n \"name\": \"橙子250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/orange.png\",\r\n \"sales\": 10,\r\n \"price\": 92.6\r\n }\r\n }\r\n ]\r\n }\r\n ],\r\n \"desc\": \"成功\"\r\n}\r\n"
}, {
"delay": 0,
"name": "創建訂單",
"method": "post",
"url": "/api/createOrder",
"description": null,
"on": 1,
"create_time": "2021-11-29T19:57:00.000Z",
"update_time": "2021-11-29T20:10:42.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": " /**\r\n * 輸入\r\n * conten-type：json\r\n * body:{\r\n addressId：“xxx”//收貨地址 id\r\n shopId：\"\"//商店id\r\n shopName:\"某什麼碼1\",\r\n isCanceled:false,//訂單是否被取消了\r\n products:[\r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品數量\r\n }, \r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品數量\r\n },\r\n ]\r\n }\r\n **/\r\n {\r\n \"code\": 200,\r\n \"data\": { _id: '1',},\r\n \"desc\": \"成功\"\r\n }"
}, {
"delay": 0,
"name": "查詢商店的商品列表",
"method": "get",
"url": "/api/shop/:id/products",
"description": "id:動態參數，即商店id\n?tab=all tab（頁面左側tab)，可作爲query",
"on": 1,
"create_time": "2021-10-13T17:49:26.000Z",
"update_time": "2021-10-15T12:44:40.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": " {\r\n \"code\": 200,\r\n \"data\": [{\r\n _id: '1',\r\n name: '番茄250g/份',\r\n imgUrl: '/i18n/9_16/img/tomato.png',\r\n sales: 10,\r\n price: 33.6,\r\n oldPrice: 39.6\r\n },\r\n {\r\n _id: '2',\r\n name: '櫻桃250g/份',\r\n imgUrl: '/i18n/9_16/img/cherry.png',\r\n sales: 10,\r\n price: 79.6,\r\n oldPrice: 59.6\r\n },\r\n {\r\n _id: '3',\r\n name: '帝王蟹250g/份',\r\n imgUrl: '/i18n/9_16/img/crab.png',\r\n sales: 10,\r\n price: 159.6,\r\n oldPrice: 149.6\r\n },\r\n {\r\n _id: '4',\r\n name: '橙子250g/份',\r\n imgUrl: '/i18n/9_16/img/orange.png',\r\n sales: 10,\r\n price: 92.6,\r\n oldPrice: 85.6\r\n }\r\n ],\r\n \"desc\": \"成功\"\r\n }"
}, {
"delay": 300,
"name": "商店詳情",
"method": "get",
"url": "/api/shop/:id",
"description": "id爲動態參數，爲商店店鋪id",
"on": 1,
"create_time": "2021-07-19T04:34:47.000Z",
"update_time": "2021-10-13T16:20:01.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n id: '1',\r\n name: '某什麼瑪1',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 200,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元減x元運費券(每月x張)'\r\n },\r\n \"desc\": \"成功\"\r\n}"
}, {
"delay": 300,
"name": "熱門店鋪",
"method": "get",
"url": "/api/user/hot_list",
"description": "熱門店鋪",
"on": 1,
"create_time": "2021-07-17T14:54:21.000Z",
"update_time": "2021-07-19T03:09:54.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n code: 200,\r\n data: [\r\n {\r\n id: '1',\r\n name: '某什麼瑪1',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 1000,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元減x元運費券(每月x張)'\r\n },\r\n {\r\n id: '2',\r\n name: '某什麼瑪2',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 2000,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元減x元運費券(每月x張)'\r\n },\r\n {\r\n id: '3',\r\n name: '某什麼瑪3',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 200,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元減x元運費券(每月x張)'\r\n },\r\n {\r\n id: '4',\r\n name: '某什麼瑪4',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 100,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元減x元運費券(每月x張)'\r\n }\r\n ],\r\n desc: '成功'\r\n}"
}, {
"delay": 300,
"name": "註冊",
"method": "post",
"url": "/api/user/register",
"description": "註冊保存",
"on": 1,
"create_time": "2021-07-17T04:32:34.000Z",
"update_time": "2021-07-17T14:40:09.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n },\r\n \"desc\": \"成功\"\r\n}"
}, {
"delay": 300,
"name": "登錄",
"method": "post",
"url": "/api/user/login",
"description": "登錄驗密",
"on": 1,
"create_time": "2021-07-16T15:28:29.000Z",
"update_time": "2021-07-17T04:32:56.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n \r\n },\r\n \"desc\": \"成功\"\r\n}"
}]