不同設(shè)備適配
目前是針對(duì)普通手機(jī)的屏幕尺寸設(shè)計(jì)桶良，如果需要適配比如平板電腦座舍，等比例放大，需要進(jìn)行設(shè)備配置陨帆。
修改public\index.html
只需要在title后面增加如下代碼：
<script>
// 設(shè)備屏幕的寬度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 獲得第一個(gè)html標(biāo)簽
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>
// 設(shè)備屏幕的寬度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 獲得第一個(gè)html標(biāo)簽
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>
項(xiàng)目上線
新建vue.config.js
// 1. npm run build 打包代碼
// 2. 把代碼給后端
// 3. 后端把前端代碼放入后端工程
// 4. 后端重啟后端服務(wù)
// * 容易出問題的就是下面的配置
module.exports = {
publicPath: '/moudong'
}
image.png
正在打包中：
image.png
打包完成：
image.png
然后把dist目錄發(fā)給后端人員即可曲秉，由他們?nèi)グl(fā)布。
image.png
到此疲牵，本項(xiàng)目學(xué)習(xí)課程全部結(jié)束承二，之后如有內(nèi)容都是自己在巨人的肩膀上全新編寫。
目前整個(gè)項(xiàng)目涉及的所有接口如下：
[{
"name": "獲取訂單列表",
"url": "/api/order",
"method": "get",
"on": true
}, {
"name": "創(chuàng)建訂單",
"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": "注冊(cè)",
"url": "/api/user/register",
"method": "post",
"on": true
}, {
"name": "登錄",
"url": "/api/user/login",
"method": "post",
"on": true
}]
接口數(shù)據(jù)如下：
[{
"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小區(qū)\",\r\n \"houseNumber\": \"門牌號(hào)\",\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": "創(chuàng)建訂單",
"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：\"\"http://商店id\r\n shopName:\"某什么碼1\",\r\n isCanceled:false,//訂單是否被取消了\r\n products:[\r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品數(shù)量\r\n }, \r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品數(shù)量\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:動(dòng)態(tài)參數(shù)亥鸠，即商店id\n?tab=all tab（頁(yè)面左側(cè)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為動(dòng)態(tài)參數(shù)识啦，為商店店鋪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元運(yùn)費(fèi)券(每月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元運(yùn)費(fèi)券(每月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元運(yùn)費(fèi)券(每月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元運(yùn)費(fèi)券(每月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元運(yùn)費(fèi)券(每月x張)'\r\n }\r\n ],\r\n desc: '成功'\r\n}"
}, {
"delay": 300,
"name": "注冊(cè)",
"method": "post",
"url": "/api/user/register",
"description": "注冊(cè)保存",
"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": "登錄驗(yàn)密",
"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}"
}]
