一个Java程序猿眼中的前后端分离以及Vue(1)

如下一个简单的九九乘法表让大家感受一下 MVVM ：

{{j}}*{{i}}={{i*j}}

用户修改输入框中的数据，引起变量的变化，进而实现九九乘法表的更新。

SPA

==============================================================

SPA（single page web application），单页面应用，是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（ HTML、JavaScript 和 CSS ）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。SPA 有一个缺点，因为 SPA 应用部署后只有1个页面，而且这个页面只是一堆 js 、css 引用，没有其他有效价值，因此，SPA 应用不易被搜索引擎收录，所以，一般来说，SPA 适合做大型企业后台管理系统。

Vue 使用方式大致上可以分为两大类：

1. 直接将Vue在页面中引入，不做 SPA 应用

2. SPA应用

基本环境搭建

=================================================================

首先需要安装两个东西：

1. NodeJS

2. npm

直接搜索下载 NodeJS 即可，安装成功之后，npm 也就有了。安装成功之后，可以 在 cmd 命令哈验证是否安装成功：

NodeJS 安装成功之后，接下来安装 Vue的工具：

npm install -g vue-cli # 只需要第一次安装时执行

vue init webpack my-project # 使用webpack模板创建一个vue项目

cd my-project #进入到项目目录中

npm install # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）

npm run dev # 启动项目

启动成功后，浏览器输入 http://localhost:8080 就能看到如下页面：

执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

npm config set registry https://registry.npm.taobao.org

修改完成后，就能有效提高下载的成功率。

Vue 项目结构介绍

=====================================================================

Vue 项目创建完成后，使用 Web Storm 打开项目，项目目录如下：

1. build 文件夹，用来存放项目构建脚本

2. config 中存放项目的一些基本配置信息，最常用的就是端口转发

3. node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件

4. src 这个目录下存放项目的源码，即开发者写的代码放在这里

5. static 用来存放静态资源

6. index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面

7. package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖

对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：

1. assets 目录用来存放资产文件

2. components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。

3. 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。

4. router 目录中，存放了路由的js文件

5. App.vue 是一个Vue组件，也是项目的第一个Vue组件

6. main.js相当于Java中的main方法，是整个项目的入口js

main.js 内容如下：

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

1. 在main.js 中，首先导入 Vue 对象

2. 导入 App.vue ，并且命名为 App

3. 导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略

4. 所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 ‘#app’，’#app’ 指提前在index.html 文件中定义的一个div

5. 将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。

6. 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明。

7. template 中定义了页面模板，即将 App 组件中的内容渲染到 ‘#app’ 这个div 中。

因此，可以猜测，项目启动成功后，看到的页面效果定义在 App.vue 中

1. App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）

2. 页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view

3. 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作

4. 页面样式就是针对 template 中 HTML 元素的页面美化操作

需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
DCv8m8n-1715798885271)]

[外链图片转存中…(img-T7Jk5ueL-1715798885271)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！