从零到壹搭建一个商城架构--前端

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的时候保存，其他详细说明，点击页面的此处查看说明