從零到壹搭建一個商城架構--前端

1、前端

前端的就不多做說明了，如果想看可以查看官網說明
因爲前端都介紹一遍的話，會很長的，現在我們只關注後端說明

注意：vue使用的是2.X版本

vue是一種mvvm思想

• M：Model，模型，包括數據和一些基本操作
• V：View，視圖，頁面渲染結果
• VM：View-Model，模型與視圖雙向操作，無需人工干預

在MVVM之前，開發人員從後端獲取需要的數據模型，然後通過DOM操作Model渲染到View中。而後當用戶操作視圖，我們還需要通過DOM獲取View中的數據，然後同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封裝起來。開發人員不需要在關注Model和View之間如何操作和互相影響。

如下圖

接下來看一個對比圖，做一個java和前端的一個對比

2、vue初始化

我們使用的是人人的框架，在之前的文章中有說明，但是這裏說一下簡單的初始化一個簡單的vue工程

#全局安裝webpack，使用
npm install webpack -g

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

# 安裝全局vue腳手架 vue-cli
npm install -g @vue/cli-init

# vue腳手架使用webpack模板初始化一個appname項目
vue init webpack appname

這個操作會有好幾次確認，我們只選擇安裝路由，其他的都是no就可以

3、運行

執行完12.1的所有操作，會顯示如下信息

根據提示我們需要運行兩個命令

cd app-demo
npm run dev

運行起來後打開瀏覽器就可以看到效果了

重點和難點就是路由，計算，監控，模板

4、vue整合Element-UI

參照官網

5、配置vscode快捷鍵

• 首先按照下圖打開相關的配置文件
  

然後把以下代碼複製到當前打開的文件中

配置生成vue模板

"生成vue模板": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>\n",
            "    </div>",
			"</template>\n",
			"<script>",
			"//這裏可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）",
			"//例如：import 《組件名稱》 from '《組件路徑》';",
            "export default {",
            "    props: {\n",
            "    },",
			"    data() {",
			"        //這裏存放數據",
            "        return {\n",
            "        };",
			"    },",
			"    //計算屬性，類似於data概念",
            "    computed: {\n",
			"    },",
			"    //生命週期 - 創建完成（可以訪問當前this實例）",
            "    created() {\n",
			"    },",
			"    //生命週期 - 掛載完成（可以訪問DOM元素）",
            "    mounted() {\n",
			"    },",
			"    //監控data中數據的變化",
            "    watch: {\n",
			"    },",
			"    //方法集合",
            "    methods: {\n",
			"    },",
			"    //import引入的組件需要注入到components纔可以使用",
            "    components: {\n",
			"    },",
			"    beforeCreate(){}, //生命週期 - 創建之前",
			"    beforeMount(){}, //生命週期 - 掛載之前",
			"    beforeUpdate(){}, //生命週期 - 更新之前",
			"    updated(){}, //生命週期 - 更新之後",
			"    beforeDestroy(){}, //生命週期 - 銷燬之前",
			"    destroyed(){}, //生命週期 - 銷燬完成",
			"    activated(){}, //如果頁面有keep-alive緩存功能，這個函數會觸發",
            "};",
            "</script>\n",
            "<style scoped lang=\"${1:scss}\">\n",
            "</style>\n",
        ],
        "description": "生成vue模板"
	},

"http-get請求":{
		"prefix": "httpget",
		"body": [
			" this.\\$http({",
			"     url: this.\\$http.adornUrl(''),",
			"     method: 'get',",
			"     params: this.\\$http.adornParams({})",
			" }).then(({ data }) => {",
			" }).catch((error) => {",
			" })"
		],
		"description": "httpGET請求"
	},

"http-post請求":{
		"prefix": "httppost",
		"body": [
			" this.\\$http({",
			"     url: this.\\$http.adornUrl(''),",
			"     method: 'post',",
			"     data: this.\\$http.adornData(data,false)",
			" }).then(({ data }) => {",
			" }).catch((error) => {",
			" })"
		],
		"description": "httpGET請求"
	},

6、配置vscode自動保存機制

• 首先打開配置頁面
  

我選擇的是最後一個，即鼠標離開vscode的時候保存，其他詳細說明，點擊頁面的此處查看說明